Control CSS imports order for Next.js & webpack based production applications

Solving mini-css-extract-plugin conflicting order warning

This article and others are available at “I Read You Learn” Blog

I’m Excited To Introduce My First Course — SkilledJS Frontend Interview
With 70+ Lessons, 35+ Exercises & 15+ Quizzes.

It Has A KickAss React Interview Template,And 5 Amazing Modules,
that will prepare you for the Javascript interview, such as:
Professional Javascript, Professional React, Common Code Libraries, Industry Best-Practices, Interview Template Overview.

Course Link: Skilled JS Frontend Interview Course

While working on a web application at work ( React + Next.js ) I’ve encountered the following warning while running a build of the application:

Compiled with warnings
chunk styles [mini-css-extract-plugin]
Conflicting order between: …

At first we decided to ignore the warning because it seemed like it did not affect our application but one of the developers noticed that there are parts of the css that was changing its order when switching from development mode to production mode.

Development CSS with correct order of classes:

Production build CSS with incorrect order of classes:

Now the warning itself doesn’t say much about how to fix the problem or where it actually occurs , it only shows the files that are associated with the problem, so I’ve started commenting out code sections where i suspected it occurs until I’ve found the component that causes the warning.

I should note that one of the weird parts of debugging the issue was that while i was commenting code sections and rebuilding the project each time so that i could see the change of the CSS classes in production, I was commenting code from a component that was unmounted and i actually saw the CSS changes order after production build.
(I didn’t understand at the time that the problem was strictly build related)

Now while looking at the components code and .scss file I could not find any issues that could cause the CSS to change from development to production.

The CSS for this file was encapsulated / scoped in its own class so its CSS style won’t change/override another component’s style and the class component itself while commenting out its content still affected the other css file.

Now to understand the issue we must first understand how Next.js builds its application. If you’re new to the framework then you might think that while building the project it creates a single bundle with all the files as a regular application that uses webpack would, but instead Next.js builds each page of the application separately with its own imports and CSS files.

Every page is being built separately so we get the warning because for every page there is a different order of importing the components, so in one page we imported X.scss before Y.scss and for another page we imported Y.scss before X.scss so the mini-css-extract-plugin doesn’t know in which order it should bundle those pages CSS.

Now I’ve tried setting the order of the imports alphabetically for the components involved in the warning to be the same for the entire project but it still didn’t work, so i had to introduce a certain order to the CSS file imports that will not change throughout the build process.

The solution i came to was creating a single index.scss file that will hold all of the css files imports for the entire project and will be imported at _app.js
so it will be used once for the entire application.

The index.scss imports components.scss and containers.scss so it will be easier to read instead of having one file with all your projects imports.

By creating this file we introduced our own order to the .scss imports and when Next.js builds the project it calls all the .scss files at once and the order will stay the same, therefore the problem is solved and the warning will go away.

If you’ve encountered the same problem for non Next.js applications, using encapsulation for each component’s CSS should solve the problem for you and you can ignore the warning if it continues. Even though the order is different, each components style is unique to that component and will not interfere with other components css, and while using non Next.js applications the build process using webpack will create a single bundle, so there will be no overrides to the css.