Recipe (Vanilla Extract)

CSS-in-JS 🔴 Senior

Définition

API de Vanilla Extract pour créer des composants a variantes (comme les CVA). Définit base, variants, compoundVariants et defaultVariants avec du typage complet.

Analogie

Un formulaire de commande : tu coches les options (taille, couleur) et le système génère la classe.

Exemple de code

import { recipe } from '@vanilla-extract/recipes'

export const button = recipe({
  base: { borderRadius: '4px' },
  variants: {
    color: { primary: { bg: 'blue' }, danger: { bg: 'red' } },
    size: { sm: { padding: '4px' }, lg: { padding: '16px' } },
  },
  defaultVariants: { color: 'primary', size: 'sm' },
})

Cas d'usage

Créer des composants avec des variantes combinables de façon type-safe au build-time.

Termes liés

#styling#css-in-js