Skip to content
On this page

Attributify JSX transformer

Support valueless attributify in JSX/TSX: @unocss/transformer-attributify-jsx.

Presentation

jsx
export function Component() {
  return (
    <div text-red text-center text-5xl animate-bounce>
      unocss
    </div>
  )
}
export function Component() {
  return (
    <div text-red text-center text-5xl animate-bounce>
      unocss
    </div>
  )
}

Will be transformed to:

jsx
export function Component() {
  return (
    <div text-red="" text-center="" text-5xl="" animate-bounce="">
      unocss
    </div>
  )
}
export function Component() {
  return (
    <div text-red="" text-center="" text-5xl="" animate-bounce="">
      unocss
    </div>
  )
}
Without this transformer, JSX treats valueless attributes as boolean attributes.
jsx
export function Component() {
  return (
    <div text-red={true} text-center={true} text-5xl={true} animate-bounce={true}>
      unocss
    </div>
  )
}
export function Component() {
  return (
    <div text-red={true} text-center={true} text-5xl={true} animate-bounce={true}>
      unocss
    </div>
  )
}

Installation

bash
pnpm add -D @unocss/transformer-attributify-jsx
pnpm add -D @unocss/transformer-attributify-jsx
bash
yarn add -D @unocss/transformer-attributify-jsx
yarn add -D @unocss/transformer-attributify-jsx
bash
npm install -D @unocss/transformer-attributify-jsx
npm install -D @unocss/transformer-attributify-jsx
ts
// uno.config.ts
import { defineConfig, presetAttributify } from 'unocss'
import transformerAttributifyJsx from '@unocss/transformer-attributify-jsx'

export default defineConfig({
  // ...
  presets: [
    // ...
    presetAttributify()
  ],
  transformers: [
    transformerAttributifyJsx(), // <--
  ],
})
// uno.config.ts
import { defineConfig, presetAttributify } from 'unocss'
import transformerAttributifyJsx from '@unocss/transformer-attributify-jsx'

export default defineConfig({
  // ...
  presets: [
    // ...
    presetAttributify()
  ],
  transformers: [
    transformerAttributifyJsx(), // <--
  ],
})

Caveats

WARNING

The rules are almost the same as those of Attributify preset, but there are several precautions.

html
<div translate-x-100% /> <!-- cannot end with `%` -->

<div translate-x-[100px] /> <!-- cannot contain `[` or `]` -->
<div translate-x-100% /> <!-- cannot end with `%` -->

<div translate-x-[100px] /> <!-- cannot contain `[` or `]` -->

Instead, you may want to use valued attributes instead:

html
<div translate="x-100%" />

<div translate="x-[100px]" />
<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.

js
transformerAttributifyJsx({
  blocklist: [/text-[a-zA-Z]*/, 'text-5xl']
})
transformerAttributifyJsx({
  blocklist: [/text-[a-zA-Z]*/, 'text-5xl']
})
jsx
<div text-red text-center text-5xl animate-bounce>
  unocss
</div>
<div text-red text-center text-5xl animate-bounce>
  unocss
</div>

Will be compiled to:

html
<div text-red text-center text-5xl animate-bounce="">
  unocss
</div>
<div text-red text-center text-5xl animate-bounce="">
  unocss
</div>

Released under the MIT License.