babel-plugin-optimize-clsx

2.6.2 verified Sat Apr 25 auth: no javascript

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.

Common errors

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

cause Missing plugin installation in node_modules.

fix

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

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

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

fix

Ensure @babel/core version 7+ is installed.

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

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

fix

Update to >=2.0.0 for correct handling.

Warnings

breaking In versions <2, library names had to match exactly. Default assumed 'clsx'. ↓

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

gotcha Plugin 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.

gotcha If 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.

Install

npm install babel-plugin-optimize-clsx

yarn add babel-plugin-optimize-clsx

pnpm add babel-plugin-optimize-clsx

Imports

default

wrong

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

correct

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

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

default

wrong

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

correct

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

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

default

wrong

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

correct

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

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

Quickstart

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"