Пресет 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

uno.config.ts

import presetAttributify from '@unocss/preset-attributify'

export default defineConfig({
  presets: [
    presetAttributify({ /* параметры пресета */ }),
    // ...
  ],
})

СОВЕТ

Этот пресет включен в пакет unocss, вы также можете импортировать его оттуда:

import { presetAttributify } from 'unocss'

Режим атрибутов

Представьте, что у вас есть кнопка, использующая утилиты 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
  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>

Например, text-sm text-white может быть сгруппировано в text="sm white" без дублирования одного и того же префикса.

Ссылка префикса на самого себя

Для утилит вроде flex, grid, border, которые имеют утилиты, совпадающие с префиксом, предоставляется специальное значение ~.

Например:

<button class="border border-red">Кнопка</button>

Может быть записано как:

<button border="~ red">Кнопка</button>

Атрибуты без значения

В дополнение к режиму атрибутов Windi CSS, этот пресет также поддерживает атрибуты без значения.

Например:

<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.

Например:

<a text="red">Это конфликтует со свойством ссылки `text`</a>
<!-- меняем на -->
<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, проверка неизвестных атрибутов стала строгой. Чтобы отключить это, вы можете добавить в свой проект следующий файл:

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 {}
  }
}

Marko

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

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

Режим атрибутов с префиксом

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

type Prefix = 'uno:' // замените на свой префикс

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

Опции

strict

• тип: boolean
• по умолчанию: false

Генерировать CSS только для attributify или только для class.

prefix

• тип: string
• по умолчанию: 'un-'

Префикс для режима атрибутов.

prefixedOnly

• тип: boolean
• по умолчанию: false

Совпадение только с атрибутами, имеющими префикс.

nonValuedAttribute

• тип: boolean
• по умолчанию: true

Поддержка сопоставления атрибутов без значения.

ignoreAttributes

• тип: string[]

Список атрибутов, которые следует игнорировать при извлечении.

trueToNonValued

• тип: boolean
• по умолчанию: false

Атрибуты без значения также будут совпадать, если фактическое значение в DOM равно true. Эта опция существует для поддержки фреймворков, которые кодируют атрибуты без значения как true. Включение этой опции сломает правила, оканчивающиеся на true.

Благодарности

Первоначальная идея принадлежит @Tahul и @antfu. Предыдущая реализация в Windi CSS от @voorjaar.