Chunk loading order changed between 1.4 and latest version?

I’m seeking some guidance on how to approach a problem with a large codebase migration. Our code base has nearly 1000 components/views. In migrating to webpack 5 from v4 and v1.4 or something of this plugin to the latest version, we’ve noticed 2 problems: our chunks are split differently, and the order of the CSS links appears to be different, which is causing issues with CSS cascades.

Previously, what we’d expect to see is if A.vue imports B.vue, B’s CSS chunk would be loaded after A’s CSS chunk. This allowed B to override its parents styles. It also meant if A.vue asynchronously loaded B.vue, the loading of B would be consistently ordered (A then B in all cases.) I recognize this ordering is arbitrary in nature and may be considered an implementation detail, but we’ve coded 1000 components with this expectation.

Is it possible to recover this behaviour from before the webpack/plugin upgrade? Either webpack or this plugin are responsible for the ordering of how these styles are loaded. In particular, I’d like to know if this was a change that was made consciously (that way I’d know it’s probably the culprit.)

It’s worth noting that our development build (uses style-loader) works fine. So I suspect it was indeed a change to this plugin.

Modification Proposal

Possibly provide a way to customize the order of component tree CSS?

Expected Behavior / Situation

Outlined above.

Actual Behavior / Situation

Outlined above.

[lwansbrough]

@alexander-akait I greatly appreciate the deep dive. It seems though we agree on the order, it is somewhat arbitrary. I think this issue can be closed. We’re going to go ahead with updating our code.

[alexander-akait]

Feel free to ask/ping if you need a help