Preset Attributify

Điều này cho phép chế độ attributify cho các preset khác.

Mã nguồn

Cài đặt

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({ /* các tùy chọn preset */ }),
    // ...
  ],
})

TIP

Preset này được bao gồm trong gói unocss, bạn cũng có thể nhập nó từ đó:

import { presetAttributify } from 'unocss'

Chế độ Attributify

Hãy tưởng tượng bạn có nút này sử dụng các tiện ích của Tailwind CSS. Khi danh sách trở nên dài hơn, nó trở nên thực sự khó đọc và bảo trì.

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

Với chế độ attributify, bạn có thể tách các tiện ích thành các thuộc tính:

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

Ví dụ, text-sm text-white có thể được nhóm thành text="sm white" mà không cần sao chép cùng tiền tố.

Tự tham chiếu tiền tố

Đối với các tiện ích như flex, grid, border, có các tiện ích giống như tiền tố, một giá trị ~ đặc biệt được cung cấp.

Ví dụ:

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

Có thể được viết thành:

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

Attributify không giá trị

Ngoài chế độ attributify của Windi CSS, preset này cũng hỗ trợ các thuộc tính không giá trị.

Ví dụ,

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

bây giờ có thể là

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

INFO

Lưu ý: Nếu bạn đang sử dụng JSX, <div foo> có thể được biến đổi thành <div foo={true}> điều này sẽ làm cho CSS được tạo từ UnoCSS không khớp với các thuộc tính. Để giải quyết vấn đề này, bạn có thể muốn thử transformer-attributify-jsx cùng với preset này.

Xung đột thuộc tính

Nếu tên của chế độ thuộc tính nào đó xung đột với các thuộc tính của phần tử hoặc component, bạn có thể thêm tiền tố un- để cụ thể cho chế độ attributify của UnoCSS.

Ví dụ:

<a text="red">Điều này xung đột với thuộc tính `text` của liên kết</a>
<!-- thành -->
<a un-text="red">Màu chữ thành đỏ</a>

Tiền tố là tùy chọn theo mặc định, nếu bạn muốn thực hiện sử dụng tiền tố, đặt

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

Bạn cũng có thể vô hiệu hóa việc quét cho một số thuộc tính bằng:

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

Hỗ trợ TypeScript (JSX/TSX)

Tạo shims.d.ts với nội dung sau:

Theo mặc định, loại bao gồm các thuộc tính phổ biến từ @unocss/preset-wind3. Nếu bạn cần các thuộc tính tùy chỉnh, tham khảo nguồn loại để thực hiện loại riêng của bạn.

Vue

Kể từ Volar 0.36, bây giờ nó nghiêm ngặt với các thuộc tính không xác định. Để chọn không tham gia, bạn có thể thêm tệp sau vào dự án của mình:

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 với Tiền tố

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

type Prefix = 'uno:' // thay đổi nó thành tiền tố của bạn

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

Tùy chọn

strict

• kiểu: boolean
• mặc định: false

Chỉ tạo CSS cho attributify hoặc class.

prefix

• kiểu: string
• mặc định: 'un-'

Tiền tố cho chế độ attributify.

prefixedOnly

• kiểu: boolean
• mặc định: false

Chỉ khớp cho các thuộc tính có tiền tố.

nonValuedAttribute

• kiểu: boolean
• mặc định: true

Hỗ trợ khớp các thuộc tính không giá trị.

ignoreAttributes

• kiểu: string[]

Danh sách các thuộc tính sẽ bị bỏ qua khỏi việc trích xuất.

trueToNonValued

• kiểu: boolean
• mặc định: false

Các thuộc tính không giá trị cũng sẽ khớp nếu giá trị thực tế được biểu diễn trong DOM là true. Tùy chọn này tồn tại để hỗ trợ các framework mã hóa các thuộc tính không giá trị thành true. Bật tùy chọn này sẽ làm hỏng các quy tắc kết thúc bằng true.

Tín nhiệm

Ý tưởng ban đầu bởi @Tahul và @antfu. Thực hiện trước đó trong Windi CSS bởi @voorjaar.