parcel-bundler / parcel

The zero configuration build tool for the web. 📦🚀
https://parceljs.org
MIT License
43.46k stars 2.27k forks source link

CSS modules don't hot reload on a React app #7098

Closed dariocravero closed 2 years ago

dariocravero commented 3 years ago

🐛 bug report

CSS changes made into a .module.css file aren't hot reloaded into the browser. CSS changes in a .css file are reloaded fine.

🎛 Configuration (.babelrc, package.json, cli command)

Nothing special. The code is in https://github.com/dariocravero/viewstestparcel.

🤔 Expected Behavior

When I change a CSS property's value in src/App/view.module.css, e.g., .Text's class color it should update in the browser.

😯 Current Behavior

It doesn't update. If I refresh the page it works.

No error.

💁 Possible Solution

🔦 Context

Get CSS changes to show in the app without having to reload.

💻 Code Sample

https://github.com/dariocravero/viewstestparcel yarn start starts parcel. The entrypoint is src/index.html that loads src/index.js. The view loading the CSS is src/App/view.js and the CSS modules file is src/App/view.module.css.

🌍 Your Environment

Software Version(s)
Parcel 2.0.0
Node 14.17.1
Yarn 1.22.4
Operating System Mac Big Sur 11.5.2

Thanks!

mischnic commented 3 years ago

Only the new JS asset generated by the CSS module is sent over to the browser, not the actual CSS change. (There should be an update message with both the JS and CSS asset)

Regression of https://github.com/parcel-bundler/parcel/pull/6986

salatielsql commented 2 years ago

I'm facing the same issue. Here is my repo: https://github.com/salatielq/reactts-starter

run npm install then npm run dev to start

zouloux commented 2 years ago

Hello, any news on this ? Can i help in some way ?

couleurs commented 2 years ago

Running into the same issue with a vanilla CSS file and a vanilla web app (not React or any other framework).

esfxra commented 2 years ago

Experiencing this issue for both CSS and SCSS modules. Also need to refresh the browser. Only styles are affected. Changes to the JSX are immediately visible as expected.

isjackwild commented 2 years ago

+1 still experiencing this issue unfortunately. Using Parcel 2.0.1

esfxra commented 2 years ago

@isjackwild Try parcel@2.0.0-nightly.961, it is working there

Parcel 2.0.1 was released 2 months ago

isjackwild commented 2 years ago

@esfxra thank you so much for your quick response, i will try this — I was just using the latest NPM release

salatielsql commented 2 years ago

For everyone waiting the version 2.1.0 was released yesterday with this fix. I've tested on my project and is working properly 🚀

zouloux commented 2 years ago

Thanks ! 👏