1.2.2 • Public • Published


Build Status Coverage Status npm downloads

className and styleName on steroids 💪


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


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 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.


See benchmark dir.


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={ ? "foo" : "bar"}><div className={ ? "foo" : "bar"}></div>


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

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

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

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

Send some love

You like this package?

Buy me a coffee

Package Sidebar


npm i babel-plugin-transform-jsx-classnames

Weekly Downloads






Unpacked Size

375 kB

Total Files


Last publish


  • gtournie