chore: add custom vuetify module for styles plugin

.npmrc

@@ -1 +1,3 @@
 shell-emulator=true
+shamefully-hoist=true
+strict-peer-dependencies=false

modules/vuetify.ts

@@ -0,0 +1,107 @@
+import { defineNuxtModule } from '@nuxt/kit'
+import type { ImportPluginOptions } from '@vuetify/loader-shared'
+import vuetify from 'vite-plugin-vuetify'
+import path from 'upath'
+import { resolveVuetifyBase, normalizePath, isObject } from '@vuetify/loader-shared'
+import { pathToFileURL } from 'node:url'
+import { mkdir, writeFile } from 'node:fs/promises'
+
+export interface VuetifyModuleOptions {
+    autoImport?: ImportPluginOptions
+    styles?: true | 'none' | 'sass' | {
+        configFile: string
+        useViteFileImport?: boolean
+    }
+}
+
+export default defineNuxtModule<VuetifyModuleOptions>({
+    meta: {
+        name: 'vuetify-nuxt-module',
+        configKey: 'vuetify',
+        compatibility: {
+            nuxt: '>=3.9.0',
+            bridge: false,
+        },
+    },
+    setup(options, nuxt) {
+        let configFile: string | undefined
+        let cacheDir: string | undefined
+        const vuetifyBase = resolveVuetifyBase()
+        const noneFiles = new Set<string>()
+        const isNone = options.styles === 'none'
+        let fileImport = false
+
+        nuxt.hook('vite:extendConfig', (viteInlineConfig) => {
+            viteInlineConfig.plugins = viteInlineConfig.plugins || []
+            viteInlineConfig.plugins.push(vuetify({
+                ...options,
+                styles: true,
+            }))
+            viteInlineConfig.plugins.push({
+                name: 'vuetify:nuxt:styles',
+                enforce: 'pre',
+                async configResolved (config) {
+                    if (isObject(options.styles)) {
+                        const root = config.root || process.cwd()
+                        cacheDir = path.resolve(config.cacheDir ?? path.join(root, 'node_modules/.vite'), 'vuetify-styles')
+                        fileImport = options.styles.useViteFileImport === true
+                        if (path.isAbsolute(options.styles.configFile)) {
+                            configFile = path.resolve(options.styles.configFile)
+                        } else {
+                            configFile = path.resolve(path.join(root, options.styles.configFile))
+                        }
+                        configFile = fileImport
+                            ? pathToFileURL(configFile).href
+                            : normalizePath(configFile)
+                    }
+                },
+                async resolveId (source, importer, { custom, ssr }) {
+                    if (
+                        source === 'vuetify/styles' || (
+                            importer &&
+                            source.endsWith('.css') &&
+                            isSubdir(vuetifyBase, path.isAbsolute(source) ? source : importer)
+                        )
+                    ) {
+                        if (options.styles === 'sass') {
+                            const target = source.replace(/\.css$/, '.sass')
+                            return this.resolve(target, importer, { skipSelf: true, custom })
+                        }
+
+                        const resolution = await this.resolve(source, importer, { skipSelf: true, custom })
+                        if (!resolution)
+                            return undefined
+
+                        const target = resolution.id.replace(/\.css$/, '.sass')
+                        if (isNone) {
+                            noneFiles.add(target)
+                            return target
+                        }
+
+                        const tempFile = path.resolve(
+                            cacheDir,
+                            path.relative(path.join(vuetifyBase, 'lib'), target)
+                        )
+                        await mkdir(path.dirname(tempFile), { recursive: true })
+                        await writeFile(
+                            tempFile,
+                            `@use "${configFile}"\n@use "${fileImport ? pathToFileURL(target).href : normalizePath(target)}"`,
+                            'utf-8',
+                        )
+                        return tempFile
+                    }
+
+                    return undefined
+                },
+                load(id) {
+                    return isNone && noneFiles.has(id) ? '' : undefined
+                },
+            })
+        })
+    }
+})
+
+function isSubdir (root: string, test: string) {
+    const relative = path.relative(root, test)
+    return relative && !relative.startsWith('..') && !path.isAbsolute(relative)
+}

nuxt.config.ts

@@ -1,50 +1,18 @@
-import vuetify from 'vite-plugin-vuetify';
-
 export default defineNuxtConfig({
   compatibilityDate: '2024-08-23',
+  ssr: false,
   css: ['vuetify/styles', '@/assets/main.scss'],
   build: {
     transpile: ['vuetify']
   },
   vite: {
-    plugins: [{
-      name: 'check',
-      enforce: 'post',
-      configResolved(config) {
-        console.log(config.css)
-      }
-    }],
     css: {
-      devSourcemap: true,
+      // devSourcemap: true,
       preprocessorOptions: {
-        // remove this entry when using vite from https://pkg.pr.new/vite@561b940
         sass: {
           api: 'modern-compiler'
         },
-        /* prepare some tests for vuetify styles plugin: virtual
-        scss: {
-          api: 'modern',
-          importers: [
-            {
-              canonicalize(url: string) {
-                console.log('URL: ' + url)
-                return url === 'virtual-dep'
-                    ? new URL('custom-importer:virtual-dep')
-                    : null
-              },
-              load() {
-                console.log('WTF')
-                return {
-                  contents: ``,
-                  syntax: 'scss',
-                }
-              },
-            },
-          ]
-        }
-        */
       },
-      // preprocessorMaxWorkers: true,
     },
     ssr: {
       noExternal: ['vuetify']
@@ -55,16 +23,16 @@ export default defineNuxtConfig({
     inlineStyles: false,
     devLogs: false,
   },
+  vuetify: {
+    // styles: 'none',
+    styles: {
+      configFile: 'assets/variables.scss',
+      // useViteFileImport: true,
+    },
+  },
   modules: [
+    //'./modules/vuetify.ts',
     'nuxt-icon',
-    async (_, nuxt) => {
-      nuxt.hook('vite:extendConfig', (viteInlineConfig) => {
-        viteInlineConfig.plugins = viteInlineConfig.plugins || []
-        viteInlineConfig.plugins.push(vuetify({
-          styles: { configFile: 'assets/variables.scss' },
-        }))
-      })
-    },
   ],
   app: {
     head: {

package.json

@@ -15,10 +15,13 @@
   },
   "devDependencies": {
     "@nuxt/devtools": "^1.3.14",
+    "@vuetify/loader-shared": "^2.0.3",
     "nuxt": "^3.13.0",
     "nuxt-icon": "^0.6.10",
     "sass-embedded": "^1.77.8",
     "typescript": "^5.5.4",
+    "upath": "^2.0.1",
+    "vite": "^5.4.2",
     "vite-plugin-vuetify": "^2.0.4",
     "vue-tsc": "^2.0.29"
   },