babel-plugin-inline-classnames

2.0.1 verified Sat Apr 25 auth: no javascript maintenance

A Babel plugin that replaces classnames() calls with their string result at compile time. Current version 2.0.1 supports classnames up to v2.x and requires @babel/core 7.x. It inlines calls to classnames, classnames/bind, and classnames/dedupe. Useful for production builds to reduce bundle size and avoid runtime overhead. Unlike runtime-only solutions, this plugin eliminates the classnames library from the bundle entirely. Compatible with CSS Modules via the bind API. No active development since 2019, but stable and functional.

Common errors

error Module not found: Can't resolve 'classnames' ↓

cause classnames is not installed as a dependency.

fix

Run 'npm install classnames' or 'yarn add classnames'.

error Error: .babelrc env production: Plugin "inline-classnames" not found ↓

cause Plugin package not installed.

fix

Run 'npm install babel-plugin-inline-classnames --save-dev'.

error TypeError: Cannot read property 'bind' of undefined ↓

cause Importing classnames/bind incorrectly.

fix

Use 'import classNames from 'classnames/bind'; const cx = classNames.bind(styles);'

Warnings

gotcha Only inlines calls with constant arguments; dynamic or computed keys are not inlined. ↓

fix Ensure all arguments to classnames are literals or identifiers; dynamic objects may not be optimized.

breaking Requires @babel/core 7.x; incompatible with Babel 6. ↓

fix Use version 1.x if on Babel 6, or upgrade to Babel 7.

deprecated No longer actively maintained; last release 4 years ago. ↓

fix Consider alternatives like babel-plugin-transform-classnames or manual inlining.

gotcha When using classnames/bind, the plugin inlines the result but leaves the (styles.foo || '') pattern; may cause unexpected spaces if a style key is missing. ↓

fix Check that all referenced style keys exist in the CSS module object.

gotcha Does not handle classnames/dedupe correctly when there are duplicate classes; duplicates may appear in output. ↓

fix Avoid using dedupe if you rely on deduplication; or handle duplicates separately.

Install

npm install babel-plugin-inline-classnames

yarn add babel-plugin-inline-classnames

pnpm add babel-plugin-inline-classnames

Imports

plugin

wrong

module.exports = { plugins: ['babel-plugin-inline-classnames'] }

correct

module.exports = { plugins: ['inline-classnames'] }

Babel plugin name is just 'inline-classnames'; the full package name is not needed in config.

classNames
wrong
```
const classNames = require('classnames')
```
correct
```
import classNames from 'classnames'
```
Plugin expects a named import or require; it works with both, but the import style is typical for bundlers.

cx (bind)

wrong

const classNames = require('classnames/bind'); const cx = classNames();

correct

import classNames from 'classnames/bind'; const cx = classNames.bind(styles);

For CSS Modules, use classnames/bind and call .bind(styles) to create a cx function.

Quickstart

Shows Babel configuration for production-only usage and how classnames calls are replaced with inline strings.

// .babelrc
{
  "env": {
    "production": {
      "plugins": ["inline-classnames"]
    }
  }
}

// input.js
import classNames from 'classnames';
const result = classNames('foo', { bar: true }, 'baz');
console.log(result);

// After Babel transform (production):
const result = 'foo bar baz';
console.log(result);