fix(css): module css deep first insert

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

@@ -284,6 +284,14 @@ test('treeshaken async chunk', async () => {
   }
 })
 
+test('async css modules', async () => {
+  const blue = await page.$('.async-modules-blue')
+  const red = await page.$('.async-modules-red')
+
+  expect(await getColor(blue)).toBe('blue')
+  expect(await getColor(red)).toBe('red')
+})
+
 test('PostCSS dir-dependency', async () => {
   const el1 = await page.$('.dir-dep')
   const el2 = await page.$('.dir-dep-2')

packages/playground/css/async-modules/base.js

@@ -0,0 +1,10 @@
+import styles from './black.module.css'
+
+export function baseAsync(className, color) {
+  const div = document.createElement('div')
+  div.className = `${styles.black} ${className} async-modules-${color}`
+  document.body.appendChild(div)
+  div.textContent = `async css modules (${color}) ${
+    getComputedStyle(div).color
+  }`
+}

packages/playground/css/async-modules/black.module.css

@@ -0,0 +1,3 @@
+.black {
+  color: black;
+}

packages/playground/css/async-modules/blue.js

@@ -0,0 +1,4 @@
+import { baseAsync } from './base'
+import styles from './blue.module.css'
+
+baseAsync(styles.blue, 'blue')

packages/playground/css/async-modules/blue.module.css

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

packages/playground/css/async-modules/red.js

@@ -0,0 +1,4 @@
+import { baseAsync } from './base'
+import styles from './red.module.css'
+
+baseAsync(styles.red, 'red')

packages/playground/css/async-modules/red.module.css

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

packages/playground/css/main.js

@@ -68,3 +68,7 @@ if (import.meta.env.DEV) {
 // inlined
 import inlined from './inlined.css?inline'
 text('.inlined-code', inlined)
+
+// async css modules
+import('./async-modules/blue')
+import('./async-modules/red')

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

@@ -274,20 +274,21 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                 const ownerFilename = chunk.fileName
                 // literal import - trace direct imports and add to deps
                 const analyzed: Set<string> = new Set<string>()
+                // dfs add deps let the upper-level had a higher priority (#3924)
                 const addDeps = (filename: string) => {
                   if (filename === ownerFilename) return
                   if (analyzed.has(filename)) return
                   analyzed.add(filename)
                   const chunk = bundle[filename] as OutputChunk | undefined
                   if (chunk) {
+                    chunk.imports.forEach(addDeps)
                     deps.add(chunk.fileName)
                     const cssFiles = chunkToEmittedCssFileMap.get(chunk)
                     if (cssFiles) {
                       cssFiles.forEach((file) => {
                         deps.add(file)
                       })
                     }
-                    chunk.imports.forEach(addDeps)
                   } else {
                     const removedPureCssFiles =
                       removedPureCssFilesCache.get(config)!