fix(gatsby): fix some css HMR edge cases #29839
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
gatsbot
bot
added
the
status: triage needed
…related to css HMR
pieh
force-pushed
the
v3/css-hmr-edge-cases
branch
from
c5afaf5 to
5cfc027
Compare
pieh
added
topic: webpack/babel
pieh
commented
Feb 28, 2021
|
|
||
| apply(compiler: Compiler): void { | ||
| compiler.hooks.thisCompilation.tap(this.name, compilation => { | ||
| compilation.hooks.fullHash.tap(this.name, () => { |
There was a problem hiding this comment.
this entire hack is largely based on checking what HMR internal webpack plugin does ( https://github.com/webpack/webpack/blob/04a7d052b5c04628257ec23244f234622c7f394c/lib/HotModuleReplacementPlugin.js#L323-L411 ) and "tricking it" into thinking that blank.css file we import (
gatsby/packages/gatsby/cache-dir/app.js
Line 21 in 40e54e8
a) there is new css module or hash of already existing one changed (we set
anyCssChanged to true)b) when css module that was in previous compilation is no longer there (that's combo of
seenCssInThisCompilation and this.previouslySeenCss)
pieh
commented
Feb 28, 2021
Comment on lines
+3
to
+14
| /** | ||
| * This is total hack that is meant to handle: | ||
| * - https://github.com/webpack-contrib/mini-css-extract-plugin/issues/706 | ||
| * - https://github.com/webpack-contrib/mini-css-extract-plugin/issues/708 | ||
| * The way it works it is looking up what HotModuleReplacementPlugin checks internally | ||
| * and tricks it by checking up if any modules that uses mini-css-extract-plugin | ||
| * changed or was newly added and then modifying blank.css hash. | ||
| * blank.css is css module that is used by all pages and is there from the start | ||
| * so changing hash of that _should_ ensure that: | ||
| * - when new css is imported it will reload css | ||
| * - when css imported by not loaded (by runtime) page template changes it will reload css | ||
| */ |
There was a problem hiding this comment.
All of this does also rely on fact that we extract css to single commons.css file. To be fair - fact that we do that is also part of the problem (particularly issue about not visited modules that import css)
wardpeet
reviewed
Mar 1, 2021
packages/gatsby/src/utils/webpack/force-css-hmr-for-edge-cases.ts
Outdated
Show resolved
Hide resolved
packages/gatsby/src/utils/webpack/force-css-hmr-for-edge-cases.ts
Outdated
Show resolved
Hide resolved
Co-authored-by: Ward Peeters <ward@coding-tech.com>
wardpeet
approved these changes
Mar 1, 2021
wardpeet
changed the title
vladar
pushed a commit
that referenced
this pull request
Mar 1, 2021
* test(e2e-development-runtime): add test cases for various edge cases related to css HMR * hackity hack * Update packages/gatsby/src/utils/webpack/force-css-hmr-for-edge-cases.ts Co-authored-by: Ward Peeters <ward@coding-tech.com> * add some comments with explanation Co-authored-by: Ward Peeters <ward@coding-tech.com> (cherry picked from commit 52facaf)
vladar
pushed a commit
that referenced
this pull request
Mar 1, 2021
* test(e2e-development-runtime): add test cases for various edge cases related to css HMR * hackity hack * Update packages/gatsby/src/utils/webpack/force-css-hmr-for-edge-cases.ts Co-authored-by: Ward Peeters <ward@coding-tech.com> * add some comments with explanation Co-authored-by: Ward Peeters <ward@coding-tech.com> (cherry picked from commit 52facaf) Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>
This was referenced Mar 9, 2021
This was referenced Mar 9, 2021
This was referenced Apr 15, 2024
This was referenced May 16, 2024
This was referenced Oct 13, 2024
This was referenced Oct 15, 2024
This was referenced Oct 15, 2024
This was referenced Oct 16, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Add test cases for issues described in:
splitChunksthat extracts all css to single file webpack-contrib/mini-css-extract-plugin#708Current status (tests for removing imports only pass because adding imports doesn't do anything :) ):
With this veeeeeery hacky
fixworkaround:Related Issues
[ch25603]
[ch25604]