Sprinkles (Vanilla Extract)

CSS-in-JS 🔴 Senior

Definition

API de Vanilla Extract qui genere des utilitaires atomiques type-safe (similaire a Tailwind mais avec du TypeScript). Cree un ensemble fini de classes utilitaires au build.

Analogie

Un set d'epices pre-dosees : 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

Creer un systeme d'utilitaires CSS atomiques type-safe et zero-runtime.

#styling#css-in-js