fix: allow css to be written for systemjs output (#5902)

Co-authored-by: patak-dev <[email protected]>

Author: shir0u

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

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

playground/legacy/__tests__/legacy.spec.ts

@@ -56,6 +56,17 @@ test('correctly emits styles', async () => {
   expect(await getColor('#app')).toBe('red')
 })
 
+// dynamic import css
+test('should load dynamic import with css', async () => {
+  await page.click('#dynamic-css-button')
+  await untilUpdated(
+    () =>
+      page.$eval('#dynamic-css', (node) => window.getComputedStyle(node).color),
+    'rgb(255, 0, 0)',
+    true
+  )
+})
+
 if (isBuild) {
   test('should generate correct manifest', async () => {
     const manifest = readManifest()

playground/legacy/dynamic.css

@@ -0,0 +1,3 @@
+#dynamic-css {
+  color: red;
+}

playground/legacy/index.html

@@ -4,4 +4,6 @@ <h1 id="app"></h1>
 <div id="features-after-corejs-3"></div>
 <div id="babel-helpers"></div>
 <div id="assets"></div>
+<button id="dynamic-css-button">dynamic css</button>
+<div id="dynamic-css"></div>
 <script type="module" src="./main.js"></script>

playground/legacy/main.js

@@ -42,6 +42,14 @@ import('./immutable-chunk.js')
     text('#assets', assets.join('\n'))
   })
 
+// dynamic css
+document
+  .querySelector('#dynamic-css-button')
+  .addEventListener('click', async () => {
+    await import('./dynamic.css')
+    text('#dynamic-css', 'dynamic import css')
+  })
+
 function text(el, text) {
   document.querySelector(el).textContent = text
 }

playground/legacy/package.json

@@ -6,6 +6,7 @@
     "dev": "vite",
     "build": "vite build --debug legacy",
     "build:custom-filename": "vite --config ./vite.config-custom-filename.js build  --debug legacy",
+    "build:dynamic-css": "vite --config ./vite.config-dynamic-css.js build  --debug legacy",
     "debug": "node --inspect-brk ../../packages/vite/bin/vite",
     "preview": "vite preview"
   },

playground/legacy/vite.config-dynamic-css.js

@@ -0,0 +1,39 @@
+const fs = require('fs')
+const path = require('path')
+const legacy = require('@vitejs/plugin-legacy').default
+
+module.exports = {
+  plugins: [
+    legacy({
+      targets: 'IE 11'
+    })
+  ],
+
+  build: {
+    cssCodeSplit: true,
+    manifest: true,
+    rollupOptions: {
+      output: {
+        chunkFileNames(chunkInfo) {
+          if (chunkInfo.name === 'immutable-chunk') {
+            return `assets/${chunkInfo.name}.js`
+          }
+
+          return `assets/chunk-[name].[hash].js`
+        }
+      }
+    }
+  },
+
+  // special test only hook
+  // for tests, remove `<script type="module">` tags and remove `nomodule`
+  // attrs so that we run the legacy bundle instead.
+  __test__() {
+    const indexPath = path.resolve(__dirname, './dist/index.html')
+    let index = fs.readFileSync(indexPath, 'utf-8')
+    index = index
+      .replace(/<script type="module".*?<\/script>/g, '')
+      .replace(/<script nomodule/g, '<script')
+    fs.writeFileSync(indexPath, index)
+  }
+}