Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
pieh opened this issue Feb 22, 2021 · 7 comments · May be fixed by #1006
Open

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

pieh opened this issue Feb 22, 2021 · 7 comments · May be fixed by #1006

Comments

@pieh
Copy link

pieh commented Feb 22, 2021

  • 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
@pieh pieh mentioned this issue Feb 28, 2021
Merged
@ferdinando-ferreira ferdinando-ferreira mentioned this issue Mar 20, 2021
Closed
6 tasks
@latin-1 latin-1 mentioned this issue Dec 2, 2022
Open
@latin-1
Copy link

latin-1 commented Dec 2, 2022

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

@alexander-akait
Copy link
Member

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

@latin-1
Copy link

latin-1 commented Dec 27, 2022

@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
Copy link
Member

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

@latin-1
Copy link

latin-1 commented Dec 27, 2022 •
edited
Loading

@alexander-akait What about this one?

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

@latin-1
Copy link

latin-1 commented Dec 27, 2022

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 added a commit to latin-1/mini-css-extract-plugin that referenced this issue Dec 28, 2022
@latin-1
fix: perform a HMR update after inserting a new CSS module
39ecdf2 
Fixes webpack-contrib#706
@latin-1 latin-1 linked a pull request Dec 28, 2022 that will close this issue
Open
6 tasks
@latin-1
Copy link

latin-1 commented Jan 9, 2023

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

latin-1 added a commit to latin-1/mini-css-extract-plugin that referenced this issue Feb 5, 2023
@latin-1
fix: perform a HMR update after inserting a new CSS module
3ddfe0e 
Fixes webpack-contrib#706
latin-1 added a commit to latin-1/mini-css-extract-plugin that referenced this issue Feb 20, 2023
@latin-1
fix: perform a HMR update after inserting a new CSS module
dfa6d02 
Fixes webpack-contrib#706
latin-1 added a commit to latin-1/mini-css-extract-plugin that referenced this issue Mar 13, 2023
@latin-1
fix: perform a HMR update after inserting a new CSS module
048c8f1 
Fixes webpack-contrib#706
latin-1 added a commit to latin-1/mini-css-extract-plugin that referenced this issue Apr 9, 2023
@latin-1
fix: perform a HMR update after inserting a new CSS module
77ec64b 
Fixes webpack-contrib#706
latin-1 added a commit to latin-1/mini-css-extract-plugin that referenced this issue May 5, 2023
@latin-1
fix: perform a HMR update after inserting a new CSS module
32659cd 
Fixes webpack-contrib#706
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
3 participants
@pieh @alexander-akait @latin-1