コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > バニラ抽出を備えたタイプスクリプトのCSS

バニラ抽出を備えたタイプスクリプトのCSS

Jennifer Aniston
リリース： 2025-03-19 09:16:16
オリジナル
802 人が閲覧しました

バニラ抽出を備えたタイプスクリプトのCSS

バニラ抽出：新しいフレームワークインタイプライブラリ。スタイルを書くための軽量で堅牢で直感的な方法を提供します。バニラ抽出物は、必須のCSSフレームワークではなく、柔軟な開発者ツールです。近年、CSSツールフィールドは比較的安定しており、PostCSS、SASS、CSSモジュール、スタイルのコンポーネントなどのツールが2017年以前に登場し（さらに早く）、今日でも非常に人気があります。 Tailwindは、近年CSSツールフィールドに変化をもたらした数少ないツールの1つです。

バニラ抽出物は、変化を再びトリガーすることを目的としています。今年リリースされ、以下を含むいくつかの最新トレンドの恩恵を受けました。

  • JavaScript開発者はTypeScriptに頼ります
  • CSSカスタムプロパティのブラウザサポート
  • 実用的な優先スタイル

バニラ抽出物には多くの賢い革新がありますが、それは意味があると思います。

ゼロランタイムオーバーヘッド

CSS-in-JSライブラリは通常、実行時にスタイルをドキュメントに注入します。これには、重要なCSS抽出や動的スタイルなど、いくつかの利点があります。

しかし、通常、個々のCSSファイルはパフォーマンスが向上します。これは、JavaScriptコードがより高価な解析/コンピレーションプロセスを通過する必要があるため、個別のCSSファイルをキャッシュでき、HTTP2プロトコルは追加のリクエストのコストを削減するためです。さらに、カスタムプロパティが多くのダイナミックスタイルで無料で利用できるようになりました。

したがって、バニラ抽出物は、実行時にスタイルを注入するのではなく、リナリアとアストロターフに従います。これらのライブラリを使用すると、ビルド時に抽出され、CSSファイルの構築に使用されるJavaScript関数を使用してスタイリングできます。 TypeScriptを使用してVanilla-Extractを記述しますが、これはProduction JavaScriptパッケージの全体的なサイズには影響しません。

タイプスクリプトサポート

バニラ抽出の大きな価値提案の1つは、タイプチェックを提供することです。コードベースタイプを安全に保つことが非常に重要な場合は、スタイルでも同じことをしてみませんか？

タイプスクリプトは多くの利点を提供します。 1つ目は自動完了です。 TypeScriptをサポートするエディターで「FO」と入力すると、フォントオプション（Fontfamily、Fontkerning、Fontweight、またはその他のマッチ）を備えたドロップダウンリストが表示されます。これにより、CSSプロパティは、エディターの便利さで簡単に発見できます。 Fontvariantの名前を覚えていないが、「Font」から始まることを知っている場合は、入力してオプションをスクロールできます。 VSコードでは、これを達成するために追加のツールをダウンロードする必要はありません。

これにより、スタイルの執筆が大幅に高速化されます。

これはまた、編集者が常にあなたを監視し、イライラするバグにつながる可能性のあるスペルミスをしないようにすることを意味します。

バニラ抽出型は、そのタイプ定義で編集しているCSSプロパティの構文解釈とMDNドキュメントへのリンクも提供します。これにより、スタイルが異常に動作するときに、クレイジーなGoogle検索のステップが節約されます。

TypeScriptを使用して書くということは、Camel命名法を使用して、BackgroundColorなどのCSSプロパティを表すことを意味します。これには、バックグラウンドカラーなどの通常のCSS構文を使用することに慣れている開発者には、いくつかの変更が必要になる場合があります。

統合

Vanilla-Extractは、すべての最新のパッケージツールにファーストパーティ統合を提供します。現在サポートしている統合の完全なリストは次のとおりです。

  • webpack
  • esbuild
  • vite
  • 雪だるま
  • Nextjs
  • ギャツビー

また、フレームワークとは何の関係もありません。ビルド時に文字列に変換されるバニラ抽出物からクラス名をインポートするだけです。

使い方

バニラ抽出物を使用するには、コンポーネントがインポートできる.css.tsファイルを記述できます。これらの関数への呼び出しは、ビルドステップでハッシュおよびスコープクラス名文字列に変換されます。これはCSSモジュールと同様に聞こえる可能性があり、偶然ではありません。バニラ抽出の作成者の1人であるMark Dalgleishは、CSSモジュールの共同作成者でもあります。

style()関数

style()関数を使用して、自動的にスコープされたCSSクラスを作成できます。要素のスタイルを渡してから、返品値をエクスポートします。この値をユーザーコードのどこかにインポートすると、スコープクラス名に変換されます。

 // title.css.ts
「@vanilla-extract/css」から{style}をインポートします。

const titlestele = styleをエクスポートする（{
  BackgroundColor：「HSL（210Deg、30％、90％）」、
  fontfamily： "Helvetica、sans-serif"、
  色：「HSL（210deg、60％、25％）」、
  パディング：30、
  Borderradius：20、
}）;
ログイン後にコピー
 // title.ts
"./title.css"から{titlestele}をインポートします。

document.getElementById（ "root"）。innerhtml = `<h1>バニラエキス</h1>`;
ログイン後にコピー

メディアクエリと擬似選択者も、スタイル宣言に含めることができます。

 // title.css.ts
BackgroundColor：「HSL（210Deg、30％、90％）」、
fontfamily： "Helvetica、sans-serif"、
色：「HSL（210deg、60％、25％）」、
パディング：30、
Borderradius：20、
「@media」：{
  "screen and（max-width：700px）"：{
    パディング：10
  }
}、
"：ホバー"：{
  BackgroundColor：「HSL（210Deg、70％、80％）」
}
ログイン後にコピー

これらのstyle関数呼び出しは、CSSの軽量の抽象化です。すべての属性名と値は、よく知っているCSSプロパティと値にマッピングされます。慣れるための1つの変更は、値を数値として宣言することができること（パディング：30）として、ピクセル単位値にデフォルトであることがありますが、一部の値は文字列として宣言する必要があります（たとえば、パディング： "10px 20px 15px 15px"）。

style関数のプロパティは、単一のHTMLノードにのみ影響します。これは、ネストを使用して要素の子要素のスタイルを宣言することができないことを意味します。これは、SASSまたはPostCSSで慣れている可能性があります。代わりに、子供の要素を個別にスタイリングする必要があります。子要素を親要素のさまざまなスタイルに基づいている必要がある場合、 selectors属性を使用して、親要素に依存するスタイルを追加できます。

 // title.css.ts
const innerspan = style（{{
  セレクター：{[`$ {titlestele}＆`]：{
    色：「HSL（190deg、90％、25％）」、
    fontstyle： "italic"、
    TextDecoration：「下線」
  }}
}）;
ログイン後にコピー
 // title.ts
"./title.css"から{titlestele、innerspan}をインポートします。
document.getElementById（ "root"）。innerhtml = 
`<h1>バニラエキス</h1>
unstyled`;
ログイン後にコピー

または、トピックAPI（次に説明します）を使用して、子ノードで使用される親要素にカスタムプロパティを作成できます。これは厳格に聞こえるかもしれませんが、大規模なコードベースの保守性を改善するために意図的に設計されています。これは、プロジェクト内の各要素のスタイルが宣言される場所を正確に把握できることを意味します。

テーマ

createTheme関数を使用して、型に変数を作成できます。

 // title.css.ts
"@vanilla-extract/css"から{style、createTheeme}をインポート。

//テーマエクスポートconst [maintheme、vars] = createTheme（{
  色：{
    テキスト：「HSL（210deg、60％、25％）」、
    背景：「HSL（210deg、30％、90％）」
  }、
  長さ：{
    MediumGap：「30px」
  }
}）

//トピックエクスポートconst titlestele = styleを使用する（{
  BackgroundColor：vars.color.background、
  色：vars.color.text、
  fontfamily： "Helvetica、sans-serif"、
  パディング：vars.lengths.mediumgap、
  Borderradius：20、
}）;
ログイン後にコピー

バニラ抽出物を使用すると、テーマのバリエーションを作成できます。 TypeScriptは、バリアントが同じ属性名を使用することを保証するのに役立つため、トピックに背景属性を追加するのを忘れた場合、警告が表示されます。

通常のテーマとダークモードを作成する方法は次のとおりです。

 // title.css.ts
"@vanilla-extract/css"から{style、createTheeme}をインポート。

const const [maintheme、vars] = createTheme（{
  色：{
    テキスト：「HSL（210deg、60％、25％）」、
    背景：「HSL（210deg、30％、90％）」
  }、
  長さ：{
    MediumGap：「30px」
  }
}）
//テーマバリアント - この部分は配列構文エクスポートを使用していないことに注意してくださいconst darkMode = createTheem（vars、{
  色：{
    テキスト：「HSL（210Deg、60％、80％）」、
    背景：「HSL（210deg、30％、7％）」、
  }、
  長さ：{
    MediumGap：「30px」
  }
}）
//トピックエクスポートconst titlestele = styleを使用する（{
  BackgroundColor：vars.color.background、
  色：vars.color.text、
  fontfamily： "Helvetica、sans-serif"、
  パディング：vars.lengths.mediumgap、
  Borderradius：20、
}）;
ログイン後にコピー

次に、JavaScriptを使用して、バニラ抽出物によって返されたクラス名を動的に適用してトピックを切り替えることができます。

 // title.ts
"./title.css"から{titlestele、maintheme、darkmode}をimport

document.getElementById（ "root"）。innerhtml = 
`<div>
  <h1>バニラエキス</h1>
  ダークモード
</div>`
ログイン後にコピー

これは一番下でどのように機能しますか？ createTheme関数で宣言するオブジェクトは、要素クラスに接続されたCSSカスタムプロパティに変換されます。これらのカスタムプロパティは、競合を防ぐためにハッシュされています。 mainTheme例の出力CSSは次のようになります。

 .src__ohrzop0 {
  -color-brand__ohrzop1：HSL（210deg、80％、25％）;
  -color-text__ohrzop2：HSL（210deg、60％、25％）;
  -color-background__ohrzop3：HSL（210deg、30％、90％）;
  -lengths-mediumgap__ohrzop4：30px;
}
ログイン後にコピー

そして、 darkModeテーマのCSS出力は次のとおりです。

 .src__ohrzop5 {
  -color-brand__ohrzop1：HSL（210deg、80％、60％）;
  -color-text__ohrzop2：HSL（210deg、60％、80％）;
  -color-background__ohrzop3：HSL（210deg、30％、10％）;
  -lengths-mediumgap__ohrzop4：30px;
}
ログイン後にコピー

したがって、ユーザーコードのクラス名を変更するだけです。 darkmodeクラス名を親要素に適用すると、 mainThemeカスタム属性がdarkModeカスタム属性に置き換えられます。

レシピAPI

styleとcreateTheme関数は、それ自体でウェブサイトをスタイリングするのに十分ですが、バニラ抽出物は再利用性を向上させるための追加のAPIを提供します。レシピAPIを使用すると、タグまたはユーザーコードで選択できる要素の多くのバリエーションを作成できます。

まず、個別にインストールする必要があります。

 npmインストール @vanilla-extract/レシピ
ログイン後にコピー

これがどのように機能するかです。 recipe関数をインポートし、 baseとvariantsプロパティを含むオブジェクトに渡します。

 // button.css.ts
'@vanilla-extract/Recipes'から{Recipe}をインポートします。

const buttonStyles = RECIPE（{{
  ベース：{
    //すべてのボタンに適用されるスタイルはここに配置されています}、
  バリアント：{
    //ここから選択するスタイル}
}）;
ログイン後にコピー

baseでは、すべてのバリエーションに適用されるスタイルを宣言できます。 variantsでは、要素をカスタマイズするさまざまな方法を提供できます。

 // button.css.ts
'@vanilla-extract/Recipes'から{Recipe}をインポートします。
const buttonStyles = RECIPE（{{
  ベース：{
    フォント級：「太字」、
  }、
  バリアント：{
    色： {
      普通： {
        BackgroundColor：「HSL（210Deg、30％、90％）」、
      }、
      calltoaction：{
        BackgroundColor：「HSL（210Deg、80％、65％）」、
      }、
    }、
    サイズ： {
      大きい： {
        パディング：30、
      }、
      中くらい： {
        パディング：15、
      }、
    }、
  }、
}）;
ログイン後にコピー

その後、タグで使用するバリアントを宣言できます。

 // button.ts
"./button.css"から{buttonStyles}をインポートします。

私をクリックしてください
ログイン後にコピー

Vanilla-Extractは、TypeScriptを使用して独自のバリアント名に自動完成を提供します！

あなたはあなたが好きなようにバリアントに名前を付けて、あなたがそれに必要な属性を置くことができます：例：

 // button.css.ts
const buttonStyles = RECIPE（{{
  バリアント：{
    動物： {
      犬： {
        backgroundimage： 'url（ "./ dog.png"）'、
      }、
      猫： {
        backgroundimage： 'url（ "./ cat.png"）'、
      }、
      うさぎ： {
        backgroundimage： 'url（ "./ rabbit.png"）'、
      }、
    }、
  }、
}）;
ログイン後にコピー

これは、再利用可能なコンポーネントを作成し、それらがどのように変化するかを制御できるため、設計システムの構築に非常に役立つことがわかります。これらの変更は、TypeScriptで簡単に見つけることができます。CMD/CTRLスペース（ほとんどのエディター）と入力するだけで、コンポーネントをカスタマイズするさまざまな方法をリストするドロップダウンリストが表示されます。

スプリンクルを備えた実用的な優先事項

スプリンクルは、バニラ抽出に基づいて構築された実用的な優先フレームワークです。 Vanilla-Extractドキュメントは、次のように説明しています。

基本的に、Zero Runtime、Type-Safe Tailwind、Styled Systemなどの独自のバージョンを構築するようなものです。

したがって、物事に名前を付けるのが好きではない場合（私たち全員が悪夢を抱え、外部ラッパーDivを作成してから、外部外部ラッパーでラッピングする必要があることに気付く場合、スプリンクルはバニラ抽出を使用するのが好ましい方法かもしれません。

スプリンクルAPIも個別にインストールする必要があります。

 npmインストール @vanilla-extract/スプリンクル
ログイン後にコピー

これで、実用的な機能を使用するためのビルディングブロックを作成できます。いくつかのオブジェクトを宣言して、色と長さのリストを作成しましょう。 JavaScriptキー名は、私たちが望むものなら何でもかまいません。値は、使用する予定のCSS属性の有効なCSS値である必要があります。

 // sprinkles.css.ts
const colors = {
  Blue100：「HSL（210Deg、70％、15％）」、
  Blue200：「HSL（210Deg、60％、25％）」、
  Blue300：「HSL（210Deg、55％、35％）」、
  Blue400：「HSL（210Deg、50％、45％）」、
  Blue500：「HSL（210Deg、45％、55％）」、
  Blue600：「HSL（210Deg、50％、65％）」、
  Blue700：「HSL（207DEG、55％、75％）」、
  Blue800：「HSL（205DEG、60％、80％）」、
  Blue900：「HSL（203Deg、70％、85％）」、
};

const lengths = {
  小さい：「4px」、
  中程度：「8px」、
  大きい：「16px」、
  Humungous：「64px」
};
ログイン後にコピー

defineProperties関数を使用して、これらの値が適用されるCSSプロパティを宣言できます。

  • properties属性を含むオブジェクトを渡します。
  • propertiesでは、キーがユーザーが設定できるCSSプロパティ（これらは有効なCSSプロパティが必要）であるオブジェクトを宣言し、値は以前に作成したオブジェクト（色と長さのリスト）です。
 // sprinkles.css.ts
「@vanilla-extract/Sprinkles」から{defineProperties}をインポートします。

const colors = {
  Blue100：「HSL（210Deg、70％、15％）」
  //など
}

const lengths = {
  小さい：「4px」、
  //など
}

const Properties = defineProperties（{
  プロパティ：{
    //このオブジェクトのキーは有効なCSS属性である必要があります//値はユーザーの色に提供するオプションです：色、
    BackgroundColor：色、
    パディング：長さ、
  }、
}）;
ログイン後にコピー

次に、最後のステップは、 definePropertiesの返品値をcreateSprinkles関数に渡し、返品値をエクスポートすることです。

 // sprinkles.css.ts
「@vanilla-extract/sprinkles」から{defineProperties、createSprinkles}をインポートします。

const colors = {
  Blue100：「HSL（210Deg、70％、15％）」
  //など
}

const lengths = {
  小さい：「4px」、
  //など 
}

const Properties = defineProperties（{
  プロパティ：{
    色：色、
    //など 
  }、
}）;
const springles = createsprinkles（プロパティ）をエクスポートします。
ログイン後にコピー

その後、 class属性のsprinkles関数を呼び出し、各要素に必要なオプションを選択することにより、コンポーネント内のインラインスタイルを開始できます。

 // index.ts
"./sprinkles.css"から{sprinkles}をインポートします。
document.getElementById（ "root"）。innerhtml = `クリックしてください
`;
ログイン後にコピー

JavaScript出力は、各スタイル属性のクラス名文字列を保存します。これらのクラス名は、出力CSSファイルの単一のルールと一致します。

私をクリックしてください
ログイン後にコピー

ご覧のとおり、このAPIでは、事前定義された制約のセットを使用してタグ内の要素をスタイリングできます。また、各要素のクラス名を思いつくという難しいタスクを回避することもできます。結果は、Tailwindに非常に似ていると感じるものですが、TypeScriptを中心に構築されたすべてのインフラストラクチャの恩恵を受けます。

Sprinkles APIを使用すると、条件と略語を作成して、ユーティリティクラスを使用してレスポンシブスタイルを作成することもできます。

要約します

バニラ抽出物は、CSSツールの分野で大きな進歩のように感じます。静的タイピングが提供するすべての機能を活用する直感的で堅牢なスタイルのソリューションにそれを構築することに多くの考えが投資されました。

さらに読む

  • バニラ - 抽出ドキュメント
  • バニラ抽出に関するマークのスピーチ
  • バニラと抽出の不一致
  • CodeSandBoxコードサンプル

この改訂された出力は、異なる文言と文の構造を使用しながら、元の意味を維持します。

以上がバニラ抽出を備えたタイプスクリプトのCSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

前の記事：next.jsとnetlifyでテニストリビアアプリを構築します 次の記事：私たちの学習パートナー：フロントエンドマスター
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート