Vanilla Extract

CSS-in-JS 🔴 Senior

Définition

Framework CSS-in-JS zéro-runtime avec typage TypeScript complet. Les styles sont écrits en .css.ts et extraits en CSS statique au build. Zéro JavaScript en production.

Analogie

Un architecte qui dessine les plans (TypeScript) et le bâtiment 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.

#styling#interview#css-in-js