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 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 if you haven’t yet. Then use classnames.macro almost the same way you use classnames.

Example

Given the following input:

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:

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