';
`

Installation

npm:

`sh
npm i -D swc-plugin-css-modules
`

yarn:

`sh
yarn add -D swc-plugin-css-modules
`

You can check the compatibility of versions on https://plugins.swc.rs/

Usage

Via .swcrc

`json
{
"jsc": {
"experimental": {
"plugins": [
[
"swc-plugin-css-modules",
{
"generate_scoped_name": "[name]__[local]___[hash:base64:5]"
}
]
]
}
}
}
`

Using css modules in code:

`js
import styles from "./style.module.css";

// ✅ ok
const className = styles.className;

// ✅ ok
const className = styles["class-name"];

// ⛔ Computed hit cannot be injected
const className = styles["class" + "Name"];

// ⛔ Computed hit cannot be injected
const className = styles[localClassName];

// ✅ ok
const className = classNames(styles.title, styles.className);

// ⛔ Computed hit cannot be injected
const className = getClassNameFromCssModules(styles);
`

Options

$3

Default: "[hash:base64]"

Allows to configure the generated local ident name.

Supported template strings:

- [name] the basename of the resource
- [folder] the folder the resource relative
- [ext] - extension with leading
- [hash] - the hash of the string(by default it's the hex digest of the xxhash64 hash)
- [:hash::] - hash with hash settings
- [local] - original class

Supported hash functions:

- xxhash64
- md4
- md5
- sha1
- sha224
- sha256
- sha384
- sha512

Supported hash digests:

- hex
- base32
- base64

$3

Add custom hash prefix to generate more unique classes.

$3

Default: ".css"`

$3

If you need, you can pass any needed root path.