Hot reloading doesn't work with CSS-in-JS components in certain conditions

[tigranpetrossian]

Describe the bug

I'm observing a strange behavior with Vite, when changes to components created with libraries like styled-components do not reflect in the browser, despite HMR running seemingly in a correct manner.

This only happens when the styled component in question is exported and used elsewhere, and is colocated with any other component in the same file (See reproduction).

In order to rule out a particular styling library being the culprit, I've tested this with two different libraries: Stitches and Styled Components, the behavior is exactly the same.

Reproducible in StackBlitz + Additional repository with reproduction

Reproduction

https://stackblitz.com/edit/vitejs-vite-qu9hvs?file=src%2FApp.jsx&terminal=dev

Steps to reproduce

1. Open Component.stitches.jsx
2. Change backgroundColor of ComponentToHotReload to 'blue' - no changes in the browser
3. Comment out RandomComponent
4. Reload the browser
5. Change backgroundColor of ComponentToHotReload again - updates are reflected

Same is reproducible for Component.styled-components.jsx
Check the mentioned files for more details.

System Info

System:
    OS: macOS 12.1
    CPU: (10) x64 Apple M1 Pro
    Memory: 29.89 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.18.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.12.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 106.0.5249.103
    Firefox: 104.0.2
    Safari: 15.2

And StackBlitz

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[PsySolix]

Hmm I'm encountering something similar. The HMR does not trigger correctly when using CSSModules in React and changing something in the *.module.css.

How to reproduce:
When you for example add a *.module.css to a React Component (build with react-ts template & pnpm): Like so import { footer, footerMenu } from "./Footer.module.css";
Footer.module.css contains: .footer {} .footerMenu {}

You can change the Footer.module.css as much as you want, the HMR will not trigger and no refresh happens.. At least on my side?

**Something related? **

[PsySolix]

I do want to mention, a workaround for now is setting es2020 in tsconfig.json (mentioned in another open issue)

As soon as I changed that the Vite dev server auto restarted and started picking up changes in *.module.css files again! :D

[sapphi-red]

Duplicate of vitejs/vite-plugin-react#6