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