Preset Attributify

Abilita la modalità attributify per altri preset.

Codice Sorgente

Installazione

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

TIP

Questo preset è incluso nel pacchetto unocss, puoi anche importarlo da lì:

import { presetAttributify } from 'unocss'

Modalità Attributify

Immagina di avere questo pulsante usando le utility di Tailwind CSS. Quando l'elenco diventa più lungo, diventa davvero difficile da leggere e mantenere.

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

Con la modalità attributify, puoi separare le utility in attributi:

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

Ad esempio, text-sm text-white potrebbe essere raggruppato in text="sm white" senza duplicare lo stesso prefisso.

Auto-riferimento del prefisso

Per utility come flex, grid, border, che hanno le utility uguali al prefisso, viene fornito un valore speciale ~.

Ad esempio:

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

Può essere scritto come:

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

Attributify senza valore

Oltre alla modalità attributify di Windi CSS, questo preset supporta anche attributi senza valore.

Ad esempio,

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

ora può essere

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

INFO

Nota: Se stai usando JSX, <div foo> potrebbe essere trasformato in <div foo={true}> il che farà fallire il CSS generato da UnoCSS nel corrispondere gli attributi. Per risolvere questo, potresti voler provare transformer-attributify-jsx insieme a questo preset.

Conflitti di proprietà

Se il nome della modalità attributi entra mai in conflitto con le proprietà degli elementi o dei componenti, puoi aggiungere il prefisso un- per essere specifico alla modalità attributify di UnoCSS.

Ad esempio:

<a text="red">Questo entra in conflitto con la prop `text` dei link</a>
<!-- a -->
<a un-text="red">Colore del testo a rosso</a>

Il prefisso è opzionale per impostazione predefinita, se vuoi forzare l'uso del prefisso, imposta

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

Puoi anche disabilitare la scansione per determinati attributi:

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

Supporto TypeScript (JSX/TSX)

Crea shims.d.ts con il seguente contenuto:

Per impostazione predefinita, il tipo include attributi comuni da @unocss/preset-wind3. Se hai bisogno di attributi personalizzati, fai riferimento alla fonte del tipo per implementare il tuo tipo.

Vue

Da Volar 0.36, è ora rigoroso per attributi sconosciuti. Per disattivare, puoi aggiungere il seguente file al tuo progetto:

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

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

type Prefix = 'uno:' // cambialo con il tuo prefisso

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

Opzioni

strict

• tipo: boolean
• predefinito: false

Genera solo CSS per attributify o classe.

prefix

• tipo: string
• predefinito: 'un-'

Il prefisso per la modalità attributify.

prefixedOnly

• tipo: boolean
• predefinito: false

Corrisponde solo per attributi con prefisso.

nonValuedAttribute

• tipo: boolean
• predefinito: true

Supporta la corrispondenza di attributi senza valore.

ignoreAttributes

• tipo: string[]

Un elenco di attributi da ignorare durante l'estrazione.

trueToNonValued

• tipo: boolean
• predefinito: false

Gli attributi senza valore corrisponderanno anche se il valore effettivo rappresentato nel DOM è true. Questa opzione esiste per supportare framework che codificano attributi senza valore come true. Abilitare questa opzione interromperà le regole che terminano con true.

Crediti

Idea iniziale di @Tahul e @antfu. Precedente implementazione in Windi CSS di @voorjaar.