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

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 😃

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 7
Comments: 16 (2 by maintainers)

Most upvoted comments

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.

fabinppk on Apr 22, 2020

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

iksent on Apr 23, 2020

Maybe I have a similar bug:

I am using Dart SASS: "node-sass": "npm:sass@1.26.2" with @use imports.
Also I am using CSS Modules.
And I tried both Next.js built-in CSS and @zein/next-css with custom config,
Everything works just perfect in development.
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): prod

Development (button is hidden - its correct): dev

Just no ideas, how to fix it…

And also there is such a strange thing: styles duplicates appears after HOVERing over the button… Production: simple Production (after hover) hover

iksent on Apr 17, 2020

Maybe I have a similar bug:
1. I am using Dart SASS: `"node-sass": "npm:sass@1.26.2"` 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 ?

ashfaqnisar on Apr 19, 2020

@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 😦

iksent on Apr 17, 2020