test: add test case for shared dependency with global CSS (issue #9278)

This test validates the scenario from issue #9278 where two async chunks
(blue.js and black.js) share a common dependency (make-text.js), and both
import global CSS (hotpink.css) before their module CSS files.

The test ensures that module CSS correctly takes precedence over global CSS
in the cascade order, matching the behavior of build mode.

Addresses feedback from @IanVS

Author: aunak

playground/css/__tests__/tests.ts

@@ -521,6 +521,19 @@ export const tests = (isLightningCSS: boolean) => {
     await expect.poll(() => getBgColor('.diamond-test')).toBe('yellow')
   })
 
+  // Test for issue #9278: Shared function with global CSS before module CSS
+  test('async css order with shared dependency and global CSS', async () => {
+    // Both blue.js and black.js import make-text.js (shared dependency)
+    // Both import hotpink.css before their own module CSS
+    // Expected: hotpink.css should load first, then blue/black module CSS should win
+    // The elements have both .hotpink and their module class
+    const blueEl = await page.locator('text=async blue').first()
+    const blackEl = await page.locator('text=async black').first()
+
+    await expect.poll(() => getColor(blueEl)).toBe('blue')
+    await expect.poll(() => getColor(blackEl)).toBe('black')
+  })
+
   test('@import scss', async () => {
     expect(await getColor('.at-import-scss')).toBe('red')
   })

playground/css/async/black.js

@@ -0,0 +1,5 @@
+import { makeText } from './make-text'
+import './hotpink.css'
+import styles from './black.module.css'
+
+makeText(styles['black-module'], 'async black')

playground/css/async/black.module.css

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

playground/css/async/blue.js

@@ -0,0 +1,5 @@
+import { makeText } from './make-text'
+import './hotpink.css'
+import styles from './blue.module.css'
+
+makeText(styles['blue-module'], 'async blue')

playground/css/async/blue.module.css

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

playground/css/async/hotpink.css

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

playground/css/async/index.js

@@ -2,3 +2,5 @@ import('./async-1.js')
 import('./async-2.js')
 import('./async-3.js')
 import('./diamond.js')
+import('./blue.js')
+import('./black.js')

playground/css/async/make-text.js

@@ -0,0 +1,6 @@
+export function makeText(className, content) {
+  const div = document.createElement('div')
+  div.className = `base hotpink ${className}`
+  document.body.appendChild(div)
+  div.textContent = `${content} ${getComputedStyle(div).color}`
+}