Specifying maxSize parameter causes incorrect ordering of CSS files

[tstibbs]

• Operating System: Ubuntu 16.04.2 LTS
• Node Version: v12.14.1
• NPM Version: 6.14.5
• webpack Version: 4.43.0
• mini-css-extract-plugin Version: 0.9.0

Expected Behavior

You should be able to set optimization.splitChunks.maxSize to limit the size of chunks.

Actual Behavior

Setting optimization.splitChunks.maxSize messes up the order that css is loaded on the page.

Code

Having the following in webpack.config.js will cause mis-ordering in some situations.

optimization: {
  splitChunks: {
    minSize: 1,
    maxSize: 2,
  },
},

How Do We Reproduce?

Smallest example I can come up with: https://github.com/tstibbs/mini-css-extract-bug

[alexander-akait]

This is a problem. We don't guarantee order of chunks and if your CSS depends on cross-module order that won't work. I'm not aware of any simple fix to that. Do not rely on CSS rules order between modules. Sorry for delay

[tstibbs]

@alexander-akait are you saying that you don't guarantee order of chunks under any circumstance - i.e. you're saying that it's just luck that it's currently working for me even when not setting maxSize?

[alexander-akait]

@tstibbs Yes, because in code you have right order, but we don't guarantee order

[alexander-akait]

THe same problem - https://github.com/webpack-contrib/mini-css-extract-plugin/issues/959, bug on HtmlWebpackPlugin side, because we export the valid order