Attributify JSX transformer

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

Presentatie

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

Zal worden getransformeerd naar:

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

Zonder deze transformer, behandelt JSX valueless attributen als boolean attributen.

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

Installatie

pnpm

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

yarn

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