Transformer Attributify JSX

Support de l'attributify sans valeur dans JSX/TSX : @unocss/transformer-attributify-jsx.

Présentation

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

Sera transformé en :

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

Sans ce transformer, JSX traite les attributs sans valeur comme des attributs booléens.

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

Installation

pnpm

pnpm add -D @unocss/transformer-attributify-jsx

yarn

yarn add -D @unocss/transformer-attributify-jsx

npm

npm install -D @unocss/transformer-attributify-jsx

bun

bun add -D @unocss/transformer-attributify-jsx

import { defineConfig, presetAttributify } from 'unocss'
import transformerAttributifyJsx from '@unocss/transformer-attributify-jsx'

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

TIP

Ce preset est inclus dans le package unocss, vous pouvez aussi l'importer depuis là :

import { transformerAttributifyJsx } from 'unocss'

Mises en garde

WARNING

Les règles sont presque les mêmes que celles du Preset Attributify, mais il y a plusieurs précautions.

<div translate-x-100% />
<!-- ne peut pas se terminer par `%` -->

<div translate-x-[100px] />
<!-- ne peut pas contenir `[` ou `]` -->

À la place, vous pouvez vouloir utiliser des attributs avec valeur :

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

<div translate="x-[100px]" />

Liste de blocage

Ce transformer ne transformera que les attributs qui sont des utilitaires UnoCSS valides. Vous pouvez aussi blocklist contourner certains attributs de la transformation.

transformerAttributifyJsx({
  blocklist: [/text-[a-zA-Z]*/, 'text-5xl']
})

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

Sera compilé en :

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