@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>
  )
}

<summary>Without this transformer</summary>

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

import transformerAttributifyJsx from '@unocss/transformer-attributify-jsx-babel'
// uno.config.js
import { defineConfig, presetAttributify } from 'unocss'

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

Current Tags

66.3.3 ... latest (9 months ago)

136 Versions

66.3.3 ... 9 months ago
66.3.2 ... 10 months ago
66.3.1 ... 10 months ago
66.3.1-beta.1 ... 10 months ago
66.2.3 ... 10 months ago
66.2.2 ... 10 months ago
66.2.1 ... 10 months ago
66.2.0 ... 10 months ago
66.1.4 ... 10 months ago
66.1.3 ... 10 months ago
66.1.2 ... a year ago
66.1.1 ... a year ago
66.1.0 ... a year ago
66.1.0-beta.13 ... a year ago
66.1.0-beta.12 ... a year ago
66.1.0-beta.11 ... a year ago
66.1.0-beta.10 ... a year ago
66.1.0-beta.9 ... a year ago
66.1.0-beta.8 ... a year ago
66.1.0-beta.7 ... a year ago
66.1.0-beta.6 ... a year ago
66.1.0-beta.5 ... a year ago
66.1.0-beta.4 ... a year ago
66.1.0-beta.3 ... a year ago
66.1.0-beta.2 ... a year ago
66.1.0-beta.1 ... a year ago
66.0.0 ... a year ago
65.5.0 ... a year ago
65.4.3 ... a year ago
65.4.2 ... a year ago
65.4.0 ... a year ago
0.65.4 ... a year ago
0.65.3 ... a year ago
0.65.2 ... a year ago
0.65.1 ... a year ago
0.65.0 ... a year ago
0.65.0-beta.3 ... a year ago
0.65.0-beta.2 ... a year ago
0.65.0-beta.1 ... a year ago
0.64.1 ... a year ago
0.64.0 ... a year ago
0.63.6 ... a year ago
0.63.5 ... a year ago
0.63.4 ... 2 years ago
0.63.3 ... 2 years ago
0.63.2 ... 2 years ago
0.63.1 ... 2 years ago
0.63.0 ... 2 years ago
0.62.4 ... 2 years ago
0.62.3 ... 2 years ago
0.62.2 ... 2 years ago
0.62.1 ... 2 years ago
0.62.0 ... 2 years ago
0.61.9 ... 2 years ago
0.61.8 ... 2 years ago
0.61.7 ... 2 years ago
0.61.6 ... 2 years ago
0.61.5 ... 2 years ago
0.61.4 ... 2 years ago
0.61.3 ... 2 years ago
0.61.2 ... 2 years ago
0.61.0 ... 2 years ago
0.60.4 ... 2 years ago
0.60.3 ... 2 years ago
0.60.2 ... 2 years ago
0.60.1 ... 2 years ago
0.60.0 ... 2 years ago
0.59.4 ... 2 years ago
0.59.3 ... 2 years ago
0.59.2 ... 2 years ago
0.59.1 ... 2 years ago
0.59.0 ... 2 years ago
0.59.0-beta.1 ... 2 years ago
0.58.9 ... 2 years ago
0.58.8 ... 2 years ago
0.58.7 ... 2 years ago
0.58.6 ... 2 years ago
0.58.5 ... 2 years ago
0.58.4 ... 2 years ago
0.58.3 ... 2 years ago
0.58.2 ... 2 years ago
0.58.1 ... 2 years ago
0.58.0 ... 2 years ago
0.57.7 ... 2 years ago
0.57.6 ... 2 years ago
0.57.5 ... 2 years ago
0.57.4 ... 2 years ago
0.57.3 ... 2 years ago
0.57.2 ... 2 years ago
0.57.1 ... 2 years ago
0.57.0 ... 2 years ago
0.56.5 ... 3 years ago
0.56.4 ... 3 years ago
0.56.3 ... 3 years ago
0.56.2 ... 3 years ago
0.56.1 ... 3 years ago
0.56.0 ... 3 years ago
0.55.7 ... 3 years ago
0.55.6 ... 3 years ago
0.55.5 ... 3 years ago
0.55.4 ... 3 years ago
0.55.3 ... 3 years ago
0.55.2 ... 3 years ago
0.55.1 ... 3 years ago
0.55.0 ... 3 years ago
0.54.3 ... 3 years ago
0.54.2 ... 3 years ago
0.54.1 ... 3 years ago
0.54.0 ... 3 years ago
0.53.6 ... 3 years ago
0.53.5 ... 3 years ago
0.53.4 ... 3 years ago
0.53.3 ... 3 years ago
0.53.1 ... 3 years ago
0.53.0 ... 3 years ago
0.52.7 ... 3 years ago
0.52.6 ... 3 years ago
0.52.5 ... 3 years ago
0.52.4 ... 3 years ago
0.52.3 ... 3 years ago
0.52.2 ... 3 years ago
0.52.1 ... 3 years ago
0.52.0 ... 3 years ago
0.51.13 ... 3 years ago
0.51.12 ... 3 years ago
0.51.11 ... 3 years ago
0.51.8 ... 3 years ago
0.51.7 ... 3 years ago
0.51.6 ... 3 years ago
0.51.5 ... 3 years ago
0.51.4 ... 3 years ago
0.51.3 ... 3 years ago
0.51.2 ... 3 years ago
0.51.1 ... 3 years ago
0.51.0 ... 3 years ago
0.50.8 ... 3 years ago