# class-name-literal

> String literal function to build class names.

Latest version **1.0.1** (published 2021-04-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install class-name-literal
pnpm add class-name-literal
yarn add class-name-literal
bun add class-name-literal
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-04-09 |
| First published | 2021-04-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Riho Kroll |
| Maintainers | rihok |
| Keywords | classlist, classname, classes, css, class, string literal, BEM |

## Links

- npm: https://www.npmjs.com/package/class-name-literal
- Repository: https://github.com/rihok/class-name-literal
- Homepage: https://github.com/rihok/class-name-literal#readme
- Issues: https://github.com/rihok/class-name-literal/issues
- npm.io page: https://npm.io/package/class-name-literal

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2021-04-09
- 1.0.0 — 2021-04-09

## README

# Class Name Literal

Use [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to build out class names.

```js
const variant = "dark";
const classList = cn`button ${variant}`; // -> "button dark";
```

You can insert an object anywhere in the string to convert the keys of those objects into class names, depending on if the value was truthy or not.

```js
const classList = cn`button ${{ dark: true }}`; // -> "button dark";
```

```js
const classList = cn`button ${{ dark: false }}`; // -> "button";
```

If the object is directly next to a string (meaning no whitespace between it), the keys will all be prefixed with that string.

```js
const classList = cn`button button--${{ dark: true, disabled: true }}`;
// -> "button button--dark button--disabled";
```

Note, that you can specify any separator (instead of "--") or no separator at all for the modifiers. It just repeats the previous string it sees as the prefix.

## Examples

```js
cn`item item--${{ selected: true }}`; // -> "item item--selected"
cn`item ${{ selected: true }}`; // -> "item selected"
cn`item ${{ selected: false }}`; // -> "item"
```

## Installation

`npm install class-name-literal`

`yarn add class-name-literal`

## Usage

```js
import cn from "class-name-literal";

const selected = true;

const classList = cn`item item--${{
	selected,
	hovered: false,
}}`; // item item--selected
```

---
_Source: https://npm.io/package/class-name-literal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._