Registry / web-framework / babel-plugin-inline-classnames

babel-plugin-inline-classnames

library2.0.1jsnpmunverified

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.

web-framework

npm install babel-plugin-inline-classnames

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-INLIN

babel-plugin-inline-classnames

web-frameworkjavascriptv2.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

plugin

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

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

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

classNames

✓ import classNames from 'classnames'

✗ const classNames = require('classnames')

Plugin expects a named import or require; it works with both, but the import style is typical for bundlers.

cx (bind)

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

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

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

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);

Debug

Known issues

gotchaOnly 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.

affects: >=1.0.0

breakingRequires @babel/core 7.x; incompatible with Babel 6.

fix

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

affects: >=2.0.0

deprecatedNo longer actively maintained; last release 4 years ago.

fix

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

affects: >=2.0.1

gotchaWhen 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.

affects: >=1.0.0

gotchaDoes 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.

affects: >=1.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'classnames'

classnames is not installed as a dependency.

fix

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

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

Plugin package not installed.

fix

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

TypeError: Cannot read property 'bind' of undefined

Importing classnames/bind incorrectly.

fix

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

Upgrade

Version history

2.0.1latest on npm

Audit

Dependencies

@babel/corerequiredpeer dependency; plugin runs as Babel transform

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/avaly/babel-plugin-inline-classnames ↗

packagehttps://www.npmjs.com/package/babel-plugin-inline-classnames ↗