Attributify preset

他のプリセットでattributifyモードを有効にします。

ソースコード

インストール

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

このプリセットは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 />

INFO

注意：JSXを使う場合、<div foo>は<div foo={true}>に変換され、UnoCSSで生成されるCSSが属性にマッチしなくなります。これを解決するには、このプリセットとtransformer-attributify-jsxの併用を検討してください。

プロパティの競合

属性モードの名前が要素やコンポーネントのプロパティと競合する場合、un-プレフィックスを付けてUnoCSSのattributifyモード専用にできます。

例：

<a text="red">This conflicts with links' `text` prop</a>
<!-- → -->
<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-wind3の共通属性が型に含まれます。カスタム属性が必要な場合は、型ソースを参照し独自型を実装してください。

Vue

Volar 0.36以降、未知の属性に厳格になりました。回避するには、以下のファイルをプロジェクトに追加してください：

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:' // 任意のプレフィックスに変更

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で終わるルールがある場合は注意。

クレジット

初期アイデアは@Tahulと@antfu。Windi CSSでの実装は@voorjaar。