Attributify プリセット

これは他のプリセットのために attributify モード を有効にします。

ソースコード

インストール

::: code-group

pnpm add -D @unocss/preset-attributify

yarn add -D @unocss/preset-attributify

npm install -D @unocss/preset-attributify

bun add -D @unocss/preset-attributify

:::

import presetAttributify from '@unocss/preset-attributify'

export default defineConfig({
  presets: [
    presetAttributify({ /* プリセットオプション */ }),
    // ...
  ],
})

::: 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> は <div foo={true}> に変換される可能性があり、UnoCSS から生成された CSS が属性と一致しなくなります。これを解決するには、このプリセットと一緒に transformer-attributify-jsx を試してみてください。 :::

プロパティの競合

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

例えば：

<a text="red">これはリンクの `text` プロパティと競合します</a>
{/* to */}
<a un-text="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 {}
  }
}

Marko

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

declare global {
  namespace Marko {
    interface HTMLAttributes extends AttributifyAttributes {}
  }
}

プレフィックス付き Attributify

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

type Prefix = 'uno:' // プレフィックスを変更

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

オプション

strict

• type: boolean
• default: false

attributify またはクラスのためだけに CSS を生成します。

prefix

• type: string
• default: 'un-'

attributify モードのプレフィックス。

prefixedOnly

• type: boolean
• default: false

プレフィックス付き属性のみをマッチ。

nonValuedAttribute

• type: boolean
• default: true

値なし属性のマッチをサポート。

ignoreAttributes

• type: string[]

抽出から無視する属性のリスト。

trueToNonValued

• type: boolean
• default: false

DOM で実際の値が true として表される場合、値なし属性もマッチします。このオプションは、値なし属性を true としてエンコードするフレームワークをサポートするために存在します。このオプションを有効にすると、true で終わるルールが壊れます。

クレジット

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