From fd9a2ccdf2e78616ff3c937538111dbe1586f537 Mon Sep 17 00:00:00 2001
From: Aleen <aleen42@vip.qq.com>
Date: Sun, 20 Aug 2023 00:23:21 +0800
Subject: [PATCH] feat(css): build assets with the entry name when it is an
 entry point (#11578)

Co-authored-by: sapphi-red <green@sapphi.red>
---
 packages/vite/src/node/plugins/css.ts                  | 10 ++++++----
 .../__tests__/backend-integration.spec.ts              |  5 ++++-
 playground/backend-integration/dir/foo.css             |  2 +-
 .../backend-integration/frontend/dynamic/foo.css       |  3 +++
 playground/backend-integration/frontend/dynamic/foo.ts |  1 +
 .../backend-integration/frontend/entrypoints/main.ts   |  1 +
 playground/backend-integration/vite.config.js          |  2 +-
 7 files changed, 17 insertions(+), 7 deletions(-)
 create mode 100644 playground/backend-integration/frontend/dynamic/foo.css
 create mode 100644 playground/backend-integration/frontend/dynamic/foo.ts

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: {