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.

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

Fix: HMR behavior with CSS Modules #7434

Conversation

Shinyaigeek
Copy link
Contributor

↪️ Pull Request

Fix: #7098

Hi team 👋

I investigated #7098, and considered the cause of this bug.

In my understanding,

  1. CSS Modules push JavaScript file which exports CSS Modules’s hashed className (https://github.com/parcel-bundler/parcel/blob/v2/packages/transformers/postcss/src/PostCSSTransformer.js#L159-L162).
  2. so, in handling changed .module.css asset, incoming dep resolves above JS, so CSS’s HMR update messaging is skipped. (at https://github.com/parcel-bundler/parcel/blob/v2/packages/reporters/dev-server/src/HMRServer.js#L103-L125).
  3. but CSS file updates should be handled as well as JS file updates(at https://github.com/parcel-bundler/parcel/blob/v2/packages/runtimes/hmr/src/loaders/hmr-runtime.js#L107-L111).
  4. so https://github.com/parcel-bundler/parcel/blob/v2/packages/reporters/dev-server/src/HMRServer.js#L103 line’s asset type check should skip also css

I am a little worried that my understanding is incorrect, if you know somthing I missed, feel free to close this PR or point out it 🙇 .

💻 Examples

main.tsx

import * as styles from "./index.module.css";

const Hello = () => <div classNames={styles.hello}>hello</div>;

index.module.css

.hello {
  background: blue;
}

and update index.module.css, but HMR will not work.

🚨 Test instructions

I made integration test check that HMR correctly work with CSS Modules by comparing stylesheet’s href in <link />

✔️ PR Todo

  • Added/updated unit tests for this change
  • Filled out test instructions (In case there aren't any unit tests)
  • Included links to related issues/PRs

@height
Copy link

height bot commented Dec 11, 2021

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

Copy link
Member

@devongovett devongovett left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! Tested it out and it seems to work well. 😄

@devongovett devongovett merged commit 5746ab1 into parcel-bundler:v2 Jan 1, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

CSS modules don't hot reload on a React app
2 participants