Support valueless attributify in JSX/TSX.
npm install @unocss/transformer-attributify-jsxSupport valueless attributify in JSX/TSX.
``jsx`
export function Component() {
return (
unocss
)
}
Will be transformed to:
`jsx`
export function Component() {
return (
unocss
)
}
Without this transformer
JSX by default will treat valueless attributes as boolean attributes.
`jsx`
export function Component() {
return (
unocss
)
}
`bash`
npm i -D @unocss/transformer-attributify-jsx
`ts
import transformerAttributifyJsx from '@unocss/transformer-attributify-jsx'
// uno.config.ts
import { defineConfig, presetAttributify } from 'unocss'
export default defineConfig({
// ...
presets: [
// ...
presetAttributify()
],
transformers: [
transformerAttributifyJsx(), // <--
],
})
`
> ⚠️ The rules are almost the same as those of preset-attributify, but there are several precautions
`html
Instead, you may want to use valued attributes instead:
html
`Blocklist
This transformer will only transform attributes that are valid UnoCSS utilities.
You can also
bypass some attributes from been transformed.`js
transformerAttributifyJsx({
blocklist: [/text-[a-zA-Z]*/, 'text-5xl']
})
`jsx
unocss
`Will be compiled to:
html
unocss
``MIT License © 2022-PRESENT Anthony Fu