fix(build): support cssCodeSplit for cjs format, fix #2575 (#2621)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

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

@@ -0,0 +1,20 @@
+import { findAssetFile, getColor, isBuild, readManifest } from '../../testUtils'
+
+test('should load both stylesheets', async () => {
+  expect(await getColor('h1')).toBe('red')
+  expect(await getColor('h2')).toBe('blue')
+})
+
+if (isBuild) {
+  test('should remove empty chunk', async () => {
+    expect(findAssetFile(/style.*\.js$/)).toBe('')
+    expect(findAssetFile('main.*.js$')).toMatch(`/* empty css`)
+    expect(findAssetFile('other.*.js$')).toMatch(`/* empty css`)
+  })
+
+  test('should generate correct manifest', async () => {
+    const manifest = readManifest()
+    expect(manifest['index.html'].css.length).toBe(2)
+    expect(manifest['other.js'].css.length).toBe(1)
+  })
+}

packages/playground/css-codesplit-cjs/index.html

@@ -0,0 +1,2 @@
+<script type="module" src="/main.js"></script>
+<div id="app"></div>

packages/playground/css-codesplit-cjs/main.css

@@ -0,0 +1,3 @@
+h1 { 
+  color: red;
+}

packages/playground/css-codesplit-cjs/main.js

@@ -0,0 +1,6 @@
+import './style.css'
+import './main.css'
+
+document.getElementById(
+  'app'
+).innerHTML = `<h1>This should be red</h1><h2>This should be blue</h2>`

packages/playground/css-codesplit-cjs/other.js

@@ -0,0 +1 @@
+import './style.css'

packages/playground/css-codesplit-cjs/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "test-css-codesplit-cjs",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
+  }
+}

packages/playground/css-codesplit-cjs/style.css

@@ -0,0 +1,3 @@
+h2 {
+  color: blue;
+}

packages/playground/css-codesplit-cjs/vite.config.js

@@ -0,0 +1,20 @@
+const { resolve } = require('path')
+
+module.exports = {
+  build: {
+    outDir: './dist',
+    manifest: true,
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, './index.html'),
+        other: resolve(__dirname, './other.js')
+      },
+      treeshake: false,
+      output: {
+        format: 'cjs',
+        freeze: false,
+        externalLiveBindings: false
+      }
+    }
+  }
+}

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

@@ -338,7 +338,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           // this is a shared CSS-only chunk that is empty.
           pureCssChunks.add(chunk.fileName)
         }
-        if (opts.format === 'es') {
+        if (opts.format === 'es' || opts.format === 'cjs') {
           chunkCSS = await processChunkCSS(chunkCSS, {
             inlined: false,
             minify: true
@@ -397,7 +397,9 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           .join('|')
           .replace(/\./g, '\\.')
         const emptyChunkRE = new RegExp(
-          `\\bimport\\s*"[^"]*(?:${emptyChunkFiles})";\n?`,
+          opts.format === 'es'
+            ? `\\bimport\\s*"[^"]*(?:${emptyChunkFiles})";\n?`
+            : `\\brequire\\(\\s*"[^"]*(?:${emptyChunkFiles})"\\);\n?`,
           'g'
         )
         for (const file in bundle) {