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を使用している場合、`

`は`

`に変換される可能性があり、UnoCSSから生成されたCSSが属性と一致しなくなります。これを解決するには、このプリセットと一緒に`transformer-attributify-jsx`を試すことをお勧めします。

プロパティの競合

属性モードの名前が要素またはコンポーネントのプロパティと競合する場合は、UnoCSSのAttributifyモードに固有にするために`un-`プレフィックスを追加できます。

例:

<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またはクラスに対してのみCSSを生成します。

prefix

• **型:** `string`
• **デフォルト:** `'un-'`

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

prefixedOnly

• **型:** `boolean`
• **デフォルト:** `false`

プレフィックス付き属性のみを一致させます。

nonValuedAttribute

• **型:** `boolean`
• **デフォルト:** `true`

値のない属性の一致をサポートします。

ignoreAttributes

• **型:** `string[]`

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

trueToNonValued

• **型:** `boolean`
• **デフォルト:** `false`

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

クレジット

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