HMR for CSS imported with `?url` is not working

[markdalgleish]

Related plugins

• plugin-react

• plugin-react-swc

• plugin-react-oxc

• plugin-rsc

Describe the bug

When importing CSS with ?url and then rendering to a link element (or returning from a links function export from a route module in React Router Framework Mode, but I'm reproducing this at a lower level) styles are not updated when editing the CSS file.

Reproduction

https://github.com/markdalgleish/vitejs-plugin-rsc-css-url-hmr-issue-reproduction

Steps to reproduce

1. pnpm install
2. pnpm dev
3. Open http://localhost:5173 in the browser
4. Edit src/test-server.css and src/test-client.css

Changes should be reflected in the browser immediately, but instead require a full page reload.

System Info

System:
    OS: macOS 15.5
    CPU: (12) arm64 Apple M4 Pro
    Memory: 649.91 MB / 48.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.5.0 - ~/.nvm/versions/node/v24.5.0/bin/node
    npm: 11.5.1 - ~/.nvm/versions/node/v24.5.0/bin/npm
    pnpm: 10.8.0 - ~/Library/pnpm/pnpm
    bun: 1.0.1 - ~/.bun/bin/bun
  Browsers:
    Chrome: 139.0.7258.139
    Edge: 139.0.3405.111
    Firefox Nightly: 122.0a1
    Safari: 18.5
  npmPackages:
    @vitejs/plugin-react: latest => 5.0.1 
    @vitejs/plugin-rsc: latest => 0.4.23 
    vite: ^7.1.2 => 7.1.3

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

Thanks for the minimal repro. We also have an example here and noticed the same issue, so it's currently hacking with ?t=.

vite-plugin-react/packages/plugin-rsc/examples/basic/src/routes/css-queries/client.tsx

Lines 27 to 32 in c69f0f6

	<link rel="stylesheet" href={urlWithHmr(cssUrl)} />
	<style>{cssInline}</style>
	<style>{cssRaw}</style>
	<link rel="stylesheet" href={urlWithHmr(props.serverUrl)} />
	<style>{props.serverInline}</style>
	<style>{props.serverRaw}</style>

vite-plugin-react/packages/plugin-rsc/examples/basic/src/routes/css-queries/client.tsx

Lines 15 to 20 in c69f0f6

	function urlWithHmr(href: string) {
	if (import.meta.hot) {
	href += '?t=' + Date.now()
	}
	return href
	}

I thought the same can be reproduce with normal SPA, but it didn't https://github.com/hi-ogawa/reproductions/tree/main/vite-rsc-772-just-client. The log indicate that I need to allow ?direct css hmr, but that's currently filtered out by rsc plugin, so probably that's the issue for client at least.

vite-plugin-react/packages/plugin-rsc/src/plugin.ts

Lines 475 to 482 in 5500a22

	async hotUpdate(ctx) {
	if (isCSSRequest(ctx.file)) {
	if (this.environment.name === 'client') {
	// filter out `.css?direct` (injected by SSR) to avoid browser full reload
	// when changing non-self accepting css such as `module.css`.
	return ctx.modules.filter((m) => !m.id?.includes('?direct'))
	}
	}

[hi-ogawa]

The fix is released in v0.4.24.