feat: add test case and remove react

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

playground/async-chunk-css-order/components/BlueButton.css → playground/css/async/async-1.css

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

playground/css/async/async-1.js

@@ -0,0 +1,4 @@
+import { createButton } from './base'
+import './async-1.css'
+
+createButton('async-blue')

playground/async-chunk-css-order/components/GreenButton.css → playground/css/async/async-2.css

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

playground/css/async/async-2.js

@@ -0,0 +1,4 @@
+import { createButton } from './base'
+import './async-2.css'
+
+createButton('async-green')

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

playground/css/async/async-3.module.css

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

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

playground/css/async/index.js

@@ -0,0 +1,3 @@
+import('./async-1.js')
+import('./async-2.js')
+import('./async-3.js')

playground/css/index.html

@@ -18,6 +18,11 @@ <h1>CSS</h1>
   <pre class="imported-css"></pre>
   <pre class="imported-css-glob"></pre>
   <pre class="imported-css-globEager"></pre>
+  <div>
+    <p>import.meta.glob import css</p>
+    <span class="dir-import">dir-import</span>
+    <span class="dir-import-2">dir-import-2</span>
+  </div>
 
   <p class="postcss">
     <span class="nesting">PostCSS nesting plugin: this should be pink</span>

playground/css/main.js

@@ -109,3 +109,5 @@ document
   .classList.add(aliasModule.aliasedModule)
 
 import './unsupported.css'
+
+import './async/index'