Conflict order of styles

[blackswanny]

Good day, we moved from 2.6 webpack to 4.28.4. It's a big bump and of course we migrated from old css plugin to new mini-css-extract-plugin. However, it doesn't bundle css properly anymore, which causes wrong render
We have dozens of the next warnings. Seems like something is wrong with optimization of chunks of css

WARNING in chunk bootstrap [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/components/1.scss
 * css ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/components/2.scss
 * css ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/components/3.scss
 * css ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/components/4.scss

rule is

      {
        test: /\.s?css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }

optimization looks like

    optimization: {
      splitChunks: {
        name: 'bootstrap',
        minChunks: Infinity,
        cacheGroups: {
          bootstrap: {
            filename: '[name].[chunkhash].js'
          },
          styles: {
            name: 'styles',
            test: /\.css$/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    },

plugins is

new MiniCssExtractPlugin({ filename: 'style.css' })

if I replace MiniCssExtractPlugin.loaderwith style-loader, it seems to be switched off and error no longer appears, except I have no static/style.css file generated and all styles become inlined

[alexander-akait]

Because you have conflict in order, it is expected, you need fix order, extracting css sometimes is non deterministic

[blackswanny]

agreed. But the old one extract-text-webpack-plugin was able to work with our imports of scss styles, but it's incompatible with webpack 4. I googled, so ideally we need to make tree traverse order of css imports. However, with existing project of hundreds components it's not easy. Some suggested to use tools like this one for VS Code ( https://marketplace.visualstudio.com/items?itemName=amatiasq.sort-imports) . It puts all scss imports on top of component file. However, it doesn't work and the amount of conflict order warnings stayed the same.
So far we can't switch to webpack 4 due to being unable to refactor so much code to comply with new plugin.

[alexander-akait]

It is just warning you can ignore this

[vigu-madurai]

For me, the same warnings are coming and the worst part is no css is applied on the project.
FYI: I have used purify css too.

[he5050]

For me

WARNING in chunk commons [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"E://h-project//react-spa//.cache"}!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/less-loader/dist/cjs.js?{"javascriptEnabled":true}!./node_modules/antd/lib/input/style/index.less
 * css ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"E://h-project//react-spa//.cache"}!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/less-loader/dist/cjs.js?{"javascriptEnabled":true}!./node_modules/antd/lib/button/style/index.less

[vtereshyn]

any updates?

[designbyadrian]

@vtereshyn Check the order of the import of your components.

Example:

You have two components:

📄 Header.js

import css from './header.scss';

📄 Footer.js

import css from './footer.scss';

SCSS files:

📄 header.scss

@import 'variables';

📄 footer.scss

@import 'variables';

📄 variables.scss

$color1: red;
$color2: blue;

You have two views/pages/containers:

📄 Page1.js

import Header from './Header'; 
import Header from './Footer';

// ...

📄 Page2.js

import Header from './Footer';
import Header from './Header'; 

// ...

---

Reordering Page2's imports should solve your issues

Note that I still get CSS imported in different order on dev and prod, so while the plugin doesn't complain, as there's no conflict, there's still some work from your end making sure they're imported in a certain order.

[vtereshyn]

Okay, so you are proposing me to check the order of imports in components which use css modules separately. That's interesting and can be confused for me. If you are really want mini-css-extract-plugin users to do that, so please create eslint plugin which will help us to do that, otherwise, mini-css-extract-plugin developers should fix this issue and make it as we had before.

[blackswanny]

@vtereshyn As you can see, we have discussed this topic here. And having proper order makes sense. However, the old one extract-text-webpack-plugin was able to resolve this issue itself properly. I wondered, why new one cannot do the same. This is a deal breaker for me right now to move to webpack 4. I resolved all the other issues, but this one cannot be resolved as no other plugin is available to be compatible. And as many, we have hundreds of files in project to be shuffled properly to import as needed. But I tried to do it manually and failed, as I can't comprehend proper file imports tree for such big amount of components already. And also I didn't find a tool, which would help me to traverse this file tree. So literally I am stuck and have no solution to move on.

[blackswanny]

It is just warning you can ignore this

@evilebottnawi this is not just a warning. In projects where people have same class names, overrides of styles, etc like that (sometimes it happen without our will) it makes styles broken and we can't move to this solution

[blackswanny]

@evilebottnawi coming back to this question. I found that mini-css-extract-plugin doesn't include almost all scss files I have in project. We talked about warnings regarding proper order. However, does it mean, that if warning appears, than styles will not be included? If not, help me find out why styles are not included. Here is my config

{
    optimization: {
      splitChunks: {
        name: 'bootstrap',
        minChunks: Infinity,
        cacheGroups: {
          bootstrap: {
            filename: '[name].[chunkhash].js'
          },
          styles: {
            name: 'styles',
            test: /\.(css|sass|scss)$/,
            chunks: 'all'
          }
        }
      }
    },
   plugins: [
      new MiniCssExtractPlugin({ filename: 'style.css' })
   ],
   rules: [
       {
          test: /\.(sa|sc|c)ss$/,
          use: [MiniCssExtractPlugin.loader,  'css-loader', 'sass-loader']
       }
   ]
}

[ThiefMaster]

Sorry, but the "check your order" suggestion is pretty much impossible in a larger application without a tool doing that and thus kind of useless.

[xyy94813]

I got the problem too.

Strangely, it work well in local, but conflict in CI...

If the warning is expected, it is better to provider more info for user to "check your order"

if two base component (such as Button and Input) css conflict, it is really hard to find the diff order file in a big project...

[xyy94813]

@evilebottnawi

I try to check the output files.
It is still Strange.

The warning:

chunk 12 [mini-css-extract-plugin]
Conflicting order between:
 * css ....... Module B
 * css ....... Module A

The chunk 12.css.map file:

{
  ......
  "sources": [
    "ModuleB.module.less",
    "ModuleA.module.less"
  ]
  ......
}

The chunk 12.js.map file:

{
  "sources": [
    ......
    "ModuleA.js",
    "ModuleA.module.less",
    "ModuleB.js",
    "ModuleB.module.less",
     ......
  ],
}

The sources order is difference between chunk 12.js.map and 12.css.map

[mrlubos]

I guess no one in this thread is going to like hearing this, but the only way I found to fix these warnings is really by "checking your imports." What that means is I had to realise what went wrong in the first place. What happened in my case is that I have 4 types of imports – node_modules, components, helper methods, and styles. The problems started when I added a new helper that was importing styles.

The solution was to enforce strict import rules and follow them in every module. Personally, I had to swap the import order between components and helpers. I agree that this is a cumbersome solution and not easily fixable in large projects, though. On the other hand, my warnings are now gone, yay!

[ChuckJonas]

This seems to be an unfixable problem if you are using a component library and it's imports aren't consistent order.

For example, antd

[YES-Lee]

I found this problem in such case:

Parent.js

import styles from './parent.module.scss'

Child.js

import styles from './child.module.scss'

Page.js

import Parent from 'Parent.js'
import Child from 'Child.js'

export default () => (
  <Parent>
    <Child>
      <SomeComponent />
    </Child>
  </Parent>
)

and then I solved this problem with:

Page.js

import Child from 'Child.js'
import Parent from 'Parent.js'

export default () => (
  <Parent>
    <Child>
      <SomeComponent />
    </Child>
  </Parent>
)

when Child component was nested in Parent component, it mast be imported before Parent component.

[vis97c]

@evilebottnawi coming back to this question. I found that mini-css-extract-plugin doesn't include almost all scss files I have in project. We talked about warnings regarding proper order. However, does it mean, that if warning appears, than styles will not be included? If not, help me find out why styles are not included. Here is my config

{
    optimization: {
      splitChunks: {
        name: 'bootstrap',
        minChunks: Infinity,
        cacheGroups: {
          bootstrap: {
            filename: '[name].[chunkhash].js'
          },
          styles: {
            name: 'styles',
            test: /\.(css|sass|scss)$/,
            chunks: 'all'
          }
        }
      }
    },
   plugins: [
      new MiniCssExtractPlugin({ filename: 'style.css' })
   ],
   rules: [
       {
          test: /\.(sa|sc|c)ss$/,
          use: [MiniCssExtractPlugin.loader,  'css-loader', 'sass-loader']
       }
   ]
}

Add the {enforce:true} option to the "style" cacheGroup, i was having that same issue with vue inlined scss styles, they were being processed and compiled to css and even appearing in the chunk list, but all i was getting were the normal imports until i added the option i mentioned. Hope it helps you.

[pavan-shipmnts]

It is just warning you can ignore this

i'm ignorning my CI is not.

[ajtho]

This is still an issue, why was it closed?

[pouyajabbarisani]

It's 2023 and we are still struggling with it. any update?

[alexander-akait]

@pouyajabbarisani You can find an option to disable warnings

[fordelord]

Have someone find the solution of this problem?

[float008]

any updates?

[alexander-akait]

Unfortunately, I repeat once again, this problem cannot be solved on the plugin side, there are only two options - disable warnings, we have an option for this (look at our options in readme), or correct the order of styles, this warning says that we cannot determine the correct order because in one case one comes first, in the second another and what the obvious order is simply cannot be determined

[marcosfilho-hotmart]

Unfortunately, I repeat once again, this problem cannot be solved on the plugin side, there are only two options - disable warnings, we have an option for this (look at our options in readme), or correct the order of styles, this warning says that we cannot determine the correct order because in one case one comes first, in the second another and what the obvious order is simply cannot be determined

What are the actual issues created by this behavior? Despite the warnings, my application doesn't seem to be losing styles. Also, do we still have no eslint plugin to warn about import order?

[alexander-akait]

What are the actual issues created by this behavior? Despite the warnings, my application doesn't seem to be losing styles.

You can see other order of styles, webpack tried to resolve it and done it right for you, but it doesn't mean it will be the same for other.

Also, do we still have no eslint plugin to warn about import order?

I think no, it is not a simple plugin, I don't see somebody tried to solve it.