UnoCSSAttributify JSX transformer
Support valueless attributify in JSX/TSX: @unocss/transformer-attributify-jsx.
Presentation
jsx
export function Component() {
return (
<div text-red text-center text-5xl animate-bounce>
unocss
</div>
)
}export function Component() {
return (
<div text-red text-center text-5xl animate-bounce>
unocss
</div>
)
}Will be transformed to:
jsx
export function Component() {
return (
<div text-red="" text-center="" text-5xl="" animate-bounce="">
unocss
</div>
)
}export function Component() {
return (
<div text-red="" text-center="" text-5xl="" animate-bounce="">
unocss
</div>
)
}Without this transformer, JSX treats valueless attributes as boolean attributes.
jsx
export function Component() {
return (
<div text-red={true} text-center={true} text-5xl={true} animate-bounce={true}>
unocss
</div>
)
}export function Component() {
return (
<div text-red={true} text-center={true} text-5xl={true} animate-bounce={true}>
unocss
</div>
)
}Installation
bash
pnpm add -D @unocss/transformer-attributify-jsxpnpm add -D @unocss/transformer-attributify-jsxbash
yarn add -D @unocss/transformer-attributify-jsxyarn add -D @unocss/transformer-attributify-jsxbash
npm install -D @unocss/transformer-attributify-jsxnpm install -D @unocss/transformer-attributify-jsxts
// uno.config.ts
import { defineConfig, presetAttributify } from 'unocss'
import transformerAttributifyJsx from '@unocss/transformer-attributify-jsx'
export default defineConfig({
// ...
presets: [
// ...
presetAttributify()
],
transformers: [
transformerAttributifyJsx(), // <--
],
})// uno.config.ts
import { defineConfig, presetAttributify } from 'unocss'
import transformerAttributifyJsx from '@unocss/transformer-attributify-jsx'
export default defineConfig({
// ...
presets: [
// ...
presetAttributify()
],
transformers: [
transformerAttributifyJsx(), // <--
],
})Caveats
WARNING
The rules are almost the same as those of Attributify preset, but there are several precautions.
html
<div translate-x-100% /> <!-- cannot end with `%` -->
<div translate-x-[100px] /> <!-- cannot contain `[` or `]` --><div translate-x-100% /> <!-- cannot end with `%` -->
<div translate-x-[100px] /> <!-- cannot contain `[` or `]` -->Instead, you may want to use valued attributes instead:
html
<div translate="x-100%" />
<div translate="x-[100px]" /><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.
js
transformerAttributifyJsx({
blocklist: [/text-[a-zA-Z]*/, 'text-5xl']
})transformerAttributifyJsx({
blocklist: [/text-[a-zA-Z]*/, 'text-5xl']
})jsx
<div text-red text-center text-5xl animate-bounce>
unocss
</div><div text-red text-center text-5xl animate-bounce>
unocss
</div>Will be compiled to:
html
<div text-red text-center text-5xl animate-bounce="">
unocss
</div><div text-red text-center text-5xl animate-bounce="">
unocss
</div>