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

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

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

インストール

pnpm

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

yarn

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

npm

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

uno.config.ts

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

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

ヒント

このプリセットは unocss パッケージに含まれており、そこからインポートすることもできます。

import { transformerAttributifyJsx } from 'unocss'

注意点

警告

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

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

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

代わりに、値付き属性を使用したい場合があります。

<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 text-red text-center text-5xl animate-bounce="">
  unocss
</div>