Multi-entry point config: Ordering not matching JS import order

[bawjensen]

Versions involved:

Node: v8.10.0

package.json:

"dependencies": {
  "css-loader": "^0.28.11",
  "mini-css-extract-plugin": "^0.4.0",
  "style-loader": "^0.21.0",
  "webpack": "^4.6.0",
  "webpack-cli": "^2.0.15"
}

Example project showing the bug in question: https://github.com/bawjensen/mcep-order-bug

You can see I have two entry points, entry-one.js and entry-two.js. They import their styling in a different order from each other, importing one.css then two.css or vice versa. However, as you can see in the dist-example/output-one.css/dist-example/output-two.css built files, their ordering is the same as each other, both having the .two {...} styling before the .one {...}.

You can see the versions of packages in question in the package.json, but I just built this example from scratch with the latest version of each package in question (webpack, css-loader, mini-css-extract-plugin).

Note, I left style-loader in the repo in case someone wants to try it themselves - I could not replicate this bug with style-loader, it injects the styles in the correct order into <style> tags. It seems to be specific to MCEP.

Also, I could not replicate the bug with a single entry point, it seems it must be two (or more).

Something even more odd about this particular bug: If you build the code as it stands in the repo, and then alter entry-one.js by commenting out one of the imports, output-two.css changes despite entry-two.js not having been modified. This happens when running yarn webpack with or without the --watch flag.

[alexander-akait]

@bawjensen thanks for issue, maybe problem inside in webpack, feel free to investigate problem and send PR 👍

[bawjensen]

@evilebottnawi if it were an issue within webpack itself I would've assumed the CSS ordering would be broken for style-loader like it is for MCEP. But as I mentioned the CSS gets injected into the DOM in the correct order.

I could be off-base here. My familiarity with webpack plugins is pretty minimal.