CSS order not correct when using split chunks

[lnwu]

Bug report

I want split css chunks from one bundle to multiple for better parallel loading using webpack split chunks config, and found the chunks loading sort is not expected.

Actual Behavior

When split multiple css chunks, the css chunks loading order is not same as the the import sort in source code.

Expected Behavior

When split multiple css chunks, the css chunks load time should same as import time in source code, i tested for scripts only with console.log(xxx), the sort is correct for both.

How Do We Reproduce?

An minimum repo, the readme file describe how to reproduce.

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: Linux 5.4 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Xeon(R) Platinum 8272CL CPU @ 2.60GHz
    Memory: 4.31 GB / 7.77 GB
  Binaries:
    Node: 16.14.2 - /tmp/yarn--1656669930425-0.7899725395688757/node
    Yarn: 1.22.15 - /tmp/yarn--1656669930425-0.7899725395688757/yarn
    npm: 8.5.0 - ~/.nodejs/current/bin/npm
  Packages:
    css-loader: ^6.7.1 => 6.7.1 
    html-webpack-plugin: ^5.5.0 => 5.5.0 
    webpack: ^5.73.0 => 5.73.0 
    webpack-cli: ^4.10.0 => 4.10.0 

[mems]

I update your test case to test it also the native CSS support.

The problem is not specific to mini-css-extract-plugin. It's how split chunk works, the order stability of chunks is not guaranteed, confirmed by one of the maintainers of webpack:

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
— Alexander Akait

[alexander-akait]

It is a bug in HTML webpack plugin, we need to improve our logic, anyway please read this #959 (comment)

[alexander-akait]

Close due jantimon/html-webpack-plugin#1838, I will look on it soon