vanilla extract下载 - vanilla extract物源代码下载

vanilla extract

其他源码

vanilla-extract

下载

？香草提取

零连续节示意图在类似的标题中。

将您的样式写入TypeScript（或JavaScript）中，并使用本地范围的类名称和CSS变量，然后在构建时间生成静态CSS文件。

基本上，它是“ CSS模块intypecript”，但范围内的CSS变量 +更多。

在构建时间产生的所有样式 - 就像萨斯，少，等。

标准CSS上的抽象最小。

？使用任何前端框架，甚至没有一个框架。

？本地范围的类名称 - 就像CSS模块一样。

本地范围的CSS变量， @keyframes和@font-face规则。

？高级主题系统，并支持同时主题。没有全球！

？用于生成基于变量的calc表达式的utils。

？通过CSStype的类型安全样式。

？‍♂️可选的运行时版本用于开发和测试。

？动态运行时主题的可选API。

查看文档网站的设置指南，示例和API文档。

？在Codesandbox中自己尝试一下。

将您的样式写入.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
} ) ;

一旦配置了构建工具，这些.css.ts文件将在构建时间进行评估。这些文件中的代码都不会包含在您的最终捆绑包中。将其视为使用打字稿作为预处理器而不是Sass，更少的等。

然后在您的标记中消耗它们。

 // app.ts

import { themeClass , exampleStyle } from './styles.css.ts' ;

document . write ( `
  <section class=" ${ themeClass } ">
    <h1 class=" ${ exampleStyle } ">Hello world!</h1>
  </section>
` ) ;