test(rsc): add more lazy CSS test cases

Add test cases to document current behavior:

Case 1: client -> lazy client -> CSS (two steps)
  - @js: CSS loads after hydration (FOUC)
  - @nojs: CSS not applied

Case 2: server -> lazy client with CSS (one step)
  - @js: works
  - @nojs: works (CSS included in SSR)

Case 3: server -> lazy server with CSS
  - @js: CSS never loads
  - @nojs: CSS not applied

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

Author: hi-ogawa

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

@@ -1047,6 +1047,8 @@ function defineTest(f: Fixture) {
 
   // TODO: lazy client component CSS is not yet supported
   // https://github.com/wakujs/waku/issues/1911
+
+  // Case 1: client component -> lazy client component -> CSS (two steps)
   test('lazy client css @js', async ({ page }) => {
     await page.goto(f.url())
     await waitForHydration(page)
@@ -1070,6 +1072,56 @@ function defineTest(f: Fixture) {
     )
   })
 
+  // Case 2: server component -> lazy client component with CSS (one step)
+  // This works because the client component CSS is tracked
+  test('lazy client css direct @js', async ({ page }) => {
+    await page.goto(f.url())
+    await waitForHydration(page)
+    await expect(page.locator('.test-lazy-client-css-direct')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
+  })
+
+  testNoJs('lazy client css direct @nojs', async ({ page }) => {
+    await page.goto(f.url())
+    await expect(page.locator('.test-lazy-client-css-direct')).toHaveText(
+      'lazy-client-css-direct',
+    )
+    // CSS is included in SSR for direct lazy client components
+    await expect(page.locator('.test-lazy-client-css-direct')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
+  })
+
+  // Case 3: server component -> lazy server component with CSS
+  // CSS from lazy server components is not supported
+  test('lazy server css @js', async ({ page }) => {
+    await page.goto(f.url())
+    await waitForHydration(page)
+    await expect(page.locator('.test-lazy-server-css')).toHaveText(
+      'lazy-server-css',
+    )
+    // CSS is never loaded (not even via JS)
+    await expect(page.locator('.test-lazy-server-css')).toHaveCSS(
+      'color',
+      'rgb(0, 0, 0)',
+    )
+  })
+
+  testNoJs('lazy server css @nojs', async ({ page }) => {
+    await page.goto(f.url())
+    await expect(page.locator('.test-lazy-server-css')).toHaveText(
+      'lazy-server-css',
+    )
+    // CSS from lazy server component is not included in SSR
+    await expect(page.locator('.test-lazy-server-css')).toHaveCSS(
+      'color',
+      'rgb(0, 0, 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-direct.css

@@ -0,0 +1,3 @@
+.test-lazy-client-css-direct {
+  color: rgb(255, 165, 0);
+}

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

@@ -0,0 +1,10 @@
+'use client'
+
+// Direct case: lazy client component with CSS (one step)
+import './client-direct.css'
+
+export function TestLazyClientCssDirect() {
+  return (
+    <span className="test-lazy-client-css-direct">lazy-client-css-direct</span>
+  )
+}

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

@@ -0,0 +1,3 @@
+.test-lazy-server-css {
+  color: rgb(255, 165, 0);
+}

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

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

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

@@ -0,0 +1,31 @@
+import * as React from 'react'
+
+// Server component lazy-loading a client component with CSS directly
+const LazyClientDirect = React.lazy(() =>
+  import('./client-direct').then((m) => ({
+    default: m.TestLazyClientCssDirect,
+  })),
+)
+
+// Server component lazy-loading a server component with CSS
+const LazyServerDep = React.lazy(() => import('./lazy-server-dep'))
+
+export function TestLazyClientCssServer() {
+  return (
+    <div data-testid="test-lazy-client-css-server">
+      <React.Suspense fallback={<span>lazy-loading...</span>}>
+        <LazyClientDirect />
+      </React.Suspense>
+    </div>
+  )
+}
+
+export function TestLazyServerCss() {
+  return (
+    <div data-testid="test-lazy-server-css">
+      <React.Suspense fallback={<span>lazy-loading...</span>}>
+        <LazyServerDep />
+      </React.Suspense>
+    </div>
+  )
+}

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

@@ -35,6 +35,10 @@ 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 {
+  TestLazyClientCssServer,
+  TestLazyServerCss,
+} from './lazy-client-css/server'
 import { TestModuleInvalidationServer } from './module-invalidation/server'
 import { TestPayloadServer } from './payload/server'
 import { TestReactCache } from './react-cache/server'
@@ -103,6 +107,8 @@ export function Root(props: { url: URL }) {
         <TestModuleInvalidationServer />
         <TestBrowserOnly />
         <TestLazyClientCss />
+        <TestLazyClientCssServer />
+        <TestLazyServerCss />
         <TestUseCache />
         <TestReactCache url={props.url} />
         <TestCssQueries />