Registry / devops / babel-plugin-optimize-clsx

babel-plugin-optimize-clsx

library2.6.2jsnpmunverified

Babel plugin that statically evaluates calls to clsx, classnames, or compatible APIs, replacing them with optimized inline expressions. Current stable version is 2.6.2, releasing with minor fixes against clsx/classnames ecosystem shifts. Differentiators: works with any library following the (strings, objects, arrays) signature, handles conditional spreads, and supports JSX. Replaces runtime calls with simpler ternary or concatenation, reducing bundle size. Plug into Babel transforms for production builds.

devops

npm install babel-plugin-optimize-clsx

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-OPTIM

babel-plugin-optimize-clsx

devopsjavascriptv2.6.2

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.

default

✓ import babelPluginOptimizeClsx from 'babel-plugin-optimize-clsx'

✗ const babelPluginOptimizeClsx = require('babel-plugin-optimize-clsx')

ESM default export; CommonJS require works but may lack type definitions.

default

✓ module.exports = { plugins: ['babel-plugin-optimize-clsx'] }

✗ module.exports = { plugins: ['optimize-clsx'] }

Plugin name must be full 'babel-plugin-optimize-clsx' in Babel config.

default

✓ plugins: [['babel-plugin-optimize-clsx', { libraries: ['clsx'] }]]

✗ plugins: [['babel-plugin-optimize-clsx', { library: 'clsx' }]]

Options use 'libraries' (array), not 'library'.

Basic Babel configuration and a sample transform showing clsx call optimization with conditional nesting.

// .babelrc { "plugins": [ [ "babel-plugin-optimize-clsx", { "libraries": ["clsx", "classnames"] } ] ] } // Input: clsx('foo', { bar: true }, ['baz'], false && 'baz', condition && 'active') // Output: condition ? "foo bar baz active" : "foo bar baz"

Debug

Known issues

breakingIn versions <2, library names had to match exactly. Default assumed 'clsx'.

fix

Update config to specify library names explicitly if using classnames etc.

affects: <2.0.0

gotchaPlugin only evaluates calls where all arguments are statically analyzable. Dynamic spreads or unknown variables may not be transformed.

fix

Ensure conditional expressions and object spreads use literal or simple identifiers.

affects: >=0

gotchaIf a custom library function is not exported from the same module, the plugin may not detect it.

fix

Use the exact package name in 'libraries' array. For re-exports, use 'resolveModuleName' option.

affects: >=0

Errors

Common errors & fixes

Error: [BABEL] unknown: Plugin babel-plugin-optimize-clsx not found

Missing plugin installation in node_modules.

fix

npm install babel-plugin-optimize-clsx --save-dev

TypeError: Cannot read properties of undefined (reading 'type')

Using plugin with incompatible Babel version (e.g., Babel 6 vs 7).

fix

Ensure @babel/core version 7+ is installed.

Input: clsx('foo', condition && 'bar') -> Output: 'foo' + condition ? ' bar' : '' (unexpected order if condition false)

Plugin's old version incorrectly evaluated && with ternary causing 'foo' plus 'undefined'?

fix

Update to >=2.0.0 for correct handling.

Upgrade

Version history

2.6.2latest on npm

Audit

Dependencies

@babel/corerequiredpeer dependency required to run as Babel plugin

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/merceyz/babel-plugin-optimize-clsx ↗

packagehttps://www.npmjs.com/package/babel-plugin-optimize-clsx ↗