Wrong CSS rules order when the extract text plugin and multiple entry points are used

[Reinmar]

I have an issue with a combination of the extract text plugin, SASS loader and multiple entry points.

The issue is that the order of rules in output CSS is incorrect when I use multiple entry points and the extract text plugin. It's fine when I either disable the extract text plugin or build just one entry point at a time.

To reproduce

To reproduce the issue clone this branch: https://github.com/CKEditor5/ckeditor5.github.io/tree/webpack-bug.

And run:

npm i
cd examples
../node_modules/.bin/webpack

And open examples/editor-inline.html in your browser. The problem manifests itself visually by the lack of padding in the link balloon (which you can open by the link button).

In terms of code, the issue occurs because this line:

https://github.com/CKEditor5/ckeditor5.github.io/blob/webpack-bug/examples/build/editor-inline.css#L356

Is before this line:

https://github.com/CKEditor5/ckeditor5.github.io/blob/webpack-bug/examples/build/editor-inline.css#L665

No issue when just one entry point

To see that it works when just one entry point is built you can clone this branch: https://github.com/CKEditor5/ckeditor5.github.io/tree/webpack-nobug.

On this branch, the reset rules are here:

https://github.com/CKEditor5/ckeditor5.github.io/blob/webpack-nobug/examples/build/editor-inline.css#L294

And the form styles are here:

https://github.com/CKEditor5/ckeditor5.github.io/blob/webpack-nobug/examples/build/editor-inline.css#L1077

No issue when no extract text plugin

To see that it works without the extract text plugin: https://github.com/CKEditor5/ckeditor5.github.io/tree/webpack-nobug2.

Now the CSS is in this file and it's split into multiple modules so it's hard to figure out how the CSS is loaded by just looking at https://raw.githubusercontent.com/CKEditor5/ckeditor5.github.io/webpack-nobug2/examples/build/editor-inline.js

But anyway, it works in this case – the balloon has a proper padding which means that the rules are loaded in the correct order.

Env

    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babili-webpack-plugin": "^0.1.2",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "node-sass": "^4.5.3",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.4.1"

Node: 6.9.1. MacOS: 10.12.14.

Additional information

I realise that this isn't a very minimal sample to reproduce the issue. There's lots of code in maaany repositories (fortunately, everything is public). But before I'll spend a couple of hours trying to reduce it, I'd like to at least know if you consider this a bug. And if so, what I could provide to make it simpler for you to debug it.

[sresant]

I had a similar issue using ETP 3.0.0 and Webpack ^3.4.1 and by setting the cache option to false I was able to side step this issue. Not the best fix but fixes watch mode for us.

[beckend]

@sresant what cache option are we talking about?

[sresant]

@beckend When starting webpack you can pass a cache option which is true by default. I ended up applying a patch similar to #452 to fix the issue i had. Turning off the cache slowed down rebuilds so I opted for this solution instead.

[julkue]

Also having this issue.

[julkue]

Could fix it finally by switching to https://github.com/webpack-contrib/mini-css-extract-plugin

[alexander-akait]

@julmot PR welcome

[djuretic]

Seems related to #573

[alexander-akait]

DEPRECATED
Please use: https://github.com/webpack-contrib/mini-css-extract-plugin