[Bug?]: Edits to CSS modules do not trigger HMR and won't update without a page refresh

[The0inkinator]

[Bug?]: Edits to CSS modules do not trigger HMR and won't update without a page refresh

[hansoksendahl]

I am seeing this same issue, introduced a little over a week ago.

[hansoksendahl]

Minimial reproduction repository

[ryansolid]

@hansoksendahl do you know the last version where it was working? That would help me narrow it down considerably.

[edivados]

This is a vinxi issue right? Vinxi sends the hmr update to replace the css, classes don't match anymore, styling disappears and reload is required.

No sure if there is a way around a reload but here is where to look I think. Maybe sending a full-reload for css modules?
https://github.com/nksaraf/vinxi/blob/4bddafe1b7e873ef691392ebaf7ea4f4875e39d4/packages/vinxi/lib/plugins/css.js#L15

Edit: Oh... it looks to me as if the return value (empty array) is the problem causing vite to only send the custom event. I will make a PR later.

[The0inkinator]

This issue is persisting for me still is there an update on what is going on with this? @edivados Thanks in advance

[FlatMapIO]

Downgrading vinxi to 3.10 should temporarily avoid this issue?

[froggydood]

A not so nice temporary fix for this is to customize the class name generator vite uses in the config to only use the file path and class name and ignore the css contents when generating class names. This means that class names don't change when the contents changes, which I believe is whats causing the issues.

Example config.

import crypto from "crypto"

export default defineConfig({
  ssr: true,
  vite: {
    css: {
      modules: {
        // Need to generate css module names based on only the file path and class name
        // because the dev reloading doesn't work well when classes change when css contents change.
        generateScopedName(name, filename, css) {
          const hasher = crypto.createHash("sha256")
          hasher.update(name + filename)
          const hash = hasher.digest().toString("hex");
          return `${name}__${hash.substring(0, 16)}`
        },
      }
    }
  }
});

There is one problem with this though, it doesn't fix the issue of you adding a new class in the css, as it goes from an empty string to some value and therefore that still requires a page refresh.