Easy to read CSS module class names in Astro or Vite

You can use a custom generateScopedName function to generate class names, in development mode only, that are easier to read.

import path from "path";
import { defineConfig } from "astro/config";

export default defineConfig({
  vite: import.meta.env.PROD
    ? undefined
    : {
        css: {
          modules: {
            generateScopedName: (className, filePath) => {
              const fileName = path.basename(filePath, ".module.css");
              return `${fileName}\\.${className}`;
            },
          },
        },
      },
});

Example output

In this example there were 3 Preact Components involved and their cssmodules were named app-frame.module.css, card.module.css, and date-picker.module.css.

<header class="app-frame.header">
  <div class="card.card">
    <div class="date-picker.root">
      <button type="button" aria-disabled="true" class="arrow-button.button">
        <img
          alt="Previous"
          class="date-picker.flipX"
          width="24"
          height="24"
          src="/img/icon/chevron-right.svg"
        />
      </button>
      <div class="date-picker.dividers">
        <h1 class="date-picker.title">Sat, 4 Jan 2025</h1>
      </div>
      <a class="arrow-button.button" href="/2025-01-05">
        <img
          alt="Next"
          width="24"
          height="24"
          src="/img/icon/chevron-right.svg"
        />
      </a>
    </div>
  </div>
</header>

If unlike me the names in your project are not unique (such as maybe multiple index.module.css) you can use these values to fix that.

[ext] the extension of the resource
[name] the basename of the resource
[path] the path of the resource relative to the context query parameter or option.
[folder] the folder the resource is in
[query] the queryof the resource, i.e. ?foo=bar
[contenthash] the hash of options.content (Buffer) (by default it's the hex digest of the xxhash64 hash)
[<hashType>:contenthash:<digestType>:<length>] optionally one can configure
- other hashTypes, i. e. xxhash64, sha1, md4 (wasm version), native-md4 (crypto module version), md5, sha256, sha512
- other digestTypes, i. e. hex, base26, base32, base36, base49, base52, base58, base62, base64, base64safe
- and length the length in chars
[hash] the hash of options.content (Buffer) (by default it's the hex digest of the xxhash64 hash)
[<hashType>:hash:<digestType>:<length>] optionally one can configure
- other hashTypes, i. e. xxhash64, sha1, md4 (wasm version), native-md4 (crypto module version), md5, sha256, sha512
- other digestTypes, i. e. hex, base26, base32, base36, base49, base52, base58, base62, base64, base64safe
- and length the length in chars
[N] the N-th match obtained from matching the current file name against options.regExp

JamieMason/easy-to-read-css-module-class-names-in-astro-or-vite.md

Easy to read CSS module class names in Astro or Vite

Example output