Règles

Les règles définissent les classes utilitaires et le CSS résultant. UnoCSS a de nombreuses règles intégrées mais permet aussi d'ajouter facilement des règles personnalisées.

Règles statiques

Avec cet exemple :

rules: [
  ['m-1', { margin: '0.25rem' }],
]

Le CSS suivant sera généré chaque fois que m-1 est détecté dans la base de code des utilisateurs :

.m-1 { margin: 0.25rem; }

Note : La syntaxe du corps suit la syntaxe des propriétés CSS, par exemple font-weight au lieu de fontWeight. S'il y a un tiret - dans le nom de la propriété, il doit être entre guillemets.

rules: [
  ['font-bold', { 'font-weight': 700 }],
]

Règles dynamiques

Pour les rendre plus intelligentes, changez le matcher en RegExp et le corps en fonction :

rules: [
  [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
  [/^p-(\d+)$/, match => ({ padding: `${match[1] / 4}rem` })],
]

Le premier argument de la fonction corps est le résultat de correspondance RegExp qui peut être destructuré pour obtenir les groupes correspondants.

Par exemple, avec l'utilisation suivante :

<div class="m-100">
  <button class="m-3">
    <icon class="p-5" />
    Mon Bouton
  </button>
</div>

le CSS correspondant sera généré :

.m-100 { margin: 25rem; }
.m-3 { margin: 0.75rem; }
.p-5 { padding: 1.25rem; }

Félicitations ! Maintenant vous avez vos propres utilitaires CSS atomiques puissants. Profitez-en !

Fallback des règles CSS

Dans les cas où vous pourriez vouloir utiliser le fallback des règles CSS pour utiliser de nouvelles fonctionnalités CSS tout en pouvant aussi faire un fallback pour supporter les anciens navigateurs, vous pouvez optionnellement retourner un tableau 2D comme représentation CSS pour les règles avec les mêmes clés. Par exemple :

rules: [
  [/^h-(\d+)dvh$/, ([_, d]) => {
    return [
      ['height', `${d}vh`],
      ['height', `${d}dvh`],
    ]
  }],
]

Ce qui fera que h-100dvh génère :

.h-100dvh { height: 100vh; height: 100dvh; }

Ordre

UnoCSS respecte l'ordre des règles que vous avez définies dans le CSS généré. Les dernières ont une priorité plus élevée.

Lors de l'utilisation de règles dynamiques, cela peut correspondre à plusieurs tokens. Par défaut, la sortie de ceux correspondant sous une seule règle dynamique sera triée alphabétiquement dans le groupe.

Fusion des règles

Par défaut, UnoCSS fusionnera les règles CSS avec le même corps pour minimiser la taille du CSS.

Par exemple, <div class="m-2 hover:m2"> générera :

.hover\:m2:hover,
.m-2 {
  margin: 0.5rem;
}

Au lieu de deux règles séparées :

.hover\:m2:hover {
  margin: 0.5rem;
}
.m-2 {
  margin: 0.5rem;
}

Symboles spéciaux

Depuis v0.61, UnoCSS supporte les symboles spéciaux pour définir des informations meta supplémentaires pour votre CSS généré. Vous pouvez accéder aux symboles depuis le deuxième argument de la fonction matcher de règle dynamique.

Par exemple :

rules: [
  [/^grid$/, ([, d], { symbols }) => {
    return {
      [symbols.parent]: '@supports (display: grid)',
      display: 'grid',
    }
  }],
]

Générera :

@supports (display: grid) {
  .grid {
    display: grid;
  }
}

Symboles disponibles

• symbols.parent : L'enveloppe parente de la règle CSS générée (par exemple @supports, @media, etc.)
• symbols.selector : Une fonction pour modifier le sélecteur de la règle CSS générée (voir l'exemple ci-dessous)
• symbols.layer : Une chaîne/fonction/regex match qui définit la couche UnoCSS de la règle CSS générée
• symbols.variants : Un tableau de gestionnaire de variantes qui sont appliqués à l'objet CSS actuel
• symbols.shortcutsNoMerge : Un booléen pour désactiver la fusion de la règle actuelle dans les raccourcis
• symbols.noMerge : Un booléen pour désactiver la fusion de la règle actuelle dans les raccourcis
• symbols.sort : Un nombre pour remplacer l'ordre de tri de l'objet CSS actuel

Règles multi-sélecteurs

Depuis v0.61, UnoCSS supporte les multi-sélecteurs via les fonctions génératrices JavaScript.

Par exemple :

rules: [
  [/^button-(.*)$/, function* ([, color], { symbols }) {
    yield {
      background: color
    }
    yield {
      [symbols.selector]: selector => `${selector}:hover`,
      // https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
      background: `color-mix(in srgb, ${color} 90%, black)`
    }
  }],
]

Générera plusieurs règles CSS :

.button-red {
  background: red;
}
.button-red:hover {
  background: color-mix(in srgb, red 90%, black);
}

Règles entièrement contrôlées

TIP

C'est une fonctionnalité avancée, dans la plupart des situations elle ne sera pas nécessaire.

Quand vous avez vraiment besoin de règles avancées qui ne sont pas couvertes par la combinaison de Règles dynamiques et Variantes, UnoCSS fournit aussi un moyen de vous donner un contrôle total pour générer le CSS.

Il vous permet de retourner une chaîne depuis la fonction corps de la règle dynamique qui sera directement passée au CSS généré (cela signifie aussi que vous devez vous occuper de choses comme l'échappement CSS, l'application des variantes, la construction CSS, et ainsi de suite).

import { defineConfig, toEscapedSelector as e } from 'unocss'

export default defineConfig({
  rules: [
    [/^custom-(.+)$/, ([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
      // rejeter les règles non correspondantes
      if (name.includes('something'))
        return

      // si vous voulez, vous pouvez désactiver les variantes pour cette règle
      if (variantHandlers.length)
        return
      const selector = e(rawSelector)
      // retourner une chaîne au lieu d'un objet
      return `
${selector} {
  font-size: ${theme.fontSize.sm};
}
/* vous pouvez avoir plusieurs règles */
${selector}::after {
  content: 'after';
}
.foo > ${selector} {
  color: red;
}
/* ou des media queries */
@media (min-width: ${theme.breakpoints.sm}) {
  ${selector} {
    font-size: ${theme.fontSize.sm};
  }
}
`
    }],
  ],
})