babel-plugin-clsx

Automatically add clsx for className in React and have the same fun without importing and writing it.

It is important to note that this library supports the use of Typescript projects. No other library of its kind has been found to do this.

Before doing so, make sure that clsx is installed or another available className handler exists for your project.

Install

npm

1npm i --save-dev babel-plugin-clsx

yarn

1yarn add --save-dev babel-plugin-clsx

pnpm

1pnpm add --save-dev babel-plugin-clsx

Usage

Add the babel configuration

1{
2  "plugins": ["clsx"]
3}

Your code

1<div className={['c1', 'c2']} />;
2<div className={{ c1: true, c2: true }} />;

After compilation

1import _clsx from 'clsx';
2<div className={_clsx('c1', 'c2')} />;
3<div className={_clsx({ c1: true, c2: true })} />;

Options

options.static

Type	Default
boolean	true

By default, static mode is enabled, in which only array and object are converted, effectively avoiding duplicate processing of className. Of course, although it is not recommended to do so, you can still turn off this option, and after that, it will be up to you to handle or ignore unnecessary transformations.

Add the babel configuration

1{
2  "plugins": [
3    [
4      "clsx",
5      {
6        "static": false
7      }
8    ]
9  ]
10}

Your code

1const className = ['c1', 'c2'];
2<div className={className} />;

After compilation

1import _clsx from 'clsx';
2const className = ['c1', 'c2'];
3<div className={_clsx(className)} />;

In an existing project, there may be a lot of code like this, and if you turn off static mode, there will be a lot of duplication.

Your code

1import classNames from 'clsx';
2
3// 👎 This will repeat the process
4const className = classNames('c1', 'c2');
5<div className={className} />;
6
7// 👍 This does not repeat the process
8<div className={classNames('c1', 'c2')} />;

After compilation

1import _clsx from 'clsx';
2import classNames from 'clsx';
3
4// 👎 This will repeat the process
5const className = classNames('c1', 'c2');
6<div className={_clsx(className)} />;
7
8// 👍 This does not repeat the process
9<div className={classNames('c1', 'c2')} />;

options.strict

Type	Default
boolean	true

Strict mode is turned on by default, and you can turn it off if you want to add clsx to any attribute suffixed by className.

Add the babel configuration

1{
2  "plugins": [
3    [
4      "clsx",
5      {
6        "strict": false
7      }
8    ]
9  ]
10}

Your code

1<Component
2  className={['c1', 'c2']}
3  headerClassName={['c1', 'c2']}
4  footerClassName={['c1', 'c2']}
5/>

After compilation

1import _clsx from 'clsx';
2<Component
3  className={_clsx('c1', 'c2')}
4  headerClassName={_clsx('c1', 'c2')}
5  footerClassName={_clsx('c1', 'c2')}
6/>;

options.importSource

Type	Default
string	'clsx'

clsx is the supported library by default, and if you have your choice, you can replace it with importSource.

Add the babel configuration

1{
2  "plugins": [
3    [
4      "clsx",
5      {
6        "importSource": "classnames"
7      }
8    ]
9  ]
10}

Your code

1<div className={['c1', 'c2']} />

After compilation

1import _clsx from 'classnames';
2<div className={_clsx('c1', 'c2')} />;

options.importName

Type	Default
string	'default'

If your custom import source does not have a default export available, you can specify the import name with importName.

Add the babel configuration

1{
2  "plugins": [
3    [
4      "clsx",
5      {
6        "importSource": "@/utils",
7        "importName": "classNames"
8      }
9    ]
10  ]
11}

Your code

1<div className={['c1', 'c2']} />

After compilation

1import { classNames as _clsx } from '@/utils';
2<div className={_clsx('c1', 'c2')} />;

Ignore

If you feel that there is an unnecessary transformation, you can add a comment so that it is ignored during the transformation.

Local ignore

You can ignore the conversion of this line by adding a comment above.

Your code

1<div className={['c1', 'c2']} />;
2<div
3  // @clsx-ignore
4  className={['c1', 'c2']}
5/>;

After compilation

1import _clsx from 'clsx';
2<div className={_clsx('c1', 'c2')} />;
3<div className={['c1', 'c2']} />;

Global ignore

You can omit the conversion of the entire file by adding a comment at the top of the file.

Your code

1// @clsx-ignore-global
2<div className={['c1', 'c2']} />;
3<div className={['c1', 'c2']} />;

After compilation

1<div className={['c1', 'c2']} />;
2<div className={['c1', 'c2']} />;

Typescript

Support Typescript with jsxImportSource.

You only need to make minor changes to tsconfig.json to support the use of the plug-in in Typescript projects.

Only react17+ and Typescript4.7+ are supported due to the use of advanced syntax.

preserve

1{
2  "compilerOptions": {
3    "jsx": "preserve",
4    "jsxImportSource": "babel-plugin-clsx/jsx",
5    "isolatedModules": true
6  }
7}

react-jsx

1{
2  "compilerOptions": {
3    "jsx": "react-jsx",
4    "jsxImportSource": "babel-plugin-clsx/jsx"
5  }
6}

react-jsxdev

1{
2  "compilerOptions": {
3    "jsx": "react-jsxdev",
4    "jsxImportSource": "babel-plugin-clsx/jsx"
5  }
6}

react-native

1{
2  "compilerOptions": {
3    "jsx": "react-native",
4    "jsxImportSource": "babel-plugin-clsx/jsx",
5    "isolatedModules": true
6  }
7}

One thing to note is that "babel-plugin-clsx/jsx" only supports type inference, which prevents Typescript from throwing errors.

Examples

• React [ source | online ]
• Nextjs [ source | online ]