Attributify 预设

这为其他attributify mode预设启用了属性模式。

Source Code（源代码）

安装

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 */
    }),
    // ...
  ],
});

TIP

这个预设包含在unocss包中，你也可以从那里导入它:

import { presetAttributify } from "unocss";

Attributify Mode

想象一下，您使用 Tailwind CSS's 的实用程序有这个按钮。当列表变长时，它变得很难阅读和维护。

<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 mode，您可以将实用程序划分为属性:

<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"，而不需要重复相同的前缀。 q

Prefix self-referencing

对于flex, grid, border, 等与前缀具有相同实用程序的实用程序，提供了一个特殊的~值。

例如:

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

可以写为:

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

Valueless attributify

除了 Windi CSS 的属性模式，这个预设还支持无值属性。

例如,

<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这个预设来解决这个问题。

属性的冲突

如果属性模式的名称与元素或组件的属性冲突，则可以添加特定于 UnoCSS 属性模式的前缀 un- 。

For example:

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

默认情况下 Prefix 是可选的，如果您想强制使用 Prefix，请设置

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

您还可以通过以下方式禁用某些属性的扫描:

presetAttributify({
  ignoreAttributes: [
    "text",
    // ...
  ],
});

TypeScript support (JSX/TSX)

创建包含以下内容的shims.d.ts:

默认情况下，该类型包括 @unocss/preset-uno 中的常见属性。 如果需要自定义属性，请参阅 type source (类型源代码)来实现您自己的类型。

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

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

type Prefix = "uno:"; // change it to your prefix

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

Options

strict

• type: boolean
• default: false

Only generate CSS for attributify or class.

prefix

• type: string
• default: 'un-'

The prefix for attributify mode.

prefixedOnly

• type: boolean
• default: false

Only match for prefixed attributes.

nonValuedAttribute

• type: boolean
• default: true

Support matching non-valued attributes.

ignoreAttributes

• type: string[]

A list of attributes to be ignored from extracting.

trueToNonValued

• type: boolean
• default: false

Non-valued attributes will also match if the actual value represented in DOM is true. This option exists for supporting frameworks that encodes non-valued attributes as true. Enabling this option will break rules that ends with true.

Credits

Initial idea by @Tahul and @antfu. Prior implementation in Windi CSS by @voorjaar.