Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions packages/plugin-rsc/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,9 @@ export function renderHTML(...) {}

#### `import.meta.viteRsc.loadCss`

> [!NOTE]
> The plugin automatically injects CSS for server components. 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.
Expand Down Expand Up @@ -436,6 +439,40 @@ This is a wrapper of `react-server-dom` API and helper API to setup a minimal RS

- `hydrate`

## CSS Support

The plugin automatically handles CSS code-splitting and injection for server components. This eliminates the need to manually call [`import.meta.viteRsc.loadCss()`](#importmetaviterscloadcss) in most cases.

1. **Component Detection**: The plugin automatically detects server 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>
}

// After transformation
import './styles.css'

export function Page() {
return (
<>
{import.meta.viteRsc.loadCss()}
<div>Hello</div>
</>
)
}
```

## Credits

This project builds on fundamental techniques and insights from pioneering Vite RSC implementations.
Expand Down
Loading