From 780b4f5cdf02adb4ce42c283b60a4d4bb06b8440 Mon Sep 17 00:00:00 2001
From: shir0u <85612853+shir0u@users.noreply.github.com>
Date: Tue, 10 May 2022 20:06:29 +1000
Subject: [PATCH] fix: allow css to be written for systemjs output (#5902)

Co-authored-by: patak-dev <matias.capeletto@gmail.com>
---
 packages/vite/src/node/plugins/css.ts        |  8 +++-
 playground/legacy/__tests__/legacy.spec.ts   | 11 ++++++
 playground/legacy/dynamic.css                |  3 ++
 playground/legacy/index.html                 |  2 +
 playground/legacy/main.js                    |  8 ++++
 playground/legacy/package.json               |  1 +
 playground/legacy/vite.config-dynamic-css.js | 39 ++++++++++++++++++++
 7 files changed, 70 insertions(+), 2 deletions(-)
 create mode 100644 playground/legacy/dynamic.css
 create mode 100644 playground/legacy/vite.config-dynamic-css.js

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index c13a4c83052639..1e1bcef686ea42 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/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'
diff --git a/playground/legacy/__tests__/legacy.spec.ts b/playground/legacy/__tests__/legacy.spec.ts
index 89cbadcacb2fd8..9fd3419337568d 100644
--- a/playground/legacy/__tests__/legacy.spec.ts
+++ b/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()
diff --git a/playground/legacy/dynamic.css b/playground/legacy/dynamic.css
new file mode 100644
index 00000000000000..160ee45a8a850a
--- /dev/null
+++ b/playground/legacy/dynamic.css
@@ -0,0 +1,3 @@
+#dynamic-css {
+  color: red;
+}
diff --git a/playground/legacy/index.html b/playground/legacy/index.html
index d481766463cd4f..cbf6242fad756b 100644
--- a/playground/legacy/index.html
+++ b/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>
diff --git a/playground/legacy/main.js b/playground/legacy/main.js
index 31579b4717810d..157b6c8448e9c3 100644
--- a/playground/legacy/main.js
+++ b/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
 }
diff --git a/playground/legacy/package.json b/playground/legacy/package.json
index f8803564f93f12..4f11c234573f40 100644
--- a/playground/legacy/package.json
+++ b/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"
   },
diff --git a/playground/legacy/vite.config-dynamic-css.js b/playground/legacy/vite.config-dynamic-css.js
new file mode 100644
index 00000000000000..10565768ac4d49
--- /dev/null
+++ b/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)
+  }
+}