🐛 BUG: CSS Module styles do not update upon saving file in development

[Merri]

What version of astro are you using?

1.0.0-beta.47

Are you using an SSR adapter? If so, which one?

Vercel

What package manager are you using?

yarn

What operating system are you using?

Windows

Describe the Bug

When changing and saving CSS Module file the style change does not get reflected to current open page in development. This can be so bad that the only way to get the styles to latest changes is to restart the local dev server.

Additionally at least on Vercel SSR adapter the CSS Modules seem not to work at all:

1:28:33 PM [vite] Error when evaluating SSR module /src/components/CheckPick.tsx:
--
16:28:33.523 | Error: failed to load module for ssr: ./Checkpick.module.css
16:28:33.523 | at instantiateModule (/vercel/path0/node_modules/vite/dist/node/chunks/dep-97cb3622.js:50206:15)

---

To replicate issue

1. Import a CSS Module file to Astro page that is open in your browser.
2. Change a property in the CSS file.
3. Save the file.
4. Nothing changes.

The changes may only get updated when something else is changed, such as edit some other aspect of the page, visit another page, restart dev, or in the case of CodeSandbox an auto-refresh (not caused by editing the CSS module file) updates the page.

Expected behavior

Changed style is reflected on the page.

Link to Minimal Reproducible Example

https://codesandbox.io/s/cool-mahavira-0dkrgc?file=/src/pages/index.astro

Participation

• I am willing to submit a pull request for this issue.

[bholmesdev]

Thanks for reporting @Merri! Unfortunately, I couldn't replicate this behavior on my end (either importing CSS modules into jSX or importing CSS modules into .astro files). I assume this is a Windows-specific issue or a browser issue. Would you mind sharing the browser you're using to debug?

[Merri]

So far I've been mostly developing on Brave. It does at least have a "shields up" feature in it which I guess could cause issues. I'll try testing tomorrow with that disabled, as well as with other browsers.

[NapperJLG]

I'm having the same issue on macOS and Chrome

[bholmesdev]

Interesting! @NapperJLG to confirm, are you seeing this issue when importing CSS modules into Astro files, React / Preact components, or both?

[NapperJLG]

@bholmesdev Importing CSS modules into React components. I have since given up with it though and converted my React components into Astro ones with <style> tags 😅

[bholmesdev]

@NapperJLG Oh no, you shouldn't have to do that! I'll bump the priority on this one, since CSS modules is our recommended React styling solution right now 👍

[sHoskens]

I've encountered a similar issue.

I'm using react components (.tsx), with Styled Components. The styles get applied occasionally, and often the only consistent result is through restarting the dev server. Anything that then subsequently triggers the HMR has a high change of disabling some or all of the styles of the react components. Sometimes they also reappear.

I've noticed the problem is in the hashed names of the css classes. Here's a very basic example, everything not pertaining to the issue stripped out:

<!-- The style tag in head. The class contains the correct css, but notice how the name does not match with the div below! -->
<style data-styled="active" data-styled-version="5.3.5">
  .jStelY{ border: 1px solid red; }
</style>

...

<!-- In this astro-island, we actually want the div to have the jStelY class! -->
<astro-island uid="ZTORjW" component-url="/@fs/home/sven/projects/my-project/src/components/MyComponent" component-export="default" renderer-url="/@id/@astrojs/react/client.js" props="{}" client="load" before-hydration-url="/@id/astro:scripts/before-hydration.js" opts="{"name":"MyComponent","value":true}">
  <div class="sc-bczRLJ gGRLfB"></div>
</astro-island>

So it seems that during HMR, the hashed class names that get into the <style> tag do not match the class names on the actual rendered components. The problem also occurs simple when reloading the page.

Some more info on my setup:

Node 16.15.1, running on a headless Ubuntu through Windows' WSL2. Tested out in Brave, Chrome, Firefox. For some reason, the issue in Firefox only occurs ~10% of the time. In Brave and Chrome, it's more like ~75% of the time.

• astro: 1.0.0-beta.63
• @astrojs/react: 0.2.0
• react: 18.0.0
• styled-components: 5.3.5

Hope this helps. Let me know if I can help! This is really the only thing holding me back from developing with Astro, otherwise looking forward to using it more. 👍

[bholmesdev]

Confirmed this issue definitely happens for non-hydrated JSX components. Unable to reproduce for CSS modules in .astro files or CSS modules in client: components. For that first problem alone, I'm bumping this to urgent 👍

[sHoskens]

@bholmesdev FYI: You mention that you cannot reproduce it in client: components, but I've consistently had this problem with components with client:load. Might not be what you're referring to though, still very new to Astro.

[matthewp]

@sHoskens can you provide an example? I feel like we might be talking about several different problems in this issue.

[matthewp]

@bholmesdev which issue have you confirmed? Do you have an example?

Here's an example of CSS modules reloading in astro components: https://stackblitz.com/edit/github-zzyewt?file=src/styles/Container.module.css

[matthewp]

Bumping down the importance since we're without a recreation.

[natemoo-re]

I was able to look into this while working on #3932. AFAICT, this will be fixed by #3932 since we're scaling back our custom HMR handling and using what Vite gives us out of the box.

@sHoskens would you mind searching for other styled-components issues, and if you don't see a relevant one, opening a new issue? The original issue here is unrelated to styled-components.

[sHoskens]

Sure thing, I'll look into this as soon as I'm able. My astro project is temporarily on hold, but I'll test out a few different approaches and, if I still encounter these issues, provide you with examples.

[pikeas]

Same issue, seems to only happen for imports:

// Layout.astro

---
[some props handling]
---

<html>
[...]
</html>

<style>
    @import "styles/preflight.css";
    @import "styles/vars.css";

    [...]
</style>

CSS edits in the <style> block are immediately reflected in the browser, edits to vars.css are never HMR-ed despite the dev server's file watching seeing the change.