HMR of removed modules

[idoros]

I'm using React Router as a...

framework

Reproduction

With normal CSS (.css):

1. either open this stackblitz example or create a new React Router project from a template
2. in a newly created local project:
   2.1. add a home.css next to the home.tsx route file
   2.2. import it in home.tsx using import './home.css';
   2.3 start the dev server and open in a browser
3. now, comment out the css import line in home.tsx - browser socket shows:
   • an HMR call for the tsx change
   • CSS prune event (causes associated styles to be correctly removed from the browser)
     
4. then, edit the pruned home.css file - browser socket shows the CSS update (and the css is re-added to the browser!)
   
   

With CSS modules (.module.css):
In contrast, when using CSS Modules:

• If you comment out the import and then modify the .module.css file (i.e., a pruned module),
  the server responds with a full-reload message
• This causes the browser to fully reload, rather ignoring the disconnected module

This is much clearer to see locally then on stackblitz.

System Info

Binaries:
    Node: 23.11.0 - ~/.nvm/versions/node/v23.11.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v23.11.0/bin/npm
  npmPackages:
    @react-router/dev: ^7.5.3 => 7.6.2 
    @react-router/node: ^7.5.3 => 7.6.2 
    @react-router/serve: ^7.5.3 => 7.6.2 
    react-router: ^7.5.3 => 7.6.2 
    vite: ^6.3.3 => 6.3.5

Used Package Manager

npm

Expected Behavior

Modules that are no longer part of the active module graph should not trigger HMR updates.
At minimum, they should not cause the browser to re-evaluate styles or trigger a full refresh.

Actual Behavior

• normal css is re-evaluated and cause unintended css in the browser
• css modules cause refresh