test: feat more test

packages/playground/css/__tests__/css.spec.ts

@@ -287,9 +287,13 @@ test('treeshaken async chunk', async () => {
 test('async css modules', async () => {
   const blue = await page.$('.async-modules-blue')
   const red = await page.$('.async-modules-red')
+  const green = await page.$('.async-modules-green')
+  const blue2 = await page.$('.async-modules-blue2')
 
   expect(await getColor(blue)).toBe('blue')
   expect(await getColor(red)).toBe('red')
+  expect(await getColor(green)).toBe('green')
+  expect(await getColor(blue2)).toBe('blue')
 })
 
 test('PostCSS dir-dependency', async () => {

packages/playground/css/async-modules/base2.js

@@ -0,0 +1,10 @@
+import styles from './red.module.css'
+
+export function baseAsync(className, color) {
+  const div = document.createElement('div')
+  div.className = `${styles.red} ${className} async-modules-${color}`
+  document.body.appendChild(div)
+  div.textContent = `async css modules (${color}) ${
+    getComputedStyle(div).color
+  }`
+}

packages/playground/css/async-modules/green.js

@@ -0,0 +1,6 @@
+import { baseAsync } from './base2'
+import green from './green.module.css'
+import blue from './blue.module.css'
+
+baseAsync(green.green, 'green')
+baseAsync(blue.blue, 'blue2')

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

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

packages/playground/css/main.js

@@ -72,3 +72,4 @@ text('.inlined-code', inlined)
 // async css modules
 import('./async-modules/blue')
 import('./async-modules/red')
+import('./async-modules/green')