vanilla extractダウンロード - vanilla extractソースコードのダウンロード

vanilla extract

その他のソースコード

vanilla-extract

ダウンロード

？バニラ抽出物

ゼロルーチムStyleSheets-in-Typescript。

ローカルにスコープされたクラス名とCSS変数を使用して、TypeScript（またはJavaScript）にスタイルを書き込み、ビルド時に静的CSSファイルを生成します。

基本的に、それは「CSSモジュールイン型」ですが、スコープ付きCSS変数 +ヒープがあります。

ビルド時に生成されたすべてのスタイル - SASS、LESSなどと同じように。

標準CSS上の最小限の抽象化。

？フロントエンドのフレームワークでは、または1つもありません。

？ CSSモジュールと同じように、ローカルでスコープされたクラス名。

ローカルでスコープされたCSS変数、 @keyframes 、 @font-faceルール。

？同時テーマをサポートする高レベルのテーマシステム。グローバルはありません！

？可変ベースのcalc式を生成するためのUTIL。

？ 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、Lessなどの代わりに、TypeScriptをプリプロセッサとして使用すると考えてください。

次に、マークアップでそれらを消費します。

 // app.ts

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

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