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 #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