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
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" : "")))
)
}
License
MIT