Skip to content

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

@dudorovdmitrii

Description

@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

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions