fix(css): avoid generating empty JS files when JS files becomes empty…

… but has CSS files imported (#16078)

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

@@ -549,6 +549,8 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 
  async renderChunk(code, chunk, opts) {
  let chunkCSS = ''
+ // the chunk is empty if it's a dynamic entry chunk that only contains a CSS import
+ const isJsChunkEmpty = code === '' && !chunk.isEntry
  let isPureCssChunk = true
  const ids = Object.keys(chunk.modules)
  for (const id of ids) {
@@ -561,7 +563,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
  isPureCssChunk = false
  }
  }
- } else {
+ } 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
  // that are css gets added to the `styles` map.
@@ -723,13 +725,13 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
  }
 
  if (chunkCSS) {
+ if (isPureCssChunk && (opts.format === 'es' || opts.format === 'cjs')) {
+ // this is a shared CSS-only chunk that is empty.
+ pureCssChunks.add(chunk)
+ }
+
  if (config.build.cssCodeSplit) {
  if (opts.format === 'es' || opts.format === 'cjs') {
- if (isPureCssChunk) {
- // this is a shared CSS-only chunk that is empty.
- pureCssChunks.add(chunk)
- }
-
  const isEntry = chunk.isEntry && isPureCssChunk
  const cssFullAssetName = ensureFileExt(chunk.name, '.css')
  // if facadeModuleId doesn't exist or doesn't have a CSS extension,
@@ -837,6 +839,40 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
  return
  }
 
+ function extractCss() {
+ let css = ''
+ const collected = new Set<OutputChunk>()
+ const prelimaryNameToChunkMap = new Map(
+ Object.values(bundle)
+ .filter((chunk): chunk is OutputChunk => chunk.type === 'chunk')
+ .map((chunk) => [chunk.preliminaryFileName, chunk]),
+ )
+
+ function collect(fileName: string) {
+ const chunk = bundle[fileName]
+ if (!chunk || chunk.type !== 'chunk' || collected.has(chunk)) return
+ collected.add(chunk)
+
+ chunk.imports.forEach(collect)
+ css += chunkCSSMap.get(chunk.preliminaryFileName) ?? ''
+ }
+
+ for (const chunkName of chunkCSSMap.keys())
+ collect(prelimaryNameToChunkMap.get(chunkName)?.fileName ?? '')
+
+ return css
+ }
+ let extractedCss = !hasEmitted && extractCss()
+ if (extractedCss) {
+ hasEmitted = true
+ extractedCss = await finalizeCss(extractedCss, true, config)
+ this.emitFile({
+ name: cssBundleName,
+ type: 'asset',
+ source: extractedCss,
+ })
+ }
+
  // remove empty css chunks and their imports
  if (pureCssChunks.size) {
  // map each pure css chunk (rendered chunk) to it's corresponding bundle
@@ -893,40 +929,6 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
  delete bundle[`${fileName}.map`]
  })
  }
-
- function extractCss() {
- let css = ''
- const collected = new Set<OutputChunk>()
- const prelimaryNameToChunkMap = new Map(
- Object.values(bundle)
- .filter((chunk): chunk is OutputChunk => chunk.type === 'chunk')
- .map((chunk) => [chunk.preliminaryFileName, chunk]),
- )
-
- function collect(fileName: string) {
- const chunk = bundle[fileName]
- if (!chunk || chunk.type !== 'chunk' || collected.has(chunk)) return
- collected.add(chunk)
-
- chunk.imports.forEach(collect)
- css += chunkCSSMap.get(chunk.preliminaryFileName) ?? ''
- }
-
- for (const chunkName of chunkCSSMap.keys())
- collect(prelimaryNameToChunkMap.get(chunkName)?.fileName ?? '')
-
- return css
- }
- let extractedCss = !hasEmitted && extractCss()
- if (extractedCss) {
- hasEmitted = true
- extractedCss = await finalizeCss(extractedCss, true, config)
- this.emitFile({
- name: cssBundleName,
- type: 'asset',
- source: extractedCss,
- })
- }
  },
  }
 }

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

@@ -3,6 +3,7 @@ import {
  findAssetFile,
  getColor,
  isBuild,
+ listAssets,
  page,
  readManifest,
  untilUpdated,
@@ -12,6 +13,7 @@ test('should load all stylesheets', async () => {
  expect(await getColor('h1')).toBe('red')
  expect(await getColor('h2')).toBe('blue')
  expect(await getColor('.dynamic')).toBe('green')
+ expect(await getColor('.async-js')).toBe('blue')
  expect(await getColor('.chunk')).toBe('magenta')
 })
 
@@ -40,7 +42,12 @@ describe.runIf(isBuild)('build', () => {
  expect(findAssetFile(/style-.*\.js$/)).toBe('')
  expect(findAssetFile('main.*.js$')).toMatch(`/* empty css`)
  expect(findAssetFile('other.*.js$')).toMatch(`/* empty css`)
- expect(findAssetFile(/async.*\.js$/)).toBe('')
+ expect(findAssetFile(/async-[-\w]{8}\.js$/)).toBe('')
+
+ const assets = listAssets()
+ expect(assets).not.toContainEqual(
+ expect.stringMatching(/async-js-[-\w]{8}\.js$/),
+ )
  })
 
  test('should remove empty chunk, HTML without JS', async () => {

playground/css-codesplit/async-js.css

@@ -0,0 +1,3 @@
+.async-js {
+ color: blue;
+}

playground/css-codesplit/async-js.js

@@ -0,0 +1,2 @@
+// a JS file that becomes an empty file but imports CSS files
+import './async-js.css'

playground/css-codesplit/index.html

@@ -2,6 +2,7 @@ <h1>This should be red</h1>
 <h2>This should be blue</h2>
 
 <p class="dynamic">This should be green</p>
+<p class="async-js">This should be blue</p>
 <p class="inline">This should not be yellow</p>
 <p class="dynamic-inline"></p>
 <p class="mod">This should be yellow</p>

playground/css-codesplit/main.js

@@ -9,6 +9,7 @@ import chunkCssUrl from './chunk.css?url'
 globalThis.__test_chunkCssUrl = chunkCssUrl
 
 import('./async.css')
+import('./async-js')
 
 import('./inline.css?inline').then((css) => {
  document.querySelector('.dynamic-inline').textContent = css.default

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

@@ -0,0 +1,17 @@
+import { describe, expect, test } from 'vitest'
+import { expectWithRetry, getColor, isBuild, listAssets } from '~utils'
+
+test('should load all stylesheets', async () => {
+ expect(await getColor('.shared-linked')).toBe('blue')
+ await expectWithRetry(() => getColor('.async-js')).toBe('blue')
+})
+
+describe.runIf(isBuild)('build', () => {
+ test('should remove empty chunk', async () => {
+ const assets = listAssets()
+ expect(assets).not.toContainEqual(
+ expect.stringMatching(/shared-linked-.*\.js$/),
+ )
+ expect(assets).not.toContainEqual(expect.stringMatching(/async-js-.*\.js$/))
+ })
+})

playground/css-no-codesplit/async-js.css

@@ -0,0 +1,3 @@
+.async-js {
+ color: blue;
+}

playground/css-no-codesplit/async-js.js

@@ -0,0 +1,2 @@
+// a JS file that becomes an empty file but imports CSS files
+import './async-js.css'

playground/css-no-codesplit/index.html

@@ -0,0 +1,5 @@
+<link rel="stylesheet" href="./shared-linked.css" />
+<script type="module" src="./index.js"></script>
+
+<p class="shared-linked">shared linked: this should be blue</p>
+<p class="async-js">async JS importing CSS: this should be blue</p>

playground/css-no-codesplit/index.js

@@ -0,0 +1 @@
+import('./async-js')

playground/css-no-codesplit/package.json

@@ -0,0 +1,12 @@
+{
+ "name": "@vitejs/test-css-no-codesplit",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+ "preview": "vite preview"
+ }
+}

playground/css-no-codesplit/shared-linked.css

@@ -0,0 +1,3 @@
+.shared-linked {
+ color: blue;
+}

playground/css-no-codesplit/sub.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="./shared-linked.css" />

playground/css-no-codesplit/vite.config.js

@@ -0,0 +1,14 @@
+import { resolve } from 'node:path'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+ build: {
+ cssCodeSplit: false,
+ rollupOptions: {
+ input: {
+ index: resolve(__dirname, './index.html'),
+ sub: resolve(__dirname, './sub.html'),
+ },
+ },
+ },
+})