Vanilla Extract

Definition

Framework CSS-in-JS zero-runtime avec typage TypeScript complet. Les styles sont ecrits en .css.ts et extraits en CSS statique au build. Zero JavaScript en production.

Analogie

Un architecte qui dessine les plans (TypeScript) et le batiment est construit a l'avance (build-time).

Exemple de code

// button.css.ts
import { style } from '@vanilla-extract/css'

export const button = style({
  padding: '0.5rem 1rem',
  background: 'blue',
  ':hover': { background: 'darkblue' },
})
// Usage: <button className={button}>

Cas d'usage

Projets ou la performance est critique et le typage TypeScript des styles est souhaite.

Termes lies