Next.js: Inconsistent loading order of CSS in dev mode

[Joozty]

Bug report

Describe the bug

It's based on https://github.com/zeit/next.js/issues/10148#issuecomment-614478653. When _app.jsx contains component which imports postcss module the order of css chunks is inconsistent. Most likely css from module is inserted before global css.

To Reproduce

I created a repo for you https://github.com/Joozty/nextjs-css. It's a fork from https://github.com/zeit/next.js/issues/10148. So the steps to reproduce are almost identical.

Expected behavior

CSS in dev mode should be imported/inserted the same way as on production, i.e. global css first and then modules.

Thanks a lot :)

[fabinppk]

I still have problems with css order too.
I think the comment below is the same problem :thinking:

https://github.com/zeit/next.js/pull/11901#issuecomment-614644961

[iksent]

Maybe I have a similar bug:

1. I am using Dart SASS: "node-sass": "npm:[email protected]" with @use imports.
2. Also I am using CSS Modules.
3. And I tried both Next.js built-in CSS and @zein/next-css with custom config,
4. Everything works just perfect in development.
5. But I have a problems with styles in production: some elements displaying not correctly because of different CSS-files importing order or because CSS duplicates (there is no duplicates in dev).

Production (button is visible - its mistake):

Development (button is hidden - its correct):

Just no ideas, how to fix it...

And also there is such a strange thing: styles duplicates appears after HOVERing over the button...
Production:

Production (after hover)

[fabinppk]

I am installed this version v9.3.6-canary.0 because has a patch to fix css, but didnt resolve to me.

I dont really what it that, but i continuous having duplicates between css chunks and when not, problems with classes order/priority.

[iksent]

@fabinppk, hello.
I think v9.3.6-canary.0 fixes other problems "Correct Global and Local CSS Loading Order in Dev". No words about avoiding duplicates. And I have no problems is dev, only in production :(

[fabinppk]

I understand, but the v9.3.6-canary.0 brokers my css in dev mode too, not only in production.

[ashfaqnisar]

Maybe I have a similar bug:

1. I am using Dart SASS: `"node-sass": "npm:[email protected]"` with `@use` imports.

2. Also I am using CSS Modules.

3. And I tried both Next.js built-in CSS and `@zein/next-css` with custom config,

4. Everything works just perfect in development.

5. But I have a problems with styles in production: some elements displaying not correctly because of different CSS-files importing order or because CSS duplicates (there is no duplicates in dev).

Production (button is visible - its mistake):

Development (button is hidden - its correct):

Just no ideas, how to fix it...

And also there is such a strange thing: styles duplicates appears after HOVERing over the button...
Production:

Production (after hover)

I also have the same issue @iksent, were you able to solve this thing ?

[iksent]

@ashfaqnisar, no, I’m not. And this is a really big problem...

[ashfaqnisar]

Yup, all the important css components in the production are broken due to this thing. Can we assign a label to this issue @iksent @Joozty

[Timer]

This should be fixed in ^9.3.6-canary.9!

[fabinppk]

This should be fixed in ^9.3.6-canary.9!

I'm installed the exact version 9.3.6-canary.9 and unfortunately in production mode there are still duplicate css.

I'm using sass, but I don't think that could be the problem.

[iksent]

Yes, my problem has not been resolved either.
Should we open a new issue, @Timer?
Or maybe move to there: https://github.com/zeit/next.js/issues/12099

[bravokiloecho]

I just upgraded to the stable 9.3.6 and I'm still getting global CSS overrriding CSS from modules (see image below). elements.css is imported in the _app.js

[iksent]

@bravokiloecho, probably, that's because this issue was resolved in 9.3.6-canary.9
(https://github.com/zeit/next.js/issues/11946#issuecomment-617827900)

[bravokiloecho]

@iksent but 9.3.6 was released 7 days after 9.3.6-canary.9 so I assumed it would include everything from that release.

[iksent]

@bravokiloecho, yes. sorry, my mistake.