test(rsc): add lazy client CSS reproduction (#1056)

Co-authored-by: Claude Opus 4.5 <[email protected]>

Author: hi-ogawa

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

@@ -1045,6 +1045,85 @@ function defineTest(f: Fixture) {
     )
   })
 
+  // TODO: lazy component CSS is not yet fully supported
+  // https://github.com/vitejs/vite-plugin-react/issues/1057
+
+  // Case 1: client -> lazy client -> CSS
+  test('lazy css client to client @js', async ({ page }) => {
+    await page.goto(f.url())
+    await waitForHydration(page)
+    // CSS is loaded after hydration via JS
+    await expect(page.locator('.test-lazy-css-client-to-client')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
+  })
+
+  testNoJs('lazy css client to client @nojs', async ({ page }) => {
+    await page.goto(f.url())
+    // component is rendered correctly in SSR
+    await expect(page.locator('.test-lazy-css-client-to-client')).toHaveText(
+      'lazy-css-client-to-client',
+    )
+    // but CSS is not included in SSR (FOUC)
+    await expect(page.locator('.test-lazy-css-client-to-client')).toHaveCSS(
+      'color',
+      'rgb(0, 0, 0)',
+    )
+  })
+
+  // Case 2: server -> lazy client with CSS
+  test('lazy css server to client @js', async ({ page }) => {
+    await page.goto(f.url())
+    await waitForHydration(page)
+    await expect(page.locator('.test-lazy-css-server-to-client')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
+  })
+
+  testNoJs('lazy css server to client @nojs', async ({ page }) => {
+    await page.goto(f.url())
+    await expect(page.locator('.test-lazy-css-server-to-client')).toHaveText(
+      'lazy-css-server-to-client',
+    )
+    // CSS is included in SSR
+    await expect(page.locator('.test-lazy-css-server-to-client')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
+  })
+
+  // Case 3: server -> lazy server with CSS
+  test('lazy css server to server @js', async ({ page }) => {
+    await page.goto(f.url())
+    await waitForHydration(page)
+    await expect(page.locator('.test-lazy-css-server-to-server')).toHaveText(
+      'lazy-css-server-to-server',
+    )
+    await expect(page.locator('.test-lazy-css-server-to-server')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
+  })
+
+  // suspense can fallback due to `viteRsc.loadCss` wrapper
+  // but streamed lazy server component html comes with css, so no FOUC.
+  // TODO: skipped for now since not reliable
+  testNoJs('lazy css server to server @nojs', async ({ page }) => {
+    await page.goto(f.url())
+    // await expect(page.locator('.test-lazy-css-server-to-server')).toHaveText(
+    //   'loading',
+    // )
+    // await expect(page.locator('.test-lazy-css-server-to-server')).toHaveText(
+    //   'lazy-css-server-to-server',
+    // )
+    // await expect(page.locator('.test-lazy-css-server-to-server')).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-css/client-to-client-child.css

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

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

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

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

@@ -0,0 +1,16 @@
+'use client'
+
+// Case 1: client component -> lazy client component -> CSS
+import * as React from 'react'
+
+const LazyChild = React.lazy(() => import('./client-to-client-child'))
+
+export function TestLazyCssClientToClient() {
+  return (
+    <div data-testid="test-lazy-css-client-to-client">
+      <React.Suspense fallback={<span>loading...</span>}>
+        <LazyChild />
+      </React.Suspense>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,11 @@
+'use client'
+
+import './server-to-client-child.css'
+
+export default function ServerToClientChild() {
+  return (
+    <span className="test-lazy-css-server-to-client">
+      lazy-css-server-to-client
+    </span>
+  )
+}

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

@@ -0,0 +1,14 @@
+// Case 2: server component -> lazy client component with CSS
+import * as React from 'react'
+
+const LazyChild = React.lazy(() => import('./server-to-client-child'))
+
+export function TestLazyCssServerToClient() {
+  return (
+    <div data-testid="test-lazy-css-server-to-client">
+      <React.Suspense fallback={<span>loading...</span>}>
+        <LazyChild />
+      </React.Suspense>
+    </div>
+  )
+}

packages/plugin-rsc/examples/basic/src/routes/lazy-css/server-to-server-child.css

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

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

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

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

@@ -0,0 +1,14 @@
+// Case 3: server component -> lazy server component with CSS
+import * as React from 'react'
+
+const LazyChild = React.lazy(() => import('./server-to-server-child'))
+
+export function TestLazyCssServerToServer() {
+  return (
+    <div data-testid="test-lazy-css-server-to-server">
+      <React.Suspense fallback={<span>loading...</span>}>
+        <LazyChild />
+      </React.Suspense>
+    </div>
+  )
+}