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