search

webpack-contrib / mini-css-extract-plugin

Lightweight CSS extraction plugin
MIT License
4.66k stars 389 forks source link

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

Open pieh opened 3 years ago

pieh commented 3 years ago

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 https://github.com/webpack-contrib/mini-css-extract-plugin/blob/470ba0e553386d7c97e7646169e975322c0e5de2/src/hmr/hotModuleReplacement.js#L230-L236

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 - https://github.com/webpack-contrib/mini-css-extract-plugin/blob/470ba0e553386d7c97e7646169e975322c0e5de2/src/loader.js#L11-L30

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 commented 1 year ago

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

alexander-akait commented 1 year ago

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

latin-1 commented 1 year ago

@alexander-akait After some investigation, I found that https://github.com/webpack-contrib/mini-css-extract-plugin/pull/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 commented 1 year ago

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

latin-1 commented 1 year ago

@alexander-akait What about this one?

if (module.hot.status() !== "idle") {
  cssReload();
}
latin-1 commented 1 year ago

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 commented 1 year ago

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