Sprinkles (Vanilla Extract)

CSS-in-JS 🔴 Senior

Définition

API de Vanilla Extract qui génère des utilitaires atomiques type-safe (similaire a Tailwind mais avec du TypeScript). Créé un ensemble fini de classes utilitaires au build.

Analogie

Un set d'épices pre-dosées : tu combines celles que tu veux, tout est type-safe.

Exemple de code

import { defineProperties, createSprinkles } from
  '@vanilla-extract/sprinkles'

const props = defineProperties({
  properties: {
    padding: { sm: '4px', md: '8px', lg: '16px' },
    display: ['flex', 'grid', 'block'],
  }
})
export const sprinkles = createSprinkles(props)

Cas d'usage

Créer un système d'utilitaires CSS atomiques type-safe et zéro-runtime.

#styling#css-in-js

← → au clavier pour passer d'une fiche à l'autre