From 65817ee4e8f5e77d2cb29786d227831b87f8d54a Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Thu, 9 Dec 2021 17:05:11 -0500
Subject: [PATCH 01/15] test: Add failing tests for async css modules

---
 packages/playground/css/__tests__/css.spec.ts          |  8 ++++++++
 packages/playground/css/async-modules/base.js          | 10 ++++++++++
 packages/playground/css/async-modules/black.module.css |  3 +++
 packages/playground/css/async-modules/blue.js          |  4 ++++
 packages/playground/css/async-modules/blue.module.css  |  3 +++
 packages/playground/css/async-modules/red.js           |  4 ++++
 packages/playground/css/async-modules/red.module.css   |  3 +++
 packages/playground/css/main.js                        |  4 ++++
 8 files changed, 39 insertions(+)
 create mode 100644 packages/playground/css/async-modules/base.js
 create mode 100644 packages/playground/css/async-modules/black.module.css
 create mode 100644 packages/playground/css/async-modules/blue.js
 create mode 100644 packages/playground/css/async-modules/blue.module.css
 create mode 100644 packages/playground/css/async-modules/red.js
 create mode 100644 packages/playground/css/async-modules/red.module.css

diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
index f1eb66e097ad86..330b2d08c399c0 100644
--- a/packages/playground/css/__tests__/css.spec.ts
+++ b/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')
diff --git a/packages/playground/css/async-modules/base.js b/packages/playground/css/async-modules/base.js
new file mode 100644
index 00000000000000..95ea925aa95b97
--- /dev/null
+++ b/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
+  }`
+}
diff --git a/packages/playground/css/async-modules/black.module.css b/packages/playground/css/async-modules/black.module.css
new file mode 100644
index 00000000000000..2491c2d607632b
--- /dev/null
+++ b/packages/playground/css/async-modules/black.module.css
@@ -0,0 +1,3 @@
+.black {
+  color: black;
+}
diff --git a/packages/playground/css/async-modules/blue.js b/packages/playground/css/async-modules/blue.js
new file mode 100644
index 00000000000000..adc92a5775068b
--- /dev/null
+++ b/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')
diff --git a/packages/playground/css/async-modules/blue.module.css b/packages/playground/css/async-modules/blue.module.css
new file mode 100644
index 00000000000000..659edcf511a928
--- /dev/null
+++ b/packages/playground/css/async-modules/blue.module.css
@@ -0,0 +1,3 @@
+.blue {
+  color: blue;
+}
diff --git a/packages/playground/css/async-modules/red.js b/packages/playground/css/async-modules/red.js
new file mode 100644
index 00000000000000..2a98267dedfdf6
--- /dev/null
+++ b/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')
diff --git a/packages/playground/css/async-modules/red.module.css b/packages/playground/css/async-modules/red.module.css
new file mode 100644
index 00000000000000..c6dd2c88fabe35
--- /dev/null
+++ b/packages/playground/css/async-modules/red.module.css
@@ -0,0 +1,3 @@
+.red {
+  color: red;
+}
diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js
index 24a278c8687940..671f5a551b907b 100644
--- a/packages/playground/css/main.js
+++ b/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')

From 16ad8821349e05ab591906605eeeb076a79009e5 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Wed, 29 Dec 2021 20:08:39 +0800
Subject: [PATCH 02/15] wip: dfs add deps

---
 packages/vite/src/node/plugins/importAnalysisBuild.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index bb5b50f93cdbb9..f8782fb8b22a9f 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -274,11 +274,13 @@ 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
+                  console.log('deps', filename, chunk?.imports)
                   if (chunk) {
                     deps.add(chunk.fileName)
                     const cssFiles = chunkToEmittedCssFileMap.get(chunk)
@@ -309,6 +311,8 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                   path.posix.dirname(chunk.fileName),
                   url
                 )
+                console.log();
+                console.log('start deps', normalizedFile);
                 addDeps(normalizedFile)
               }
 
@@ -319,6 +323,8 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
               }
 
               if (markPos > 0) {
+                console.log()
+                console.log('generate', name, [...deps])
                 s.overwrite(
                   markPos - 1,
                   markPos + preloadMarker.length + 1,

From 4e10f6fd9acc84258659d394f975f78a72ce99c7 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Wed, 29 Dec 2021 21:10:48 +0800
Subject: [PATCH 03/15] feat: dfs add deps let the upper-level had a higher
 priority

---
 packages/vite/src/node/plugins/importAnalysisBuild.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index f8782fb8b22a9f..910f962d7cd2b8 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -280,8 +280,8 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                   if (analyzed.has(filename)) return
                   analyzed.add(filename)
                   const chunk = bundle[filename] as OutputChunk | undefined
-                  console.log('deps', filename, chunk?.imports)
                   if (chunk) {
+                    chunk.imports.forEach(addDeps)
                     deps.add(chunk.fileName)
                     const cssFiles = chunkToEmittedCssFileMap.get(chunk)
                     if (cssFiles) {
@@ -289,7 +289,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                         deps.add(file)
                       })
                     }
-                    chunk.imports.forEach(addDeps)
                   } else {
                     const removedPureCssFiles =
                       removedPureCssFilesCache.get(config)!
@@ -311,8 +310,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                   path.posix.dirname(chunk.fileName),
                   url
                 )
-                console.log();
-                console.log('start deps', normalizedFile);
                 addDeps(normalizedFile)
               }
 
@@ -323,8 +320,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
               }
 
               if (markPos > 0) {
-                console.log()
-                console.log('generate', name, [...deps])
                 s.overwrite(
                   markPos - 1,
                   markPos + preloadMarker.length + 1,

From 350ae16543497d0a59499e7642aaa284567bd58d Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Tue, 4 Jan 2022 22:03:51 +0800
Subject: [PATCH 04/15] test: feat more test

---
 packages/playground/css/__tests__/css.spec.ts          |  4 ++++
 packages/playground/css/async-modules/base2.js         | 10 ++++++++++
 packages/playground/css/async-modules/green.js         |  6 ++++++
 packages/playground/css/async-modules/green.module.css |  3 +++
 packages/playground/css/main.js                        |  1 +
 5 files changed, 24 insertions(+)
 create mode 100644 packages/playground/css/async-modules/base2.js
 create mode 100644 packages/playground/css/async-modules/green.js
 create mode 100644 packages/playground/css/async-modules/green.module.css

diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
index 330b2d08c399c0..baab12ff64fe68 100644
--- a/packages/playground/css/__tests__/css.spec.ts
+++ b/packages/playground/css/__tests__/css.spec.ts
@@ -287,9 +287,13 @@ test('treeshaken async chunk', async () => {
 test('async css modules', async () => {
   const blue = await page.$('.async-modules-blue')
   const red = await page.$('.async-modules-red')
+  const green = await page.$('.async-modules-green')
+  const blue2 = await page.$('.async-modules-blue2')
 
   expect(await getColor(blue)).toBe('blue')
   expect(await getColor(red)).toBe('red')
+  expect(await getColor(green)).toBe('green')
+  expect(await getColor(blue2)).toBe('blue')
 })
 
 test('PostCSS dir-dependency', async () => {
diff --git a/packages/playground/css/async-modules/base2.js b/packages/playground/css/async-modules/base2.js
new file mode 100644
index 00000000000000..7de78ae8e06c47
--- /dev/null
+++ b/packages/playground/css/async-modules/base2.js
@@ -0,0 +1,10 @@
+import styles from './red.module.css'
+
+export function baseAsync(className, color) {
+  const div = document.createElement('div')
+  div.className = `${styles.red} ${className} async-modules-${color}`
+  document.body.appendChild(div)
+  div.textContent = `async css modules (${color}) ${
+    getComputedStyle(div).color
+  }`
+}
diff --git a/packages/playground/css/async-modules/green.js b/packages/playground/css/async-modules/green.js
new file mode 100644
index 00000000000000..412d8ff905cbab
--- /dev/null
+++ b/packages/playground/css/async-modules/green.js
@@ -0,0 +1,6 @@
+import { baseAsync } from './base2'
+import green from './green.module.css'
+import blue from './blue.module.css'
+
+baseAsync(green.green, 'green')
+baseAsync(blue.blue, 'blue2')
diff --git a/packages/playground/css/async-modules/green.module.css b/packages/playground/css/async-modules/green.module.css
new file mode 100644
index 00000000000000..fa95e11ba9ef9a
--- /dev/null
+++ b/packages/playground/css/async-modules/green.module.css
@@ -0,0 +1,3 @@
+.green {
+  color: green;
+}
diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js
index 671f5a551b907b..7a755d6c93512c 100644
--- a/packages/playground/css/main.js
+++ b/packages/playground/css/main.js
@@ -72,3 +72,4 @@ text('.inlined-code', inlined)
 // async css modules
 import('./async-modules/blue')
 import('./async-modules/red')
+import('./async-modules/green')

From e6cd509372cf74d628d1c626f134ee1063188bd4 Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Thu, 9 Dec 2021 17:05:11 -0500
Subject: [PATCH 05/15] test: Add failing tests for async css modules

---
 packages/playground/css/__tests__/css.spec.ts          |  8 ++++++++
 packages/playground/css/async-modules/base.js          | 10 ++++++++++
 packages/playground/css/async-modules/black.module.css |  3 +++
 packages/playground/css/async-modules/blue.js          |  4 ++++
 packages/playground/css/async-modules/blue.module.css  |  3 +++
 packages/playground/css/async-modules/red.js           |  4 ++++
 packages/playground/css/async-modules/red.module.css   |  3 +++
 packages/playground/css/main.js                        |  4 ++++
 8 files changed, 39 insertions(+)
 create mode 100644 packages/playground/css/async-modules/base.js
 create mode 100644 packages/playground/css/async-modules/black.module.css
 create mode 100644 packages/playground/css/async-modules/blue.js
 create mode 100644 packages/playground/css/async-modules/blue.module.css
 create mode 100644 packages/playground/css/async-modules/red.js
 create mode 100644 packages/playground/css/async-modules/red.module.css

diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
index f1eb66e097ad86..330b2d08c399c0 100644
--- a/packages/playground/css/__tests__/css.spec.ts
+++ b/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')
diff --git a/packages/playground/css/async-modules/base.js b/packages/playground/css/async-modules/base.js
new file mode 100644
index 00000000000000..95ea925aa95b97
--- /dev/null
+++ b/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
+  }`
+}
diff --git a/packages/playground/css/async-modules/black.module.css b/packages/playground/css/async-modules/black.module.css
new file mode 100644
index 00000000000000..2491c2d607632b
--- /dev/null
+++ b/packages/playground/css/async-modules/black.module.css
@@ -0,0 +1,3 @@
+.black {
+  color: black;
+}
diff --git a/packages/playground/css/async-modules/blue.js b/packages/playground/css/async-modules/blue.js
new file mode 100644
index 00000000000000..adc92a5775068b
--- /dev/null
+++ b/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')
diff --git a/packages/playground/css/async-modules/blue.module.css b/packages/playground/css/async-modules/blue.module.css
new file mode 100644
index 00000000000000..659edcf511a928
--- /dev/null
+++ b/packages/playground/css/async-modules/blue.module.css
@@ -0,0 +1,3 @@
+.blue {
+  color: blue;
+}
diff --git a/packages/playground/css/async-modules/red.js b/packages/playground/css/async-modules/red.js
new file mode 100644
index 00000000000000..2a98267dedfdf6
--- /dev/null
+++ b/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')
diff --git a/packages/playground/css/async-modules/red.module.css b/packages/playground/css/async-modules/red.module.css
new file mode 100644
index 00000000000000..c6dd2c88fabe35
--- /dev/null
+++ b/packages/playground/css/async-modules/red.module.css
@@ -0,0 +1,3 @@
+.red {
+  color: red;
+}
diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js
index 24a278c8687940..671f5a551b907b 100644
--- a/packages/playground/css/main.js
+++ b/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')

From 223148df877af9a47a8f61e92c21f39c723b30d3 Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Thu, 6 Jan 2022 00:19:33 -0500
Subject: [PATCH 06/15] test: Add test for mixed css and css modules

---
 packages/playground/css/__tests__/css.spec.ts            | 8 ++++++++
 packages/playground/css/async-modules-and-css/base.css   | 4 ++++
 packages/playground/css/async-modules-and-css/black.js   | 9 +++++++++
 .../css/async-modules-and-css/black.module.css           | 3 +++
 packages/playground/css/async-modules-and-css/blue.js    | 9 +++++++++
 .../playground/css/async-modules-and-css/blue.module.css | 3 +++
 packages/playground/css/main.js                          | 4 ++++
 7 files changed, 40 insertions(+)
 create mode 100644 packages/playground/css/async-modules-and-css/base.css
 create mode 100644 packages/playground/css/async-modules-and-css/black.js
 create mode 100644 packages/playground/css/async-modules-and-css/black.module.css
 create mode 100644 packages/playground/css/async-modules-and-css/blue.js
 create mode 100644 packages/playground/css/async-modules-and-css/blue.module.css

diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
index 330b2d08c399c0..09d6dd6984f8ef 100644
--- a/packages/playground/css/__tests__/css.spec.ts
+++ b/packages/playground/css/__tests__/css.spec.ts
@@ -292,6 +292,14 @@ test('async css modules', async () => {
   expect(await getColor(red)).toBe('red')
 })
 
+test('async css modules with normal css', async () => {
+  const black = await page.$('.async-modules-and-css-black')
+  const blue = await page.$('.async-modules-and-css-blue')
+
+  expect(await getColor(black)).toBe('black')
+  expect(await getColor(blue)).toBe('blue')
+})
+
 test('PostCSS dir-dependency', async () => {
   const el1 = await page.$('.dir-dep')
   const el2 = await page.$('.dir-dep-2')
diff --git a/packages/playground/css/async-modules-and-css/base.css b/packages/playground/css/async-modules-and-css/base.css
new file mode 100644
index 00000000000000..c82e5de33f9bae
--- /dev/null
+++ b/packages/playground/css/async-modules-and-css/base.css
@@ -0,0 +1,4 @@
+.base {
+  font-size: 1rem;
+  color: hotpink;
+}
diff --git a/packages/playground/css/async-modules-and-css/black.js b/packages/playground/css/async-modules-and-css/black.js
new file mode 100644
index 00000000000000..0c1ddfa45aa1c2
--- /dev/null
+++ b/packages/playground/css/async-modules-and-css/black.js
@@ -0,0 +1,9 @@
+import './base.css'
+import styles from './black.module.css'
+
+const div = document.createElement('div')
+div.className = `base ${styles.black} async-modules-and-css-black`
+document.body.appendChild(div)
+div.textContent = `async css modules and normal css (black) ${
+  getComputedStyle(div).color
+}`
diff --git a/packages/playground/css/async-modules-and-css/black.module.css b/packages/playground/css/async-modules-and-css/black.module.css
new file mode 100644
index 00000000000000..2491c2d607632b
--- /dev/null
+++ b/packages/playground/css/async-modules-and-css/black.module.css
@@ -0,0 +1,3 @@
+.black {
+  color: black;
+}
diff --git a/packages/playground/css/async-modules-and-css/blue.js b/packages/playground/css/async-modules-and-css/blue.js
new file mode 100644
index 00000000000000..cbfc061fddd059
--- /dev/null
+++ b/packages/playground/css/async-modules-and-css/blue.js
@@ -0,0 +1,9 @@
+import './base.css'
+import styles from './blue.module.css'
+
+const div = document.createElement('div')
+div.className = `base ${styles.blue} async-modules-and-css-blue`
+document.body.appendChild(div)
+div.textContent = `async css modules and normal css (blue) ${
+  getComputedStyle(div).color
+}`
diff --git a/packages/playground/css/async-modules-and-css/blue.module.css b/packages/playground/css/async-modules-and-css/blue.module.css
new file mode 100644
index 00000000000000..659edcf511a928
--- /dev/null
+++ b/packages/playground/css/async-modules-and-css/blue.module.css
@@ -0,0 +1,3 @@
+.blue {
+  color: blue;
+}
diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js
index 671f5a551b907b..9fe63bdc36e580 100644
--- a/packages/playground/css/main.js
+++ b/packages/playground/css/main.js
@@ -72,3 +72,7 @@ text('.inlined-code', inlined)
 // async css modules
 import('./async-modules/blue')
 import('./async-modules/red')
+
+// async css module with normal css
+import('./async-modules-and-css/black')
+import('./async-modules-and-css/blue')

From 1e785012acc90ead475b311ca13ea7f7f4798f89 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Sun, 9 Jan 2022 15:07:24 +0800
Subject: [PATCH 07/15] test: fix test case expect

---
 packages/playground/css/__tests__/css.spec.ts  | 4 +++-
 packages/playground/css/async-modules/base2.js | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
index 33c40eb2a1a83d..854da97ed190ce 100644
--- a/packages/playground/css/__tests__/css.spec.ts
+++ b/packages/playground/css/__tests__/css.spec.ts
@@ -293,7 +293,9 @@ test('async css modules', async () => {
   expect(await getColor(blue)).toBe('blue')
   expect(await getColor(red)).toBe('red')
   expect(await getColor(green)).toBe('green')
-  expect(await getColor(blue2)).toBe('blue')
+  // because that loaded blue > red first
+  // and can't change the style order
+  expect(await getColor(blue2)).toBe('red')
   expect(await getColor(blue)).toBe('blue')
   expect(await getColor(red)).toBe('red')
 })
diff --git a/packages/playground/css/async-modules/base2.js b/packages/playground/css/async-modules/base2.js
index 7de78ae8e06c47..6d28b9c6bbed5b 100644
--- a/packages/playground/css/async-modules/base2.js
+++ b/packages/playground/css/async-modules/base2.js
@@ -4,7 +4,7 @@ export function baseAsync(className, color) {
   const div = document.createElement('div')
   div.className = `${styles.red} ${className} async-modules-${color}`
   document.body.appendChild(div)
-  div.textContent = `async css modules (${color}) ${
+  div.textContent = `async css modules2 (${color}) ${
     getComputedStyle(div).color
   }`
 }

From 583ff47443f346732a8881d4c3d33751efa19585 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Mon, 10 Jan 2022 20:14:20 +0800
Subject: [PATCH 08/15] fix: back dfs

---
 packages/vite/src/node/plugins/importAnalysisBuild.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index 910f962d7cd2b8..a2a5acca536e18 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -281,7 +281,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                   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) {
@@ -289,6 +288,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                         deps.add(file)
                       })
                     }
+                    chunk.imports.forEach(addDeps)
                   } else {
                     const removedPureCssFiles =
                       removedPureCssFilesCache.get(config)!

From 71444287fda17ef2f910b187df4e9b1d62d2513c Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Mon, 10 Jan 2022 22:32:32 +0800
Subject: [PATCH 09/15] wip: build had dev load behavior

---
 packages/playground/css/async-modules/blue.js         | 2 +-
 packages/vite/src/node/plugins/importAnalysisBuild.ts | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/playground/css/async-modules/blue.js b/packages/playground/css/async-modules/blue.js
index adc92a5775068b..30f8adc83e7189 100644
--- a/packages/playground/css/async-modules/blue.js
+++ b/packages/playground/css/async-modules/blue.js
@@ -1,4 +1,4 @@
-import { baseAsync } from './base'
 import styles from './blue.module.css'
+import { baseAsync } from './base'
 
 baseAsync(styles.blue, 'blue')
diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index a2a5acca536e18..e49aa04572722b 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -288,7 +288,12 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                         deps.add(file)
                       })
                     }
-                    chunk.imports.forEach(addDeps)
+                    // TODO more accurate judgment
+                    const isModuleCSS = (id: string) =>
+                      Number(id.includes('.module.'))
+                    chunk.imports
+                      .sort((a, b) => isModuleCSS(a) - isModuleCSS(b))
+                      .forEach(addDeps)
                   } else {
                     const removedPureCssFiles =
                       removedPureCssFilesCache.get(config)!

From 6a5c2dcbc82c01573cbb3e86951309920fb994c8 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Sat, 15 Jan 2022 19:28:45 +0800
Subject: [PATCH 10/15] wip: isModuleCss

---
 packages/vite/src/node/plugins/css.ts         | 20 +++++++++++++++----
 .../src/node/plugins/importAnalysisBuild.ts   |  7 +++----
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 8f7dbdae363fe8..38485fb2e7069b 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -120,6 +120,8 @@ const cssModulesCache = new WeakMap<
   Map<string, Record<string, string>>
 >()
 
+export const cssModulesSets = new WeakMap<ResolvedConfig, Set<string>>()
+
 export const chunkToEmittedCssFileMap = new WeakMap<
   RenderedChunk,
   Set<string>
@@ -265,6 +267,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
   // styles initialization in buildStart causes a styling loss in watch
   const styles: Map<string, string> = new Map<string, string>()
   let pureCssChunks: Set<string>
+  let cssModulesSet: Set<string>
 
   // when there are multiple rollup outputs and extracting CSS, only emit once,
   // since output formats have no effect on the generated CSS.
@@ -278,6 +281,9 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       // Ensure new caches for every build (i.e. rebuilding in watch mode)
       pureCssChunks = new Set<string>()
       outputToExtractedCSSMap = new Map<NormalizedOutputOptions, string>()
+
+      cssModulesSet = new Set<string>()
+      cssModulesSets.set(config, cssModulesSet)
       hasEmitted = false
     },
 
@@ -356,8 +362,12 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
     async renderChunk(code, chunk, opts) {
       let chunkCSS = ''
       let isPureCssChunk = true
+      let isModuleCssChunk = false
       const ids = Object.keys(chunk.modules)
       for (const id of ids) {
+        if (cssModuleRE.test(id)) {
+          isModuleCssChunk = true
+        }
         if (
           !isCSSRequest(id) ||
           cssModuleRE.test(id) ||
@@ -427,10 +437,12 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
             type: 'asset',
             source: chunkCSS
           })
-          chunkToEmittedCssFileMap.set(
-            chunk,
-            new Set([this.getFileName(fileHandle)])
-          )
+          const assetFileName = this.getFileName(fileHandle)
+          if (isModuleCssChunk) {
+            cssModulesSet.add(assetFileName)
+          }
+
+          chunkToEmittedCssFileMap.set(chunk, new Set([assetFileName]))
         } else if (!config.build.ssr) {
           // legacy build, inline css
           chunkCSS = await processChunkCSS(chunkCSS, {
diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index e49aa04572722b..a8da4aa3f4d4a9 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -7,6 +7,7 @@ import { init, parse as parseImports } from 'es-module-lexer'
 import type { OutputChunk } from 'rollup'
 import {
   chunkToEmittedCssFileMap,
+  cssModulesSets,
   isCSSRequest,
   removedPureCssFilesCache
 } from './css'
@@ -93,7 +94,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
     ? `'modulepreload'`
     : `(${detectScriptRel.toString()})()`
   const preloadCode = `const scriptRel = ${scriptRel};const seen = {};const base = '${preloadBaseMarker}';export const ${preloadMethod} = ${preload.toString()}`
-
   return {
     name: 'vite:build-import-analysis',
 
@@ -274,7 +274,7 @@ 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 cssModulesSet = cssModulesSets.get(config)!
                 const addDeps = (filename: string) => {
                   if (filename === ownerFilename) return
                   if (analyzed.has(filename)) return
@@ -288,9 +288,8 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                         deps.add(file)
                       })
                     }
-                    // TODO more accurate judgment
                     const isModuleCSS = (id: string) =>
-                      Number(id.includes('.module.'))
+                      Number(cssModulesSet.has(id))
                     chunk.imports
                       .sort((a, b) => isModuleCSS(a) - isModuleCSS(b))
                       .forEach(addDeps)

From 0336e9acf963387924f8d7b4016744c04b528bc9 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Sat, 15 Jan 2022 22:49:48 +0800
Subject: [PATCH 11/15] wip: split load moudle with breadth

---
 packages/vite/src/node/plugins/css.ts         | 30 ++++++++--------
 .../src/node/plugins/importAnalysisBuild.ts   | 35 +++++++++++++++----
 2 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 38485fb2e7069b..2ebe0212dd2b43 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -362,24 +362,25 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
     async renderChunk(code, chunk, opts) {
       let chunkCSS = ''
       let isPureCssChunk = true
-      let isModuleCssChunk = false
+      let moduleCssCount = 0
       const ids = Object.keys(chunk.modules)
       for (const id of ids) {
-        if (cssModuleRE.test(id)) {
-          isModuleCssChunk = true
+        const isCssModule = cssModuleRE.test(id)
+        if (isCssModule) {
+          moduleCssCount++
         }
-        if (
-          !isCSSRequest(id) ||
-          cssModuleRE.test(id) ||
-          commonjsProxyRE.test(id)
-        ) {
+        if (!isCSSRequest(id) || isCssModule || commonjsProxyRE.test(id)) {
           isPureCssChunk = false
         }
         if (styles.has(id)) {
           chunkCSS += styles.get(id)
         }
       }
-
+      // if module css generate javescript module
+      // will only had module css file
+      if (moduleCssCount === ids.length) {
+        cssModulesSet.add(chunk.fileName)
+      }
       if (!chunkCSS) {
         return null
       }
@@ -420,7 +421,6 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         }
         return css
       }
-
       if (config.build.cssCodeSplit) {
         if (isPureCssChunk) {
           // this is a shared CSS-only chunk that is empty.
@@ -437,12 +437,10 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
             type: 'asset',
             source: chunkCSS
           })
-          const assetFileName = this.getFileName(fileHandle)
-          if (isModuleCssChunk) {
-            cssModulesSet.add(assetFileName)
-          }
-
-          chunkToEmittedCssFileMap.set(chunk, new Set([assetFileName]))
+          chunkToEmittedCssFileMap.set(
+            chunk,
+            new Set([this.getFileName(fileHandle)])
+          )
         } else if (!config.build.ssr) {
           // legacy build, inline css
           chunkCSS = await processChunkCSS(chunkCSS, {
diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index a8da4aa3f4d4a9..755cff77ea0f29 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -237,6 +237,11 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
         return
       }
 
+      const cssModulesSet = cssModulesSets.get(config)!
+      const isCss = (id: string) =>
+        cssModulesSet.has(id) || // is module css
+        isCSSRequest(id)
+
       for (const file in bundle) {
         const chunk = bundle[file]
         // can't use chunk.dynamicImports.length here since some modules e.g.
@@ -274,13 +279,17 @@ 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>()
-                const cssModulesSet = cssModulesSets.get(config)!
                 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
+                      .sort((a, b) => +isCss(b) - +isCss(a))
+                      .forEach((moduleName) => {
+                        addDeps(moduleName)
+                      })
                     deps.add(chunk.fileName)
                     const cssFiles = chunkToEmittedCssFileMap.get(chunk)
                     if (cssFiles) {
@@ -288,11 +297,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                         deps.add(file)
                       })
                     }
-                    const isModuleCSS = (id: string) =>
-                      Number(cssModulesSet.has(id))
-                    chunk.imports
-                      .sort((a, b) => isModuleCSS(a) - isModuleCSS(b))
-                      .forEach(addDeps)
                   } else {
                     const removedPureCssFiles =
                       removedPureCssFilesCache.get(config)!
@@ -324,6 +328,23 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
               }
 
               if (markPos > 0) {
+                // split module load like browser(breadth first)
+                let loadOnceCache: string[] = []
+                const splitDepsLoadingOrder: string[] = []
+                const pushSplitDepsLoadingOrder = () =>
+                  loadOnceCache.length &&
+                  splitDepsLoadingOrder.push(
+                    `[${loadOnceCache.map((d) => JSON.stringify(d)).join(',')}]`
+                  )
+                deps.forEach((dep) => {
+                  if (!isCss(dep)) {
+                    pushSplitDepsLoadingOrder()
+                    loadOnceCache = []
+                  }
+                  loadOnceCache.push(dep)
+                })
+                pushSplitDepsLoadingOrder() // push last time load module
+
                 s.overwrite(
                   markPos - 1,
                   markPos + preloadMarker.length + 1,
@@ -332,7 +353,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                   deps.size > 1 ||
                     // main chunk is removed
                     (hasRemovedPureCssChunk && deps.size > 0)
-                    ? `[${[...deps].map((d) => JSON.stringify(d)).join(',')}]`
+                    ? `[${splitDepsLoadingOrder.join(',')}]`
                     : `[]`
                 )
               }

From 9bd1ba6fb0494134d4503a7557e5ff15b3f21065 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Sun, 16 Jan 2022 21:13:44 +0800
Subject: [PATCH 12/15] wip: runtime

---
 .../src/node/plugins/importAnalysisBuild.ts   | 95 ++++++++++---------
 1 file changed, 52 insertions(+), 43 deletions(-)

diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index 755cff77ea0f29..9fa63d66c7741d 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -42,45 +42,53 @@ function detectScriptRel() {
 }
 
 declare const scriptRel: string
-function preload(baseModule: () => Promise<{}>, deps?: string[]) {
+function preload(baseModule: () => Promise<{}>, splitDeps?: string[][]) {
   // @ts-ignore
-  if (!__VITE_IS_MODERN__ || !deps || deps.length === 0) {
+  if (!__VITE_IS_MODERN__ || !splitDeps || splitDeps.length === 0) {
     return baseModule()
   }
+  const LoadOneTime = (deps: string[]) => {
+    return Promise.all(
+      deps.map((dep) => {
+        const isCss = dep.endsWith('.css')
+        const cssSelector = isCss ? '[rel="stylesheet"]' : ''
+        // @ts-ignore check if the file is already preloaded by SSR markup
+        if (document.querySelector(`link[href="${dep}"]${cssSelector}`)) {
+          return
+        }
+        // @ts-ignore
+        const link = document.createElement('link')
+        // @ts-ignore
+        link.rel = isCss ? 'stylesheet' : scriptRel
+        if (!isCss) {
+          link.as = 'script'
+          link.crossOrigin = ''
+        }
+        link.href = dep
+        // @ts-ignore
+        document.head.appendChild(link)
+        if (isCss) {
+          return new Promise((res, rej) => {
+            link.addEventListener('load', res)
+            link.addEventListener('error', rej)
+          })
+        }
+      })
+    )
+  }
 
-  return Promise.all(
-    deps.map((dep) => {
-      // @ts-ignore
-      dep = `${base}${dep}`
-      // @ts-ignore
-      if (dep in seen) return
-      // @ts-ignore
-      seen[dep] = true
-      const isCss = dep.endsWith('.css')
-      const cssSelector = isCss ? '[rel="stylesheet"]' : ''
-      // @ts-ignore check if the file is already preloaded by SSR markup
-      if (document.querySelector(`link[href="${dep}"]${cssSelector}`)) {
-        return
-      }
-      // @ts-ignore
-      const link = document.createElement('link')
-      // @ts-ignore
-      link.rel = isCss ? 'stylesheet' : scriptRel
-      if (!isCss) {
-        link.as = 'script'
-        link.crossOrigin = ''
-      }
-      link.href = dep
-      // @ts-ignore
-      document.head.appendChild(link)
-      if (isCss) {
-        return new Promise((res, rej) => {
-          link.addEventListener('load', res)
-          link.addEventListener('error', rej)
-        })
-      }
-    })
-  ).then(() => baseModule())
+  splitDeps
+    .reduce((queue, deps) => {
+      const needLoadDep = deps
+        // @ts-ignore
+        .map((dep) => `${base}${dep}`)
+        // @ts-ignore
+        .filter((dep) => (dep in seen ? false : (seen[dep] = true)))
+      return needLoadDep.length
+        ? queue.then(() => LoadOneTime(needLoadDep))
+        : queue
+    }, Promise.resolve([]) as Promise<unknown[]>)
+    .then(() => baseModule())
 }
 
 /**
@@ -239,8 +247,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
 
       const cssModulesSet = cssModulesSets.get(config)!
       const isCss = (id: string) =>
-        cssModulesSet.has(id) || // is module css
-        isCSSRequest(id)
+        isCSSRequest(id) ? 2 : cssModulesSet.has(id) ? 1 : 0
 
       for (const file in bundle) {
         const chunk = bundle[file]
@@ -285,11 +292,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                   analyzed.add(filename)
                   const chunk = bundle[filename] as OutputChunk | undefined
                   if (chunk) {
-                    chunk.imports
-                      .sort((a, b) => +isCss(b) - +isCss(a))
-                      .forEach((moduleName) => {
-                        addDeps(moduleName)
-                      })
                     deps.add(chunk.fileName)
                     const cssFiles = chunkToEmittedCssFileMap.get(chunk)
                     if (cssFiles) {
@@ -297,6 +299,11 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                         deps.add(file)
                       })
                     }
+                    chunk.imports
+                      .sort((a, b) => isCss(b) - isCss(a))
+                      .forEach((moduleName) => {
+                        addDeps(moduleName)
+                      })
                   } else {
                     const removedPureCssFiles =
                       removedPureCssFilesCache.get(config)!
@@ -338,10 +345,12 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                   )
                 deps.forEach((dep) => {
                   if (!isCss(dep)) {
+                    loadOnceCache.push(dep)
                     pushSplitDepsLoadingOrder()
                     loadOnceCache = []
+                  } else {
+                    loadOnceCache.push(dep)
                   }
-                  loadOnceCache.push(dep)
                 })
                 pushSplitDepsLoadingOrder() // push last time load module
 

From aaf89ec49b40c86fa41cd20d1b90617a8f30a181 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Mon, 21 Feb 2022 20:58:17 +0800
Subject: [PATCH 13/15] feat: split module css chunk with in js chunk or is js
 chunk

---
 .../css/async-modules-and-css/black.js        |  2 +-
 .../css/async-modules-and-css/blue.js         |  2 +-
 .../{base.css => hotpink.css}                 |  2 +-
 packages/vite/src/node/plugins/css.ts         | 31 ++++++++++++++-----
 .../src/node/plugins/importAnalysisBuild.ts   | 27 +++++++++++++---
 5 files changed, 48 insertions(+), 16 deletions(-)
 rename packages/playground/css/async-modules-and-css/{base.css => hotpink.css} (78%)

diff --git a/packages/playground/css/async-modules-and-css/black.js b/packages/playground/css/async-modules-and-css/black.js
index 0c1ddfa45aa1c2..f45c0c0fc9dc2b 100644
--- a/packages/playground/css/async-modules-and-css/black.js
+++ b/packages/playground/css/async-modules-and-css/black.js
@@ -1,5 +1,5 @@
-import './base.css'
 import styles from './black.module.css'
+import './hotpink.css'
 
 const div = document.createElement('div')
 div.className = `base ${styles.black} async-modules-and-css-black`
diff --git a/packages/playground/css/async-modules-and-css/blue.js b/packages/playground/css/async-modules-and-css/blue.js
index cbfc061fddd059..be865427782cf3 100644
--- a/packages/playground/css/async-modules-and-css/blue.js
+++ b/packages/playground/css/async-modules-and-css/blue.js
@@ -1,4 +1,4 @@
-import './base.css'
+import './hotpink.css'
 import styles from './blue.module.css'
 
 const div = document.createElement('div')
diff --git a/packages/playground/css/async-modules-and-css/base.css b/packages/playground/css/async-modules-and-css/hotpink.css
similarity index 78%
rename from packages/playground/css/async-modules-and-css/base.css
rename to packages/playground/css/async-modules-and-css/hotpink.css
index c82e5de33f9bae..b10defd3d5b152 100644
--- a/packages/playground/css/async-modules-and-css/base.css
+++ b/packages/playground/css/async-modules-and-css/hotpink.css
@@ -1,4 +1,4 @@
-.base {
+.hotpink {
   font-size: 1rem;
   color: hotpink;
 }
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 0df21deac378fa..c4be7965654090 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -120,7 +120,13 @@ const cssModulesCache = new WeakMap<
   Map<string, Record<string, string>>
 >()
 
-export const cssModulesSets = new WeakMap<ResolvedConfig, Set<string>>()
+export const cssModulesSets = new WeakMap<
+  ResolvedConfig,
+  {
+    isJSChunk: Set<string> // css module is js chunk
+    inJSChunk: Set<string> // css module in js chunk
+  }
+>()
 
 export const chunkToEmittedCssFileMap = new WeakMap<
   RenderedChunk,
@@ -267,7 +273,8 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
   // styles initialization in buildStart causes a styling loss in watch
   const styles: Map<string, string> = new Map<string, string>()
   let pureCssChunks: Set<string>
-  let cssModulesSet: Set<string>
+  let cssModulesIsJSChunkSet: Set<string>
+  let cssModulesInJSChunkSet: Set<string>
 
   // when there are multiple rollup outputs and extracting CSS, only emit once,
   // since output formats have no effect on the generated CSS.
@@ -282,8 +289,12 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       pureCssChunks = new Set<string>()
       outputToExtractedCSSMap = new Map<NormalizedOutputOptions, string>()
 
-      cssModulesSet = new Set<string>()
-      cssModulesSets.set(config, cssModulesSet)
+      cssModulesIsJSChunkSet = new Set<string>()
+      cssModulesInJSChunkSet = new Set<string>()
+      cssModulesSets.set(config, {
+        isJSChunk: cssModulesIsJSChunkSet,
+        inJSChunk: cssModulesInJSChunkSet
+      })
       hasEmitted = false
     },
 
@@ -376,11 +387,15 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           chunkCSS += styles.get(id)
         }
       }
-      // if module css generate javescript module
-      // will only had module css file
-      if (moduleCssCount === ids.length) {
-        cssModulesSet.add(chunk.fileName)
+
+      if (moduleCssCount) {
+        if (moduleCssCount === ids.length) {
+          cssModulesIsJSChunkSet.add(chunk.fileName)
+        } else {
+          cssModulesInJSChunkSet.add(chunk.fileName)
+        }
       }
+
       if (!chunkCSS) {
         return null
       }
diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index 9fa63d66c7741d..8d18befba6ae17 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -245,9 +245,23 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
         return
       }
 
-      const cssModulesSet = cssModulesSets.get(config)!
-      const isCss = (id: string) =>
-        isCSSRequest(id) ? 2 : cssModulesSet.has(id) ? 1 : 0
+      const {
+        isJSChunk: cssModulesIsJSChunkSets,
+        inJSChunk: cssModulesInJSChunkSets
+      } = cssModulesSets.get(config)!
+
+      // css > module css is chunk > module css in chunk > other
+      const getCssPriority = (id: string) => {
+        if (isCSSRequest(id)) {
+          return 3
+        } else if (cssModulesIsJSChunkSets.has(id)) {
+          return 2
+        } else if (cssModulesInJSChunkSets.has(id)) {
+          return 1
+        } else {
+          return 0
+        }
+      }
 
       for (const file in bundle) {
         const chunk = bundle[file]
@@ -299,8 +313,9 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                         deps.add(file)
                       })
                     }
+
                     chunk.imports
-                      .sort((a, b) => isCss(b) - isCss(a))
+                      .sort((a, b) => getCssPriority(b) - getCssPriority(a))
                       .forEach((moduleName) => {
                         addDeps(moduleName)
                       })
@@ -344,7 +359,9 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                     `[${loadOnceCache.map((d) => JSON.stringify(d)).join(',')}]`
                   )
                 deps.forEach((dep) => {
-                  if (!isCss(dep)) {
+                  // js will load depth
+                  // so if js file will load in next list
+                  if (getCssPriority(dep) <= 1) {
                     loadOnceCache.push(dep)
                     pushSplitDepsLoadingOrder()
                     loadOnceCache = []

From 8123465cef3b6fc3ba859420671463b8305a41e1 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Mon, 21 Feb 2022 22:52:50 +0800
Subject: [PATCH 14/15] chore: code

---
 packages/vite/src/node/plugins/importAnalysisBuild.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index 8d18befba6ae17..23124bd721fe5b 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -42,12 +42,14 @@ function detectScriptRel() {
 }
 
 declare const scriptRel: string
+declare const base: string
+declare const seen: Record<string, boolean>
 function preload(baseModule: () => Promise<{}>, splitDeps?: string[][]) {
   // @ts-ignore
   if (!__VITE_IS_MODERN__ || !splitDeps || splitDeps.length === 0) {
     return baseModule()
   }
-  const LoadOneTime = (deps: string[]) => {
+  const LoadModules = (deps: string[]) => {
     return Promise.all(
       deps.map((dep) => {
         const isCss = dep.endsWith('.css')
@@ -80,12 +82,10 @@ function preload(baseModule: () => Promise<{}>, splitDeps?: string[][]) {
   splitDeps
     .reduce((queue, deps) => {
       const needLoadDep = deps
-        // @ts-ignore
         .map((dep) => `${base}${dep}`)
-        // @ts-ignore
         .filter((dep) => (dep in seen ? false : (seen[dep] = true)))
       return needLoadDep.length
-        ? queue.then(() => LoadOneTime(needLoadDep))
+        ? queue.then(() => LoadModules(needLoadDep))
         : queue
     }, Promise.resolve([]) as Promise<unknown[]>)
     .then(() => baseModule())

From 539091d5d52bee0ee1674f12b51fec1431f18384 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Mon, 21 Feb 2022 23:16:25 +0800
Subject: [PATCH 15/15] feat: test

---
 packages/playground/css/__tests__/css.spec.ts | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
index 07357d95a00640..b228536da1c4a2 100644
--- a/packages/playground/css/__tests__/css.spec.ts
+++ b/packages/playground/css/__tests__/css.spec.ts
@@ -293,19 +293,24 @@ test('treeshaken async chunk', async () => {
 })
 
 test('async css modules', async () => {
-  const blue = await page.$('.async-modules-blue')
-  const red = await page.$('.async-modules-red')
   const green = await page.$('.async-modules-green')
   const blue2 = await page.$('.async-modules-blue2')
+  const red = await page.$('.async-modules-red')
+  const blue = await page.$('.async-modules-blue')
+
+  const _black = await page.$('.async-modules-and-css-black')
+  const _blue = await page.$('.async-modules-and-css-blue')
 
-  expect(await getColor(blue)).toBe('blue')
-  expect(await getColor(red)).toBe('red')
   expect(await getColor(green)).toBe('green')
+  expect(await getColor(blue2)).toBe('blue')
+
+  expect(await getColor(_black)).toBe('black')
+  expect(await getColor(_blue)).toBe('blue')
+
   // because that loaded blue > red first
   // and can't change the style order
-  expect(await getColor(blue2)).toBe('red')
-  expect(await getColor(blue)).toBe('blue')
-  expect(await getColor(red)).toBe('red')
+  expect(await getColor(blue)).toBe('black')
+  expect(await getColor(red)).toBe('black')
 })
 
 test('async css modules with normal css', async () => {