import xxx from 'classnames'
This plugin is used to automatically add and supplement xxx()
to the className
property of jsx
English | 简体中文
npm i babel-plugin-jsx-auto-classnames --save-dev
or
pnpm add babel-plugin-jsx-auto-classnames -D
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// import JsxAutoClassnames from 'babel-plugin-jsx-auto-classnames'
export default defineConfig({
plugins: [react({
babel: {
// plugins: [JsxAutoClassnames],
plugins: [
['jsx-auto-classnames', {
extensions: ['.jsx', '.tsx'],
excludes: ['src/excludes']
}]
]
}
})]
})
{
"plugins": [
"jsx-auto-classnames"
]
}
<div
className={{
selected: true
}}>
</div>
⬇️
import _classNames from 'classnames'
<div
className={_classNames({
selected: true
})}>
</div>
import xxx from 'classnames'
function App () {
return (
<>
<div
className={xxx({
disabled: true
})}>
</div>
<div
className={{
selected: true
}}>
</div>
</>
)
}
⬇️
import xxx from 'classnames'
function App () {
return (
<>
<div
className={xxx({
disabled: true
})}>
</div>
<div
className={xxx({
selected: true
})}>
</div>
</>
)
}
- Type:
string[]
- Default:
['.jsx', '.tsx']
- Type:
string[]
- Default:
['node_modules']
- Avoid multiple imports of classnames' dependency packages
- Find a compatible solution for TS
declare namespace React {
interface HTMLAttributes<any> extends AriaAttributes, DOMAttributes<any> {
className?: Record<string, boolean> | (string | Record<string, boolean>)[]
}
}
- Add
excludes
attributes - Add
extensions
attributes - Unit Testing