fix(css): empty CSS entry points should generate CSS files, not JS files

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

@@ -620,7 +620,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
     },
 
     async renderChunk(code, chunk, opts, meta) {
-      let chunkCSS = ''
+      let chunkCSS: string | undefined
       const renderedModules = new Proxy(
         {} as Record<string, RenderedModule | undefined>,
         {
@@ -661,7 +661,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
             isPureCssChunk = false
           }
 
-          chunkCSS += styles.get(id)
+          chunkCSS = (chunkCSS || '') + styles.get(id)
         } else if (!isJsChunkEmpty) {
           // if the module does not have a style, then it's not a pure css chunk.
           // this is true because in the `transform` hook above, only modules
@@ -824,7 +824,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         }
       }
 
-      if (chunkCSS) {
+      if (chunkCSS !== undefined) {
         if (isPureCssChunk && (opts.format === 'es' || opts.format === 'cjs')) {
           // this is a shared CSS-only chunk that is empty.
           pureCssChunks.add(chunk)
@@ -852,7 +852,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 
             // wait for previous tasks as well
             chunkCSS = await codeSplitEmitQueue.run(async () => {
-              return finalizeCss(chunkCSS, true, config)
+              return finalizeCss(chunkCSS!, true, config)
             })
 
             // emit corresponding css file

playground/css/__tests__/tests.ts

@@ -9,6 +9,7 @@ import {
   getColor,
   isBuild,
   page,
+  readManifest,
   removeFile,
   serverLogs,
   viteTestUrl,
@@ -539,4 +540,12 @@ export const tests = (isLightningCSS: boolean) => {
     expect(await getColor('.treeshake-scoped-order')).toBe('red')
     expect(await getBgColor('.treeshake-scoped-order')).toBe('blue')
   })
+
+  test.runIf(isBuild)(
+    'empty CSS files should generate .css assets, not .js assets',
+    () => {
+      // Check that empty CSS entry point generates a .css file, not a .js file
+      expect(findAssetFile(/empty-[-\w]{8}\.css$/)).not.toBeUndefined()
+    },
+  )
 }

playground/css/vite.config.js

@@ -39,13 +39,15 @@ export default defineConfig({
   ],
   build: {
     cssTarget: 'chrome61',
+    manifest: true,
     rollupOptions: {
       input: {
         index: path.resolve(__dirname, './index.html'),
         treeshakeScoped: path.resolve(
           __dirname,
           './treeshake-scoped/index.html',
         ),
+        empty: path.resolve(__dirname, './empty.css'),
       },
       output: {
         manualChunks(id) {