CSS files load order mismatch in prod and dev envs #188

yantakus · 2018-06-25T17:27:56Z

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.

The text was updated successfully, but these errors were encountered:

alexander-akait · 2018-06-25T17:32:53Z

@yantakus please create minimum reproducible test repo

yantakus · 2018-06-26T11:12:40Z

@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 · 2018-06-28T14:18:37Z

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

yantakus · 2018-06-28T14:45:58Z

@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 · 2018-06-29T14:02:17Z

@yantakus please test with 0.4.1 version

yantakus · 2018-07-02T09:42:10Z

@evilebottnawi, nothing changed for me with 0.4.1.

dcousineau · 2018-07-02T20:10:42Z

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 · 2018-07-03T19:22:48Z

Nor me. 0.4.1 is still broken AFAICT.

alexander-akait · 2018-07-03T19:24:26Z

@mnpenner looks you have invalid cacheGroups values

mnpenner · 2018-07-03T19:31:59Z

@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 · 2018-07-03T19:44:58Z

@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 · 2018-07-03T21:20:53Z

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 · 2018-07-06T12:24:08Z

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 · 2018-07-30T15:05:36Z

@boraturant maybe disable cssDeclarationSorter

alexander-akait · 2018-07-30T15:13:43Z

@boraturant please create this issue in webpack repo

albv · 2018-08-06T15:58:28Z

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

ShanaMaid · 2018-08-08T08:54:44Z

@albv unfortunately, v0.4.0 is still bad!

ShanaMaid · 2018-08-08T10:12:06Z

@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 · 2018-08-08T10:21:01Z

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

ShanaMaid · 2018-08-08T11:18:33Z

@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 mini-css-extract-plugin@0.4.1

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

npm run dev 

npm run build

their css is same.

* fix css files load order mismatch #188 * fix(src): fix sort bug * feat(test): add test * test(sorting): add test case which uses the fallback behavior * fix(sorting): revert change to restore original behavior This fixes the testcase

michael-ciniawsky · 2018-08-24T17:28:00Z

#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 · 2019-02-20T21:40:56Z

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

7iomka · 2019-05-29T04:20:32Z

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

adamJLev · 2019-07-30T14:47:49Z

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 · 2019-07-31T05:18:54Z

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 · 2019-08-02T09:26:47Z

this issue should not be closed

7iomka · 2019-08-02T13:31:56Z

@yantakus please reopen this issue

carlosrberto · 2019-08-02T15:57:32Z

Still have this problem with the latest version.

Lucius0 · 2019-08-19T08:30:42Z

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 · 2019-08-19T12:07:25Z

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 · 2019-08-20T11:19:48Z

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 · 2019-08-20T11:21:21Z

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

ptandler · 2019-11-21T14:36:31Z

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 mini-css-extract-plugin@0.6.0 so I tried upgrading mini-css-extract-plugin to the current version 0.8.0, but this didn't change anything.

Import our application CSS as the very last thing, so that it can properly override PatternFly variables. Before, our application CSS could land in the first third of dist/index.css *before* PatternFly's definitions, so that the latter overrode the former [1]. This is a long-standing bug in mini-css-extract-plugin ([2] and countless things that point to it) with `NODE_ENV=production` builds. As a workaround, make sure that app.scss is the absolutely last imported CSS, instead of "almost last". It is still conceptually correct for the application CSS to be able to override patternfly-4-overrides.scss. [1] https://github.com/martinpitt/performance-graphs/issues/10 [2] webpack-contrib/mini-css-extract-plugin#188

Import our application CSS as the very last thing, so that it can properly override PatternFly variables. Before, our application CSS could land in the first third of dist/index.css *before* PatternFly's definitions, so that the latter overrode the former [1]. This is a long-standing bug in mini-css-extract-plugin ([2] and countless things that point to it) with `NODE_ENV=production` builds. As a workaround, make sure that app.scss is the absolutely last imported CSS, instead of "almost last". It is still conceptually correct for the application CSS to be able to override patternfly-4-overrides.scss. Closes #362 [1] https://github.com/martinpitt/performance-graphs/issues/10 [2] webpack-contrib/mini-css-extract-plugin#188

StasTwiztah · 2022-09-30T12:17:33Z

If you still have a problem with the order mismatch, consider disabling hot module replacement option in your webpack config file for the prod env like this:

{
  loader: MiniCssExtractPlugin.loader,
  options: {
    hmr: process.env.NODE_ENV === 'development',
  },
}

arthabus · 2024-06-27T14:08:43Z

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

same issue/same problem here. I don't see why creating exactly the same issue with the same title if one already exists and is not fixed. This one should be reopened. Apparently people still face it, me included.

mnpenner mentioned this issue Jul 3, 2018

Question: Multiple JS chunks, single CSS chunk #52

Closed

boraturant mentioned this issue Jul 7, 2018

CSS ordering from shared chunk not deterministic with multi entry points #202

Closed

ShanaMaid pushed a commit to ShanaMaid/mini-css-extract-plugin that referenced this issue Aug 8, 2018

fix css files load order mismatch webpack-contrib#188

7ea91fc

ShanaMaid added a commit to ShanaMaid/mini-css-extract-plugin that referenced this issue Aug 8, 2018

fix css files load order mismatch webpack-contrib#188

856da5e

ShanaMaid mentioned this issue Aug 8, 2018

fix(index): loading order mismatch #236

Merged

6 tasks

rowanoulton mentioned this issue Aug 18, 2018

fix(index): correct order of CSS imports #242

Closed

6 tasks

michael-ciniawsky closed this as completed Aug 24, 2018

spefley mentioned this issue Oct 3, 2018

CSS ordering conflict with DatePicker month/year choosers palantir/blueprint#2952

Open

KaelWD mentioned this issue Jul 23, 2019

[Bug Report] vuetify-loader changes order of CSS during build vuetifyjs/vuetify#7933

Closed

ScriptedAlchemy mentioned this issue Jul 30, 2019

CSS Order is different when extractCSS is used nuxt/nuxt#4219

Closed

kefranabg mentioned this issue Sep 25, 2019

Inconsistent css ordering between dev and build vuejs/vuepress#1885

Open

1 task

Hypnosphi mentioned this issue Feb 18, 2020

sideEffects: false changes rules order in production #501

Closed

chris-hailstorm mentioned this issue May 15, 2020

CSS import order differs between dev and prod redwoodjs/redwood#549

Open

sallf mentioned this issue Aug 5, 2020

Control import order when importing with multiple rules #562

Closed

martinpitt mentioned this issue Sep 8, 2020

Ensure application CSS has priority over library CSS cockpit-project/starter-kit#362

Merged

CSS files load order mismatch in prod and dev envs #188

CSS files load order mismatch in prod and dev envs #188

Comments

yantakus commented Jun 25, 2018

alexander-akait commented Jun 25, 2018

yantakus commented Jun 26, 2018

boraturant commented Jun 28, 2018

yantakus commented Jun 28, 2018

alexander-akait commented Jun 29, 2018

yantakus commented Jul 2, 2018

dcousineau commented Jul 2, 2018 • edited Loading

mnpenner commented Jul 3, 2018

alexander-akait commented Jul 3, 2018

mnpenner commented Jul 3, 2018 • edited Loading

alexander-akait commented Jul 3, 2018 • edited Loading

mnpenner commented Jul 3, 2018 • edited Loading

boraturant commented Jul 6, 2018 • edited Loading

rofrol commented Jul 30, 2018

alexander-akait commented Jul 30, 2018

albv commented Aug 6, 2018

ShanaMaid commented Aug 8, 2018 • edited Loading

ShanaMaid commented Aug 8, 2018

alexander-akait commented Aug 8, 2018 • edited Loading

ShanaMaid commented Aug 8, 2018 • edited Loading

use mini-css-extract-plugin@0.4.1

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

michael-ciniawsky commented Aug 24, 2018 • edited Loading

sahar922 commented Feb 20, 2019

7iomka commented May 29, 2019

adamJLev commented Jul 30, 2019 • edited Loading

7iomka commented Jul 31, 2019

qhxin commented Aug 2, 2019

7iomka commented Aug 2, 2019

carlosrberto commented Aug 2, 2019

Lucius0 commented Aug 19, 2019 • edited Loading

7iomka commented Aug 19, 2019

Lucius0 commented Aug 20, 2019

alexander-akait commented Aug 20, 2019

ptandler commented Nov 21, 2019

StasTwiztah commented Sep 30, 2022 • edited Loading

arthabus commented Jun 27, 2024

dcousineau commented Jul 2, 2018 •

edited

Loading

mnpenner commented Jul 3, 2018 •

edited

Loading

alexander-akait commented Jul 3, 2018 •

edited

Loading

mnpenner commented Jul 3, 2018 •

edited

Loading

boraturant commented Jul 6, 2018 •

edited

Loading

ShanaMaid commented Aug 8, 2018 •

edited

Loading

alexander-akait commented Aug 8, 2018 •

edited

Loading

ShanaMaid commented Aug 8, 2018 •

edited

Loading

michael-ciniawsky commented Aug 24, 2018 •

edited

Loading

adamJLev commented Jul 30, 2019 •

edited

Loading

Lucius0 commented Aug 19, 2019 •

edited

Loading

StasTwiztah commented Sep 30, 2022 •

edited

Loading