A JavaScript utility for CSS/SCSS modules.

Installation :

npm i @anthonyjeamme/classname

Usage

Component.tsx :

import classNameModule from "@anthonyjeamme/classname";
import styles from "./Component.module.scss";
const className = classNameModule(styles);

const Component = () => {
  return <div {...className("Component")}>Component</div>;
};

Component.module.scss :

.Component {
  background: red;
}

Using variables

Component.tsx :

import classNameModule from "@anthonyjeamme/classname";
import styles from "./Component.module.scss";
const className = classNameModule(styles);

const Component = () => {
  const [active, setActive] = useState(false);
  const [type, setType] = useState("user");

  return <div {...className("Component", { active, type })}>Component</div>;
};

Component.module.scss :

.Component {
  background: red;

  &.active {
    background: blue;
  }

  &.type-user {
    border: 2px solid purple;
  }
}

Global classes

Prefixing with : allows to use global classes :

className(":flex");

global.css :

.flex {
  display: flex;
}

Custom prefix

Custom prefix can be set this way :

const className = classNameModule(styles, { globalPrefix: "@" });

className("@flex"); // Returns '.flex'

Advanced configuration

Log unfound classes

const className = classNameModule(styles, { logUnfoundValues: true });

Then, this example will log a warning :

className("UnknownClass");

Retaining Unfound Classes

This is an alternative way to use global variables :

const className = classNameModule(styles, { keepUnfoundValues: false });
className("UnknownClass"); // Returns ``

const className = classNameModule(styles, { keepUnfoundValues: true });
className("UnknownClass"); // Returns `.UnknownClass`