vanilla extract
vanilla-extract
Les styles de styles zéro-runtime dans le type.
Écrivez vos styles dans TypeScript (ou JavaScript) avec des noms de classe et des variables CSS à portée locale, puis générer des fichiers CSS statiques au moment de la construction.
Fondamentalement, ce sont les «modules CSS-en-type» mais avec des variables CSS dans les plans + tas plus.
Tous les styles générés au moment de la construction - tout comme Sass, moins, etc.
Abstraction minimale sur CSS standard.
? Fonctionne avec n'importe quel cadre frontal - ou même sans un.
? Noms de classe portée localement - tout comme les modules CSS.
Variables CSS à portée locale, @keyframes et @font-face Rules.
? Système de thème de haut niveau avec prise en charge des thèmes simultanés. Pas de global!
? UTILS pour générer des expressions calc basées sur des variables.
? Styles de type type via CSSTYPE.
? ️ Version d'exécution facultative pour le développement et les tests.
? API facultative pour le thème du temps d'exécution dynamique.
Consultez le site de documentation pour les guides de configuration, les exemples et les documents API.
? Essayez-le par vous-même dans Codeand Box.
Écrivez vos styles dans des fichiers .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
} ) ;Une fois que vous avez configuré votre outil de construction, ces fichiers
.css.tsseront évalués au moment de la construction. Aucun du code de ces fichiers ne sera inclus dans votre pack final. Considérez-le comme utilisant TypeScript comme votre préprocesseur au lieu de Sass, moins, etc.
Consommez-les ensuite dans votre balisage.
// app.ts
import { themeClass , exampleStyle } from './styles.css.ts' ;
document . write ( `
<section class=" ${ themeClass } ">
<h1 class=" ${ exampleStyle } ">Hello world!</h1>
</section>
` ) ;Vous voulez travailler à un niveau supérieur tout en maximisant la réutilisation du style? Vérifier ? Sprinkles, notre cadre officiel de CSS atomique zéro-runtime, construit au-dessus de Vanilla-Extract.
Mit.
