Attributify preset

นี้เปิดใช้งาน attributify mode สำหรับ presets อื่นๆ

Source Code

การติดตั้ง

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

ลองจินตนาการว่าคุณมีปุ่มนี้ที่ใช้ utilities ของ Tailwind CSS เมื่อรายการยาวขึ้น มันจะกลายเป็นเรื่องยากที่จะอ่านและดูแล

<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 สามารถรวมเป็น text="sm white" โดยไม่ต้องทำซ้ำ prefix เดียวกัน

Prefix self-referencing

สำหรับ utilities เช่น flex, grid, border ที่มี utilities เหมือนกับ prefix มีค่าพิเศษ ~ ให้ใช้

ตัวอย่างเช่น:

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

สามารถเขียนเป็น:

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

Valueless attributify

นอกจาก attributify mode ของ Windi CSS แล้ว 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}> ซึ่งจะทำให้ CSS ที่สร้างจาก UnoCSS ไม่ตรงกับ attributes เพื่อแก้ปัญหานี้ คุณอาจต้องลองใช้ transformer-attributify-jsx พร้อมกับ preset นี้

Properties conflicts

หากชื่อของ attributes mode ขัดแย้งกับ properties ของ elements หรือ components คุณสามารถเพิ่ม prefix un- เพื่อระบุให้เฉพาะกับ attributify mode ของ UnoCSS

ตัวอย่างเช่น:

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

Prefix เป็นทางเลือกโดยค่าเริ่มต้น หากคุณต้องการบังคับใช้ prefix ให้ตั้งค่า

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

คุณยังสามารถปิดการสแกนสำหรับ attributes บางตัวได้โดย:

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

TypeScript support (JSX/TSX)

สร้าง shims.d.ts ด้วยเนื้อหาดังนี้:

โดยค่าเริ่มต้น type จะรวม attributes ทั่วไปจาก @unocss/preset-wind3 หากคุณต้องการ custom attributes โปรดดู type source เพื่อ implement type ของคุณเอง

Vue

ตั้งแต่ Volar 0.36 ตอนนี้มันเข้มงวดกับ unknown attributes เพื่อ 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 {}
  }
}

Attributify with Prefix

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

type Prefix = 'uno:' // เปลี่ยนเป็น prefix ของคุณ

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

Options

strict

• type: boolean
• default: false

สร้าง CSS เฉพาะสำหรับ attributify หรือ class

prefix

• type: string
• default: 'un-'

Prefix สำหรับ attributify mode

prefixedOnly

• type: boolean
• default: false

จับคู่เฉพาะ prefixed attributes

nonValuedAttribute

• type: boolean
• default: true

รองรับการจับคู่ non-valued attributes

ignoreAttributes

• type: string[]

รายการ attributes ที่จะข้ามจากการ extract

trueToNonValued

• type: boolean
• default: false

Non-valued attributes จะถูกจับคู่ด้วยหากค่าจริงที่แสดงใน DOM เป็น true ตัวเลือกนี้มีไว้เพื่อรองรับ frameworks ที่เข้ารหัส non-valued attributes เป็น true การเปิดใช้งานตัวเลือกนี้จะทำลาย rules ที่ลงท้ายด้วย true

Credits

ไอเดียเริ่มต้นโดย @Tahul และ @antfu การ implement ก่อนหน้าใน Windi CSS โดย @voorjaar