Attributify JSX トランスフォーマー

JSX/TSX での値なし Attributifyをサポートします: @unocss/transformer-attributify-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>
  )
}

::: details このトランスフォーマーがない場合、JSX は値なし属性をブール属性として扱います。

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

:::

インストール

::: code-group

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

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

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

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 このプリセットは unocss パッケージに含まれており、そこからインポートすることもできます:

import { transformerAttributifyJsx } from 'unocss'

:::

注意点

::: warning ルールはAttributify プリセットのものとほぼ同じですが、いくつかの注意点があります。 :::

<div translate-x-100% />
{/* `%` で終わることはできません */}

<div translate-x-[100px] />
{/* `[` または `]` を含むことはできません */}

代わりに、値付き属性を使用することをお勧めします:

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

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

ブロックリスト

このトランスフォーマーは、有効な UnoCSS ユーティリティである属性のみを変換します。 また、いくつかの属性を変換から除外するために blocklist を使用することもできます。

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

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

次のようにコンパイルされます:

<div animate-bounce="">unocss</div>