-
-
Notifications
You must be signed in to change notification settings - Fork 189
fix(rsc): fix CSS HMR with ?url
#776
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
return ctx.modules.filter( | ||
(m) => !(m.id?.includes('?direct') && !m.isSelfAccepting), | ||
) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed by targeting non self-accepting case specifically. This likely means HMR doesn't work for xxx.module.css?url
, but let's just postpone dealing with that edge case.
commit: |
Add test cases for client-url.css and server-url.css to cover CSS HMR functionality with URL-based CSS imports, following the same pattern as existing CSS module tests. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR fixes CSS Hot Module Replacement (HMR) issues with ?url
query parameters in React Server Components by modifying the module filtering logic in the client environment. The fix prevents unnecessary browser reloads when changing CSS files that use the ?url
query.
- Updates the HMR module filtering to allow self-accepting modules with
?direct
query - Adds comprehensive test coverage for CSS
?url
imports in both client and server components - Removes manual timestamp-based cache busting since proper HMR now handles it
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.
Show a summary per file
File | Description |
---|---|
packages/plugin-rsc/src/plugin.ts | Updates HMR filter logic to check isSelfAccepting for modules with ?direct |
packages/plugin-rsc/examples/basic/src/routes/style-server/server.tsx | Adds CSS ?url import and test elements for server-side testing |
packages/plugin-rsc/examples/basic/src/routes/style-server/server-url.css | New CSS file for server-side ?url testing |
packages/plugin-rsc/examples/basic/src/routes/style-client/client.tsx | Adds CSS ?url import and test elements for client-side testing |
packages/plugin-rsc/examples/basic/src/routes/style-client/client-url.css | New CSS file for client-side ?url testing |
packages/plugin-rsc/examples/basic/src/routes/css-queries/client.tsx | Removes manual cache busting since HMR now handles it properly |
packages/plugin-rsc/e2e/basic.test.ts | Adds comprehensive test cases for CSS ?url HMR functionality |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Description
?url
is not working #772TODO