CSS rule order changes after hydration in Vite development mode

[jabrks]

Reproduction

Go to https://stackblitz.com/edit/remix-run-remix-8r5nmy?file=app%2Froutes%2F_index.tsx and reload the page. Alternatively, open root.tsx and comment out the <Scripts /> component and observe the difference between the page with hydration and without

System Info

System:
  OS: macOS 14.5
  CPU: (10) arm64 Apple M1 Pro
  Memory: 139.98 MB / 32.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
  npm: 10.8.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
  bun: 1.0.14 - ~/.bun/bin/bun
Browsers:
  Chrome: 125.0.6422.113
  Safari: 17.5
npmPackages:
  @remix-run/dev: ^2.9.2 => 2.9.2 
  @remix-run/express: ^2.9.2 => 2.9.2 
  @remix-run/node: ^2.9.2 => 2.9.2 
  @remix-run/react: ^2.9.2 => 2.9.2 
  @remix-run/testing: ^2.9.2 => 2.9.2 
  vite: ^5.2.11 => 5.2.11

Used Package Manager

npm

Expected Behavior

There should be no visible change to the styles before and after hydration

Actual Behavior

The styles change after the page has hydrated

[cdx111]

you'd need to add !important

[brophdawg11]

Vite's handling of CSS is not my strong suit, but I think this problem can be avoided if you re-order your imports?

Right now you have:

import { B } from './B';
import './A.css';

Which results in Vite discovering B.css before A.css as it traverses the import graph. I don't know offhand why Vite does include A.css's styles first in the inlined <style> tag on initial load though.

If you want A.css to come first in the inserted style blocks, you can switch those so it finds A.css first:

import './A.css';
import { B } from './B';

[jabrks]

Thanks for the response. You're right that we can work around the flash of incorrect styling by tweaking the import order, however in this case loading the B.css styles before A.css is actually what we were aiming for.

[cdx111]

Thanks for the response. You're right that we can work around the flash of incorrect styling by tweaking the import order, however in this case loading the B.css styles before A.css is actually what we were aiming for.

Why don't you add the "imporant" keyword of css

[brophdawg11]

Thank you for opening this issue, and our apologies we haven't gotten around to it yet!

With the release of React Router v7 we are sun-setting continued development/maintenance on Remix v2. If you have not already upgraded to React Router v7, we recommend you do so. We've tried to make the upgrade process as smooth as possible with our Future Flags. We are now in the process of cleaning up outdated issues and pull requests to improve the overall hygiene of our repositories.

We plan to continue to address 2 types of issues in Remix v2:

• Bugs that pose security concerns
• Bugs that prevent upgrading to React Router v7

If you believe this issue meets one of those criteria, please respond or create a new issue.

For all other issues, ongoing maintenance will be happening in React Router v7, so:

• If this is a bug, please reopen this issue in that repo with a new minimal reproduction against v7
• If this is a feature request, please open a new Proposal Discussion in React Router, and if it gets enough community support it can be considered for implementation

If you have any questions you can always reach out on Discord. Thanks again for providing feedback and helping us make our framework even better!