HMR interaction with custom splitChunks that extracts all css to single file

[pieh]

• Operating System: macOS BigSur 11.1
• Node Version: 14.2.0
• NPM Version: 6.14.4
• webpack Version: 5.23.0
• mini-css-extract-plugin Version: 1.3.8

Let me start saying that I'm not sure this should be considered a bug, but given that HMR for .css doesn't work in some cases while exctraction itself works it might be considered a bug.

Before filling expected and actual behaviour sections I wanted to set the stage for the setup:

We use following (simplified to only cover mini-css-extract-plugin specific setting) splitChunks configuration (which is meant to create single .css file due to lot of specifity/ordering issues we had when css files were appended as templates (pages) were evaluated (those templates were split into their own chunk with dynamic imports):

optimization: {
    splitChunks: {
      chunks: `all`,
      cacheGroups: {
        default: false,
        defaultVendors: false,
        styles: {
          test(module) {
            return module.type === `css/mini-extract`;
          },

          name: `main`,
          priority: 40,
          enforce: true,
        },
      },
    },
  },

This works generally (extraction part), but HMR doesn't fully. When .css file that is imported by template that currently is not evaluated by browser we don't get styles hot reload. We can refresh browser and that works (because extraction does work).

My naive explanation for this is that webpack runtime does receive hot-update, but discards it because modules that changed aren't actually loaded.

Is this something that should be handled by mini-css-extract-plugin? If not - is there a way to "trick" webpack runtime into thinking that all css/mini-extract modules are actually loaded and should "hot reload" even if their parents (modules that import them) were not loaded yet?

Expected Behavior

Given above splitChunksconfiguration I would expect mini-css-extract-plugin to be aware of it and be able to hot reload styles even if those are imported by currently not loaded JS modules

Actual Behavior

Only .css whose parent modules are loaded do hot reload.

Code

In reproduction 👇

How Do We Reproduce?

https://github.com/pieh/mini-css-extract-plugin-weird-split-chunks

Reproduction steps in README

[alexander-akait]

Yep, bug, on the next week we will working on HMR, so I think we will fix it in near future