transformer-attributify-jsx-sg

Support valueless attributify in JSX/TSX. \
Using ast-grep to match attributes, Thanks for HerringtonDarkholme.

$3

pnpm run bench
``
Running "unocss concurrent transform jsx" suite...
benchRegexTransform:
16 ops/s, ±9.95% | fastest

benchAstGrepTransform:
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 (



)
}
`

Will be transformed to:

`jsx
export function Component() {
return (



)
}
`

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