babel-plugin-inline-classnames


Babel plugin which inlines the result of classnames

Useful for production builds.

Install

npm:

``cli
npm install -S babel-plugin-inline-classnames
`

yarn:

`cli
yarn add babel-plugin-inline-classnames
`

Usage

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

For all environments:

`json
{
"plugins": ["inline-classnames"]
}
`

For production only (see env option):

`json
{
"env": {
"production": {
"plugins": ["inline-classnames"]
}
}
}
`

Examples

Input:

`js
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:

`js
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:

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

const cx = classNames.bind(styles);

cx('foo', 'bar');
`

Output:

`js
import styles from './styles.css';

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