Adding new css import doesn't result in hot style update

[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

Expected Behavior

When adding new .css import with HMR enabled styles should hot update.

Actual Behavior

Styles are not hot updated. I get:

[HMR] Updated modules:
[HMR]  - ./index.js
[HMR]  - ./second.css
[HMR] App is up to date.

But no logs that are usually printed when styles reload - from

mini-css-extract-plugin/src/hmr/hotModuleReplacement.js

Lines 230 to 236 in 470ba0e

	if (reloaded) {
	console.log('[HMR] css reload %s', src.join(' '));
	} else {
	console.log('[HMR] Reload all css');
	reloadAll();
	}

When I save any .css file (can be just resave without any change), only then this newly imported styles are applied:

[HMR] Updated modules:
[HMR]  - ./second.css
[HMR] App is up to date.
[HMR] Reload all css

Code

Code in reproduction 👇

But from what I can tell when new css Module (not css-modules, just webpack module :) ). Is loaded this code gets executed -

mini-css-extract-plugin/src/loader.js

Lines 11 to 30 in 470ba0e

	function hotLoader(content, context) {
	const accept = context.locals
	? ''
	: 'module.hot.accept(undefined, cssReload);';
	return `${content}
	if(module.hot) {
	// ${Date.now()}
	var cssReload = require(${loaderUtils.stringifyRequest(
	context.context,
	path.join(__dirname, 'hmr/hotModuleReplacement.js')
	)})(module.id, ${JSON.stringify({
	...context.options,
	locals: !!context.locals,
	})});
	module.hot.dispose(cssReload);
	${accept}
	}
	`;
	}

But this code only setup cssReload function to be executed on next hot update. It doesn't execute it when new module is added for the first time. I guess it might be tricky to potentially execute it only when new module is added, but not on initial code evaluation (first visit in the browser)?

How Do We Reproduce?

https://github.com/pieh/mini-css-extract-plugin-new-css-import

steps listed in README

[latin-1]

I can reproduce this bug with latest version of webpack and this plugin. @alexander-akait

[alexander-akait]

Feel free to send a fix, we should accept a new module

[latin-1]

@alexander-akait After some investigation, I found that #726 might be the best solution for this bug. After inserting a new module, we should perform a HMR update, similar to how we do with the dispose handler.

[alexander-akait]

@latin-1 it will reload CSS very often..., anyway can you create reproducible repo with such fix, I will look

[latin-1]

@alexander-akait What about this one?

if (module.hot.status() !== "idle") {
  cssReload();
}

[latin-1]

https://github.com/latin-1/mini-css-extract-plugin-706-repro
It appears to work properly, though I'm not sure if this is the correct method.

[latin-1]

@alexander-akait Hi, could you please take a look into #1006?