{"id":19079,"library":"babel-plugin-inline-classnames","title":"babel-plugin-inline-classnames","description":"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.","status":"maintenance","version":"2.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/avaly/babel-plugin-inline-classnames","tags":["javascript","babel-plugin","classnames","inline","css","css-modules","style","styles"],"install":[{"cmd":"npm install babel-plugin-inline-classnames","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-inline-classnames","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-inline-classnames","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; plugin runs as Babel transform","package":"@babel/core","optional":false}],"imports":[{"note":"Babel plugin name is just 'inline-classnames'; the full package name is not needed in config.","wrong":"module.exports = { plugins: ['babel-plugin-inline-classnames'] }","symbol":"plugin","correct":"module.exports = { plugins: ['inline-classnames'] }"},{"note":"Plugin expects a named import or require; it works with both, but the import style is typical for bundlers.","wrong":"const classNames = require('classnames')","symbol":"classNames","correct":"import classNames from 'classnames'"},{"note":"For CSS Modules, use classnames/bind and call .bind(styles) to create a cx function.","wrong":"const classNames = require('classnames/bind'); const cx = classNames();","symbol":"cx (bind)","correct":"import classNames from 'classnames/bind'; const cx = classNames.bind(styles);"}],"quickstart":{"code":"// .babelrc\n{\n  \"env\": {\n    \"production\": {\n      \"plugins\": [\"inline-classnames\"]\n    }\n  }\n}\n\n// input.js\nimport classNames from 'classnames';\nconst result = classNames('foo', { bar: true }, 'baz');\nconsole.log(result);\n\n// After Babel transform (production):\nconst result = 'foo bar baz';\nconsole.log(result);","lang":"javascript","description":"Shows Babel configuration for production-only usage and how classnames calls are replaced with inline strings."},"warnings":[{"fix":"Ensure all arguments to classnames are literals or identifiers; dynamic objects may not be optimized.","message":"Only inlines calls with constant arguments; dynamic or computed keys are not inlined.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use version 1.x if on Babel 6, or upgrade to Babel 7.","message":"Requires @babel/core 7.x; incompatible with Babel 6.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Consider alternatives like babel-plugin-transform-classnames or manual inlining.","message":"No longer actively maintained; last release 4 years ago.","severity":"deprecated","affected_versions":">=2.0.1"},{"fix":"Check that all referenced style keys exist in the CSS module object.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Avoid using dedupe if you rely on deduplication; or handle duplicates separately.","message":"Does not handle classnames/dedupe correctly when there are duplicate classes; duplicates may appear in output.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install classnames' or 'yarn add classnames'.","cause":"classnames is not installed as a dependency.","error":"Module not found: Can't resolve 'classnames'"},{"fix":"Run 'npm install babel-plugin-inline-classnames --save-dev'.","cause":"Plugin package not installed.","error":"Error: .babelrc env production: Plugin \"inline-classnames\" not found"},{"fix":"Use 'import classNames from 'classnames/bind'; const cx = classNames.bind(styles);'","cause":"Importing classnames/bind incorrectly.","error":"TypeError: Cannot read property 'bind' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}