Attributify JSX ট্রান্সফর্মার

JSX/TSX-এ valueless 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 valueless attributes-কে boolean attributes হিসাবে বিবেচনা করে।

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

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

এই preset unocss প্যাকেজে অন্তর্ভুক্ত, আপনি সেখান থেকেও import করতে পারেন:

import { transformerAttributifyJsx } from 'unocss'

সতর্কতা

WARNING

Rules গুলি Attributify preset-এর মতোই প্রায়, কিন্তু কয়েকটি সতর্কতা আছে।

<div translate-x-100% />
<!-- `%` দিয়ে শেষ হতে পারে না -->

<div translate-x-[100px] />
<!-- `[` বা `]` থাকতে পারে না -->

পরিবর্তে, আপনি valued attributes ব্যবহার করতে চাইতে পারেন:

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

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

Blocklist

এই ট্রান্সফর্মার শুধুমাত্র সেই attributes transform করবে যা valid UnoCSS utilities। আপনি কিছু attributes transform হওয়া থেকে bypass করতে 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>