Preset Attributify

Ceci active le mode attributify pour d'autres presets.

Code Source

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

TIP

Ce preset est inclus dans le package unocss, vous pouvez aussi l'importer depuis là :

import { presetAttributify } from 'unocss'

Mode Attributify

Imaginez que vous ayez ce bouton utilisant les utilitaires de Tailwind CSS. Quand la liste s'allonge, cela devient vraiment difficile à lire et maintenir.

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

Avec le mode attributify, vous pouvez séparer les utilitaires en attributs :

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

Par exemple, text-sm text-white pourrait être groupé en text="sm white" sans dupliquer le même préfixe.

Auto-référence de préfixe

Pour les utilitaires comme flex, grid, border, qui ont les utilitaires identiques au préfixe, une valeur spéciale ~ est fournie.

Par exemple :

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

Peut être écrit comme :

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

Attributify sans valeur

En plus du mode attributify de Windi CSS, ce preset supporte aussi les attributs sans valeur.

Par exemple,

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

peut maintenant être

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

INFO

Note : Si vous utilisez JSX, <div foo> pourrait être transformé en <div foo={true}> ce qui fera que le CSS généré par UnoCSS ne pourra pas matcher les attributs. Pour résoudre cela, vous pourriez essayer transformer-attributify-jsx avec ce preset.

Conflits de propriétés

Si le nom des attributs entre en conflit avec les propriétés des éléments ou composants, vous pouvez ajouter le préfixe un- pour être spécifique au mode attributify d'UnoCSS.

Par exemple :

<a text="red">Ceci entre en conflit avec la prop `text` des liens</a>
<!-- vers -->
<a un-text="red">Couleur de texte en rouge</a>

Le préfixe est optionnel par défaut, si vous voulez forcer l'utilisation du préfixe, définissez

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

Vous pouvez aussi désactiver le scan pour certains attributs par :

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

Support TypeScript (JSX/TSX)

Créez shims.d.ts avec le contenu suivant :

Par défaut, le type inclut les attributs communs de @unocss/preset-wind3. Si vous avez besoin d'attributs personnalisés, référez-vous à la source du type pour implémenter votre propre type.

Vue

Depuis Volar 0.36, c'est maintenant strict pour les attributs inconnus. Pour se désengager, vous pouvez ajouter le fichier suivant à votre projet :

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 avec Préfixe

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

type Prefix = 'uno:' // changez-le pour votre préfixe

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

Options

strict

• type: boolean
• défaut: false

Génère seulement du CSS pour attributify ou class.

prefix

• type: string
• défaut: 'un-'

Le préfixe pour le mode attributify.

prefixedOnly

• type: boolean
• défaut: false

Ne matche que pour les attributs préfixés.

nonValuedAttribute

• type: boolean
• défaut: true

Supporte le matching des attributs sans valeur.

ignoreAttributes

• type: string[]

Une liste d'attributs à ignorer lors de l'extraction.

trueToNonValued

• type: boolean
• défaut: false

Les attributs sans valeur matcheront aussi si la valeur réelle représentée dans le DOM est true. Cette option existe pour supporter les frameworks qui encodent les attributs sans valeur comme true. Activer cette option cassera les règles qui se terminent par true.

Crédits

Idée initiale par @Tahul et @antfu. Implémentation précédente dans Windi CSS par @voorjaar.