test(rsc): add lazy client CSS reproduction

Add reproduction for SSR-ing lazy client component which imports CSS.
This is a test case for investigating FOUC (flash of unstyled content)
when lazy-loaded client components import CSS files.

Ref: wakujs/waku#1911 (comment)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: hi-ogawa

packages/plugin-rsc/e2e/basic.test.ts

@@ -1045,6 +1045,23 @@ function defineTest(f: Fixture) {
     )
   })
 
+  test('lazy client css @js', async ({ page }) => {
+    await page.goto(f.url())
+    await waitForHydration(page)
+    await expect(page.locator('.test-lazy-client-css')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
+  })
+
+  testNoJs('lazy client css @nojs', async ({ page }) => {
+    await page.goto(f.url())
+    await expect(page.locator('.test-lazy-client-css')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
+  })
+
   test('tailwind @js', async ({ page }) => {
     await page.goto(f.url())
     await waitForHydration(page)

packages/plugin-rsc/examples/basic/src/routes/lazy-client-css/client.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import * as React from 'react'
+
+// React.lazy for SSR-ing lazy client component
+const LazyDep = React.lazy(() => import('./lazy-dep'))
+
+export function TestLazyClientCss() {
+  return (
+    <div data-testid="test-lazy-client-css">
+      <React.Suspense fallback={<span>lazy-loading...</span>}>
+        <LazyDep />
+      </React.Suspense>
+    </div>
+  )
+}

packages/plugin-rsc/examples/basic/src/routes/lazy-client-css/lazy-dep.css

@@ -0,0 +1,5 @@
+/* css imported by lazy client component */
+
+.test-lazy-client-css {
+  color: rgb(255, 165, 0);
+}

packages/plugin-rsc/examples/basic/src/routes/lazy-client-css/lazy-dep.tsx

@@ -0,0 +1,5 @@
+import './lazy-dep.css'
+
+export default function LazyDep() {
+  return <span className="test-lazy-client-css">lazy-client-css</span>
+}

packages/plugin-rsc/examples/basic/src/routes/root.tsx

@@ -34,6 +34,7 @@ import { TestHmrSwitchClient } from './hmr-switch/client'
 import { TestHmrSwitchServer } from './hmr-switch/server'
 import { TestHydrationMismatch } from './hydration-mismatch/server'
 import { TestImportMetaGlob } from './import-meta-glob/server'
+import { TestLazyClientCss } from './lazy-client-css/client'
 import { TestModuleInvalidationServer } from './module-invalidation/server'
 import { TestPayloadServer } from './payload/server'
 import { TestReactCache } from './react-cache/server'
@@ -101,6 +102,7 @@ export function Root(props: { url: URL }) {
         <TestActionStateServer />
         <TestModuleInvalidationServer />
         <TestBrowserOnly />
+        <TestLazyClientCss />
         <TestUseCache />
         <TestReactCache url={props.url} />
         <TestCssQueries />