fix(css): dynamic import css abnormal after build

packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts

@@ -45,3 +45,13 @@ test('should load dynamic import with vars', async () => {
   await page.click('.bar')
   await untilUpdated(() => page.textContent('.view'), 'Bar view', true)
 })
+
+// dynamic import css
+test('should load dynamic import with css', async () => {
+  await page.click('.css')
+  await untilUpdated(
+    () => page.$eval('.css', (node) => window.getComputedStyle(node).boxSizing),
+    'border-box',
+    true
+  )
+})

packages/playground/dynamic-import/css/index.css

@@ -0,0 +1,2 @@
+.css { box-sizing: border-box; }
+.view { color: red; }

packages/playground/dynamic-import/index.html

@@ -7,6 +7,7 @@
 <button class="mxdjson">Mxdjson</button>
 <button class="issue-2658-1">Issue 2658 - 1</button>
 <button class="issue-2658-2">Issue 2658 - 2</button>
+<button class="css">css</button>
 
 <div class="view"></div>
 

packages/playground/dynamic-import/nested/index.js

@@ -65,6 +65,11 @@ document.querySelector('.issue-2658-2').addEventListener('click', async () => {
   text('.view', msg)
 })
 
+document.querySelector('.css').addEventListener('click', async () => {
+  await import('../css/index.css')
+  text('.view', 'dynamic import css')
+})
+
 function text(el, text) {
   document.querySelector(el).textContent = text
 }

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

@@ -120,6 +120,8 @@ export const chunkToEmittedCssFileMap = new WeakMap<
   Set<string>
 >()
 
+export const romovedPureCssFiles = new Map<string, RenderedChunk>()
+
 const postcssConfigCache = new WeakMap<
   ResolvedConfig,
   PostCSSConfigResult | null
@@ -472,6 +474,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           }
         }
         pureCssChunks.forEach((fileName) => {
+          romovedPureCssFiles.set(fileName, bundle[fileName] as RenderedChunk)
           delete bundle[fileName]
         })
       }

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

@@ -4,7 +4,7 @@ import { Plugin } from '../plugin'
 import MagicString from 'magic-string'
 import { ImportSpecifier, init, parse as parseImports } from 'es-module-lexer'
 import { OutputChunk } from 'rollup'
-import { chunkToEmittedCssFileMap } from './css'
+import { chunkToEmittedCssFileMap, romovedPureCssFiles } from './css'
 import { transformImportGlob } from '../importGlob'
 
 /**
@@ -232,10 +232,11 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
           if (imports.length) {
             const s = new MagicString(code)
             for (let index = 0; index < imports.length; index++) {
-              const { s: start, e: end } = imports[index]
+              const { s: start, e: end, d: dynamicIndex } = imports[index]
               // check the chunk being imported
               const url = code.slice(start, end)
               const deps: Set<string> = new Set()
+              let hasRomovedPureCssChunk = false
 
               if (url[0] === `"` && url[url.length - 1] === `"`) {
                 const ownerFilename = chunk.fileName
@@ -255,6 +256,19 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                       })
                     }
                     chunk.imports.forEach(addDeps)
+                  } else {
+                    const chunk = romovedPureCssFiles.get(filename)
+                    if (chunk) {
+                      const cssFiles = chunkToEmittedCssFileMap.get(chunk)
+                      if (cssFiles && cssFiles.size > 0) {
+                        cssFiles.forEach((file) => {
+                          deps.add(config.base + file)
+                        })
+                        hasRomovedPureCssChunk = true
+                      }
+
+                      s.overwrite(dynamicIndex, end + 1, 'Promise.resolve({})')
+                    }
                   }
                 }
                 const normalizedFile = path.posix.join(
@@ -276,7 +290,9 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                   markPos + preloadMarker.length + 1,
                   // the dep list includes the main chunk, so only need to
                   // preload when there are actual other deps.
-                  deps.size > 1
+                  deps.size > 1 ||
+                    // main chunk is removed
+                    (hasRomovedPureCssChunk && deps.size > 0)
                     ? `[${[...deps].map((d) => JSON.stringify(d)).join(',')}]`
                     : `[]`
                 )