Necrotizing Pineapple Music

    @fuelrats/babel-plugin-classnames

    0.3.0 • Public • Published

    babel-plugin-classnames for JSX

    Build Status

    Never import classnames again! Converts arrays of classnames to a call of a function of your choice.

    <div className={['btn', props.large && 'large']} />

    💫

    import _classNames from 'classnames'
    
    <div className={_classNames('btn', props.large && 'large')} />

    By default imports from classnames. However the package name is configurable.

    Installation

    npm i --save-dev babel-plugin-classnames
    

    Then add the plugin to your .babelrc file:

    {
      "plugins": [
        "@babel/plugin-syntax-jsx",
        "babel-plugin-classnames"
      ]
    }

    Configuring the package and import name

    You can set the package name by defining the packageName option:

    {
      "plugins": [
        ["babel-plugin-classnames", { "packageName": "dss-classnames" }]
      ]
    }

    If the function you want to use is not the default package export you can use the importName option:

    {
      "plugins": [
        ["babel-plugin-classnames", {
          "packageName": "emotion",
          "importName": "cx"
        }]
      ]
    }

    If you want objects to be transformed, you can opt into it with the transformObjects option:

    {
      "plugins": [
        ["babel-plugin-classnames", { "transformObjects": true }]
      ]
    }

    With this option enabled this:

    <div className={{ btn: true, large: props.large }} />

    becomes:

    import _classNames from 'classnames'
    
    <div className={_classNames({ btn: true, large: props.large })} />

    Keywords

    none

    Install

    npm i @fuelrats/babel-plugin-classnames

    DownloadsWeekly Downloads

    0

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    5.68 kB

    Total Files

    5

    Last publish

    Collaborators

    • trezy
    • xlexious
    • clapton