babel-plugin-inline-classnames

babel-plugin-inline-classnames

Babel plugin which inlines the result of classnames

Useful for production builds.

Install

npm:

npm install -S babel-plugin-inline-classnames

yarn:

yarn add babel-plugin-inline-classnames

Usage

Add this plugin to your Babel config. Most commonly used in .babelrc:

For all environments:

{
  "plugins": ["babel-plugin-inline-classnames"]
}

For production only (see env option):

{
  "env": {
    "production": {
      "plugins": ["babel-plugin-inline-classnames"]
    }
  }
}

Examples

Input:

import classNames from 'classnames';
import styles from './styles.css';

classNames('foo', 'bar');
classNames('foo', { bar: true });
classNames({ 'foo-bar': true });
classNames({ 'foo-bar': false });
classNames({ foo: true }, { bar: true });
classNames({ foo: true, bar: true });
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true });
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, '');
classNames(styles.foo, styles.bar);

Output:

import styles from './styles.css';

'foo bar';
'foo bar';
'foo-bar';
'';
'foo bar';
'foo bar';
'foo bar baz quux';
'bar ' + 1;
(styles.foo || '') + ' ' + (styles.bar || '');

With bind:

import classNames from 'classnames/bind';
import styles from './styles.css';

const cx = classNames.bind(styles);

cx('foo', 'bar');

Output:

import styles from './styles.css';

(styles.foo || '') + ' ' + (styles.bar || '');

Versions

See full changelog for details.

• 1.* - requires Babel 6.*
• 2.* - requires Babel 7.*