From ad70c531c14b4e919ab92a654feb2426b948182f Mon Sep 17 00:00:00 2001 From: Aleen Date: Wed, 4 Jan 2023 10:19:48 +0800 Subject: [PATCH 1/4] chore: build assets with the entry name when it is an entry point REF: https://github.com/vitejs/vite/issues/4863#issuecomment-1367775712 --- packages/vite/src/node/plugins/css.ts | 7 +++++-- .../__tests__/backend-integration.spec.ts | 5 +++-- playground/backend-integration/vite.config.js | 2 +- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 7228c2fae781e2..c8d5e101ddf8cb 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -573,8 +573,12 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { ? normalizePath(path.relative(config.root, chunk.facadeModuleId)) : chunk.name + const isEntry = chunk.isEntry && isPureCssChunk const lang = path.extname(cssAssetName).slice(1) - const cssFileName = ensureFileExt(cssAssetName, '.css') + const cssFileName = ensureFileExt( + isEntry ? chunk.name : cssAssetName, + '.css', + ) chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssAssetName) @@ -601,7 +605,6 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { source: chunkCSS, }) const originalName = isPreProcessor(lang) ? cssAssetName : cssFileName - const isEntry = chunk.isEntry && isPureCssChunk generatedAssets .get(config)! .set(referenceId, { originalName, isEntry }) diff --git a/playground/backend-integration/__tests__/backend-integration.spec.ts b/playground/backend-integration/__tests__/backend-integration.spec.ts index 8d067f0616775d..fa2a3d6070bb3d 100644 --- a/playground/backend-integration/__tests__/backend-integration.spec.ts +++ b/playground/backend-integration/__tests__/backend-integration.spec.ts @@ -37,7 +37,6 @@ describe.runIf(isBuild)('build', () => { const cssAssetEntry = manifest['global.css'] const scssAssetEntry = manifest['nested/blue.scss'] 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) expect(htmlEntry.assets.length).toEqual(1) expect(cssAssetEntry?.file).not.toBeUndefined() @@ -47,7 +46,9 @@ describe.runIf(isBuild)('build', () => { expect(scssAssetEntry?.isEntry).toEqual(true) expect(imgAssetEntry?.file).not.toBeUndefined() expect(imgAssetEntry?.isEntry).toBeUndefined() - expect(dirFooAssetEntry).not.toBeUndefined() + // use the entry name + expect(manifest['bar.css']).not.toBeUndefined() + expect(manifest['foo.css']).toBeUndefined() }) }) diff --git a/playground/backend-integration/vite.config.js b/playground/backend-integration/vite.config.js index b9e2c9f35c6fee..881eac1a14688e 100644 --- a/playground/backend-integration/vite.config.js +++ b/playground/backend-integration/vite.config.js @@ -19,7 +19,7 @@ function BackendIntegrationExample() { .map((filename) => [path.relative(root, filename), filename]) entrypoints.push(['tailwindcss-colors', 'tailwindcss/colors.js']) - entrypoints.push(['foo.css', path.resolve(__dirname, './dir/foo.css')]) + entrypoints.push(['bar.css', path.resolve(__dirname, './dir/foo.css')]) return { build: { From fec0bee2577c2158a7606d8386cc92509070feba Mon Sep 17 00:00:00 2001 From: Aleen Date: Wed, 7 Jun 2023 09:36:33 +0800 Subject: [PATCH 2/4] review: use `chunk.name` to assign `cssAssetName` directly --- packages/vite/src/node/plugins/css.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index c8d5e101ddf8cb..5aed6a9a9a6a48 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -569,16 +569,14 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { pureCssChunks.add(chunk) } if (opts.format === 'es' || opts.format === 'cjs') { - const cssAssetName = chunk.facadeModuleId - ? normalizePath(path.relative(config.root, chunk.facadeModuleId)) - : chunk.name - const isEntry = chunk.isEntry && isPureCssChunk + const cssAssetName = + !isEntry && chunk.facadeModuleId + ? normalizePath(path.relative(config.root, chunk.facadeModuleId)) + : chunk.name + const lang = path.extname(cssAssetName).slice(1) - const cssFileName = ensureFileExt( - isEntry ? chunk.name : cssAssetName, - '.css', - ) + const cssFileName = ensureFileExt(cssAssetName, '.css') chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssAssetName) From b6367ba61c68c5cf2c317370c7b82f8e76ee03eb Mon Sep 17 00:00:00 2001 From: sapphi-red Date: Tue, 13 Jun 2023 17:21:23 +0900 Subject: [PATCH 3/4] fix: windows test --- packages/vite/src/node/plugins/css.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 5aed6a9a9a6a48..6426dac95f1fd9 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -570,10 +570,11 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { } if (opts.format === 'es' || opts.format === 'cjs') { const isEntry = chunk.isEntry && isPureCssChunk - const cssAssetName = + const cssAssetName = normalizePath( !isEntry && chunk.facadeModuleId - ? normalizePath(path.relative(config.root, chunk.facadeModuleId)) - : chunk.name + ? path.relative(config.root, chunk.facadeModuleId) + : chunk.name, + ) const lang = path.extname(cssAssetName).slice(1) const cssFileName = ensureFileExt(cssAssetName, '.css') From 795e054f3f1f074d51c4d618789004baba35af78 Mon Sep 17 00:00:00 2001 From: sapphi-red Date: Tue, 13 Jun 2023 17:21:51 +0900 Subject: [PATCH 4/4] test: restore test for #9353 --- .../backend-integration/__tests__/backend-integration.spec.ts | 2 ++ playground/backend-integration/dir/foo.css | 2 +- playground/backend-integration/frontend/dynamic/foo.css | 3 +++ playground/backend-integration/frontend/dynamic/foo.ts | 1 + playground/backend-integration/frontend/entrypoints/main.ts | 1 + 5 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 playground/backend-integration/frontend/dynamic/foo.css create mode 100644 playground/backend-integration/frontend/dynamic/foo.ts diff --git a/playground/backend-integration/__tests__/backend-integration.spec.ts b/playground/backend-integration/__tests__/backend-integration.spec.ts index fa2a3d6070bb3d..442ed159219af9 100644 --- a/playground/backend-integration/__tests__/backend-integration.spec.ts +++ b/playground/backend-integration/__tests__/backend-integration.spec.ts @@ -37,6 +37,7 @@ describe.runIf(isBuild)('build', () => { const cssAssetEntry = manifest['global.css'] const scssAssetEntry = manifest['nested/blue.scss'] const imgAssetEntry = manifest['../images/logo.png'] + const dirFooAssetEntry = manifest['../dynamic/foo.css'] // '\\' should not be used even on windows expect(htmlEntry.css.length).toEqual(1) expect(htmlEntry.assets.length).toEqual(1) expect(cssAssetEntry?.file).not.toBeUndefined() @@ -46,6 +47,7 @@ describe.runIf(isBuild)('build', () => { expect(scssAssetEntry?.isEntry).toEqual(true) expect(imgAssetEntry?.file).not.toBeUndefined() expect(imgAssetEntry?.isEntry).toBeUndefined() + expect(dirFooAssetEntry).not.toBeUndefined() // use the entry name expect(manifest['bar.css']).not.toBeUndefined() expect(manifest['foo.css']).toBeUndefined() diff --git a/playground/backend-integration/dir/foo.css b/playground/backend-integration/dir/foo.css index c2fad7486d3ab6..1e31c585bebc9c 100644 --- a/playground/backend-integration/dir/foo.css +++ b/playground/backend-integration/dir/foo.css @@ -1,3 +1,3 @@ -.windows-path-foo { +.entry-name-foo { color: blue; } diff --git a/playground/backend-integration/frontend/dynamic/foo.css b/playground/backend-integration/frontend/dynamic/foo.css new file mode 100644 index 00000000000000..c2fad7486d3ab6 --- /dev/null +++ b/playground/backend-integration/frontend/dynamic/foo.css @@ -0,0 +1,3 @@ +.windows-path-foo { + color: blue; +} diff --git a/playground/backend-integration/frontend/dynamic/foo.ts b/playground/backend-integration/frontend/dynamic/foo.ts new file mode 100644 index 00000000000000..c2441c49231d80 --- /dev/null +++ b/playground/backend-integration/frontend/dynamic/foo.ts @@ -0,0 +1 @@ +import './foo.css' diff --git a/playground/backend-integration/frontend/entrypoints/main.ts b/playground/backend-integration/frontend/entrypoints/main.ts index f5a332191dd9e4..d63a57a023847e 100644 --- a/playground/backend-integration/frontend/entrypoints/main.ts +++ b/playground/backend-integration/frontend/entrypoints/main.ts @@ -1,4 +1,5 @@ import 'vite/modulepreload-polyfill' +import('../dynamic/foo') // should be dynamic import to split chunks export const colorClass = 'text-black'