test(rsc): use default CSS auto-injection in basic e2e fixture (#1058)

hi-ogawa · claude · web-flow · commit a1f1e9911795 · 2026-01-15T18:50:06.000+09:00
Co-authored-by: Claude Opus 4.5 &lt;noreply@anthropic.com&gt;
diff --git a/packages/plugin-rsc/e2e/manual-css.test.ts b/packages/plugin-rsc/e2e/manual-css.test.ts
@@ -0,0 +1,38 @@
+import { test } from '@playwright/test'
+import { setupInlineFixture, useFixture } from './fixture'
+import { defineStarterTest } from './starter'
+
+// Test `rscCssTransform: false` option which disables automatic CSS injection
+// and requires manual use of `import.meta.viteRsc.loadCss()`.
+
+test.describe('manual-css', () => {
+  const root = 'examples/e2e/temp/manual-css'
+
+  test.beforeAll(async () => {
+    await setupInlineFixture({
+      src: 'examples/starter',
+      dest: root,
+      files: {
+        // Disable auto CSS injection
+        'vite.config.ts': {
+          edit: (s) => s.replace('rsc({', `rsc({ rscCssTransform: false,`),
+        },
+        // Add manual loadCss() call since auto-injection is disabled
+        'src/root.tsx': {
+          edit: (s) =>
+            s.replace('</head>', `{import.meta.viteRsc.loadCss()}</head>`),
+        },
+      },
+    })
+  })
+
+  test.describe('dev', () => {
+    const f = useFixture({ root, mode: 'dev' })
+    defineStarterTest(f)
+  })
+
+  test.describe('build', () => {
+    const f = useFixture({ root, mode: 'build' })
+    defineStarterTest(f)
+  })
+})
diff --git a/packages/plugin-rsc/examples/basic/src/framework/entry.rsc.tsx b/packages/plugin-rsc/examples/basic/src/framework/entry.rsc.tsx
@@ -9,7 +9,6 @@ import {
 import type React from 'react'
 import type { ReactFormState } from 'react-dom/client'
 import { parseRenderRequest } from './request.tsx'
-import '../styles.css'
 
 // The schema of payload which is serialized into RSC stream on rsc environment
 // and deserialized on ssr/client environments.
@@ -125,8 +124,6 @@ async function handler(request: Request): Promise<Response> {
   const nonceMeta = nonce && <meta property="csp-nonce" nonce={nonce} />
   const root = (
     <>
-      {/* this `loadCss` only collects `styles.css` but not css inside dynamic import `root.tsx` */}
-      {import.meta.viteRsc.loadCss()}
       {nonceMeta}
       <Root url={url} />
     </>
diff --git a/packages/plugin-rsc/examples/basic/src/routes/root.tsx b/packages/plugin-rsc/examples/basic/src/routes/root.tsx
@@ -1,3 +1,4 @@
+import '../styles.css'
 import TestDepCssInServer from '@vitejs/test-dep-css-in-server/server'
 import React from 'react'
 import {
@@ -56,7 +57,6 @@ export function Root(props: { url: URL }) {
       <head>
         <meta charSet="utf-8" />
         <title>vite-rsc</title>
-        {import.meta.viteRsc.loadCss('/src/routes/root.tsx')}
       </head>
       <body className="flex flex-col gap-2 items-start p-2">
         <div>
diff --git a/packages/plugin-rsc/examples/basic/vite.config.ts b/packages/plugin-rsc/examples/basic/vite.config.ts
@@ -28,8 +28,6 @@ export default defineConfig({
         ssr: './src/framework/entry.ssr.tsx',
         rsc: './src/framework/entry.rsc.tsx',
       },
-      // disable auto css injection to manually test `loadCss` feature.
-      rscCssTransform: false,
       copyServerAssetsToClient: (fileName) =>
         fileName !== '__server_secret.txt',
       clientChunks(meta) {
