Have ideas to improve npm?Join in the discussion! »

    babel-plugin-transform-jsx-classnames

    1.2.0 • Public • Published

    babel-plugin-transform-jsx-classnames

    Build Status Coverage Status npm downloads

    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?

    Buy me a coffee

    Install

    npm i babel-plugin-transform-jsx-classnames

    DownloadsWeekly Downloads

    1

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    1.92 MB

    Total Files

    30

    Last publish

    Collaborators

    • avatar