https://github.com/avaly/babel-plugin-inline-classnames
Babel plugin which inlines the result of classnames
https://github.com/avaly/babel-plugin-inline-classnames
babel-plugin classnames css
Last synced: 10 months ago
JSON representation
Babel plugin which inlines the result of classnames
- Host: GitHub
- URL: https://github.com/avaly/babel-plugin-inline-classnames
- Owner: avaly
- License: mit
- Created: 2017-07-03T08:57:42.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2019-01-26T01:58:35.000Z (over 7 years ago)
- Last Synced: 2025-08-05T07:13:44.568Z (11 months ago)
- Topics: babel-plugin, classnames, css
- Language: JavaScript
- Homepage:
- Size: 118 KB
- Stars: 10
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-inline-classnames
[](https://travis-ci.org/avaly/babel-plugin-inline-classnames)
[](https://www.npmjs.com/package/babel-plugin-inline-classnames)
Babel plugin which inlines the result of [classnames](https://github.com/JedWatson/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`](http://babeljs.io/docs/usage/babelrc/):
For all environments:
```json
{
"plugins": ["babel-plugin-inline-classnames"]
}
```
For production only (see [env](http://babeljs.io/docs/usage/babelrc/#env-option) option):
```json
{
"env": {
"production": {
"plugins": ["babel-plugin-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`](https://github.com/JedWatson/classnames#alternate-bind-version-for-css-modules):
```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 || '');
```
## Versions
See full [changelog](CHANGELOG.md) for details.
- `1.*` - requires Babel `6.*`
- `2.*` - requires Babel `7.*`