vanilla extract
vanilla-extract
Hojas de estilo de runtime cero en tipos.
Escriba sus estilos en TypeScript (o JavaScript) con nombres de clases y variables CSS de alcance local, luego genere archivos CSS estáticos en la hora de compilación.
Básicamente, es "módulos CSS-in-typescript" pero con variables CSS alcanzadas + montones más.
Todos los estilos generados en el tiempo de construcción, al igual que Sass, menos, etc.
Abstracción mínima sobre CSS estándar.
? Funciona con cualquier marco front-end, o incluso sin uno.
? Nombres de clases de alcance local, al igual que los módulos CSS.
Variables CSS de alcance local, @keyframes y @font-face Reglas.
? Sistema temático de alto nivel con soporte para temas simultáneos. ¡No Globals!
? Utiliza para generar expresiones calc basadas en variables.
? Estilos de tipo seguro a través de CSStype.
? ️ Versión opcional de tiempo de ejecución para desarrollo y pruebas.
? API opcional para temas dinámicos de tiempo de ejecución.
Consulte el sitio de documentación para obtener guías de configuración, ejemplos y documentos de API.
? Pruébelo usted mismo en Codesandbox.
Escriba sus estilos en archivos .css.ts .
// styles.css.ts
import { createTheme , style } from '@vanilla-extract/css' ;
export const [ themeClass , vars ] = createTheme ( {
color : {
brand : 'blue'
} ,
font : {
body : 'arial'
}
} ) ;
export const exampleStyle = style ( {
backgroundColor : vars . color . brand ,
fontFamily : vars . font . body ,
color : 'white' ,
padding : 10
} ) ;Una vez que haya configurado sus herramientas de compilación, estos archivos
.css.tsse evaluarán en la hora de compilación. Ninguno del código en estos archivos se incluirá en su paquete final. Piense en ello como el uso de TypeScript como su preprocesador en lugar de Sass, menos, etc.
Luego consumirlos en su marcado.
// app.ts
import { themeClass , exampleStyle } from './styles.css.ts' ;
document . write ( `
<section class=" ${ themeClass } ">
<h1 class=" ${ exampleStyle } ">Hello world!</h1>
</section>
` ) ;¿Quiere trabajar en un nivel superior mientras maximiza la reutilización del estilo? Verificar ? Sprinkles, nuestro marco Atomic CSS oficial oficial, construido sobre el extracto de vainilla.
Mit.
