From efc84e11459ff602c5fb2203fb3f064d1420fc07 Mon Sep 17 00:00:00 2001 From: userquin Date: Wed, 20 Mar 2024 23:09:07 +0100 Subject: [PATCH 1/2] feat: handle SSR in styles plugin --- packages/vite-plugin/package.json | 2 +- packages/vite-plugin/src/importPlugin.ts | 2 +- packages/vite-plugin/src/index.ts | 5 ++-- packages/vite-plugin/src/stylesPlugin.ts | 38 +++++++++++++----------- yarn.lock | 28 +++++++++++++++++ 5 files changed, 53 insertions(+), 22 deletions(-) diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json index 947da64..24a58e5 100644 --- a/packages/vite-plugin/package.json +++ b/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", diff --git a/packages/vite-plugin/src/importPlugin.ts b/packages/vite-plugin/src/importPlugin.ts index a78a3e3..f795ee9 100644 --- a/packages/vite-plugin/src/importPlugin.ts +++ b/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' diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts index 37abdba..e494c26 100644 --- a/packages/vite-plugin/src/index.ts +++ b/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' diff --git a/packages/vite-plugin/src/stylesPlugin.ts b/packages/vite-plugin/src/stylesPlugin.ts index ba89fd5..61a36f6 100644 --- a/packages/vite-plugin/src/stylesPlugin.ts +++ b/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,19 +20,19 @@ 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') { @@ -46,17 +46,15 @@ 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 @@ -64,17 +62,21 @@ export function stylesPlugin (options: Options): Plugin { 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 '' }, } } diff --git a/yarn.lock b/yarn.lock index 2dc082a..0af7295 100644 --- a/yarn.lock +++ b/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" From 73561fbd8ec4a44e7652cd66bd621bfe29327959 Mon Sep 17 00:00:00 2001 From: userquin Date: Wed, 20 Mar 2024 23:33:11 +0100 Subject: [PATCH 2/2] chore: include none mapping --- packages/vite-plugin/src/stylesPlugin.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/vite-plugin/src/stylesPlugin.ts b/packages/vite-plugin/src/stylesPlugin.ts index 61a36f6..9744519 100644 --- a/packages/vite-plugin/src/stylesPlugin.ts +++ b/packages/vite-plugin/src/stylesPlugin.ts @@ -36,7 +36,7 @@ export function stylesPlugin (options: Options): Plugin { ) ) { 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 }) @@ -56,8 +56,6 @@ export function stylesPlugin (options: Options): Plugin { : `/@fs/plugin-vuetify/lib/${file}` } } - - return null }, load (id) { // When Vite is configured with `optimizeDeps.exclude: ['vuetify']`, the