alephjs/aleph.js

Hot reloading broken for CSS Modules

akaFTS opened this issue · 7 comments

akaFTS commented

As the title says, changes in CSS Modules files do not hot reload to the browser in aleph dev. Cmd + R is also not enough; you need to kill the process and start again for it to pick up the changes, making CSS Modules pretty much unfeasible to use. This happens both with the standard import and the "JSX Magic" one.

Normal CSS works normally.

ije commented

@akaFTS thanks, i will figure out

akaFTS commented

Can I help you in some way with this issue? It is a full blocker for my ongoing project with Aleph.

mohsenkhanpour commented

@akaFTS Have you taken a look into the issue? If you have a workaround, please submit a PR.

akaFTS commented

I just glanced at the code and couldn't find any obvious issue. If @ije or other active contributors are unable to look into this issue in the near future, I'll try to investigate deeper.

Macil commented

I investigated this issue a bit and I think there's two parts to it:

  1. #446, which is an issue common to all CSS files.
  2. When a CSS module is changed and recompiled, then the classnames in the selectors are re-randomized, but the page and components that import the CSS module aren't re-rendered, so the rendered elements still refer to the old classnames. Hot reloading should re-execute and re-render components that import a changed file. (Or the classnames should be made not random.)
4ov commented

Hello, i have created a workaround, you may need to modify it
if you want to get rid of the mime type error you can load your file using routes/_app.tsx so it's not watched by aleph's hmr
here it is:
https://github.com/4ov/aleph-css-hot-reload

ije commented

1.0.0-beta.24 should work fine now