Vanilla Extract: CSS-in-JS senza runtime
Scriva CSS type-safe con Vanilla Extract, che genera file CSS statici al momento della build.
Vanilla Extract: CSS-in-JS senza runtime è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Che cos'è Vanilla Extract
Vanilla Extract è una libreria CSS-in-JS che non comporta alcun sovraccarico a runtime. Il CSS viene definito in TypeScript e compilato in file CSS statici durante la fase di build, offrendo la sicurezza dei tipi senza l'iniezione degli stili a runtime.
Principio fondamentale
A differenza di styled-components o Emotion, Vanilla Extract viene eseguito interamente durante la fase di build. L'importazione JavaScript è l'API per la definizione degli stili, mentre l'output consiste in normali file CSS. Sul client non viene eseguito alcun JavaScript per applicare gli stili.
Convenzione dei file
I file Vanilla Extract utilizzano l'estensione .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'
}
});Utilizzo nei componenti
Importi il nome della classe esportato e lo applichi:
import { button } from './button.css.ts';
function Button({ children }) {
return <button className={button}>{children}</button>;
}Contratti dei temi
La funzionalità più potente di Vanilla Extract: definire un contratto del tema (la struttura dei token) e creare più temi che lo implementano:
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
Crei più varianti di uno stile senza ripetizioni:
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]}>Ricette con @vanilla-extract/recipes
La funzione recipe del pacchetto recipes combina in modo elegante gli stili di base e le varianti:
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 per le utility class
@vanilla-extract/sprinkles genera utility class a partire da un insieme di token, come una versione di Tailwind con sicurezza dei tipi e senza costi a runtime:
Sicurezza dei tipi
Poiché gli stili sono oggetti TypeScript, l'IDE offre il completamento automatico completo e il controllo dei tipi per i nomi e i valori delle proprietà CSS. Gli errori di battitura nei nomi delle proprietà vengono rilevati durante la fase di build, non a runtime.
Integrazione con gli strumenti di build
Vanilla Extract si integra con Vite, webpack, esbuild e Next.js tramite adapter dedicati. Il CSS estratto viene servito come file statico.
Quando scegliere Vanilla Extract
Scelga Vanilla Extract quando desidera:
- La sicurezza completa dei tipi TypeScript per gli stili
- Nessun sovraccarico a runtime dei CSS-in-JS
- Output CSS statico per ottenere le massime prestazioni
- Un sistema di temi robusto con contratti dei token verificati tramite i tipi
Verifica rapida
Qual è il principale vantaggio in termini di prestazioni di Vanilla Extract rispetto a una soluzione CSS-in-JS a runtime come styled-components?
Riepilogo
Vanilla Extract è una libreria CSS-in-JS basata su TypeScript e senza costi a runtime. Definisca gli stili in file .css.ts usando oggetti JavaScript con sicurezza dei tipi. La fase di build genera file CSS statici. I contratti dei temi offrono il supporto a più temi con verifica dei tipi. styleVariants e recipe gestiscono elegantemente le varianti dei componenti. L'assenza di costi a runtime la rende ideale per le applicazioni in cui le prestazioni sono fondamentali.
Domande Frequenti
La lezione «Vanilla Extract: CSS-in-JS senza runtime» è gratuita?
Sì — il testo completo di «Vanilla Extract: CSS-in-JS senza runtime» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Vanilla Extract: CSS-in-JS senza runtime»?
Scriva CSS type-safe con Vanilla Extract, che genera file CSS statici al momento della build. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Vanilla Extract: CSS-in-JS senza runtime»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Styled-components: tagged template literal
- Emotion: css() e styled()
- CSS Modules: stili con ambito locale
- Vanilla Extract: CSS-in-JS senza runtime