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')