diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index d78e4c3be77ba7..5f590d1f79030e 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -418,10 +418,12 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                   const chunk = bundle[filename] as OutputChunk | undefined
                   if (chunk) {
                     deps.add(chunk.fileName)
+                    chunk.imports.forEach(addDeps)
+                    // Ensure that the css imported by current chunk is loaded after the dependencies.
+                    // So the style of current chunk won't be overwritten unexpectedly.
                     chunk.viteMetadata.importedCss.forEach((file) => {
                       deps.add(file)
                     })
-                    chunk.imports.forEach(addDeps)
                   } else {
                     const removedPureCssFiles =
                       removedPureCssFilesCache.get(config)!
diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
index f46e6d0bfdbabc..689e9c925f644a 100644
--- a/playground/css/__tests__/css.spec.ts
+++ b/playground/css/__tests__/css.spec.ts
@@ -9,7 +9,8 @@ import {
   page,
   removeFile,
   serverLogs,
-  untilUpdated
+  untilUpdated,
+  withRetry
 } from '~utils'
 
 // note: tests should retrieve the element at the beginning of test and reuse it
@@ -455,3 +456,17 @@ test.runIf(isBuild)('warning can be suppressed by esbuild.logOverride', () => {
     expect(log).not.toMatch('unsupported-css-property')
   })
 })
+
+// NOTE: the match inline snapshot should generate by build mode
+test('async css order', async () => {
+  await withRetry(async () => {
+    expect(await getColor('.async-green')).toMatchInlineSnapshot('"green"')
+    expect(await getColor('.async-blue')).toMatchInlineSnapshot('"blue"')
+  }, true)
+})
+
+test('async css order with css modules', async () => {
+  await withRetry(async () => {
+    expect(await getColor('.modules-pink')).toMatchInlineSnapshot('"pink"')
+  }, true)
+})
diff --git a/playground/css/async/async-1.css b/playground/css/async/async-1.css
new file mode 100644
index 00000000000000..9af99eec7843fe
--- /dev/null
+++ b/playground/css/async/async-1.css
@@ -0,0 +1,3 @@
+.async-blue {
+  color: blue;
+}
diff --git a/playground/css/async/async-1.js b/playground/css/async/async-1.js
new file mode 100644
index 00000000000000..8187dc3b9307e7
--- /dev/null
+++ b/playground/css/async/async-1.js
@@ -0,0 +1,4 @@
+import { createButton } from './base'
+import './async-1.css'
+
+createButton('async-blue')
diff --git a/playground/css/async/async-2.css b/playground/css/async/async-2.css
new file mode 100644
index 00000000000000..941e034da37389
--- /dev/null
+++ b/playground/css/async/async-2.css
@@ -0,0 +1,3 @@
+.async-green {
+  color: green;
+}
diff --git a/playground/css/async/async-2.js b/playground/css/async/async-2.js
new file mode 100644
index 00000000000000..157eafdc4bff79
--- /dev/null
+++ b/playground/css/async/async-2.js
@@ -0,0 +1,4 @@
+import { createButton } from './base'
+import './async-2.css'
+
+createButton('async-green')
diff --git a/playground/css/async/async-3.js b/playground/css/async/async-3.js
new file mode 100644
index 00000000000000..b5dd6da1f326d2
--- /dev/null
+++ b/playground/css/async/async-3.js
@@ -0,0 +1,4 @@
+import { createButton } from './base'
+import styles from './async-3.module.css'
+
+createButton(`${styles['async-pink']} modules-pink`)
diff --git a/playground/css/async/async-3.module.css b/playground/css/async/async-3.module.css
new file mode 100644
index 00000000000000..7f43f88d754252
--- /dev/null
+++ b/playground/css/async/async-3.module.css
@@ -0,0 +1,3 @@
+.async-pink {
+  color: pink;
+}
diff --git a/playground/css/async/base.css b/playground/css/async/base.css
new file mode 100644
index 00000000000000..cc6f88ddccdf10
--- /dev/null
+++ b/playground/css/async/base.css
@@ -0,0 +1,3 @@
+.btn {
+  color: black;
+}
diff --git a/playground/css/async/base.js b/playground/css/async/base.js
new file mode 100644
index 00000000000000..1a409d7e32e4c9
--- /dev/null
+++ b/playground/css/async/base.js
@@ -0,0 +1,8 @@
+import './base.css'
+
+export function createButton(className) {
+  const button = document.createElement('button')
+  button.className = `btn ${className}`
+  document.body.appendChild(button)
+  button.textContent = `button ${getComputedStyle(button).color}`
+}
diff --git a/playground/css/async/index.js b/playground/css/async/index.js
new file mode 100644
index 00000000000000..20d6975ab9d23a
--- /dev/null
+++ b/playground/css/async/index.js
@@ -0,0 +1,3 @@
+import('./async-1.js')
+import('./async-2.js')
+import('./async-3.js')
diff --git a/playground/css/main.js b/playground/css/main.js
index 39ccd916467faf..4e1ed37754968f 100644
--- a/playground/css/main.js
+++ b/playground/css/main.js
@@ -109,3 +109,5 @@ document
   .classList.add(aliasModule.aliasedModule)
 
 import './unsupported.css'
+
+import './async/index'