refactor(styles): replace internal styles plugin with @vuetify/unplugin-styles

packages/vuetify-nuxt-module/package.json

@@ -70,20 +70,21 @@
     "lint": "eslint .",
     "lint:fix": "nr lint --fix",
     "publint": "publint",
-    "test": "vitest run",
-    "test:watch": "vitest watch",
+    "test": "vitest run --exclude 'test/e2e/**'",
+    "test:watch": "vitest watch --exclude 'test/e2e/**'",
+    "test:e2e": "vitest run test/e2e",
     "release": "bumpp"
   },
   "dependencies": {
     "@nuxt/kit": "catalog:",
+    "@vuetify/unplugin-styles": "catalog:",
     "defu": "catalog:",
     "destr": "catalog:",
     "pathe": "catalog:",
     "perfect-debounce": "catalog:",
     "semver": "catalog:",
     "ufo": "catalog:",
     "unconfig": "catalog:",
-    "upath": "catalog:",
     "vite-plugin-vuetify": "catalog:",
     "vuetify": "catalog:"
   },
@@ -110,6 +111,7 @@
     "eslint": "catalog:",
     "luxon": "catalog:",
     "nuxt": "catalog:",
+    "playwright-core": "catalog:",
     "publint": "catalog:",
     "rimraf": "catalog:",
     "sass": "catalog:",
@@ -121,6 +123,7 @@
   "build": {
     "externals": [
       "@vuetify/loader-shared",
+      "@vuetify/unplugin-styles",
       "node:child_process",
       "node:fs",
       "consola",
@@ -131,7 +134,6 @@
       "rollup",
       "sass",
       "sass-embedded",
-      "upath",
       "ufo",
       "unconfig",
       "vite",

packages/vuetify-nuxt-module/src/types.ts

@@ -255,6 +255,18 @@ export interface MOptions {
      * Path to the custom Vuetify SASS configuration file.
      */
     configFile: string
+    /**
+     * Caching options forwarded to `@vuetify/unplugin-styles`.
+     *
+     * @default true
+     */
+    cache?: boolean | {
+      path?: string
+      sassOptions?: Record<string, unknown>
+    }
+    /**
+     * @deprecated Use `styles.cache` instead.
+     */
     experimental?: {
       cache?: boolean
     }

packages/vuetify-nuxt-module/src/utils/config.ts

@@ -35,7 +35,6 @@ export interface VuetifyNuxtContext {
   viteVersion: string
   enableRules?: boolean
   rulesConfiguration?: { fromLabs?: boolean, configFile?: string }
-  stylesCachePath?: string
   stylesConfigFile?: string
 }
 

packages/vuetify-nuxt-module/src/utils/configure-vite.ts

@@ -1,18 +1,23 @@
 import type { Nuxt } from '@nuxt/schema'
 import type { ObjectImportPluginOptions } from '@vuetify/loader-shared'
 import type { VuetifyNuxtContext } from './config'
+import { isObject } from '@vuetify/loader-shared'
+import Styles from '@vuetify/unplugin-styles/vite'
 import defu from 'defu'
 import semver from 'semver'
 import { vuetifyConfigurationPlugin } from '../vite/vuetify-configuration-plugin'
 import { vuetifyDateConfigurationPlugin } from '../vite/vuetify-date-configuration-plugin'
 import { vuetifyIconsPlugin } from '../vite/vuetify-icons-configuration-plugin'
 import { vuetifyImportPlugin } from '../vite/vuetify-import-plugin'
 import { vuetifySSRClientHintsPlugin } from '../vite/vuetify-ssr-client-hints-plugin'
-import { vuetifyStylesPlugin } from '../vite/vuetify-styles-plugin'
 import { createTransformAssetUrls } from './index'
 import { checkVuetifyPlugins } from './module'
 import { isPackageExists } from './package'
 
+function resolveStylesCache (stylesOption: { cache?: unknown, experimental?: { cache?: unknown } }) {
+  return stylesOption.cache ?? stylesOption.experimental?.cache
+}
+
 export function configureVite (configKey: string, nuxt: Nuxt, ctx: VuetifyNuxtContext) {
   nuxt.hook('vite:extend', ({ config }) => checkVuetifyPlugins(config))
   nuxt.hook('vite:extendConfig', viteInlineConfig => {
@@ -80,9 +85,19 @@ export function configureVite (configKey: string, nuxt: Nuxt, ctx: VuetifyNuxtCo
     }
 
     viteInlineConfig.plugins.push(vuetifyImportPlugin({ autoImport }))
-    // exclude styles plugin
-    if ((ctx.moduleOptions.styles as any) !== false && ctx.moduleOptions.styles !== 'none') {
-      viteInlineConfig.plugins.push(vuetifyStylesPlugin(ctx))
+
+    const stylesOption = ctx.moduleOptions.styles
+    if (stylesOption === 'none') {
+      viteInlineConfig.plugins.push(Styles({ styles: 'none' }))
+    } else if (isObject(stylesOption) && 'configFile' in stylesOption) {
+      if (!ctx.stylesConfigFile) {
+        throw new Error('vuetify-nuxt-module: styles.configFile could not be resolved')
+      }
+      const cache = resolveStylesCache(stylesOption)
+      viteInlineConfig.plugins.push(Styles({
+        settings: ctx.stylesConfigFile,
+        ...(cache === undefined ? {} : { cache: cache as never }),
+      }))
     }
     viteInlineConfig.plugins.push(vuetifyConfigurationPlugin(ctx), vuetifyIconsPlugin(ctx), vuetifyDateConfigurationPlugin(ctx))
     if (ctx.ssrClientHints.enabled) {

packages/vuetify-nuxt-module/src/utils/loader.ts

@@ -11,7 +11,6 @@ import { prepareIcons } from './icons'
 import { mergeVuetifyModules } from './layers'
 import { cleanupBlueprint, detectDate, resolveVuetifyComponents } from './module'
 import { prepareSSRClientHints } from './ssr-client-hints'
-import { prepareVuetifyStyles } from './styles-compiler'
 
 export async function load (
   options: VuetifyModuleOptions,
@@ -108,8 +107,6 @@ export async function load (
       }
     }
   }
-
-  await prepareVuetifyStyles(nuxt, ctx)
 }
 
 export function registerWatcher (options: VuetifyModuleOptions, nuxt: Nuxt, ctx: VuetifyNuxtContext) {

packages/vuetify-nuxt-module/src/utils/styles.ts

@@ -1,7 +1,6 @@
 import type { Nuxt } from '@nuxt/schema'
-import { createHash } from 'node:crypto'
-import { existsSync, readdirSync, rmSync, statSync } from 'node:fs'
-import { isAbsolute, join, resolve } from 'pathe'
+import { existsSync } from 'node:fs'
+import { isAbsolute, resolve } from 'pathe'
 
 export function resolveVuetifyConfigFile (configFile: string, nuxt: Nuxt) {
   if (typeof configFile === 'string' && !isAbsolute(configFile)) {
@@ -14,66 +13,3 @@ export function resolveVuetifyConfigFile (configFile: string, nuxt: Nuxt) {
   }
   return configFile
 }
-
-export function createStylesCacheHash (
-  vuetifyVersion: string,
-  viteVersion: string,
-  configContent: string,
-  configFile: string,
-) {
-  return createHash('sha256')
-    .update(vuetifyVersion)
-    .update(viteVersion)
-    .update(configContent)
-    .update(configFile)
-    .digest('hex')
-    .slice(0, 8)
-}
-
-export function resolveStylesCachePaths (rootDir: string, hash: string) {
-  const stylesDir = resolve(rootDir, 'node_modules/.cache/vuetify-nuxt-module/styles')
-  const cacheDir = join(stylesDir, hash)
-  return {
-    stylesDir,
-    cacheDir,
-  }
-}
-
-export function cleanupOldStylesCaches (stylesDir: string, currentHash: string) {
-  if (!existsSync(stylesDir)) {
-    return
-  }
-
-  const dirents = readdirSync(stylesDir, { withFileTypes: true })
-  for (const dirent of dirents) {
-    if (dirent.isDirectory() && dirent.name !== currentHash) {
-      rmSync(join(stylesDir, dirent.name), { recursive: true, force: true })
-    }
-  }
-}
-
-export function collectVuetifyCssFiles (vuetifyBase: string) {
-  const files: string[] = []
-  findCssFiles(join(vuetifyBase, 'lib/components'), files)
-  findCssFiles(join(vuetifyBase, 'lib/styles'), files)
-  return files
-}
-
-function findCssFiles (dir: string, fileList: string[] = []) {
-  if (!existsSync(dir)) {
-    return fileList
-  }
-  const files = readdirSync(dir)
-  for (const file of files) {
-    const filePath = join(dir, file)
-    const stat = statSync(filePath)
-    if (stat.isDirectory()) {
-      findCssFiles(filePath, fileList)
-    } else {
-      if (file.endsWith('.css')) {
-        fileList.push(filePath)
-      }
-    }
-  }
-  return fileList
-}