diff --git a/packages/playground/legacy/package.json b/packages/playground/legacy/package.json
index 3a3315c42aa832..de44568b5f6648 100644
--- a/packages/playground/legacy/package.json
+++ b/packages/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 ../../vite/bin/vite",
     "preview": "vite preview"
   },
diff --git a/packages/playground/legacy/vite.config-dynamic-css.js b/packages/playground/legacy/vite.config-dynamic-css.js
new file mode 100644
index 00000000000000..10565768ac4d49
--- /dev/null
+++ b/packages/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)
+  }
+}
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index f310abc9bc7c56..dd3725ae290b75 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -444,7 +444,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
@@ -505,7 +509,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'