Inconsistent CSS between dev and build

[loteoo]

Bug report

Describe the bug

When using the "Built-in CSS support", the ordering of the CSS classes (and number of times a class is declared) is not consistent between development and production.

Because of this, you can see some CSS styling "pop" around when navigating between pages.

I believe the order is correct in SSR, but not in the client-side loaded bundles (as more CSS is loaded asynchronously, the ordering is lost and duplicated styles are loaded)

To Reproduce

Just run next build, the issue seems to be out-of-the-box with CSS modules?

Expected behavior

The resulting CSS styles ordering should be identical between dev and prod.

Screenshots

Dev: (Desired behaviour):

Build: (Duplicated styles, inconsistent result:)

[timneutkens]

Can you try next@canary? Many issues with CSS / ordering of CSS were solved recently.

[phildeschaine0]

Can confirm, having an issue with styles not appearing in next start where they did appear on next dev. Issue happens in 9.5.3 and in 9.5.4-canary.3 but not in 9.5.0.

[Timer]

OP responded with 👍 to the comment above so closing as fixed. If anyone has new reproductions, please file a new issue. Check #16630 as a duplicate first!

[Blagoj5]

I'm having same issue with sass. I found one workaround here: https://medium.com/iryl/control-css-imports-order-for-next-js-webpack-based-production-applications-3b69765444fd. You import all .scss parts of your app into one main app by the order you want and everything should work fine. However my app is pretty big so i don't play to do that. I can confirm on 9.5.4-carnary.3 is not WOKRING properly

[uixcrazy]

I've used next v.10.0.6, and having the same. I can't find any solutions for this.

10148

[le-martre]

Same here, same issue with Next V.10.0.7, sass: ^1.32.8

[yenicelik]

Using Next V 11.0.0 and having the same issue

[oaa97181]

Saaaame
"next": "^11.0.1",
"react": "^17.0.2",

Only hotfix i found out is to throw an !important on every css module class that's broken.

[le-martre]

@Timer Can we re-open or should we re-create a new issue ?

[timneutkens]

Please open a new issue with a full reproduction.