Attributify preset

Toto umožňuje režim attributify pre ostatné presety.

Zdrojový kód

Inštalácia

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({ /* možnosti presetu */ }),
    // ...
  ],
})

TIP

Tento preset je zahrnutý v balíku unocss, môžete ho tiež importovať odtiaľ:

import { presetAttributify } from 'unocss'

Režim Attributify

Predstavte si, že máte toto tlačidlo používajúce utility Tailwind CSS. Keď sa zoznam predlžuje, stáva sa naozaj ťažké čitateľné a udržiavateľné.

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

S režimom attributify môžete oddeliť utility do atribútov:

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

Napríklad, text-sm text-white môže byť zoskupené do text="sm white" bez duplikovania rovnakého prefixu.

Prefix self-referencing

Pre utility ako flex, grid, border, ktoré majú utility rovnaké ako prefix, je poskytnutá špeciálna hodnota ~.

Napríklad:

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

Môže byť napísané ako:

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

Valueless attributify

Okrem režimu attributify Windi CSS, tento preset tiež podporuje atribúty bez hodnôt.

Napríklad,

<div class="m-2 rounded text-teal-400" />

teraz môže byť

<div m-2 rounded text-teal-400 />

INFO

Poznámka: Ak používate JSX, <div foo> môže byť transformované na <div foo={true}>, čo spôsobí, že generované CSS z UnoCSS nebude môcť spárovať atribúty. Na vyriešenie tohto problému môžete vyskúšať transformer-attributify-jsx spolu s týmto presetom.

Konflikty vlastností

Ak názov režimu atribútov niekedy koliduje s vlastnosťami prvkov alebo komponentov, môžete pridať prefix un- na špecifikáciu režimu attributify UnoCSS.

Napríklad:

<a text="red">Toto koliduje s vlastnosťou `text` odkazov</a>
<!-- na -->
<a un-text="red">Farba textu na červenú</a>

Prefix je voliteľný predvolene, ak chcete vynútiť použitie prefixu, nastavte

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

Môžete tiež zakázať skenovanie pre určité atribúty pomocou:

presetAttributify({
  ignoreAttributes: [
    'text'
    // ...
  ]
})

Podpora TypeScriptu (JSX/TSX)

Vytvorte shims.d.ts s nasledujúcim obsahom:

Predvolene typ zahŕňa bežné atribúty z @unocss/preset-wind3. Ak potrebujete vlastné atribúty, pozrite si zdroj typu na implementáciu vlastného typu.

Vue

Od Volar 0.36, teraz je prísny k neznámym atribútom. Na opt-out môžete pridať nasledujúci súbor do vášho projektu:

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 s prefixom

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

type Prefix = 'uno:' // zmeňte na váš prefix

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

Možnosti

strict

• type: boolean
• default: false

Generovať CSS iba pre attributify alebo class.

prefix

• type: string
• default: 'un-'

Prefix pre režim attributify.

prefixedOnly

• type: boolean
• default: false

Párovať iba atribúty s prefixom.

nonValuedAttribute

• type: boolean
• default: true

Podporovať párovanie atribútov bez hodnôt.

ignoreAttributes

• type: string[]

Zoznam atribútov, ktoré sa majú ignorovať pri extrakcii.

trueToNonValued

• type: boolean
• default: false

Atribúty bez hodnôt sa budú tiež párovať, ak je skutočná hodnota reprezentovaná v DOM true. Táto možnosť existuje na podporu frameworkov, ktoré kódujú atribúty bez hodnôt ako true. Povolenie tejto možnosti rozbije pravidlá, ktoré končia na true.

Kredity

Počiatočný nápad od @Tahul a @antfu. Predchádzajúca implementácia vo Windi CSS od @voorjaar.