Attributify preset

এটি অন্যান্য presets-এর জন্য attributify mode সক্রিয় করে।

সোর্স কোড

ইনস্টলেশন

pnpm

pnpm add -D @unocss/preset-attributify

yarn

yarn add -D @unocss/preset-attributify

npm

npm install -D @unocss/preset-attributify

bun

bun add -D @unocss/preset-attributify

import presetAttributify from '@unocss/preset-attributify'

export default defineConfig({
  presets: [
    presetAttributify({ /* preset options */ }),
    // ...
  ],
})

TIP

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

import { presetAttributify } from 'unocss'

Attributify Mode

কল্পনা করুন আপনার কাছে Tailwind CSS-এর utilities ব্যবহার করে এমন একটি button আছে। যখন তালিকা দীর্ঘ হয়, এটি পড়া এবং বজায় রাখা সত্যিই কঠিন হয়ে যায়।

<button
  class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600"
>
  Button
</button>

attributify mode-এর সাথে, আপনি utilities-কে attributes-এ আলাদা করতে পারেন:

<button
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

উদাহরণস্বরূপ, text-sm text-white কে একই prefix duplicate না করে text="sm white"-এ group করা যায়।

Prefix self-referencing

flex, grid, border-এর মতো utilities-এর জন্য যেগুলির utilities prefix-এর সাথে একই, একটি বিশেষ ~ value প্রদান করা হয়।

উদাহরণস্বরূপ:

<button class="border border-red">Button</button>

এভাবে লেখা যায়:

<button border="~ red">Button</button>

Valueless attributify

Windi CSS-এর attributify mode-এর পাশাপাশি, এই preset valueless attributes-ও সমর্থন করে।

উদাহরণস্বরূপ,

<div class="m-2 rounded text-teal-400" />

এভাবে হতে পারে

<div m-2 rounded text-teal-400 />

INFO

নোট: আপনি যদি JSX ব্যবহার করছেন, <div foo> <div foo={true}>-এ রূপান্তরিত হতে পারে যা UnoCSS থেকে generated CSS match করতে ব্যর্থ হবে। এটি সমাধান করতে, আপনি এই preset-এর সাথে transformer-attributify-jsx চেষ্টা করতে চাইতে পারেন।

Properties conflicts

যদি attributes mode-এর নাম কখনো elements' বা components' properties-এর সাথে conflict করে, আপনি UnoCSS-এর attributify mode-এ নির্দিষ্ট করতে un- prefix যোগ করতে পারেন।

উদাহরণস্বরূপ:

<a text="red">This conflicts with links' `text` prop</a>
<!-- to -->
<a un-text="red">Text color to red</a>

Prefix ডিফল্টভাবে ঐচ্ছিক, আপনি যদি prefix ব্যবহার বাধ্যতামূলক করতে চান, সেট করুন

presetAttributify({
  prefix: 'un-',
  prefixedOnly: true, // <--
})

আপনি কিছু attributes-এর জন্য scanning নিষ্ক্রিয় করতে পারেন:

presetAttributify({
  ignoreAttributes: [
    'text'
    // ...
  ]
})

TypeScript সমর্থন (JSX/TSX)

নিম্নলিখিত কন্টেন্ট দিয়ে shims.d.ts তৈরি করুন:

ডিফল্টভাবে, type-এ @unocss/preset-wind3 থেকে common attributes অন্তর্ভুক্ত। আপনার যদি custom attributes প্রয়োজন হয়, তাহলে আপনার নিজের type implement করতে type source দেখুন।

Vue

Volar 0.36 থেকে, এখন unknown attributes-এর জন্য strict। opt-out করতে, আপনি আপনার প্রজেক্টে নিম্নলিখিত ফাইল যোগ করতে পারেন:

declare module '@vue/runtime-dom' {
  interface HTMLAttributes {
    [key: string]: any
  }
}
declare module '@vue/runtime-core' {
  interface AllowedComponentProps {
    [key: string]: any
  }
}
export {}

React

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module 'react' {
  interface HTMLAttributes<T> extends AttributifyAttributes {}
}

Vue 3

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module '@vue/runtime-dom' {
  interface HTMLAttributes extends AttributifyAttributes {}
}

SolidJS

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module 'solid-js' {
  namespace JSX {
    interface HTMLAttributes<T> extends AttributifyAttributes {}
  }
}

Svelte & SvelteKit

declare namespace svelteHTML {
  import type { AttributifyAttributes } from '@unocss/preset-attributify'

  type HTMLAttributes = AttributifyAttributes
}

Astro

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare global {
  namespace astroHTML.JSX {
    interface HTMLAttributes extends AttributifyAttributes { }
  }
}

Preact

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module 'preact' {
  namespace JSX {
    interface HTMLAttributes extends AttributifyAttributes {}
  }
}

Prefix সহ Attributify

import type { AttributifyNames } from '@unocss/preset-attributify'

type Prefix = 'uno:' // change it to your prefix

interface HTMLAttributes extends Partial<Record<AttributifyNames<Prefix>, string>> {}

অপশন

strict

• type: boolean
• default: false

শুধুমাত্র attributify বা class-এর জন্য CSS জেনারেট করুন।

prefix

• type: string
• default: 'un-'

attributify mode-এর জন্য prefix।

prefixedOnly

• type: boolean
• default: false

শুধুমাত্র prefixed attributes-এর জন্য match করুন।

nonValuedAttribute

• type: boolean
• default: true

non-valued attributes match করা সমর্থন করুন।

ignoreAttributes

• type: string[]

extracting থেকে উপেক্ষা করা attributes-এর তালিকা।

trueToNonValued

• type: boolean
• default: false

DOM-এ প্রকৃত value true represent করলে non-valued attributes-ও match করবে। এই option এমন frameworks সমর্থন করার জন্য বিদ্যমান যেগুলি non-valued attributes-কে true হিসাবে encode করে। এই option সক্রিয় করা true দিয়ে শেষ হওয়া rules ভেঙে দেবে।

Credits

Initial idea @Tahul এবং @antfu দ্বারা। Windi CSS-এর [পূর্ববর্তী implementation](https://windicss.org/posts/v30.html#attributify mode) @voorjaar দ্বারা।