Mini-css-extract-plugin: CSS files load order mismatch in prod and dev envs

[yantakus]

I'm having the following issue:

In dev mode I have the following style order:

and in production it is like this:

Note different font-size applied to the element because of different CSS specificity (files load order) in these cases.

.c101__sidebarLink comes from react component that renders this element, and .plain-link, .contentful a is from common.scss that is imported in root component for the whole app.

My first assumption was that style-loader and mini-css-extract-plugin work differently because I'm using this config from the docs:

{
  loader:
    options.mode === 'development'
    ? 'style-loader'
    : MiniCssExtractPlugin.loader,
},

But when I removed style-loader and left only mini-css-extract-plugin for both environments (just for testing purposes), the issue persisted. Then I used style-loader for both envs and the issue was gone. Also I didn't have this issue with webpack 3 and extract-text-webpack-plugin for prod env.

So my conclusion is that the issue is in mini-css-extract-plugin. For some reason it doesn't persist order of loaded CSS files in different environments. I'm not sure if it is related to https://github.com/webpack-contrib/mini-css-extract-plugin/pull/130 because I don't have multiple entry points.

[alexander-akait]

@yantakus please create minimum reproducible test repo

[yantakus]

@evilebottnawi I've tried to remove everything from my app and leave just this small piece for demonstration and ... it works the same for both dev and prod :(

Will wait for #130 and check if it resolves my issue...

[boraturant]

@yantakus what change made it work? I am having the same problem.

[yantakus]

@boraturant it still works the same as described in my first message here. But I wasn't able to reproduce it, when I removed 99% of the app and left just one page and a single component for demonstration purpose. In this case it works as expected, identically in prod and dev.

So I just used !important as a temporary workaround. If you manage to create a minimal reproducible test repo, guys here might be able to help us.

[alexander-akait]

@yantakus please test with 0.4.1 version

[yantakus]

@evilebottnawi, nothing changed for me with 0.4.1.

[dcousineau]

I recently experienced this problem occur by upgrading from 0.4.0 to 0.4.1.

Unfortunately due to rolling back and not having time I won't be able to chase down the exact issue and provide a minimal replication.

I've experience drift between dev and production styles in the past due to changes in the ordering in which they are included which is understandable (I don't use mini-css-extract-plugin in dev), however 0.4.1 changing means I will have to go back and re-check all dev/prod drift.

[mnpenner]

Nor me. 0.4.1 is still broken AFAICT.

[alexander-akait]

@mnpenner looks you have invalid cacheGroups values

[mnpenner]

@evilebottnawi I haven't posted my cacheGroups? Not in this thread anyway. I tried with:

{
    splitChunks: {
    chunks: 'all',
    cacheGroups: {
        default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true,
        },
        styles: {
            name: 'styles',
            test: /\.(css|less)$/,
            chunks: 'all',
            enforce: true
        }
    }
}

And without the styles block. Same result.

CSS works with WDS (style-loader) but not in production build (mini-css)

[alexander-akait]

@mnpenner looks you have css from node_modules and they cached to vendor group, use (maybe you need modify this for you):

vendors: {
  chunks: "initial",
  enforce: true,
  name: "vendor",
  priority: -10,
  test: module => {
    const moduleName = module.nameForCondition
      ? module.nameForCondition()
      : "";

    return (
      /[\\/]node_modules[\\/]/i.test(moduleName) &&
      // In vendor we have only js
      /\.(js|jsx|mjs)$/i.test(moduleName)
    );
  }
}

[mnpenner]

I just figured out what was causing my issue. So sorry for bugging you @evilebottnawi ! I thought it was a CSS ordering issue, but it turns out it cssnano which I only have enabled in production. It shrinking my z-indexs to save a few bytes, and that doesn't play nice with my other CSS.

[boraturant]

I have created a repo to demonstrate the CSS order difference between dev and prod builds. The problem isn't related with multi-entry builds.

https://github.com/boraturant/MiniCssExtractPlugin_CSSOrderProblem

Edit: Typo on the posted images, I wrote White, it should be Green

[rofrol]

@boraturant maybe disable cssDeclarationSorter

[alexander-akait]

@boraturant please create this issue in webpack repo

[albv]

I have this problem with v0.4.1 but v0.4.0 seems to working fine

[ShanaMaid]

@albv unfortunately, v0.4.0 is still bad!

[ShanaMaid]

@evilebottnawi I try to fix this issue，it seems to be that sort func is not correct.
I test pr #236 in local, issue is sloved.

[alexander-akait]

@ShanaMaid without minimum reproducible test repo we can't merge PR, also you break order in other cases

[ShanaMaid]

@evilebottnawi
https://github.com/ShanaMaid/MiniCssExtractPlugin_CSSOrderProblem

I use rep that @boraturant offer, it use local mini-css-extract-plugin build by my pr #236 。

use [email protected]

use local mini-css-extract-plugin build by my pr #236

npm run dev 

npm run build

their css is same.

[michael-ciniawsky]

246 But CSS Ordering is still not 💯 deterministic and likely never will be, you will get spammy warnings in case chunk1 and chunk2 imports modules in a different order, otherwise css-modules usage is encouraged to avoid issues wit ordering (e.g the CSS Cascade) altogether

[sahar922]

Any solution for this? Happen the same in my project...

[7iomka]

I use old ETWP with webpack 4 and now i happen the same bug in work!
How to fix that?

[adamJLev]

This problem is still happening to me, on all the latest versions of webpack (4.38.0) and this plugin (0.8.0)

My css is all fucked up because the order of bootstrap and my bootstrap overrides is seemingly random.

For you guys that are not having this issue - are you not splitting out CSS into separate files?

Here's my relevant webpack config

plugins: [
    // This file is important for django to load the transpiled assets
    new BundleTracker({filename: './webpack-stats.json'}),

    new VueLoaderPlugin(),

    // Extract css into its own file
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:12].css',
    }),
  ],
  optimization: {
    // - manifest.js with webpack init stuff
    // - vendor.js with anything from /node_modules/
    // - app.js our code
    splitChunks: {
      cacheGroups: {
        commons: {
          name: 'vendor',
          test: /\/node_modules\//,
          chunks: 'all'
        },
      }
    },
    runtimeChunk: {
      name: 'manifest'
    }
  },

Plz help ! 😄

[7iomka]

This problem is still happening to me, on all the latest versions of webpack (4.38.0) and this plugin (0.8.0)

My css is all fucked up because the order of bootstrap and my bootstrap overrides is seemingly random.

For you guys that are not having this issue - are you not splitting out CSS into separate files?

Here's my relevant webpack config

plugins: [
    // This file is important for django to load the transpiled assets
    new BundleTracker({filename: './webpack-stats.json'}),

    new VueLoaderPlugin(),

    // Extract css into its own file
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:12].css',
    }),
  ],
  optimization: {
    // - manifest.js with webpack init stuff
    // - vendor.js with anything from /node_modules/
    // - app.js our code
    splitChunks: {
      cacheGroups: {
        commons: {
          name: 'vendor',
          test: /\/node_modules\//,
          chunks: 'all'
        },
      }
    },
    runtimeChunk: {
      name: 'manifest'
    }
  },

Plz help ! 😄

The same problem..
I temporarily had to abandon any components (import css files inside js)
Instead, I only import component files into my js entry.
and in main.scss I import only scss components files.
That is, while this problem is relevant, I cannot use webpack plugins to process scss / css and have to make the add-in a separate process (via node-sass)
I don’t know why there are so few people who would notice this problem and start writing about it to the developers ..
Because for me this problem is just a critical ..
She put my development at risk, there was no time for a decision or for a search ..

[qhxin]

this issue should not be closed

[7iomka]

@yantakus please reopen this issue

[carlosrberto]

Still have this problem with the latest version.

[Lucius0]

Still have this problem with the version 0.8.0.

i extracted all css in a single file. and now i used !importance as a temporary workaround.

[7iomka]

Still have this problem with the version 0.8.0.

i extracted all css in a single file. and now i used !importance as a temporary workaround.

It's a very bad practice to do that...
In my project I need to do this kind of manipulations with bootstrap core files, for example, .col-auto have width:auto, and with wrong import order, broken by this plugin, that property is overrided by code of width for common column classes (width: 100%) - that break by layout!

[Lucius0]

Still have this problem with the version 0.8.0.
i extracted all css in a single file. and now i used !importance as a temporary workaround.

It's a very bad practice to do that...
In my project I need to do this kind of manipulations with bootstrap core files, for example, .col-auto have width:auto, and with wrong import order, broken by this plugin, that property is overrided by code of width for common column classes (width: 100%) - that break by layout!

i know, but i have no idea how to fix it.

[alexander-akait]

Please stop writing post like same issue/same problem, if you need help please create minimum reproducible test repo

[ptandler]

I can't offer a _minimum_ repo, but a _repo_ where this problem occurs (well i think at least):
https://github.com/ptandler/vuepress-theme-single-page-sections
you can compare the screenshots on this page I generated from the dev server with the live version at https://ptandler.github.io/vuepress-theme-single-page-sections/ which runs the build.
(using @vuepress/core@^1.2.0)

See also https://stackoverflow.com/questions/58977014/how-can-i-disable-the-mini-css-extract-plugin-in-vuepress

I noticed that VuePress uses [email protected] so I tried upgrading mini-css-extract-plugin to the current version 0.8.0, but this didn't change anything.