CSS from lazy client components not included in SSR (FOUC)

Description

CSS from lazy-loaded client components is not included in the SSR response, causing a flash of unstyled content (FOUC).

Test Cases (PR #1056)

Case 1: client → lazy client → CSS

// client-to-client.tsx
'use client'
import * as React from 'react'

const LazyChild = React.lazy(() => import('./client-to-client-child'))

export function TestLazyCssClientToClient() {
  return (
    <React.Suspense fallback={<span>loading...</span>}>
      <LazyChild />
    </React.Suspense>
  )
}

// client-to-client-child.tsx
import './client-to-client-child.css'
export default function ClientToClientChild() {
  return <span className="test-lazy-css-client-to-client">content</span>
}

Issue: CSS is not included in SSR. With JS, CSS loads after hydration (FOUC). Without JS, CSS never applies.

Related

• https://github.com/wakujs/waku/issues/1911

Start with the client-to-client.tsx and client-to-client-child.tsx reproduction described in the issue, including client-to-client-child.css, and review PR #1056's test cases. Trace why the lazy client component's CSS is absent from the SSR response; done means Case 1 includes CSS in SSR and avoids FOUC with and without JavaScript while Cases 2 and 3 remain passing.