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
deleted file mode 100644
index d6036db2c58b66..00000000000000
--- a/playground/async-chunk-css-order/__tests__/async-chunk-css-order.spec.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-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.jsx b/playground/async-chunk-css-order/components/BlueButton.jsx
deleted file mode 100644
index 9ad64ae37cb699..00000000000000
--- a/playground/async-chunk-css-order/components/BlueButton.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react'
-import { Button } from './Button'
-import './BlueButton.css'
-
-export function BlueButton() {
- return
-}
diff --git a/playground/async-chunk-css-order/components/Button.jsx b/playground/async-chunk-css-order/components/Button.jsx
deleted file mode 100644
index 38ef62af47b275..00000000000000
--- a/playground/async-chunk-css-order/components/Button.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import './Button.css'
-
-export function Button({ children, className }) {
- return (
-
- )
-}
diff --git a/playground/async-chunk-css-order/components/GreenButton.jsx b/playground/async-chunk-css-order/components/GreenButton.jsx
deleted file mode 100644
index c08a037a1ae1e3..00000000000000
--- a/playground/async-chunk-css-order/components/GreenButton.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react'
-import { Button } from './Button'
-import './GreenButton.css'
-
-export function GreenButton() {
- return
-}
diff --git a/playground/async-chunk-css-order/index.html b/playground/async-chunk-css-order/index.html
deleted file mode 100644
index 089cfa7bdca412..00000000000000
--- a/playground/async-chunk-css-order/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
-
-
- Vite App
-
-
-
-
-
-
-
-
diff --git a/playground/async-chunk-css-order/main.jsx b/playground/async-chunk-css-order/main.jsx
deleted file mode 100644
index 7251566ab855f1..00000000000000
--- a/playground/async-chunk-css-order/main.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { render } from 'react-dom'
-import React from 'react'
-
-import('./components/GreenButton').then(({ GreenButton }) => {
- render(, document.querySelector('#green'))
-})
-
-import('./components/BlueButton').then(({ BlueButton }) => {
- render(, document.querySelector('#blue'))
-})
diff --git a/playground/async-chunk-css-order/package.json b/playground/async-chunk-css-order/package.json
deleted file mode 100644
index 15b60d811dfcd9..00000000000000
--- a/playground/async-chunk-css-order/package.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
- "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
deleted file mode 100644
index 4ba52ba2c8df67..00000000000000
--- a/playground/async-chunk-css-order/vite.config.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = {}
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/async-chunk-css-order/components/BlueButton.css b/playground/css/async/async-1.css
similarity index 54%
rename from playground/async-chunk-css-order/components/BlueButton.css
rename to playground/css/async/async-1.css
index 659edcf511a928..9af99eec7843fe 100644
--- a/playground/async-chunk-css-order/components/BlueButton.css
+++ b/playground/css/async/async-1.css
@@ -1,3 +1,3 @@
-.blue {
+.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/async-chunk-css-order/components/GreenButton.css b/playground/css/async/async-2.css
similarity index 54%
rename from playground/async-chunk-css-order/components/GreenButton.css
rename to playground/css/async/async-2.css
index fa95e11ba9ef9a..941e034da37389 100644
--- a/playground/async-chunk-css-order/components/GreenButton.css
+++ b/playground/css/async/async-2.css
@@ -1,3 +1,3 @@
-.green {
+.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/async-chunk-css-order/components/Button.css b/playground/css/async/base.css
similarity index 100%
rename from playground/async-chunk-css-order/components/Button.css
rename to playground/css/async/base.css
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/index.html b/playground/css/index.html
index 61d0c2edce5bb8..1d708160574ca1 100644
--- a/playground/css/index.html
+++ b/playground/css/index.html
@@ -18,6 +18,11 @@ CSS
+
+
import.meta.glob import css
+
dir-import
+
dir-import-2
+
PostCSS nesting plugin: this should be pink
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'