feat(theme): add new option 'unimportant' to gen classes without important

Author: johnleider

packages/api-generator/src/locale/en/useTheme.json

@@ -10,6 +10,7 @@
     "name": "Name of current theme.",
     "styles": "**FOR INTERNAL USE ONLY**",
     "themeClasses": "**FOR INTERNAL USE ONLY**",
-    "themes": "Raw theme definitions."
+    "themes": "Raw theme definitions.",
+    "unimportant": "Generate utility classes without the !important declaration."
   }
 }

packages/docs/src/data/new-in.json

@@ -3,7 +3,8 @@
     "exposed": {
       "change": "3.9.0",
       "toggle": "3.9.0",
-      "cycle": "3.9.0"
+      "cycle": "3.9.0",
+      "unimportant": "3.9.0"
     }
   },
   "VAppBar": {

packages/vuetify/src/composables/__tests__/theme.spec.ts

@@ -274,4 +274,16 @@ describe('createTheme', () => {
     expect(consoleMock).toHaveBeenCalledWith('[Vue warn]: Vuetify: Theme "nonexistent" not found on the Vuetify theme instance')
     consoleMock.mockReset()
   })
+
+  it('should generate utility classes without !important', async () => {
+    const theme = createTheme({ unimportant: true })
+
+    theme.install(app)
+
+    const stylesheet = document.getElementById('vuetify-theme-stylesheet')
+
+    const css = stylesheet!.innerHTML
+
+    expect(css).not.toContain('!important')
+  })
 })

packages/vuetify/src/composables/theme.ts

@@ -38,6 +38,7 @@ export type ThemeOptions = false | {
   themes?: Record<string, ThemeDefinition>
   stylesheetId?: string
   scope?: string
+  unimportant?: boolean
 }
 export type ThemeDefinition = DeepPartial<InternalThemeDefinition>
 
@@ -49,6 +50,7 @@ interface InternalThemeOptions {
   themes: Record<string, InternalThemeDefinition>
   stylesheetId: string
   scope?: string
+  unimportant: boolean
 }
 
 interface VariationsOptions {
@@ -197,6 +199,7 @@ function genDefaults () {
       },
     },
     stylesheetId: 'vuetify-theme-stylesheet',
+    unimportant: false,
   }
 }
 
@@ -357,6 +360,7 @@ export function createTheme (options?: ThemeOptions): ThemeInstance & { install:
 
   const styles = computed(() => {
     const lines: string[] = []
+    const important = parsedOptions.unimportant ? '' : ' !important'
 
     if (current.value?.dark) {
       createCssClass(lines, ':root', ['color-scheme: dark'], parsedOptions.scope)
@@ -377,14 +381,14 @@ export function createTheme (options?: ThemeOptions): ThemeInstance & { install:
     const colors = new Set(Object.values(computedThemes.value).flatMap(theme => Object.keys(theme.colors)))
     for (const key of colors) {
       if (key.startsWith('on-')) {
-        createCssClass(fgLines, `.${key}`, [`color: rgb(var(--v-theme-${key})) !important`], parsedOptions.scope)
+        createCssClass(fgLines, `.${key}`, [`color: rgb(var(--v-theme-${key}))${important}`], parsedOptions.scope)
       } else {
         createCssClass(bgLines, `.bg-${key}`, [
           `--v-theme-overlay-multiplier: var(--v-theme-${key}-overlay-multiplier)`,
-          `background-color: rgb(var(--v-theme-${key})) !important`,
-          `color: rgb(var(--v-theme-on-${key})) !important`,
+          `background-color: rgb(var(--v-theme-${key}))${important}`,
+          `color: rgb(var(--v-theme-on-${key}))${important}`,
         ], parsedOptions.scope)
-        createCssClass(fgLines, `.text-${key}`, [`color: rgb(var(--v-theme-${key})) !important`], parsedOptions.scope)
+        createCssClass(fgLines, `.text-${key}`, [`color: rgb(var(--v-theme-${key}))${important}`], parsedOptions.scope)
         createCssClass(fgLines, `.border-${key}`, [`--v-border-color: var(--v-theme-${key})`], parsedOptions.scope)
       }
     }