fix(css): use non-nested chunk name if facadeModule is not CSS file (#…

…15155)

packages/vite/src/node/plugins/css.ts

@@ -615,7 +615,15 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           }
 
           const isEntry = chunk.isEntry && isPureCssChunk
-          const cssAssetName = ensureFileExt(chunk.name, '.css')
+          const cssFullAssetName = ensureFileExt(chunk.name, '.css')
+          // if facadeModuleId doesn't exist or doesn't have a CSS extension,
+          // that means a JS entry file imports a CSS file.
+          // in this case, only use the filename for the CSS chunk name like JS chunks.
+          const cssAssetName =
+            chunk.isEntry &&
+            (!chunk.facadeModuleId || !isCSSRequest(chunk.facadeModuleId))
+              ? path.basename(cssFullAssetName)
+              : cssFullAssetName
           const originalFilename = getChunkOriginalFileName(
             chunk,
             config.root,

playground/backend-integration/__tests__/backend-integration.spec.ts

@@ -54,6 +54,13 @@ describe.runIf(isBuild)('build', () => {
     // use the entry name
     expect(dirFooAssetEntry.file).toMatch('assets/bar-')
   })
+
+  test('CSS imported from JS entry should have a non-nested chunk name', () => {
+    const manifest = readManifest('dev')
+    const mainTsEntryCss = manifest['nested/sub.ts'].css
+    expect(mainTsEntryCss.length).toBe(1)
+    expect(mainTsEntryCss[0].replace('assets/', '')).not.toContain('/')
+  })
 })
 
 describe.runIf(isServe)('serve', () => {

playground/backend-integration/frontend/entrypoints/index.html

@@ -27,7 +27,12 @@ <h2>CSS Asset References</h2>
   </li>
 </ul>
 
+<h2>CSS imported from JS</h2>
+
+<p class="imported">text</p>
+
 <script type="module" src="./main.ts"></script>
+<script type="module" src="./nested/sub.ts"></script>
 <script type="module">
   import './global.css'
 

playground/backend-integration/frontend/entrypoints/nested/sub.ts

@@ -0,0 +1 @@
+import '../../styles/imported.css'

playground/backend-integration/frontend/styles/imported.css

@@ -0,0 +1,3 @@
+.imported {
+  color: green;
+}