refactor(rsc): use consistent naming for lazy CSS test files

Rename files, selectors, and text content to match component names:
- client-to-client: client -> lazy client -> CSS
- server-to-client: server -> lazy client with CSS
- server-to-server: server -> lazy server with CSS

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

Author: hi-ogawa

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

@@ -1045,78 +1045,76 @@ function defineTest(f: Fixture) {
     )
   })
 
-  // TODO: lazy client component CSS is not yet supported
-  // https://github.com/wakujs/waku/issues/1911
+  // TODO: lazy component CSS is not yet fully supported
+  // https://github.com/vitejs/vite-plugin-react/issues/1057
 
-  // Case 1: client component -> lazy client component -> CSS (two steps)
-  test('lazy client css @js', async ({ page }) => {
+  // 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, so it works
-    await expect(page.locator('.test-lazy-client-css')).toHaveCSS(
+    // 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 client css @nojs', async ({ page }) => {
+  testNoJs('lazy css client to client @nojs', async ({ page }) => {
     await page.goto(f.url())
-    // lazy component is rendered correctly in SSR
-    await expect(page.locator('.test-lazy-client-css')).toHaveText(
-      'lazy-client-css',
+    // component is rendered correctly in SSR
+    await expect(page.locator('.test-lazy-css-client-to-client')).toHaveText(
+      'lazy-css-client-to-client',
     )
-    // but CSS from lazy client component is not included in SSR (FOUC)
-    await expect(page.locator('.test-lazy-client-css')).toHaveCSS(
+    // 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 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 }) => {
+  // 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-client-css-direct')).toHaveCSS(
+    await expect(page.locator('.test-lazy-css-server-to-client')).toHaveCSS(
       'color',
       'rgb(255, 165, 0)',
     )
   })
 
-  testNoJs('lazy client css direct @nojs', async ({ page }) => {
+  testNoJs('lazy css server to client @nojs', async ({ page }) => {
     await page.goto(f.url())
-    await expect(page.locator('.test-lazy-client-css-direct')).toHaveText(
-      'lazy-client-css-direct',
+    await expect(page.locator('.test-lazy-css-server-to-client')).toHaveText(
+      'lazy-css-server-to-client',
     )
-    // CSS is included in SSR for direct lazy client components
-    await expect(page.locator('.test-lazy-client-css-direct')).toHaveCSS(
+    // CSS is included in SSR
+    await expect(page.locator('.test-lazy-css-server-to-client')).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 }) => {
+  // 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-server-css')).toHaveText(
-      'lazy-server-css',
+    await expect(page.locator('.test-lazy-css-server-to-server')).toHaveText(
+      'lazy-css-server-to-server',
     )
     // CSS is never loaded (not even via JS)
-    await expect(page.locator('.test-lazy-server-css')).toHaveCSS(
+    await expect(page.locator('.test-lazy-css-server-to-server')).toHaveCSS(
       'color',
       'rgb(0, 0, 0)',
     )
   })
 
-  testNoJs('lazy server css @nojs', async ({ page }) => {
+  testNoJs('lazy css server to server @nojs', async ({ page }) => {
     await page.goto(f.url())
-    await expect(page.locator('.test-lazy-server-css')).toHaveText(
-      'lazy-server-css',
+    await expect(page.locator('.test-lazy-css-server-to-server')).toHaveText(
+      'lazy-css-server-to-server',
     )
-    // CSS from lazy server component is not included in SSR
-    await expect(page.locator('.test-lazy-server-css')).toHaveCSS(
+    // CSS is not included in SSR
+    await expect(page.locator('.test-lazy-css-server-to-server')).toHaveCSS(
       'color',
       'rgb(0, 0, 0)',
     )

…/src/routes/lazy-css/lazy-server-dep.css …asic/src/routes/lazy-css/case1-child.csspackages/plugin-rsc/examples/basic/src/routes/lazy-css/lazy-server-dep.css renamed to packages/plugin-rsc/examples/basic/src/routes/lazy-css/case1-child.css packages/plugin-rsc/examples/basic/src/routes/lazy-css/lazy-server-dep.css renamed to packages/plugin-rsc/examples/basic/src/routes/lazy-css/case1-child.css

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

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

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

packages/plugin-rsc/examples/basic/src/routes/lazy-css/case1-parent.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('./case1-child'))
+
+export function TestLazyCssClientToClient() {
+  return (
+    <div data-testid="test-lazy-css-case1">
+      <React.Suspense fallback={<span>loading...</span>}>
+        <LazyChild />
+      </React.Suspense>
+    </div>
+  )
+}

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

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

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

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

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

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

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

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

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

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

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

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