-
Notifications
You must be signed in to change notification settings - Fork 10.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* 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>
- Loading branch information
Showing
8 changed files
with
318 additions
and
13 deletions.
There are no files selected for viewing
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
3 changes: 3 additions & 0 deletions
3
...ts/development-runtime/src/pages/styling/not-visited-plain-css-not-imported-initially.css
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .not-visited-plain-css-not-imported-initially { | ||
| color: red; | ||
| } |
3 changes: 3 additions & 0 deletions
3
e2e-tests/development-runtime/src/pages/styling/not-visited-plain-css.css
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .not-visited-plain-css-test { | ||
| color: red; | ||
| } |
17 changes: 17 additions & 0 deletions
17
e2e-tests/development-runtime/src/pages/styling/not-visited-plain-css.js
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import * as React from "react" | ||
|
|
||
| import "./not-visited-plain-css.css" | ||
| // UNCOMMENT-IN-TEST import "./not-visited-plain-css-not-imported-initially.css" | ||
|
|
||
| export default function PlainCss() { | ||
| return ( | ||
| <> | ||
| <p> | ||
| This content doesn't matter - we never visit this page in tests - but | ||
| because we generate single global .css file, we want to test changing | ||
| css files imported by this module (and also adding new css imports).css | ||
| </p> | ||
| <p>css imported by this template is tested in `./plain-css.js` page</p> | ||
| </> | ||
| ) | ||
| } |
3 changes: 3 additions & 0 deletions
3
e2e-tests/development-runtime/src/pages/styling/plain-css-not-imported-initially.css
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .plain-css-not-imported-initially { | ||
| color: red; | ||
| } |
25 changes: 23 additions & 2 deletions
25
e2e-tests/development-runtime/src/pages/styling/plain-css.js
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,32 @@ | ||
| import * as React from "react" | ||
|
|
||
| import "./plain-css.css" | ||
| // UNCOMMENT-IN-TEST import "./plain-css-not-imported-initially.css" | ||
|
|
||
| export default function PlainCss() { | ||
| return ( | ||
| <div data-testid="styled-element" className="plain-css-test"> | ||
| test | ||
| <div style={{ color: `black` }}> | ||
| <div data-testid="styled-element" className="plain-css-test"> | ||
| test | ||
| </div> | ||
| <div | ||
| data-testid="styled-element-that-is-not-styled-initially" | ||
| className="plain-css-not-imported-initially" | ||
| > | ||
| test | ||
| </div> | ||
| <div | ||
| data-testid="styled-element-by-not-visited-template" | ||
| className="not-visited-plain-css-test" | ||
| > | ||
| test | ||
| </div> | ||
| <div | ||
| data-testid="styled-element-that-is-not-styled-initially-by-not-visited-template" | ||
| className="not-visited-plain-css-not-imported-initially " | ||
| > | ||
| test | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
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
106 changes: 106 additions & 0 deletions
106
packages/gatsby/src/utils/webpack/force-css-hmr-for-edge-cases.ts
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| import { Compiler, Module } from "webpack" | ||
|
|
||
| /** | ||
| * 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 | ||
| */ | ||
| export class ForceCssHMRForEdgeCases { | ||
| private name: string | ||
| private originalBlankCssHash: string | ||
| private blankCssKey: string | ||
| private hackCounter = 0 | ||
| private previouslySeenCss: Set<string> = new Set<string>() | ||
|
|
||
| constructor() { | ||
| this.name = `ForceCssHMRForEdgeCases` | ||
| } | ||
|
|
||
| apply(compiler: Compiler): void { | ||
| compiler.hooks.thisCompilation.tap(this.name, compilation => { | ||
| compilation.hooks.fullHash.tap(this.name, () => { | ||
| const chunkGraph = compilation.chunkGraph | ||
| const records = compilation.records | ||
|
|
||
| if (!records.chunkModuleHashes) { | ||
| return | ||
| } | ||
|
|
||
| const seenCssInThisCompilation = new Set<string>() | ||
| /** | ||
| * We will get list of css modules that are removed in this compilation | ||
| * by starting with list of css used in last compilation and removing | ||
| * all modules that are used in this one. | ||
| */ | ||
| const cssRemovedInThisCompilation = this.previouslySeenCss | ||
|
|
||
| let newOrUpdatedCss = false | ||
|
|
||
| for (const chunk of compilation.chunks) { | ||
| const getModuleHash = (module: Module): string => { | ||
| if (compilation.codeGenerationResults.has(module, chunk.runtime)) { | ||
| return compilation.codeGenerationResults.getHash( | ||
| module, | ||
| chunk.runtime | ||
| ) | ||
| } else { | ||
| return chunkGraph.getModuleHash(module, chunk.runtime) | ||
| } | ||
| } | ||
|
|
||
| const modules = chunkGraph.getChunkModulesIterable(chunk) | ||
|
|
||
| if (modules !== undefined) { | ||
| for (const module of modules) { | ||
| const key = `${chunk.id}|${module.identifier()}` | ||
|
|
||
| if ( | ||
| !this.originalBlankCssHash && | ||
| module.rawRequest === `./blank.css` | ||
| ) { | ||
| this.blankCssKey = key | ||
| this.originalBlankCssHash = | ||
| records.chunkModuleHashes[this.blankCssKey] | ||
| } | ||
|
|
||
| const isUsingMiniCssExtract = module.loaders?.find(loader => | ||
| loader?.loader?.includes(`mini-css-extract-plugin`) | ||
| ) | ||
|
|
||
| if (isUsingMiniCssExtract) { | ||
| seenCssInThisCompilation.add(key) | ||
| cssRemovedInThisCompilation.delete(key) | ||
|
|
||
| const hash = getModuleHash(module) | ||
| if (records.chunkModuleHashes[key] !== hash) { | ||
| newOrUpdatedCss = true | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // If css file was edited or new css import was added (`newOrUpdatedCss`) | ||
| // or if css import was removed (`cssRemovedInThisCompilation.size > 0`) | ||
| // trick Webpack's HMR into thinking `blank.css` file changed. | ||
| if ( | ||
| (newOrUpdatedCss || cssRemovedInThisCompilation.size > 0) && | ||
| this.originalBlankCssHash && | ||
| this.blankCssKey | ||
| ) { | ||
| records.chunkModuleHashes[this.blankCssKey] = | ||
| this.originalBlankCssHash + String(this.hackCounter++) | ||
| } | ||
|
|
||
| this.previouslySeenCss = seenCssInThisCompilation | ||
| }) | ||
| }) | ||
| } | ||
| } |