Inconsistent loading order of CSS Modules + global CSS #10148

nikkiselev · 2020-01-18T07:59:03Z

Bug report

Describe the bug

I have a global CSS imported in /pages/_app.js and name.module.css imported in a page. In production mode the CSS Module is loaded after the global CSS. In development mode, the CSS Module is loaded before the global CSS.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Repository with code needed to reproduce the issue

Add a global style within pages/_app.js
Add and import a CSS Module
Add CSS classes to both files with the same specificity, so the order of including files resolves the conflict.
Run "dev" script.
See order of CSS in a browser.
Run "build" and "start" scripts.
See different order of CSS in a browser.

Expected behavior

In development mode the global CSS should be loaded first and CSS Modules later on, the same as it works in production.

System information

OS: macOS 10.15.2
Browser: Chrome 79.0.3945.130
Version of Next.js: 9.2.0

Additional context

The page looks different in dev and production modes because of CSS overriding.

The text was updated successfully, but these errors were encountered:

Timer · 2020-01-19T21:40:49Z

Please provide an example of the CSS files used.

nikkiselev · 2020-01-20T05:50:33Z

I've added a repository with minimum code that reproduces the issue https://github.com/nikkiselev/nextjs-css

liborvanek · 2020-01-20T09:12:33Z

Once this issue is resolved, will there be any way to control the order of imported CSS files?
Looks like the default order is global CSS first, CSS modules afterwards.
Frem previous comments I understood it wasn't possible to modify CSS import order when using next-css, but it might be possible using new CSS Support. But I can't seem to find any mention neither in the RFC, docs nor release notes.

A common desirable pattern might look like this:

– resets
– global CSS (typography etc.)
– CSS modules
– global utilities

timneutkens · 2020-01-20T12:39:32Z

CSS resets are global CSS, you can import them first in _app.js and it'll be loaded in that order.

// in pages/_app.js
import 'reset.css'
import 'global.css'

liborvanek · 2020-01-20T12:42:13Z

@timneutkens Yes, I know. Sorry for not being clear. My question is more like: Are we able to import CSS, that would be loaded after CSS modules?

timneutkens · 2020-01-20T12:45:48Z

You can't know the load order of CSS modules as they get added per-page. So there really is no "after" CSS modules state.

liborvanek · 2020-01-20T13:01:09Z

@timneutkens I don't need to know the load order of CSS modules, I just need to find a way to include a global CSS at the very end of <head>, so dynamically loaded CSS modules are injected always before this stylesheet, not after.
Does that make sense? Is it even possible?

Timer · 2020-01-20T15:15:30Z

@liborvanek that is not possible, nor a use case we're currently interested in exploring. CSS will be loaded the order it's imported by the application.

Exelord · 2020-02-28T08:24:00Z

Any update on this issue? It's blocking my styles development using sass :/

pav-w · 2020-03-10T12:10:13Z

What's the progress with this? I can't use the latest version on next because of this. I load two stylesheets in my project, bootstrap first then my styles. When I deploy to production the load order is reversed and all my styles are overwritten by bootstrap's...

bravokiloecho · 2020-03-16T17:12:25Z

Shouldn't any CSS imported from CSS modules override global styles imported in the _app.js file?

If I land on a page with a component that imports a CSS module, the global styles are added after the module's styles and overwrites its rules. But if I start the app and then go to the page with the component, the component's CSS gets added after the global styles and therefire overrides them.

I would have thought the second version is the ideal behaviour. But it definitely shouldn't be inconsistent no?

valse · 2020-03-18T13:58:54Z

We have the same issue using the version 9.3.0 with SASS globals in _app and the CSS modules for single components

jahirfiquitiva · 2020-04-03T16:49:21Z

I'm currently facing the same issue and it's kinda frustrating. It's stopping me from using next for now. 😕

jrobchin · 2020-04-10T01:19:42Z

Anyone have any ideas on how to resolve this? It's making it difficult to use Next as intended.

sparkertime · 2020-04-10T15:18:25Z

I too am suffering from this. Right now my only solution is to switch to cycles of yarn build && yarn start when working on CSS. This is also fixed by reverting to 9.1.7 and using the next-css / next-sass plugins, but that leaves a lot of great recent features on the table. I was hoping I could leverage the composes feature of css-modules to work around this but I think that's blocked by a separate issue in #10142

~~I took a look at the CSS loading code in next as well as what magic happens in yarn build and it's beyond me, but I really hope this gets a PR soon.~~

(fixed, see below)

sparkertime · 2020-04-15T13:29:40Z

If anyone on this thread is desperate for this fix, it is available in the 9.3.6-canary.0 next.js release (thanks @Timer for turning that around so quickly!)

jrobchin · 2020-04-15T13:43:50Z

@sparkertime this is awesome, thanks!

Joozty · 2020-04-16T07:53:54Z

@sparkertime many thanks for looking into it. Nonetheless, it's still broken when I import some components in _app.jsx. I prepared a repo to reproduce. Hope it helps :)

https://github.com/Joozty/nextjs-css

sparkertime · 2020-04-16T12:50:44Z

@Joozty You'll probably want to open an issue specifically for ordering when importing modules from _app.jsx. This issue is now closed and what you're reporting is definitely beyond my ability to fix, so hopefully a new issue will get some attention from the core team

chornos13 · 2020-05-31T19:32:27Z

This is still not fixed yet, I still experienced with this issue in production mode in v9.4.4,
I use custom CSS loader and use antd-design

chornos13 · 2020-06-03T06:54:25Z

after finding out what is the problem, I found that this issue because of mini-css plugin, I tried with my own version of webpack-config, after I added mini-css plugin to build on production this bug happened.

typeofweb · 2020-06-07T11:58:30Z

9.4.4 did NOT fix the problem for me. However, @canary (currently 9.4.5-canary.7) DOES fix it in my case.
Hope that helps.

millievn · 2020-06-18T07:59:54Z

This is still not fixed yet, I still experienced with this issue in production mode in v9.4.4,
I use custom CSS loader and use antd-design

same problem. I use reset.scss in _app.tsx and it does not work unless i reload page. Any solution now?

chshanovskiy · 2020-07-23T06:11:17Z

I faced this problem too.

In my _app.tsx, I imported single css file, which @imported other global styles. And this led to a problem.
The solution was to import ALL global css files inside the _app.tsx.

Before:

// _app.tsx
import "../styles/index.css"

// styles/index.css
@import "./reset.css";
@import "./grid.css";

After:

// _app.tsx
import "../styles/reset.css";
import "../styles/grid.css";

hydRAnger · 2020-07-31T07:06:50Z

This problem is still there, is there any plan on fixing it?

yash-shirsath · 2020-08-11T18:57:30Z

Not really a fix, but a temporary solution is to directly copy and paste the files into one document to prevent Next from re-ordering them.

I am on Next v9.5.2. This is preventing me from using next for future projects. Could you please advise when this will be fixed? Or is there a way to specify the order of imports for css and scss files?

Timer · 2020-08-12T04:24:55Z

I'm locking this issue because the original issue was solved. If you are experiencing a bug, please open a new issue.

Timer added priority: high labels Jan 19, 2020

Timer added this to the 9.2.1 milestone Jan 19, 2020

Timer modified the milestones: 9.2.1, 9.2.2 Jan 23, 2020

Exelord mentioned this issue Feb 5, 2020

Bug: Global styles included in _app.js are placing at the end of <head> #10362

Closed

Pegase745 mentioned this issue Feb 5, 2020

Add an antd@4 example with [email protected] #10435

Closed

Timer modified the milestones: 9.2.2, 9.2.x Feb 18, 2020

Timer modified the milestones: 9.3.x, 9.3.1, 9.3.2 Mar 12, 2020

Timer modified the milestones: 9.3.2, 9.3.3 Mar 27, 2020

Joozty mentioned this issue Mar 30, 2020

Upgrade next oacore/dashboard#218

Merged

Timer modified the milestones: 9.3.3, 9.3.4 Mar 30, 2020

Timer modified the milestones: 9.3.4, 9.3.5 Apr 3, 2020

sparkertime mentioned this issue Apr 15, 2020

Correct Global and Local CSS Loading Order in Dev #11901

Merged

Timer modified the milestones: 9.3.5, 9.3.6 Apr 15, 2020

Timer closed this as completed in #11901 Apr 15, 2020

Joozty mentioned this issue Apr 16, 2020

Inconsistent loading order of CSS in dev mode #11946

Closed

sparkertime mentioned this issue Apr 18, 2020

Hot reloading still loads CSS modules before global CSS #12004

Closed

StarpTech mentioned this issue May 25, 2020

Allow importing CSS modules from other NPM packages #13282

Closed

vercel locked as resolved and limited conversation to collaborators Aug 12, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Inconsistent loading order of CSS Modules + global CSS #10148

Inconsistent loading order of CSS Modules + global CSS #10148

nikkiselev commented Jan 18, 2020 •

edited

Loading

Timer commented Jan 19, 2020

nikkiselev commented Jan 20, 2020

liborvanek commented Jan 20, 2020

timneutkens commented Jan 20, 2020

liborvanek commented Jan 20, 2020

timneutkens commented Jan 20, 2020

liborvanek commented Jan 20, 2020

Timer commented Jan 20, 2020 •

edited by timneutkens

Loading

Exelord commented Feb 28, 2020 •

edited

Loading

pav-w commented Mar 10, 2020

bravokiloecho commented Mar 16, 2020 •

edited

Loading

valse commented Mar 18, 2020 •

edited

Loading

jahirfiquitiva commented Apr 3, 2020

jrobchin commented Apr 10, 2020

sparkertime commented Apr 10, 2020 •

edited

Loading

sparkertime commented Apr 15, 2020

jrobchin commented Apr 15, 2020

Joozty commented Apr 16, 2020 •

edited

Loading

sparkertime commented Apr 16, 2020

chornos13 commented May 31, 2020 •

edited

Loading

chornos13 commented Jun 3, 2020

typeofweb commented Jun 7, 2020

millievn commented Jun 18, 2020 •

edited

Loading

chshanovskiy commented Jul 23, 2020

hydRAnger commented Jul 31, 2020

yash-shirsath commented Aug 11, 2020

Timer commented Aug 12, 2020

Inconsistent loading order of CSS Modules + global CSS #10148

Inconsistent loading order of CSS Modules + global CSS #10148

Comments

nikkiselev commented Jan 18, 2020 • edited Loading

Bug report

Describe the bug

To Reproduce

Expected behavior

System information

Additional context

Timer commented Jan 19, 2020

nikkiselev commented Jan 20, 2020

liborvanek commented Jan 20, 2020

timneutkens commented Jan 20, 2020

liborvanek commented Jan 20, 2020

timneutkens commented Jan 20, 2020

liborvanek commented Jan 20, 2020

Timer commented Jan 20, 2020 • edited by timneutkens Loading

Exelord commented Feb 28, 2020 • edited Loading

pav-w commented Mar 10, 2020

bravokiloecho commented Mar 16, 2020 • edited Loading

valse commented Mar 18, 2020 • edited Loading

jahirfiquitiva commented Apr 3, 2020

jrobchin commented Apr 10, 2020

sparkertime commented Apr 10, 2020 • edited Loading

sparkertime commented Apr 15, 2020

jrobchin commented Apr 15, 2020

Joozty commented Apr 16, 2020 • edited Loading

sparkertime commented Apr 16, 2020

chornos13 commented May 31, 2020 • edited Loading

chornos13 commented Jun 3, 2020

typeofweb commented Jun 7, 2020

millievn commented Jun 18, 2020 • edited Loading

chshanovskiy commented Jul 23, 2020

hydRAnger commented Jul 31, 2020

yash-shirsath commented Aug 11, 2020

Timer commented Aug 12, 2020

nikkiselev commented Jan 18, 2020 •

edited

Loading

Timer commented Jan 20, 2020 •

edited by timneutkens

Loading

Exelord commented Feb 28, 2020 •

edited

Loading

bravokiloecho commented Mar 16, 2020 •

edited

Loading

valse commented Mar 18, 2020 •

edited

Loading

sparkertime commented Apr 10, 2020 •

edited

Loading

Joozty commented Apr 16, 2020 •

edited

Loading

chornos13 commented May 31, 2020 •

edited

Loading

millievn commented Jun 18, 2020 •

edited

Loading