Verify CSS import ordering

[Timer]

A user on twitter reported that Next.js may not order CSS imports from JS correctly. We need to investigate and fix this!

https://twitter.com/samselikoff/status/1299032241100787712

_NEXT-1350

[santiagoRebella]

this is still happening to me

[santiagoRebella]

@Timer I tried with latest versions including the v9.5.4-canary.5 the issue still there, I am importing global.scss from _app.js and then I have different scss module files. with yarn dev the order is correct, but when doing yarn build && yarn start the order gets changed, so for example, the global bootstrap classes override module classes as is loaded after

[santiagoRebella]

could be related to #16723

[Aichnerc]

Hey! I'm having trouble with that too. See my repo for my code and Stackoverflow for my problem.

[sunoj]

same here

[kenaku]

Nextjs is one of the greatest things in JS landscape, thanks for great work!
Also this bug is killing me, we have a pretty big app with millions of users and update from 9.0.3 to 9.5.5 broke our app in so many places, I cant even imagine how to hotfix this...
Please, fix this 🙏

[usamamashkoor]

Did anyone find any solution for this?

[sunoj]

i create a new css file:style.css and manual import css like the code below, replace the css import in _app.tsx before.

`@import './node_modules/@hackplan/uui/lib/index.css';
@import './node_modules/react-weui/build/packages/react-weui.css';
@import './node_modules/react-image-gallery/styles/css/image-gallery.css';

@import './static/css/app.css';

.style {
color: aliceblue;
}`

then add import '../style.css' in _app.tsx