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 = 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)

playground/css/__tests__/tests.ts

@@ -9,6 +9,7 @@ import {
   getColor,
   isBuild,
   page,
+  readManifest,
   removeFile,
   serverLogs,
   viteTestUrl,
@@ -539,4 +540,23 @@ 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',
+    () => {
+      const manifest = readManifest()
+
+      // Test that empty.css generates a CSS file
+      expect(manifest['empty.css']).toBeDefined()
+      expect(manifest['empty.css'].file).toMatch(/\.css$/)
+      expect(manifest['empty.css'].file).not.toMatch(/\.js$/)
+      expect(manifest['empty.css'].isEntry).toBe(true)
+
+      // Test that empty2.css generates a CSS file
+      expect(manifest['empty2.css']).toBeDefined()
+      expect(manifest['empty2.css'].file).toMatch(/\.css$/)
+      expect(manifest['empty2.css'].file).not.toMatch(/\.js$/)
+      expect(manifest['empty2.css'].isEntry).toBe(true)
+    },
+  )
 }

playground/css/empty.css

@@ -0,0 +1 @@
+/* This is an empty CSS file for testing empty CSS entries */

playground/css/vite.config.js

@@ -39,13 +39,16 @@ 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'),
+        empty2: path.resolve(__dirname, './empty2.css'),
       },
       output: {
         manualChunks(id) {