fix: only output when any chunk is fulfilled

[laysent]

This PR contains a:

• bugfix
• new feature
• code refactor
• test update
• typo fix
• metadata update

Motivation / Use-Case

This is a minor fix of #465.

There are chances that a module is introduced with failed dependencies, and there is no chunk fulfill the desired order (This happens when all available chunks have bad dependencies and plugin has to choose the one with less failed). I have create a new unit test for this situation. Without the fix, it will output something like:

- while fulfilling desired order of chunk group(s) undefined

while after this fix, this line will be simply removed.

The test case can be simplified as following:

• chunk1: css1
• chunk2: css2, css1
• chunk3: css3, css4, css2
• chunk4: css4, css2, css3

Plugin will choose css1 in first step, with failed dependency css2; but there is no chunk with desired order css1, css2.

Breaking Changes

(none)

Additional Info

[codecov]

Codecov Report

Merging #468 into master will increase coverage by 0.05%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #468      +/-   ##
==========================================
+ Coverage   88.59%   88.65%   +0.05%     
==========================================
  Files           5        5              
  Lines         421      423       +2     
  Branches       90       92       +2     
==========================================
+ Hits          373      375       +2     
  Misses         46       46              
  Partials        2        2

Impacted Files	Coverage Δ
src/index.js	88.26% <100%> (+0.11%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 357d073...a51fbae. Read the comment docs.

[alexander-akait]

Thanks

[laysent]

@evilebottnawi would you mind to release a minor version to npm, so that I could use it in projects?

[alexander-akait]

@laysent we are now migrate on ES modules in loaders/plugins, now i am working on css-loader, next will be stylelint and next will be mini-css-extract-plugin, ETA 1-2 week

[adjenks]

I'm just shouting out my experience with this error. I really don't understand what's going on and I don't really care too much. It may help someone though.

I am using Vue, which uses Webpack. Vue uses the mini-css-extract-plugin.
I am also using "vue-router".

I am getting many errors that look like this:

chunk --redacted-- [mini-css-extract-plugin]
Conflicting order. Following module has been added:

• css --redacted--
• css --redacted--

• couldn't fulfill desired order of chunk group(s) --redacted--
• while fulfilling desired order of chunk group(s) --redacted--

I only get these errors when the router uses lots of code splitting, but when I allow everything to be lumped together it throws one warning per route basically.

I can just ignore the warnings though, so I'll just do that in the meantime...

Looks like other people are resolving it by enabling the "ignoreOrder" option as described here: https://forum.quasar-framework.org/topic/4944/warning-in-chunk-chunk-common-mini-css-extract-plugin-conflicting-order

I'm using plugin version 0.9.0, so maybe this merge doesn't fix that but it seems related.

[laysent]

@adjenks This MR, together with #465 , is an improvement of logs output by plugin, it's not aimed for "fixing".
Here are some details about this warning:
As we know, order of CSS statements matters, meaning that .class { color: red; } .class { color: blue; } and .class { color: blue; } .class {color: red; } have different behaviors.
Suppose in one file, CSS is imported in the following order:

import 'A.css';
import 'B.css';

while in another file, CSS is imported in the following order:

import 'B.css';
import 'A.css';

The order of CSS files conflict in these two files. Suppose Webpack now decides to put these two files together in one final file (usually due to Webpack splitChunks config). When generating the CSS file, plugin has to make a decision of which css file comes first, which comes next. And if both files contain same statement, the final result might be unexpected under certain scenario.
And that's the reason why this warning shows.
You can get a more detailed example in #465 , check the unit test added in that PR ;-)

However, nowadays there are many techniques that can guarantee the order of CSS statement does not matter (such as CSS module). In this case, you can simply ignore this warning by providing the props ignoreOrder: true.

[adjenks]

@laysent Good explanation. That makes the error message totally clear to me now. It makes so much sense that I don't know why I didn't understand the first time. I think it's because I didn't know what a "chunk group" was or how I requested that it be in any order, I only knew what a "chunk" was and that I was chunking based on js files. Also, everything was working fine, so I just didn't think about it much. The error should just link to your explanation and it will be clear immediately, ha.
Thank you for your help.

[PLQin]

I tried various ways to locate the problem (order), but failed to solve it in the end. so I finally chose this method:

// vue.config.js
plugins: [
  new MiniCssExtractPlugin({
    // ......
    ignoreOrder: true
  }),
],

[adjenks]

@PLQin It was really hard for me to resolve it, the order was mixed up between many layers of dependencies and it took like 30 minutes to untangle it all. I had to simplify it by removing may components and slowly adding them back.