docs(plugin-rsc): add comprehensive CSS support documentation

- Add CSS Support section explaining auto CSS injection mechanism
- Document rscCssTransform feature and configuration options
- Add note linking from loadCss API to CSS Support section
- Include examples of component detection and transformation
- Cover query parameter control and dev vs prod behavior

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: hi-ogawa

packages/plugin-rsc/README.md

@@ -264,6 +264,9 @@ export function renderHTML(...) {}
 
 #### `import.meta.viteRsc.loadCss`
 
+> [!NOTE]
+> The plugin automatically injects CSS for React components through the `rscCssTransform` feature. See the [CSS Support](#css-support) section for detailed information about automatic CSS injection.
+
 - Type: `(importer?: string) => React.ReactNode`
 
 This allows collecting css which is imported through a current server module and injecting them inside server components.
@@ -436,6 +439,124 @@ This is a wrapper of `react-server-dom` API and helper API to setup a minimal RS
 
 - `hydrate`
 
+## CSS Support
+
+The plugin provides automatic CSS code-splitting and injection for both client and server components through the `rscCssTransform` feature. This eliminates the need to manually call `import.meta.viteRsc.loadCss()` in most cases.
+
+### How Auto CSS Injection Works
+
+The core mechanism is implemented in the `rscCssTransform` function in `packages/plugin-rsc/src/plugin.ts`. Here's how it works:
+
+1. **Component Detection**: The plugin automatically detects React components by looking for:
+   - Function exports with capital letter names (e.g., `export function Page() {}`)
+   - Default exports that are functions with capital names (e.g., `export default function Page() {}`)
+   - Const exports assigned to functions with capital names (e.g., `export const Page = () => {}`)
+
+2. **CSS Import Detection**: For detected components, the plugin checks if the module imports any CSS files (`.css`, `.scss`, `.sass`, etc.)
+
+3. **Automatic Wrapping**: When both conditions are met, the plugin wraps the component with a CSS injection wrapper:
+
+```tsx
+// Before transformation
+import './styles.css'
+
+export function Page() {
+  return <div>Hello</div>
+}
+```
+
+```tsx
+// After transformation
+import './styles.css'
+import React from 'react'
+
+export function Page() {
+  return <div>Hello</div>
+}
+
+function __wrapper(props) {
+  return React.createElement(
+    React.Fragment,
+    null,
+    import.meta.viteRsc.loadCss(),
+    React.createElement(Page, props),
+  )
+}
+Object.defineProperty(__wrapper, 'name', { value: 'Page' })
+export { __wrapper as Page }
+```
+
+### Configuration
+
+You can configure or disable the auto CSS injection feature:
+
+```js
+// vite.config.ts
+export default defineConfig({
+  plugins: [
+    rsc({
+      // Disable auto CSS injection entirely
+      rscCssTransform: false,
+
+      // Or configure with a custom filter
+      rscCssTransform: {
+        filter: (id) => {
+          // Only apply to files in specific directories
+          return id.includes('/components/') || id.includes('/pages/')
+        },
+      },
+    }),
+  ],
+})
+```
+
+### Manual Control with Query Parameters
+
+For fine-grained control, you can use the `?vite-rsc-css-export=<name>` query parameter:
+
+```tsx
+// my-component.tsx?vite-rsc-css-export=MyComponent
+import './styles.css'
+
+export function MyComponent() {
+  return <div>Only this component gets CSS injection</div>
+}
+
+export function AnotherComponent() {
+  return <div>This one doesn't</div>
+}
+```
+
+You can also specify multiple component names:
+
+```tsx
+// my-components.tsx?vite-rsc-css-export=ComponentA,ComponentB
+```
+
+### Development vs Production
+
+- **Development**: CSS injection happens dynamically to support HMR (Hot Module Replacement)
+- **Production**: CSS dependencies are collected during build and injected as `<link>` tags in the HTML
+
+### Manual CSS Loading
+
+For cases where you need manual control, you can still use `import.meta.viteRsc.loadCss()`:
+
+```tsx
+export function Layout() {
+  return (
+    <html>
+      <head>
+        {/* Load CSS for specific routes */}
+        {import.meta.viteRsc.loadCss('/routes/home.tsx')}
+        {import.meta.viteRsc.loadCss('/routes/about.tsx')}
+      </head>
+      <body>...</body>
+    </html>
+  )
+}
+```
+
 ## Credits
 
 This project builds on fundamental techniques and insights from pioneering Vite RSC implementations.