CSS Academy · Leçon

Vanilla Extract : CSS-in-JS sans exécution

Écrivez du CSS avec vérification de types avec Vanilla Extract, qui génère des fichiers CSS statiques lors de la compilation.

Vanilla Extract : CSS-in-JS sans exécution est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.

Qu'est-ce que Vanilla Extract ?

Vanilla Extract est une bibliothèque CSS-in-JS qui n'entraîne aucune surcharge à l'exécution. Le CSS est défini en TypeScript et compilé en fichiers CSS statiques lors de la compilation, ce qui vous offre la sécurité des types sans injection de styles à l'exécution.

Principe clé

Contrairement à styled-components ou Emotion, Vanilla Extract s'exécute entièrement lors de la compilation. L'importation JavaScript constitue l'API de création ; la sortie consiste en fichiers CSS ordinaires. Aucun JavaScript ne s'exécute côté client pour appliquer les styles.

Convention de nommage des fichiers

Les fichiers Vanilla Extract utilisent l'extension .css.ts :

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

export const button = style({
  background: 'royalblue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '4px',
  cursor: 'pointer',
  ':hover': {
    background: '#2563eb'
  }
});

Utilisation dans les composants

Importez le nom de classe exporté et appliquez-le :

import { button } from './button.css.ts';

function Button({ children }) {
  return <button className={button}>{children}</button>;
}

Contrats de thème

La fonctionnalité la plus puissante de Vanilla Extract : définissez un contrat de thème (une structure de jetons) et créez plusieurs thèmes qui l'implémentent :

import { createTheme, createThemeContract } from '@vanilla-extract/css';

const contract = createThemeContract({
  color: { primary: null, bg: null }
});

export const lightTheme = createTheme(contract, {
  color: { primary: '#3b82f6', bg: '#ffffff' }
});

export const darkTheme = createTheme(contract, {
  color: { primary: '#60a5fa', bg: '#111827' }
});

styleVariants

Créez plusieurs variantes d'un style sans répétition :

import { styleVariants } from '@vanilla-extract/css';

export const variants = styleVariants({
  primary: { background: 'royalblue' },
  danger:  { background: 'crimson' },
  ghost:   { background: 'transparent', border: '1px solid royalblue' }
});

// <Button className={variants[variant]}>

Recettes avec @vanilla-extract/recipes

La fonction recipe du package recipes combine élégamment les styles de base et les variantes :

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

export const button = recipe({
  base: { padding: '10px 20px', borderRadius: '4px' },
  variants: {
    color: {
      primary: { background: 'royalblue', color: 'white' },
      danger:  { background: 'crimson', color: 'white' }
    },
    size: {
      sm: { fontSize: '0.875rem' },
      lg: { fontSize: '1.25rem' }
    }
  }
});

Sprinkles pour les classes utilitaires

@vanilla-extract/sprinkles génère des classes utilitaires à partir d'un ensemble de jetons, comme un Tailwind avec sécurité de type et sans surcharge à l'exécution :

Sécurité des types

Puisque les styles sont des objets TypeScript, vous bénéficiez de l'autocomplétion complète de l'IDE et de la vérification des types pour les noms et les valeurs des propriétés CSS. Les fautes de frappe dans les noms de propriétés sont détectées lors de la compilation, et non à l'exécution.

Intégration aux outils de compilation

Vanilla Extract s'intègre à Vite, webpack, esbuild et Next.js par l'intermédiaire d'adaptateurs dédiés. Le CSS extrait est servi comme fichier statique.

Quand choisir Vanilla Extract

Choisissez Vanilla Extract si vous souhaitez :

Une vérification complète des types TypeScript pour vos styles
Aucune surcharge à l'exécution liée au CSS-in-JS
Une sortie CSS statique pour des performances maximales
Un système de thèmes robuste avec des contrats de jetons vérifiés par le système de types

Vérification rapide

Quel est le principal avantage en matière de performances de Vanilla Extract par rapport au CSS-in-JS à l'exécution tel que styled-components ?

Récapitulatif

Vanilla Extract est une bibliothèque CSS-in-JS axée sur TypeScript et sans coût à l'exécution. Définissez les styles dans des fichiers .css.ts à l'aide d'objets JavaScript dont les types sont vérifiés. La compilation génère des fichiers CSS statiques. Les contrats de thème fournissent une prise en charge de plusieurs thèmes avec vérification des types. styleVariants et recipe gèrent élégamment les variantes des composants. L'absence de coût à l'exécution en fait une solution idéale pour les applications où les performances sont essentielles.

Questions Fréquemment Posées

La leçon « Vanilla Extract : CSS-in-JS sans exécution » est-elle gratuite ?

Oui — le texte complet de « Vanilla Extract : CSS-in-JS sans exécution » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Vanilla Extract : CSS-in-JS sans exécution » ?

Écrivez du CSS avec vérification de types avec Vanilla Extract, qui génère des fichiers CSS statiques lors de la compilation. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer CSS Academy ?

Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Vanilla Extract : CSS-in-JS sans exécution » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?

Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Styled-components : littéraux de modèle balisés
Emotion : css() et styled()
Modules CSS : styles à portée limitée
Vanilla Extract : CSS-in-JS sans exécution

← Retour à CSS Academy