babel-plugin-jsx-classlist

After using tailwind/windiss, writing JSX requires the tedious task of concatenating class names. To do this, one must go to the top of the file, import classnames, and then go back to where they were to use classnames to merge multiple styles.

The built-in classList in solidjs provides a smoother coding experience by using classList as a dynamic property.

Therefore, I wrote this Babel plugin

Usage

1.Install Dependencies

1npm install babel-plugin-jsx-classlist -D
2npm install classnames

2.Setup Plugin

1// vite.config.ts
2import { defineConfig } from 'vite';
3import react from '@vitejs/plugin-react';
4
5export default defineConfig({
6  plugins: [
7    react({
8      babel: {
9+        plugins: ['jsx-classlist'],
10      },
11    }),
12  ],
13});

3.Setup TypeScript

1// vite.config.ts
2/// <reference types="vite/client" />
3+/// <reference types="babel-plugin-jsx-classlist/type" />
4

Example

1<div className="foo" classList="bar">
2// 🔃
3<div className="foo bar">
4
5
6<div className="foo">
7// 🔃
8<div className="foo">
9
10
11<div classList="foo">
12// 🔃
13<div className="foo">
14
15
16<div classList={{foo: true}}>
17// 🔃
18<div className={classnames({foo: true})}>
19
20
21<div className={dynamic} classList={{foo: true}}>
22// 🔃
23<div className={classnames(dynamic, {foo: true})}>
24
25
26<div className="foo" classList={{bar: true}}>
27// 🔃
28<div className={classnames("foo", {bar: true})}>
29
30
31<div className="foo" classList={["bar", { baz: true }]}>
32// 🔃
33<div className={classnames("foo", ["bar", {bar: true}])}>
34
35
36<div className="foo" classList={[dynamic, { baz: true }]}>
37// 🔃
38<div className={classnames("foo", [dynamic, {bar: true}])}>