From 9ecdd8cc45ecd5b65f0b4a79e6574dd383d0e654 Mon Sep 17 00:00:00 2001 From: faga Date: Sun, 12 Feb 2023 19:22:30 +0800 Subject: [PATCH 1/5] fix: pcss in manifest.json saved as css --- packages/vite/src/node/plugins/css.ts | 3 ++- .../backend-integration/frontend/entrypoints/nested/red.pcss | 3 +++ 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 playground/backend-integration/frontend/entrypoints/nested/red.pcss diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 72ac5821348f9e..ca92579730d23e 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -565,7 +565,8 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { type: 'asset', source: chunkCSS, }) - const originalName = isPreProcessor(lang) ? cssAssetName : cssFileName + const originalName = + isPreProcessor(lang) || lang === 'pcss' ? cssAssetName : cssFileName const isEntry = chunk.isEntry && isPureCssChunk generatedAssets .get(config)! diff --git a/playground/backend-integration/frontend/entrypoints/nested/red.pcss b/playground/backend-integration/frontend/entrypoints/nested/red.pcss new file mode 100644 index 00000000000000..bf4338cfa57fc5 --- /dev/null +++ b/playground/backend-integration/frontend/entrypoints/nested/red.pcss @@ -0,0 +1,3 @@ +.text-primary { + color: red; +} From b061447e173934e9cb8f0261a5cda2cdfd32fbf5 Mon Sep 17 00:00:00 2001 From: faga Date: Sun, 12 Feb 2023 19:39:53 +0800 Subject: [PATCH 2/5] test: relevant test --- .../__tests__/backend-integration.spec.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/playground/backend-integration/__tests__/backend-integration.spec.ts b/playground/backend-integration/__tests__/backend-integration.spec.ts index 8d067f0616775d..19fd1f1859e000 100644 --- a/playground/backend-integration/__tests__/backend-integration.spec.ts +++ b/playground/backend-integration/__tests__/backend-integration.spec.ts @@ -36,6 +36,7 @@ describe.runIf(isBuild)('build', () => { const htmlEntry = manifest['index.html'] const cssAssetEntry = manifest['global.css'] const scssAssetEntry = manifest['nested/blue.scss'] + const pcssAssetEntry = manifest['nested/red.pcss'] const imgAssetEntry = manifest['../images/logo.png'] const dirFooAssetEntry = manifest['../../dir/foo.css'] // '\\' should not be used even on windows expect(htmlEntry.css.length).toEqual(1) @@ -45,6 +46,10 @@ describe.runIf(isBuild)('build', () => { expect(scssAssetEntry?.file).not.toBeUndefined() expect(scssAssetEntry?.src).toEqual('nested/blue.scss') expect(scssAssetEntry?.isEntry).toEqual(true) + expect(pcssAssetEntry?.file).not.toBeUndefined() + expect(pcssAssetEntry?.src).toEqual('nested/red.pcss') + expect(pcssAssetEntry?.isEntry).toEqual(true) + expect(pcssAssetEntry?.file).not.toBeUndefined() expect(imgAssetEntry?.file).not.toBeUndefined() expect(imgAssetEntry?.isEntry).toBeUndefined() expect(dirFooAssetEntry).not.toBeUndefined() From 746756db918af7a59430f393bb4df7aef68e309e Mon Sep 17 00:00:00 2001 From: faga Date: Tue, 14 Feb 2023 11:36:31 +0800 Subject: [PATCH 3/5] chore: use cssAssetName directly --- packages/vite/src/node/plugins/css.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index ca92579730d23e..12a9a08ca1edc1 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -553,7 +553,6 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { ? normalizePath(path.relative(config.root, chunk.facadeModuleId)) : chunk.name - const lang = path.extname(cssAssetName).slice(1) const cssFileName = ensureFileExt(cssAssetName, '.css') chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssAssetName) @@ -565,12 +564,10 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { type: 'asset', source: chunkCSS, }) - const originalName = - isPreProcessor(lang) || lang === 'pcss' ? cssAssetName : cssFileName const isEntry = chunk.isEntry && isPureCssChunk generatedAssets .get(config)! - .set(referenceId, { originalName, isEntry }) + .set(referenceId, { originalName: cssAssetName, isEntry }) chunk.viteMetadata!.importedCss.add(this.getFileName(referenceId)) } else if (!config.build.ssr) { // legacy build and inline css From 0193dbccb473b9cfbbc9877eafaf69bf61106e5a Mon Sep 17 00:00:00 2001 From: faga Date: Mon, 20 Feb 2023 03:05:09 +0800 Subject: [PATCH 4/5] chore: check cssassetname whether css request --- packages/vite/src/node/plugins/css.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 12a9a08ca1edc1..5463d8fdfc0974 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -558,6 +558,9 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssAssetName) chunkCSS = await finalizeCss(chunkCSS, true, config) + const originalName = isCSSRequest(cssAssetName) + ? cssAssetName + : cssFileName // emit corresponding css file const referenceId = this.emitFile({ name: path.basename(cssFileName), @@ -567,7 +570,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { const isEntry = chunk.isEntry && isPureCssChunk generatedAssets .get(config)! - .set(referenceId, { originalName: cssAssetName, isEntry }) + .set(referenceId, { originalName, isEntry }) chunk.viteMetadata!.importedCss.add(this.getFileName(referenceId)) } else if (!config.build.ssr) { // legacy build and inline css From da19dc74452a02c75409f8f9cc4775dce67874f3 Mon Sep 17 00:00:00 2001 From: bluwy Date: Mon, 20 Feb 2023 16:11:04 +0800 Subject: [PATCH 5/5] refactor: sort originalName down --- packages/vite/src/node/plugins/css.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 5463d8fdfc0974..f4c4cf2845733e 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -552,21 +552,20 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { const cssAssetName = chunk.facadeModuleId ? normalizePath(path.relative(config.root, chunk.facadeModuleId)) : chunk.name - const cssFileName = ensureFileExt(cssAssetName, '.css') chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssAssetName) chunkCSS = await finalizeCss(chunkCSS, true, config) - const originalName = isCSSRequest(cssAssetName) - ? cssAssetName - : cssFileName // emit corresponding css file const referenceId = this.emitFile({ name: path.basename(cssFileName), type: 'asset', source: chunkCSS, }) + const originalName = isCSSRequest(cssAssetName) + ? cssAssetName + : cssFileName const isEntry = chunk.isEntry && isPureCssChunk generatedAssets .get(config)!