Add test for CSS

packages/next-swc/crates/next-dev-tests/test-harness/harness.ts

@@ -85,16 +85,28 @@ export function wait(ms: number): Promise<void> {
   })
 }
 
-async function waitForPath(contentWindow: Window, path: string): Promise<void> {
+export async function waitForCondition(
+  predicate: () => boolean,
+  timeout: number | null = null
+): Promise<void> {
+  const start = Date.now()
   while (true) {
-    if (contentWindow.location.pathname === path) {
+    if (predicate()) {
       break
     }
 
     await wait(1)
+
+    if (timeout != null && Date.now() - start > timeout) {
+      throw new Error('Timed out waiting for condition')
+    }
   }
 }
 
+async function waitForPath(contentWindow: Window, path: string): Promise<void> {
+  return waitForCondition(() => contentWindow.location.pathname === path)
+}
+
 /**
  * Loads a new page in an iframe and waits for it to load.
  */

packages/next-swc/crates/next-dev-tests/tests/integration/next/hmr/css/input/pages/index.tsx

@@ -0,0 +1,43 @@
+import { useRef } from 'react'
+import { Harness, useTestHarness } from '@turbo/pack-test-harness'
+
+export default function Page() {
+  const iframeRef = useRef<HTMLIFrameElement | null>(null)
+
+  useTestHarness((harness) => runTests(harness, iframeRef.current!))
+
+  return (
+    <iframe style={{ width: 800, height: 600 }} src="/page" ref={iframeRef} />
+  )
+}
+
+function runTests(harness: Harness, iframe: HTMLIFrameElement) {
+  // These tests requires a longer timeout because we're rendering another page as well.
+  const TIMEOUT = 20000
+
+  it(
+    'updates the page without reloading',
+    async () => {
+      await harness.waitForLoaded(iframe)
+      await harness.waitForHydration(iframe, '/page')
+
+      iframe.contentWindow!.__NEXT_TEST_HMR = true
+
+      let element = iframe.contentDocument!.getElementById('element')!
+      expect(element).not.toBeNull()
+      expect(getComputedStyle(element).color).toBe('rgb(255, 0, 0)')
+      console.log(getComputedStyle(element).color)
+
+      await harness.changeFile('pages/page.module.css', 'red', 'blue')
+      await harness.waitForCondition(
+        () => getComputedStyle(element).color === 'rgb(0, 0, 255)'
+      )
+
+      console.log(getComputedStyle(element).color)
+
+      // Make sure the page didn't reload.
+      expect(iframe.contentWindow!.__NEXT_TEST_HMR).toBe(true)
+    },
+    TIMEOUT
+  )
+}

packages/next-swc/crates/next-dev-tests/tests/integration/next/hmr/css/input/pages/page.module.css

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

packages/next-swc/crates/next-dev-tests/tests/integration/next/hmr/css/input/pages/page.tsx

@@ -0,0 +1,12 @@
+import { useTestHarness } from '@turbo/pack-test-harness'
+import styles from './page.module.css'
+
+export default function Page() {
+  useTestHarness((harness) => harness.markAsHydrated())
+
+  return (
+    <div id="element" className={styles.page}>
+      Hello Worls
+    </div>
+  )
+}