Attributify 預設集

這將為其他預設集啟用 attributify 模式。

原始碼

安裝

pnpm

pnpm add -D @unocss/preset-attributify

yarn

yarn add -D @unocss/preset-attributify

npm

npm install -D @unocss/preset-attributify

uno.config.ts

import presetAttributify from '@unocss/preset-attributify'

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

提示

此預設集包含在 unocss 套件中，您也可以從那裡導入它

import { presetAttributify } from 'unocss'

Attributify 模式

想像一下，您使用 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 模式，您可以將工具程式分隔到屬性中

<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"，而無需重複相同的前綴。

前綴自我參考

對於像 flex、grid、border 這樣具有與前綴相同的工具程式的工具程式，提供了一個特殊的 ~ 值。

例如

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

可以寫成

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

無值 attributify

除了 Windi CSS 的 attributify 模式外，此預設集還支援無值屬性。

例如，

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

現在可以是

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

資訊

注意：如果您使用的是 JSX，<div foo> 可能會被轉換為 <div foo={true}>，這將導致 UnoCSS 生成的 CSS 無法匹配屬性。要解決此問題，您可以嘗試將 transformer-attributify-jsx 與此預設集一起使用。

屬性衝突

如果屬性模式的名稱與元素或組件的屬性衝突，您可以添加 un- 前綴以明確指定 UnoCSS 的 attributify 模式。

例如

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

預設情況下，前綴是可選的，如果您要強制使用前綴，請設定

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

您也可以透過以下方式停用對某些屬性的掃描

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

TypeScript 支援 (JSX/TSX)

使用以下內容創建 shims.d.ts

預設情況下，該類型包含來自 @unocss/preset-uno 的常用屬性。如果您需要自定義屬性，請參考 類型來源 來實作您自己的類型。

Vue

自 Volar 0.36 起，它現在對未知屬性很嚴格。要選擇退出，您可以將以下檔案添加到您的專案中

html.d.ts

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

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

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

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

選項

strict

• 類型： boolean
• 預設值： false

僅為 attributify 或 class 生成 CSS。

prefix

• 類型： string
• 預設值： 'un-'

attributify 模式的字首。

prefixedOnly

• 類型： boolean
• 預設值： false

僅匹配帶前綴的屬性。

nonValuedAttribute

• 類型： boolean
• 預設值： true

支援匹配無值的屬性。

ignoreAttributes

• 類型： string[]

要從提取中忽略的屬性清單。

trueToNonValued

• 類型： boolean
• 預設值： false

如果 DOM 中表示的實際值是 true，則無值屬性也將匹配。此選項適用於支援將無值屬性編碼為 true 的框架。啟用此選項將會破壞以 true 結尾的規則。

致謝

最初的想法來自 @Tahul 和 @antfu。先前由 @voorjaar 在 Windi CSS 中實作。