feat: handle SSR in styles plugin

packages/vite-plugin/package.json

@@ -28,7 +28,7 @@
   "dependencies": {
     "@vuetify/loader-shared": "^2.0.3",
     "debug": "^4.3.3",
-    "upath": "^2.0.1"
+    "pathe": "^1.1.2"
   },
   "peerDependencies": {
     "vite": ">=5",

packages/vite-plugin/src/importPlugin.ts

@@ -1,5 +1,5 @@
 import { extname } from 'path'
-import { Plugin } from 'vite'
+import type { Plugin } from 'vite'
 import { generateImports, Options } from '@vuetify/loader-shared'
 import { URLSearchParams } from 'url'
 

packages/vite-plugin/src/index.ts

@@ -1,5 +1,6 @@
-import { Plugin } from 'vite'
-import { Options, isObject, includes, transformAssetUrls } from '@vuetify/loader-shared'
+import type { Plugin } from 'vite'
+import type { Options } from '@vuetify/loader-shared'
+import { isObject, includes, transformAssetUrls } from '@vuetify/loader-shared'
 
 import { importPlugin } from './importPlugin'
 import { stylesPlugin } from './stylesPlugin'

packages/vite-plugin/src/stylesPlugin.ts

@@ -1,12 +1,12 @@
-import path from 'upath'
+import { isAbsolute, join, relative as relativePath } from 'pathe'
 import { resolveVuetifyBase, normalizePath, isObject } from '@vuetify/loader-shared'
 
 import type { Plugin } from 'vite'
 import type { Options } from '@vuetify/loader-shared'
 
 function isSubdir (root: string, test: string) {
-  const relative = path.relative(root, test)
-  return relative && !relative.startsWith('..') && !path.isAbsolute(relative)
+  const relative = relativePath(root, test)
+  return relative && !relative.startsWith('..') && !isAbsolute(relative)
 }
 
 export function stylesPlugin (options: Options): Plugin {
@@ -20,23 +20,23 @@ export function stylesPlugin (options: Options): Plugin {
     enforce: 'pre',
     configResolved (config) {
       if (isObject(options.styles)) {
-        if (path.isAbsolute(options.styles.configFile)) {
+        if (isAbsolute(options.styles.configFile)) {
           configFile = options.styles.configFile
         } else {
-          configFile = path.join(config.root || process.cwd(), options.styles.configFile)
+          configFile = join(config.root || process.cwd(), options.styles.configFile)
         }
       }
     },
-    async resolveId (source, importer, { custom }) {
+    async resolveId (source, importer, { custom, ssr }) {
       if (
         source === 'vuetify/styles' || (
           importer &&
           source.endsWith('.css') &&
-          isSubdir(vuetifyBase, path.isAbsolute(source) ? source : importer)
+          isSubdir(vuetifyBase, isAbsolute(source) ? source : importer)
         )
       ) {
         if (options.styles === 'none') {
-          return '\0__void__'
+          return '/@plugin-vuetify/lib/__void__'
         } else if (options.styles === 'sass') {
           const target = source.replace(/\.css$/, '.sass')
           return this.resolve(target, importer, { skipSelf: true, custom })
@@ -46,35 +46,35 @@ export function stylesPlugin (options: Options): Plugin {
           if (!resolution) return null
 
           const target = resolution.id.replace(/\.css$/, '.sass')
-          const file = path.relative(path.join(vuetifyBase, 'lib'), target)
+          const file = relativePath(join(vuetifyBase, 'lib'), target)
           const contents = `@use "${normalizePath(configFile)}"\n@use "${normalizePath(target)}"`
 
           tempFiles.set(file, contents)
 
-          return `\0plugin-vuetify:${file}`
+          return ssr
+              ? `/@plugin-vuetify/lib/${file}`
+              : `/@fs/plugin-vuetify/lib/${file}`
         }
-      } else if (source.startsWith('/plugin-vuetify:')) {
-        return '\0' + source.slice(1)
-      } else if (source.startsWith('/@id/__x00__plugin-vuetify:')) {
-        return '\0' + source.slice(12)
       }
-
-      return null
     },
     load (id) {
       // When Vite is configured with `optimizeDeps.exclude: ['vuetify']`, the
       // received id contains a version hash (e.g. \0__void__?v=893fa859).
-      if (/^\0__void__(\?.*)?$/.test(id)) {
+      if (/^\/@plugin-vuetify\/lib\/__void__(\?.*)?$/.test(id))
         return ''
-      }
 
-      if (id.startsWith('\0plugin-vuetify')) {
-        const file = /^\0plugin-vuetify:(.*?)(\?.*)?$/.exec(id)![1]
+      if (id.startsWith('/@plugin-vuetify/lib/')) {
+        const file = /^\/@plugin-vuetify\/lib\/(.*?)(\?.*)?$/.exec(id)![1]
+        return tempFiles.get(file)
+      }
 
+      if (id.startsWith('/@fs/plugin-vuetify/lib/')) {
+        const file = /^\/@fs\/plugin-vuetify\/lib\/(.*?)(\?.*)?$/.exec(id)![1]
         return tempFiles.get(file)
       }
 
-      return null
+      if (id.includes('plugin-vuetify/lib'))
+        return ''
     },
   }
 }

yarn.lock

@@ -7863,6 +7863,11 @@ pathe@^1.1.0, pathe@^1.1.1:
   resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.1.tgz#1dd31d382b974ba69809adc9a7a347e65d84829a"
   integrity sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==
 
+pathe@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec"
+  integrity sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==
+
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@@ -10198,6 +10203,15 @@ vite-plugin-inspect@^0.8.1:
     picocolors "^1.0.0"
     sirv "^2.0.3"
 
+vite-plugin-vuetify@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/vite-plugin-vuetify/-/vite-plugin-vuetify-2.0.1.tgz#172ffb6c46fec469fa96b3df03fd11b90d48f5d6"
+  integrity sha512-GlRVAruohE8b0FqmeYYh1cYg3n8THGOv066uMA44qLv9uhUxSLw55CS7fi2yU0wH363TJ2vq36zUsPTjRFrjGQ==
+  dependencies:
+    "@vuetify/loader-shared" "^2.0.1"
+    debug "^4.3.3"
+    upath "^2.0.1"
+
 vite@^5.0.6:
   version "5.0.6"
   resolved "https://registry.yarnpkg.com/vite/-/vite-5.0.6.tgz#f9e13503a4c5ccd67312c67803dec921f3bdea7c"
@@ -10348,6 +10362,20 @@ webpack-merge@^5.7.3:
     clone-deep "^4.0.1"
     wildcard "^2.0.0"
 
+webpack-plugin-vuetify@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webpack-plugin-vuetify/-/webpack-plugin-vuetify-3.0.1.tgz#3916efdd5f67a4f58d97b7ec14093783a66edd0f"
+  integrity sha512-/FEpXPfPQlSMdJgLcz/iF6yQ82NdBwmryyACIhY5agsv0uW6/VEXmRlnBiF54MV2KW0/Vt5ZPXyhSx5r7u0lFA==
+  dependencies:
+    "@vuetify/loader-shared" "^2.0.1"
+    decache "^4.6.0"
+    file-loader "^6.2.0"
+    find-cache-dir "^5.0.0"
+    loader-utils "^2.0.0"
+    mkdirp "^1.0.4"
+    null-loader "^4.0.1"
+    upath "^2.0.1"
+
 webpack-sources@^3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"