fix: ensure consistent CSS output for SSR and client hydration #6558
Conversation
✅ Deploy Preview for rsbuild ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull Request Overview
This PR ensures consistent CSS transformations between SSR (Node) and client (Web) bundles by using the same browserslist targets for LightningCSS processing. This prevents hydration mismatches caused by different CSS prefixing or feature transformations between server and client.
Key changes:
- Modified the CSS plugin to detect when processing inline CSS in a Node environment and use the web environment's browserslist targets instead
- Updated test configuration to use multi-environment setup with both web and node targets
- Added browserslist configuration file to verify correct CSS transformation with vendor prefixes
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/core/src/plugins/css.ts | Added logic to use web environment's browserslist when processing CSS in node target to ensure consistent output |
| e2e/cases/css/inline-query-node-target/rsbuild.config.ts | Updated test config to use multi-environment setup (web + node) instead of single node target |
| e2e/cases/css/inline-query-node-target/.browserslistrc | Added browserslist config to specify browser targets for CSS transformation testing |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
packages/core/src/plugins/css.ts
Outdated
| // Use the same browserslist as web bundles to ensure consistent CSS output | ||
| // Prevent mismatched prefixes or features between SSR and client hydration | ||
| let { browserslist } = environment; | ||
| if (target === 'node') { | ||
| const webEnvironment = Object.values(environments).find( | ||
| (env) => env.config.output.target === 'web', | ||
| ); | ||
| if (webEnvironment?.browserslist) { | ||
| browserslist = webEnvironment.browserslist; | ||
| } |
There was a problem hiding this comment.
When a build defines several web environments with different browserslists (e.g. modern and legacy clients) and corresponding SSR node bundles, this hook always copies the browserslist from the first environment whose output.target === 'web'. Any other node environment will therefore minify inline CSS with the wrong targets, reintroducing the very mismatch this change tries to avoid. The code should either map node environments to their intended client environment or only apply the override when there is exactly one web environment.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Good suggestion, but we are not currently able to link the web environment with the corresponding Node environment, so this usage is not supported at the moment.
Summary
This update ensures that CSS transformations in SSR (Node) bundles use the same browserslist targets as web bundles.
Since inline CSS (e.g.
.css?inline) is rendered in the browser, using a Node-specific target could cause inconsistent prefixing or feature transformations between server and client.With this change, the LightningCSS transforming now respects the same browser targets across both web and SSR builds, ensuring consistent styles and hydration.
Related Links
Checklist