Fix: HMR behavior with CSS Modules

[Shinyaigeek]

↪️ 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]

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.

[devongovett]

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