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

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: sapphi-red <[email protected]>
Co-authored-by: bluwy <[email protected]>

Author: 3 people

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-codesplit-cjs/__tests__/css-codesplit-cjs.spec.ts

@@ -8,7 +8,7 @@ test('should load both stylesheets', async () => {
 
 describe.runIf(isBuild)('build', () => {
   test('should remove empty chunk', async () => {
-    expect(findAssetFile(/style.*\.js$/)).toBe('')
+    expect(findAssetFile(/style.*\.js$/)).toBeUndefined()
     expect(findAssetFile('main.*.js$')).toMatch(`/* empty css`)
     expect(findAssetFile('other.*.js$')).toMatch(`/* empty css`)
   })

playground/css-codesplit/__tests__/css-codesplit-consistent.spec.ts

@@ -9,7 +9,7 @@ for (let i = 0; i < 5; i++) {
   describe.runIf(isBuild)('css-codesplit build', () => {
     test('should be consistent with same content', () => {
       expect(findAssetFile(/style-.+\.css/)).toMatch('h2{color:#00f}')
-      expect(findAssetFile(/style2-.+\.css/)).toBe('')
+      expect(findAssetFile(/style2-.+\.css/)).toBeUndefined()
     })
   })
 }

playground/css-codesplit/__tests__/css-codesplit.spec.ts

@@ -38,10 +38,10 @@ test('style order should be consistent when style tag is inserted by JS', async
 
 describe.runIf(isBuild)('build', () => {
   test('should remove empty chunk', async () => {
-    expect(findAssetFile(/style-.*\.js$/)).toBe('')
+    expect(findAssetFile(/style-.*\.js$/)).toBeUndefined()
     expect(findAssetFile('main.*.js$')).toMatch(`/* empty css`)
     expect(findAssetFile('other.*.js$')).toMatch(`/* empty css`)
-    expect(findAssetFile(/async-[-\w]{8}\.js$/)).toBe('')
+    expect(findAssetFile(/async-[-\w]{8}\.js$/)).toBeUndefined()
 
     const assets = listAssets()
     expect(assets).not.toContainEqual(

playground/css-sourcemap/__tests__/lib-entry/css-sourcemap-lib-entry.spec.ts

@@ -3,6 +3,6 @@ import { findAssetFile, isBuild } from '~utils'
 
 describe.runIf(isBuild)('css lib entry', () => {
   test('remove useless js sourcemap', async () => {
-    expect(findAssetFile('linked.js.map', 'lib-entry', './')).toBe('')
+    expect(findAssetFile('linked.js.map', 'lib-entry', './')).toBeUndefined()
   })
 })

playground/css/__tests__/tests.ts

@@ -308,7 +308,7 @@ export const tests = (isLightningCSS: boolean) => {
         '.async{color:plum}',
       )
       // should have no chunk!
-      expect(findAssetFile(/async-treeshaken/)).toBe('')
+      expect(findAssetFile(/async-treeshaken/)).toBeUndefined()
     } else {
       // should be present in dev
       const el = await page.$('.async-treeshaken')
@@ -519,7 +519,11 @@ export const tests = (isLightningCSS: boolean) => {
   test.runIf(isBuild)('manual chunk path', async () => {
     // assert that the manual-chunk css is output in the directory specified in manualChunk (#12072)
     expect(
-      findAssetFile(/dir\/dir2\/manual-chunk-[-\w]{8}\.css$/),
+      findAssetFile(
+        /manual-chunk-[-\w]{8}\.css$/,
+        undefined,
+        'assets/dir/dir2',
+      ),
     ).not.toBeUndefined()
   })
 
@@ -539,4 +543,13 @@ 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()
+      expect(findAssetFile(/empty-[-\w]{8}\.js$/)).toBeUndefined()
+    },
+  )
 }

playground/css/empty.css

@@ -46,6 +46,7 @@ export default defineConfig({
           __dirname,
           './treeshake-scoped/index.html',
         ),
+        empty: path.resolve(__dirname, './empty.css'),
       },
       output: {
         manualChunks(id) {

playground/css/vite.config.js

@@ -32,5 +32,5 @@ test('supports nodejs_compat', async () => {
 
 test.runIf(isBuild)('inlineDynamicImports', () => {
   const dynamicJsContent = findAssetFile(/dynamic-[-\w]+\.js/, 'worker')
-  expect(dynamicJsContent).toBe('')
+  expect(dynamicJsContent).toBeUndefined()
 })

playground/ssr-webworker/__tests__/ssr-webworker.spec.ts

@@ -189,14 +189,14 @@ export function findAssetFile(
   base = '',
   assets = 'assets',
   matchAll = false,
-): string {
+): string | undefined {
   const assetsDir = path.join(testDir, 'dist', base, assets)
   let files: string[]
   try {
     files = fs.readdirSync(assetsDir)
   } catch (e) {
     if (e.code === 'ENOENT') {
-      return ''
+      return undefined
     }
     throw e
   }
@@ -208,12 +208,12 @@ export function findAssetFile(
             fs.readFileSync(path.resolve(assetsDir, file), 'utf-8'),
           )
           .join('')
-      : ''
+      : undefined
   } else {
     const matchedFile = files.find((file) => file.match(match))
     return matchedFile
       ? fs.readFileSync(path.resolve(assetsDir, matchedFile), 'utf-8')
-      : ''
+      : undefined
   }
 }