@unocss/transformer-attributify-jsx-babel
Support valueless attributify in JSX/TSX.
export function Component() {
return (
<div text-red text-center text-5xl animate-bounce>
unocss
</div>
)
}
Will be transformed to:
export function Component() {
return (
<div text-red="" text-center="" text-5xl="" animate-bounce="">
unocss
</div>
)
}
Without this transformer
JSX by default will treat valueless attributes as boolean attributes.
export function Component() {
return (
<div text-red={true} text-center={true} text-5xl={true} animate-bounce={true}>
unocss
</div>
)
}
Install
npm i -D @unocss/transformer-attributify-jsx-babel
import { defineConfig, presetAttributify } from 'unocss'
import transformerAttributifyJsx from '@unocss/transformer-attributify-jsx-babel'
export default defineConfig({
presets: [
presetAttributify()
],
transformers: [
transformerAttributifyJsx(),
],
})
Caveats
ā ļø The rules are almost the same as those of preset-attributify
, but there are several precautions
<div translate-x-100% />
<div translate-x-[100px] />
Instead, you may want to use valued attributes instead:
<div translate="x-100%" />
<div translate="x-[100px]" />
Blocklist
This transformer will only transform attributes that are valid UnoCSS utilities.
You can also blocklist
bypass some attributes from been transformed.
transformerAttributifyJsx({
blocklist: [/text-[a-zA-Z]*/, 'text-5xl']
})
<div text-red text-center text-5xl animate-bounce>
unocss
</div>
Will be compiled to:
<div text-red text-center text-5xl animate-bounce="">
unocss
</div>
License
MIT License Ā© 2022-PRESENT Anthony Fu