{"id":19118,"library":"babel-plugin-optimize-clsx","title":"babel-plugin-optimize-clsx","description":"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.","status":"active","version":"2.6.2","language":"javascript","source_language":"en","source_url":"https://github.com/merceyz/babel-plugin-optimize-clsx","tags":["javascript","babel","clsx","classnames","optimize","minimize"],"install":[{"cmd":"npm install babel-plugin-optimize-clsx","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-optimize-clsx","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-optimize-clsx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required to run as Babel plugin","package":"@babel/core","optional":false}],"imports":[{"note":"ESM default export; CommonJS require works but may lack type definitions.","wrong":"const babelPluginOptimizeClsx = require('babel-plugin-optimize-clsx')","symbol":"default","correct":"import babelPluginOptimizeClsx from 'babel-plugin-optimize-clsx'"},{"note":"Plugin name must be full 'babel-plugin-optimize-clsx' in Babel config.","wrong":"module.exports = { plugins: ['optimize-clsx'] }","symbol":"default","correct":"module.exports = { plugins: ['babel-plugin-optimize-clsx'] }"},{"note":"Options use 'libraries' (array), not 'library'.","wrong":"plugins: [['babel-plugin-optimize-clsx', { library: 'clsx' }]]","symbol":"default","correct":"plugins: [['babel-plugin-optimize-clsx', { libraries: ['clsx'] }]]"}],"quickstart":{"code":"// .babelrc\n{\n  \"plugins\": [\n    [\n      \"babel-plugin-optimize-clsx\",\n      {\n        \"libraries\": [\"clsx\", \"classnames\"]\n      }\n    ]\n  ]\n}\n\n// Input: clsx('foo', { bar: true }, ['baz'], false && 'baz',  condition && 'active')\n// Output: condition ? \"foo bar baz active\" : \"foo bar baz\"","lang":"javascript","description":"Basic Babel configuration and a sample transform showing clsx call optimization with conditional nesting."},"warnings":[{"fix":"Update config to specify library names explicitly if using classnames etc.","message":"In versions <2, library names had to match exactly. Default assumed 'clsx'.","severity":"breaking","affected_versions":"<2.0.0"},{"fix":"Ensure conditional expressions and object spreads use literal or simple identifiers.","message":"Plugin only evaluates calls where all arguments are statically analyzable. Dynamic spreads or unknown variables may not be transformed.","severity":"gotcha","affected_versions":">=0"},{"fix":"Use the exact package name in 'libraries' array. For re-exports, use 'resolveModuleName' option.","message":"If a custom library function is not exported from the same module, the plugin may not detect it.","severity":"gotcha","affected_versions":">=0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install babel-plugin-optimize-clsx --save-dev","cause":"Missing plugin installation in node_modules.","error":"Error: [BABEL] unknown: Plugin babel-plugin-optimize-clsx not found"},{"fix":"Ensure @babel/core version 7+ is installed.","cause":"Using plugin with incompatible Babel version (e.g., Babel 6 vs 7).","error":"TypeError: Cannot read properties of undefined (reading 'type')"},{"fix":"Update to >=2.0.0 for correct handling.","cause":"Plugin's old version incorrectly evaluated && with ternary causing 'foo' plus 'undefined'?","error":"Input: clsx('foo', condition && 'bar') -> Output: 'foo' + condition ? ' bar' : '' (unexpected order if condition false)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}