test: Add test for mixed css and css modules

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

@@ -292,6 +292,14 @@ test('async css modules', async () => {
   expect(await getColor(red)).toBe('red')
 })
 
+test('async css modules with normal css', async () => {
+  const black = await page.$('.async-modules-and-css-black')
+  const blue = await page.$('.async-modules-and-css-blue')
+
+  expect(await getColor(black)).toBe('black')
+  expect(await getColor(blue)).toBe('blue')
+})
+
 test('PostCSS dir-dependency', async () => {
   const el1 = await page.$('.dir-dep')
   const el2 = await page.$('.dir-dep-2')

packages/playground/css/async-modules-and-css/base.css

@@ -0,0 +1,4 @@
+.base {
+  font-size: 1rem;
+  color: hotpink;
+}

packages/playground/css/async-modules-and-css/black.js

@@ -0,0 +1,9 @@
+import './base.css'
+import styles from './black.module.css'
+
+const div = document.createElement('div')
+div.className = `base ${styles.black} async-modules-and-css-black`
+document.body.appendChild(div)
+div.textContent = `async css modules and normal css (black) ${
+  getComputedStyle(div).color
+}`

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

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

packages/playground/css/async-modules-and-css/blue.js

@@ -0,0 +1,9 @@
+import './base.css'
+import styles from './blue.module.css'
+
+const div = document.createElement('div')
+div.className = `base ${styles.blue} async-modules-and-css-blue`
+document.body.appendChild(div)
+div.textContent = `async css modules and normal css (blue) ${
+  getComputedStyle(div).color
+}`

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

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

packages/playground/css/main.js

@@ -72,3 +72,7 @@ text('.inlined-code', inlined)
 // async css modules
 import('./async-modules/blue')
 import('./async-modules/red')
+
+// async css module with normal css
+import('./async-modules-and-css/black')
+import('./async-modules-and-css/blue')