@unocss/transformer-attributify-jsx-babel v0.60.0
@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>
)
}
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
// uno.config.js
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% /> <!-- cannot end with `%` -->
<div translate-x-[100px] /> <!-- cannot contain `[` or `]` -->
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
2 days ago
22 days ago
24 days ago
28 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
3 months ago
4 months ago
4 months ago
4 months ago
5 months ago
6 months ago
8 months ago
6 months ago
8 months ago
6 months ago
8 months ago
10 months ago
6 months ago
8 months ago
7 months ago
9 months ago
7 months ago
9 months ago
10 months ago
9 months ago
9 months ago
6 months ago
6 months ago
7 months ago
8 months ago
8 months ago
8 months ago
9 months ago
5 months ago
8 months ago
9 months ago
8 months ago
9 months ago
10 months ago
11 months ago
11 months ago
12 months ago
11 months ago
12 months ago
11 months ago
12 months ago
12 months ago
11 months ago
12 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago