test: Add failing tests for async css modules

Author: IanVS

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

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
+  }`
+}

packages/playground/css/async-modules/black.module.css

@@ -0,0 +1,3 @@
+.black {
+  color: black;
+}

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

packages/playground/css/async-modules/blue.module.css

@@ -0,0 +1,3 @@
+.blue {
+  color: blue;
+}

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

packages/playground/css/async-modules/red.module.css

@@ -0,0 +1,3 @@
+.red {
+  color: red;
+}

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