fix(order): use correct order when multiple chunk groups are merged

[sokra]

This PR contains a:

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

Motivation / Use-Case

see #242

Order of modules is incorrect/undefined when merging multiple chunk groups into a single chunk.

This PR also emits a warning when order is conflicting between chunk groups.

Breaking Changes

bugfix

Additional Info

[jarandmi]

Yes! This fix my problem. But i'm not sure if we should warn in the console. Do we want the user to take any action to fix this, if shared chunks is used in different order?

[sokra]

Do we want the user to take any action to fix this, if shared chunks is used in different order?

Yes, the user should make sure to reorder the imports to avoid conflicting order.

When a warning is emitted the code doesn't define multiple possible orderings. We choose one possible order here, but some other factors could make us choosing another ordering (i. e. adding entrypoints or import()s). The new order could result in a broken CSS. Conclusion: A conflicting order makes your app fragile and should be avoided.

[jarandmi]

I agree, but it will be very hard to use reusable components (like in react) this way.

Example:

Text.js
import "./textStyle.css"

ComponentOne
import "./componentOneStyle.css"
import Text from "./Text.js"

ComponentTwo
import "./ComponentTwo.css"
import Title from "./Title.js"
import Text from "./Text.js"

I think it will be almost impossible to order this the right way if a component is reused in many other components. What do you think?

[robwierzbowski]

We're finding warnings in our application since we started optimizing with SplitChunksPlugin, and having a hard time fixing them. Just starting to dig through the code here. Does the comparison function check index of the import, like this:

file 1

import "./a.css"; // 1
import "./b.css"; // 2
import "./d.css"; // 3

file 2

import "./a.css"; // 1
import "./b.css"; // 2
import "./c.css"; // 3
import "./d.css"; // 4, fire warning because d is not index 3, although it's still after a and b

or comparative order, like this?

file 1

import "./a.css"; 
import "./b.css"; 
import "./d.css";

file 2

import "./a.css"; // before b and d
import "./b.css"; // after a, before d
import "./c.css"; // new
import "./d.css"; // after a and b

[robwierzbowski]

The way we use modules in practice, I'm not sure we'll be able to get rid of these warnings. We have pages that use many of the same modules, but imported via different means. For an extremely reduced example:

pageOne
  import header
  import product1
  import footer
    import responsiveImage

pageTwo
  import headerExperiment
    import header
    import headerVariant
      import responsiveImage
  import product1
  import footer
    import responsiveImage

This doesn't have any practical impact since we use CSS modules, making our CSS non-order dependent. Thoughts? Maybe we can silence warnings for any CSS that uses generated unique scoping?

[robwierzbowski]

After reading some of the comments in #250 I think my team will silence warnings. Apologies for the noise.