Vanilla Extract: CSS-in-JS sin runtime
Escriba CSS con seguridad de tipos con Vanilla Extract, que genera archivos CSS estáticos durante la compilación.
Vanilla Extract: CSS-in-JS sin runtime es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué es Vanilla Extract?
Vanilla Extract es una biblioteca de CSS-in-JS que genera cero sobrecarga en tiempo de ejecución. El CSS se define en TypeScript y se compila en archivos CSS estáticos durante la compilación, lo que proporciona seguridad de tipos sin inyectar estilos en tiempo de ejecución.
Principio fundamental
A diferencia de styled-components o Emotion, Vanilla Extract funciona completamente durante la compilación. La importación de JavaScript es la API para escribir los estilos; el resultado son archivos CSS normales. No se ejecuta ningún JavaScript en el cliente para aplicar los estilos.
Convención de nombres de archivo
Los archivos de Vanilla Extract utilizan la extensión .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'
}
});Uso en componentes
Importe el nombre de clase exportado y aplíquelo:
import { button } from './button.css.ts';
function Button({ children }) {
return <button className={button}>{children}</button>;
}Contratos de temas
La funcionalidad más potente de Vanilla Extract: defina un contrato de tema (la estructura de sus tokens) y cree varios temas que lo implementen:
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
Cree varias variantes de un estilo sin repetir código:
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]}>Recetas con @vanilla-extract/recipes
La función recipe del paquete de recetas combina estilos base y variantes de forma elegante:
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 para clases de utilidad
@vanilla-extract/sprinkles genera clases de utilidad a partir de un conjunto de tokens, como Tailwind con seguridad de tipos y sin coste en tiempo de ejecución:
Seguridad de tipos
Como los estilos son objetos de TypeScript, obtiene autocompletado completo en el IDE y comprobación de tipos para los nombres y valores de las propiedades CSS. Los errores tipográficos en los nombres de las propiedades se detectan durante la compilación, no en tiempo de ejecución.
Integración con herramientas de compilación
Vanilla Extract se integra con Vite, webpack, esbuild y Next.js mediante adaptadores específicos. El CSS extraído se sirve como un archivo estático.
Cuándo elegir Vanilla Extract
Elija Vanilla Extract cuando necesite:
- Seguridad de tipos completa de TypeScript para sus estilos
- Cero sobrecarga de CSS-in-JS en tiempo de ejecución
- Salida CSS estática para obtener el máximo rendimiento
- Un sistema de temas sólido con contratos de tokens comprobados por tipos
Comprobación rápida
¿Cuál es la principal ventaja de rendimiento de Vanilla Extract frente a CSS-in-JS en tiempo de ejecución, como styled-components?
Resumen
Vanilla Extract es una biblioteca de CSS-in-JS basada en TypeScript y sin coste en tiempo de ejecución. Defina los estilos en archivos .css.ts mediante objetos de JavaScript con seguridad de tipos. La compilación genera archivos CSS estáticos. Los contratos de temas proporcionan compatibilidad con varios temas y comprobación de tipos. styleVariants y recipe gestionan las variantes de los componentes de forma elegante. El coste nulo en tiempo de ejecución la hace ideal para aplicaciones críticas en cuanto al rendimiento.
Preguntas frecuentes
¿La lección «Vanilla Extract: CSS-in-JS sin runtime» es gratis?
Sí — el texto completo de «Vanilla Extract: CSS-in-JS sin runtime» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Vanilla Extract: CSS-in-JS sin runtime»?
Escriba CSS con seguridad de tipos con Vanilla Extract, que genera archivos CSS estáticos durante la compilación. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Vanilla Extract: CSS-in-JS sin runtime»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Styled-components: tagged template literals
- Emotion: css() y styled()
- CSS Modules: estilos con ámbito
- Vanilla Extract: CSS-in-JS sin runtime