babel-plugin-transform-jsx-classnames

className and styleName on steroids 💪

Usage

Allow you to write jsx classNames in a simpler way, without having to worry about importing a helper (like clsx or classnames). className or styleName attributes take any number of arguments which can be a string, an array or an object (if the value associated with a given key is falsy, that key won't be included in the output). See examples

Install

When babel-plugin-transform-jsx-classnames cannot resolve className / styleName during compilation, it imports a helper function (read build time resolution). Therefore, you must install babel-plugin-react-css-modules as a direct dependency of the project.

$ npm install babel-plugin-transform-jsx-classnames --save

{
  plugins: [
    ['transform-jsx-classnames', {
      // default options
      dedupe: false,
      attributes: ['className', 'styleName']
    }]
  ]
}

Note: ⚠️ If you're using babel-plugin-react-css-modules, ensure you're adding transform-jsx-classnames before

Build time resolution

The plugin will try to resolve the className / styleName during the compilation (className={"foo", { active: true }}) and fallback to runtime if not possible (className={_cx("bar", { disabled: props.disabled })} - a tiny helper (256B minified) will be included automatically.

Runtime helper

The runtime helper is similar to the clsx package. See examples.

dedupe

Dedupe behaves like the classname dedupe version. Way faster though. Its speed is similar to classnames in no dedupe version.

The only difference you'll find will be with full numeric classNames: output will always spit numbers first (ex: className={"a", 12} => className="12 a"). It shouldn't be a big deal though, as using numeric values for classNames is pretty rare and order only matters in a very few specific cases.

Performance

See benchmark dir.

Examples

Build time

<div className={"foo", "bar"}>
→ <div className="foo bar"></div>

<div className={'foo', { bar: true }}>
→ <div className="foo bar"></div>

<div className={{ 'foo-bar': true }}>
→ <div className="foo-bar"></div>

<div className={{ 'foo-bar': false }}>
→ <div className=""></div>

<div className={{ foo: true }, { bar: true }, ["foobar", "duck"]}>
→ <div className="foo bar foobar duck"></div>

<div className={'foo', { bar: true, duck: false }, 'baz', { quux: true }}>
→ <div className="foo bar baz quux"></div>

<!-- styleName -->
<div styleName={"foo", "bar"}>
→ <div styleName="foo bar"></div>

<!-- Dedupe -->
<div className={'foo foo', 'bar', { bar: true, foo: false }}>
→ <div className="bar"></div>

<!-- No change -->
<div className={props.active ? "foo" : "bar"}>
→ <div className={props.active ? "foo" : "bar"}></div>

Runtime

When className / styleName can't be resolved at compilation.

<div className={"foo", { active: props.active }}>
→ <div className={_cx("foo", { active: props.active })}></div>

<div className={{ foo: true, [`btn-${props.type}`]: true }}>
→ <div className={_cx({ foo: true, [`btn-${props.type}`]: true })}></div>

<div className={"foo", props.active && getClassName()}>
→ <div className={_cx("foo", props.active && getClassName())}></div>

Send some love

You like this package?