fix(css): pure css chunk removal + manifest entry with multiple css f…

…iles

fix #1776

BREAKING CHANGE: the "css" property of build manifest entries is now an
array because it is possible for an entry to link to multiple generated
css files.

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

@@ -0,0 +1,24 @@
+import fs from 'fs'
+import path from 'path'
+import { findAssetFile, getColor, isBuild, testDir } 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 = JSON.parse(
+      fs.readFileSync(path.join(testDir, 'dist', 'manifest.json'), 'utf-8')
+    )
+    expect(manifest['index.html'].css.length).toBe(2)
+    expect(manifest['other.js'].css.length).toBe(1)
+  })
+}

packages/playground/css-codesplit/index.html

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

packages/playground/css-codesplit/main.css

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

packages/playground/css-codesplit/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/other.js

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

packages/playground/css-codesplit/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "test-css-codesplit",
+  "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/style.css

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

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

@@ -0,0 +1,13 @@
+const { resolve } = require('path')
+
+module.exports = {
+  build: {
+    manifest: true,
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, './index.html'),
+        other: resolve(__dirname, './other.js')
+      }
+    }
+  }
+}

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

@@ -244,11 +244,11 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 
     async renderChunk(code, chunk, opts) {
       let chunkCSS = ''
-      let isAllCSSChunk = true
+      let isPureCssChunk = true
       const ids = Object.keys(chunk.modules)
       for (const id of ids) {
         if (!isCSSRequest(id) || cssModuleRE.test(id)) {
-          isAllCSSChunk = false
+          isPureCssChunk = false
         }
         if (styles.has(id)) {
           chunkCSS += styles.get(id)
@@ -260,7 +260,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       }
 
       if (config.build.cssCodeSplit) {
-        if (isAllCSSChunk) {
+        if (isPureCssChunk) {
           // this is a shared CSS-only chunk that is empty.
           pureCssChunks.add(chunk.fileName)
         }
@@ -339,7 +339,11 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
               }
               return true
             })
-            chunk.code = chunk.code.replace(emptyChunkRE, '')
+            chunk.code = chunk.code.replace(
+              emptyChunkRE,
+              // remove css import while preserving source map location
+              (m) => `/* empty css ${''.padEnd(m.length - 15)}*/`
+            )
           }
         }
         pureCssChunks.forEach((fileName) => {