# classnames.macro

> Babel Macro for conditionally joining CSS class names together

Latest version **1.3.0** (published 2022-07-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install classnames.macro
pnpm add classnames.macro
yarn add classnames.macro
bun add classnames.macro
```

## 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.3.0 |
| Published | 2022-07-19 |
| First published | 2021-12-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Leonard Kinday |
| Maintainers | kinday |
| Keywords | babel-macros |

## Links

- npm: https://www.npmjs.com/package/classnames.macro
- Repository: https://github.com/kinday/classnames.macro
- Homepage: https://github.com/kinday/classnames.macro#readme
- Issues: https://github.com/kinday/classnames.macro/issues
- npm.io page: https://npm.io/package/classnames.macro

## Dependencies (1)

- [babel-plugin-macros](https://npm.io/package/babel-plugin-macros.md) ^3.1.0

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.3.0 (latest) — 2022-07-19
- 1.2.0 — 2022-06-13
- 1.1.1 — 2022-05-11
- 1.1.0 — 2022-04-22
- 1.0.0 — 2021-12-15

## README

# classnames.macro

Conditionally join CSS class names at build time in Babel.

## Preamble

The main goal of this package is to provide convenient API for CSS class names manipulation with the smallest performance hit.

**Use with caution.** The package is aiming to implement as many of [`classnames`][classnames] features as it is possible for a macro. `classnames.macro` is actively used as it is being developed but is not guaranteed to be problem-free.

## Usage

[Install and configure `babel-plugin-macros`][babel-plugin-macros] if you haven’t yet. Then use `classnames.macro`
[almost](https://github.com/kinday/classnames.macro/milestone/1) the same way you use [`classnames`][classnames].

## Example

Given the following input:

```js
import classNames from "classnames.macro"

function getClassName(options) {
  return classNames("block", options.dark && ["bg-black", "text-white"], {
    "font-bold": options.variant === "head",
    "text-sm": options.variant === "footnote",
  })
}
```

Babel will produce the following output:

```js
function getClassName(options) {
  return (
    "block" +
    ((options.dark ? " bg-black text-white" : "") +
      ((options.variant === "head" ? " font-bold" : "") +
        (options.variant === "footnote" ? " text-sm" : "")))
  )
}
```

## Performance

`classnames.macro` outperforms (20 to 100 times faster) packages with similar API:

| Package            | Results                   | Notes                  |
| ------------------ | ------------------------- | ---------------------- |
| `classcat`         | 5 336 322 ops/s, ±0.37%   | 95.06% slower          |
| `classnames`       | 1 962 814 ops/s, ±0.17%   | slowest, 98.18% slower |
| `classnames.macro` | 107 975 749 ops/s, ±0.27% | **fastest**            |
| `clsx`             | 4 886 815 ops/s, ±0.27%   | 95.47% slower          |
| `html-classes`     | 4 410 463 ops/s, ±0.17%   | 95.92% slower          |

Benchmark source can be found in `benchmark.js`. To run the benchmark, clone the repo, install dependencies, build the package (`yarn build`) and run benchmark (`yarn benchmark`).

## License

**MIT**

[babel-plugin-macros]: https://github.com/kentcdodds/babel-plugin-macros
[classnames]: https://github.com/JedWatson/classnames

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