Variantes

Les variantes vous permettent d'appliquer des variations à vos règles existantes, comme la variante hover: de Tailwind CSS.

Exemple

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // retire le préfixe `hover:` et le passe aux prochaines variantes et règles
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

• matcher contrôle quand la variante est activée. Si la valeur de retour est une chaîne, elle sera utilisée comme sélecteur pour la correspondance des règles.
• selector permet de personnaliser le sélecteur CSS généré.

Sous le capot

Voyons ce qui se passe lors de la correspondance pour hover:m-2 :

• hover:m-2 est extrait des utilisations utilisateur
• hover:m-2 est envoyé à toutes les variantes pour correspondance
• hover:m-2 est reconnu par notre variante et retourne m-2
• le résultat m-2 sera utilisé pour le prochain tour de correspondance de variantes
• si aucune autre variante n'est reconnue, m-2 sera alors utilisé pour la correspondance des règles
• notre première règle est reconnue et génère .m-2 { margin: 0.5rem; }
• enfin, nous appliquons la transformation de notre variante au CSS généré. Dans ce cas, nous avons préfixé :hover au hook selector

En conséquence, le CSS suivant sera généré :

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

Avec cela, nous pouvons appliquer m-2 uniquement lorsque l'utilisateur survole l'élément.

Aller plus loin

Le système de variantes est très puissant et ne peut pas être entièrement couvert dans ce guide, vous pouvez consulter l'implémentation du preset par défaut pour voir des usages plus avancés.