diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 3b5a8a6d09a0e6..7ed3eb9d456082 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -622,9 +622,12 @@ 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 = normalizePath( + !isEntry && chunk.facadeModuleId + ? path.relative(config.root, chunk.facadeModuleId) + : chunk.name, + ) const lang = path.extname(cssAssetName).slice(1) const cssFileName = ensureFileExt(cssAssetName, '.css') @@ -654,7 +657,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..442ed159219af9 100644 --- a/playground/backend-integration/__tests__/backend-integration.spec.ts +++ b/playground/backend-integration/__tests__/backend-integration.spec.ts @@ -37,7 +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['../../dir/foo.css'] // '\\' should not be used even on windows + 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() @@ -48,6 +48,9 @@ describe.runIf(isBuild)('build', () => { 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' 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: {