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/async-chunk-css-order/__tests__/async-chunk-css-order.spec.ts b/playground/async-chunk-css-order/__tests__/async-chunk-css-order.spec.ts
new file mode 100644
index 00000000000000..d6036db2c58b66
--- /dev/null
+++ b/playground/async-chunk-css-order/__tests__/async-chunk-css-order.spec.ts
@@ -0,0 +1,11 @@
+import { describe, expect, test } from 'vitest'
+import { getColor, isBuild, page } from '~utils'
+
+describe.runIf(isBuild)('build', () => {
+  test('should apply correct style', async () => {
+    const greenButton = await page.$('.green')
+    const blueButton = await page.$('.blue')
+    expect(await getColor(greenButton)).toBe('green')
+    expect(await getColor(blueButton)).toBe('blue')
+  })
+})
diff --git a/playground/async-chunk-css-order/components/BlueButton.css b/playground/async-chunk-css-order/components/BlueButton.css
new file mode 100644
index 00000000000000..659edcf511a928
--- /dev/null
+++ b/playground/async-chunk-css-order/components/BlueButton.css
@@ -0,0 +1,3 @@
+.blue {
+  color: blue;
+}
diff --git a/playground/async-chunk-css-order/components/BlueButton.jsx b/playground/async-chunk-css-order/components/BlueButton.jsx
new file mode 100644
index 00000000000000..9ad64ae37cb699
--- /dev/null
+++ b/playground/async-chunk-css-order/components/BlueButton.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import { Button } from './Button'
+import './BlueButton.css'
+
+export function BlueButton() {
+  return <Button className="blue">I'm a blue button</Button>
+}
diff --git a/playground/async-chunk-css-order/components/Button.css b/playground/async-chunk-css-order/components/Button.css
new file mode 100644
index 00000000000000..cc6f88ddccdf10
--- /dev/null
+++ b/playground/async-chunk-css-order/components/Button.css
@@ -0,0 +1,3 @@
+.btn {
+  color: black;
+}
diff --git a/playground/async-chunk-css-order/components/Button.jsx b/playground/async-chunk-css-order/components/Button.jsx
new file mode 100644
index 00000000000000..38ef62af47b275
--- /dev/null
+++ b/playground/async-chunk-css-order/components/Button.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import './Button.css'
+
+export function Button({ children, className }) {
+  return (
+    <button className={`btn ${className}`} type="button">
+      {children}
+    </button>
+  )
+}
diff --git a/playground/async-chunk-css-order/components/GreenButton.css b/playground/async-chunk-css-order/components/GreenButton.css
new file mode 100644
index 00000000000000..fa95e11ba9ef9a
--- /dev/null
+++ b/playground/async-chunk-css-order/components/GreenButton.css
@@ -0,0 +1,3 @@
+.green {
+  color: green;
+}
diff --git a/playground/async-chunk-css-order/components/GreenButton.jsx b/playground/async-chunk-css-order/components/GreenButton.jsx
new file mode 100644
index 00000000000000..c08a037a1ae1e3
--- /dev/null
+++ b/playground/async-chunk-css-order/components/GreenButton.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import { Button } from './Button'
+import './GreenButton.css'
+
+export function GreenButton() {
+  return <Button className="green">I'm a green button</Button>
+}
diff --git a/playground/async-chunk-css-order/index.html b/playground/async-chunk-css-order/index.html
new file mode 100644
index 00000000000000..089cfa7bdca412
--- /dev/null
+++ b/playground/async-chunk-css-order/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+
+  <body>
+    <div id="green"></div>
+    <div id="blue"></div>
+    <script type="module" src="/main.jsx"></script>
+  </body>
+</html>
diff --git a/playground/async-chunk-css-order/main.jsx b/playground/async-chunk-css-order/main.jsx
new file mode 100644
index 00000000000000..7251566ab855f1
--- /dev/null
+++ b/playground/async-chunk-css-order/main.jsx
@@ -0,0 +1,10 @@
+import { render } from 'react-dom'
+import React from 'react'
+
+import('./components/GreenButton').then(({ GreenButton }) => {
+  render(<GreenButton />, document.querySelector('#green'))
+})
+
+import('./components/BlueButton').then(({ BlueButton }) => {
+  render(<BlueButton />, document.querySelector('#blue'))
+})
diff --git a/playground/async-chunk-css-order/package.json b/playground/async-chunk-css-order/package.json
new file mode 100644
index 00000000000000..15b60d811dfcd9
--- /dev/null
+++ b/playground/async-chunk-css-order/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "test-async-chunk-css-order",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}
diff --git a/playground/async-chunk-css-order/vite.config.js b/playground/async-chunk-css-order/vite.config.js
new file mode 100644
index 00000000000000..4ba52ba2c8df67
--- /dev/null
+++ b/playground/async-chunk-css-order/vite.config.js
@@ -0,0 +1 @@
+module.exports = {}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1d459cc2893bd6..db16dcc3e5a8fb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -365,6 +365,14 @@ importers:
   playground/assets-sanitize:
     specifiers: {}
 
+  playground/async-chunk-css-order:
+    specifiers:
+      react: ^18.2.0
+      react-dom: ^18.2.0
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+
   playground/backend-integration:
     specifiers:
       fast-glob: ^3.2.11