Attributify Preset

Dies aktiviert den Attributify-Modus für andere Presets.

Quellcode

Installation

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({ /* Preset-Optionen */ }),
    // ...
  ],
})

TIP

Dieses Preset ist im unocss Paket enthalten, Sie können es auch von dort importieren:

import { presetAttributify } from 'unocss'

Attributify-Modus

Stellen Sie sich vor, Sie haben diesen Button mit Tailwind CSS Utilities. Wenn die Liste länger wird, wird es wirklich schwer zu lesen und zu warten.

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

Mit dem Attributify-Modus können Sie Utilities in Attribute trennen:

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

Zum Beispiel könnte text-sm text-white in text="sm white" gruppiert werden, ohne das gleiche Präfix zu duplizieren.

Präfix-Selbstreferenzierung

Für Utilities wie flex, grid, border, die die gleichen Utilities wie das Präfix haben, wird ein spezieller ~ Wert bereitgestellt.

Zum Beispiel:

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

Kann geschrieben werden als:

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

Wertloses Attributify

Zusätzlich zum Attributify-Modus von Windi CSS unterstützt dieses Preset auch wertlose Attribute.

Zum Beispiel,

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

kann jetzt sein

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

INFO

Hinweis: Wenn Sie JSX verwenden, könnte <div foo> zu <div foo={true}> transformiert werden, was dazu führt, dass das generierte CSS von UnoCSS die Attribute nicht abgleichen kann. Um dies zu lösen, möchten Sie möglicherweise transformer-attributify-jsx zusammen mit diesem Preset verwenden.

Eigenschaftskonflikte

Wenn der Name des Attributmodus jemals mit den Eigenschaften der Elemente oder Komponenten kollidiert, können Sie das un- Präfix hinzufügen, um es spezifisch für den Attributify-Modus von UnoCSS zu machen.

Zum Beispiel:

<a text="red">Dies kollidiert mit der `text` Prop von Links</a>
<!-- zu -->
<a un-text="red">Textfarbe zu rot</a>

Das Präfix ist standardmäßig optional. Wenn Sie die Verwendung des Präfixes erzwingen möchten, setzen Sie

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

Sie können auch das Scannen für bestimmte Attribute deaktivieren durch:

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

TypeScript-Unterstützung (JSX/TSX)

Erstellen Sie shims.d.ts mit folgendem Inhalt:

Standardmäßig enthält der Typ gemeinsame Attribute von @unocss/preset-wind3. Wenn Sie benutzerdefinierte Attribute benötigen, beziehen Sie sich auf die Typquelle, um Ihren eigenen Typ zu implementieren.

Vue

Seit Volar 0.36 ist es jetzt streng zu unbekannten Attributen. Um sich abzumelden, können Sie die folgende Datei zu Ihrem Projekt hinzufügen:

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 mit Präfix

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

type Prefix = 'uno:' // ändern Sie es zu Ihrem Präfix

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

Optionen

strict

• Typ: boolean
• Standard: false

Generiert nur CSS für Attributify oder Klasse.

prefix

• Typ: string
• Standard: 'un-'

Das Präfix für den Attributify-Modus.

prefixedOnly

• Typ: boolean
• Standard: false

Nur für präfixierte Attribute abgleichen.

nonValuedAttribute

• Typ: boolean
• Standard: true

Unterstützt das Abgleichen von wertlosen Attributen.

ignoreAttributes

• Typ: string[]

Eine Liste von Attributen, die vom Extrahieren ignoriert werden sollen.

trueToNonValued

• Typ: boolean
• Standard: false

Wertlose Attribute werden auch abgeglichen, wenn der tatsächliche Wert im DOM true ist. Diese Option existiert, um Frameworks zu unterstützen, die wertlose Attribute als true kodieren. Das Aktivieren dieser Option wird Regeln brechen, die mit true enden.

Credits

Ursprüngliche Idee von @Tahul und @antfu. Vorherige Implementierung in Windi CSS von @voorjaar.