Support valueless attributify in JSX/TSX.
npm install transformer-attributify-jsx-sgSupport valueless attributify in JSX/TSX. \
Using ast-grep to match attributes, Thanks for HerringtonDarkholme.
pnpm run bench
Running "unocss concurrent transform jsx" suite...
benchRegexTransform:
16 ops/s, ±9.95% | fastestbenchAstGrepTransform:
13 ops/s, ±0.34% | 18.75% slower
benchSwcTransform:
6 ops/s, ±0.84% | 62.5% slower
benchBabelTransform:
2 ops/s, ±1.44% | slowest, 87.5% slower
`Usage
`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
)
}
`Install
`bash
npm i -D transformer-attributify-jsx-sg
``ts
// uno.config.ts
import { defineConfig, presetAttributify } from 'unocss'
import transformerAttributifyJsx from 'transformer-attributify-jsx-sg'export default defineConfig({
// ...
presets: [
// ...
presetAttributify()
],
transformers: [
transformerAttributifyJsx(), // <--
],
})
`Caveats
If you encounter any issues with this package, there is @unocss/transformer-attributify-jsx-babel package that uses Babel to transform JSX.
> ⚠️ 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
blocklist 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 zhiyuanzmj