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>
` ) ;