[Bug]: Dev server builds css in the wrong order after changing the order of CSS imports

[dudorovdmitrii]

Version

System:
OS: macOS 13.4
CPU: (12) arm64 Apple M2 Pro
Memory: 140.86 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Browsers:
Chrome: 129.0.6668.89
Safari: 16.5

Details

I have two css files a.css and b.css and index.tsx initing React application:

a.css

.test {
   color: red;
}

b.css

.test2 {
   color: green;
}

index.tsx

import React from 'react';
import {createRoot} from 'react-dom/client';

import './a.css';
import './b.css';

createRoot(document.getElementById('root') as Element).render(<div className="test test2">text</div>);

---

When I start the dev server, the CSS order is correct. The div's color is green, but if a change the order of imports to

import './b.css';
import './a.css';

and reload the page, the order of CSS won't change and the div's color will still be green. But if I completely restart the dev server, the CSS order will be fixed

Reproduce link

maybe_later_sorry

Reproduce Steps

1. Start the dev server
2. Change CSS imports order in a tsx file
3. The dev server won't reoder the CSS classes

[dudorovdmitrii]

output.injectStyles: true fixes it

[chenjiahan]

It may be a problem with Rspack incremental build