Bun のバンドラーは、次の機能を備えた CSS の組み込みサポートを提供します：

• モダン/フューチャー機能をすべてのブラウザで動作するようにトランスパイル（ベンダープレフィックスを含む）
• ミニファイ
• CSS モジュール
• Tailwind（ネイティブバンドラープラグイン経由）

トランスパイル

Bun の CSS バンドラーは、トランスパイルとベンダープレフィックス機能（デフォルトで有効）のおかげで、ブラウザの互換性を心配せずにモダン/フューチャー CSS 機能を使用できます。

Bun の CSS パーサーとバンドラーは、LightningCSS の直接の Rust → Zig ポートで、esbuild に触発されたバンドルアプローチを採用しています。トランスパイラーは、モダンな CSS 構文をすべてのブラウザで動作する後方互換性のある等価物に変換します。

NOTE

LightningCSS と esbuild の著者による素晴らしい作業に感謝します。

ブラウザの互換性

デフォルトでは、Bun の CSS バンドラーは次のブラウザをターゲットにしています：

• ES2020
• Edge 88+
• Firefox 78+
• Chrome 87+
• Safari 14+

構文のダウングレード

ネスティング

CSS ネスティング仕様は、セレクターを互いにネストすることで、より簡潔で直感的なスタイルシートを記述できるようにします。CSS ファイル全体で親セレクターを繰り返す代わりに、子スタイルを親ブロック内に直接記述できます。

/* ネスティングあり */
.card {
  background: white;
  border-radius: 4px;

  .title {
    font-size: 1.2rem;
    font-weight: bold;
  }

  .content {
    padding: 1rem;
  }
}

Bun の CSS バンドラーは、このネストされた構文をすべてのブラウザで動作する従来のフラット CSS に自動的に変換します：

/* コンパイル出力 */
.card {
  background: white;
  border-radius: 4px;
}

.card .title {
  font-size: 1.2rem;
  font-weight: bold;
}

.card .content {
  padding: 1rem;
}

メディアクエリやその他のアットルールをセレクター内にネストして、セレクターパターンを繰り返す必要をなくすこともできます：

.responsive-element {
  display: block;

  @media (min-width: 768px) {
    display: flex;
  }
}

これは次のようにコンパイルされます：

.responsive-element {
  display: block;
}

@media (min-width: 768px) {
  .responsive-element {
    display: flex;
  }
}

カラーミックス

color-mix() 関数は、選択したカラースペースで指定された比率で 2 つの色をブレンドする簡単な方法を提供します。この強力な機能により、手動で結果の値を計算せずに、色の変数を作成できます。

.button {
  /* RGB カラースペースで青と赤を 30/70 の比率でミックス */
  background-color: color-mix(in srgb, blue 30%, red);

  /* ホバー状態の軽いバリアントを作成 */
  &:hover {
    background-color: color-mix(in srgb, blue 30%, red, white 20%);
  }
}

Bun の CSS バンドラーは、すべての色値が既知（CSS 変数ではない）の場合、これらのカラーミックスをビルド時に評価し、すべてのブラウザで動作する静的色値を生成します：

.button {
  /* 正確な結果の色に計算 */
  background-color: #b31a1a;
}

.button:hover {
  background-color: #c54747;
}

この機能は、プリプロセッサーやカスタムツールを必要とせずに、プログラム的に導出された色合い、色調、アクセントを持つカラーシステムを作成する場合に特に役立ちます。

相対色

CSS では、相対色構文を使用して色の個々のコンポーネントを変更できるようになりました。この強力な機能により、色全体を再計算せずに、明度、彩度、または個々のチャンネルなどの特定の属性を調整して色の変数を作成できます。

.theme-color {
  /* ベースカラーから始めて、明度を 15% 上げる */
  --accent: lch(from purple calc(l + 15%) c h);

  /* ブランドブルーを取り、彩度を下げたバージョンを作成 */
  --subtle-blue: oklch(from var(--brand-blue) l calc(c * 0.8) h);
}

Bun の CSS バンドラーは、これらの相対色の変更をビルド時に計算します（CSS 変数を使用しない場合）、ブラウザの互換性のために静的色値を生成します：

.theme-color {
  --accent: lch(69.32% 58.34 328.37);
  --subtle-blue: oklch(60.92% 0.112 240.01);
}

このアプローチは、テーマ生成、アクセシブルな色バリアントの作成、または各値をハードコーディングする代わりに数学的関係に基づくカラースケールの構築に非常に役立ちます。

LAB 色

モダンな CSS は、従来の RGB よりも重要な利点を提供する LAB、LCH、OKLAB、OKLCH などの知覚的に均一なカラースペースをサポートしています。これらのカラースペースは、標準の RGB 色域を超える色を表現でき、より鮮やかで視覚的に一貫したデザインを実現します。

.vibrant-element {
  /* sRGB 色域の境界を超える鮮やかな赤 */
  color: lab(55% 78 35);

  /* 知覚的カラースペースを使用した滑らかなグラデーション */
  background: linear-gradient(to right, oklch(65% 0.25 10deg), oklch(65% 0.25 250deg));
}

Bun の CSS バンドラーは、これらの高度な色形式を、まだサポートしていないブラウザのために後方互換性のある代替形式に自動的に変換します：

.vibrant-element {
  /* 最も近い RGB 近似へのフォールバック */
  color: #ff0f52;
  /* より広い色域サポートを持つブラウザ向けの P3 フォールバック */
  color: color(display-p3 1 0.12 0.37);
  /* サポートするブラウザ向けに元の値を保存 */
  color: lab(55% 78 35);

  background: linear-gradient(to right, #cd4e15, #3887ab);
  background: linear-gradient(to right, oklch(65% 0.25 10deg), oklch(65% 0.25 250deg));
}

このレイヤードアプローチにより、すべてのブラウザで最適な色のレンダリングが保証されながら、デザインで最新のカラーテクノロジーを使用できます。

カラー関数

color() 関数は、従来の RGB スペースを超えてデザインのオプションを拡張する、さまざまな事前定義されたカラースペースで色を指定する標準化された方法を提供します。これにより、より広い色域にアクセスし、より鮮やかなデザインを作成できます。

.vivid-element {
  /* より広い色域の色のための Display P3 カラースペースの使用 */
  color: color(display-p3 1 0.1 0.3);

  /* A98 RGB カラースペースの使用 */
  background-color: color(a98-rgb 0.44 0.5 0.37);
}

これらの高度なカラー関数をまだサポートしていないブラウザのために、Bun の CSS バンドラーは適切な RGB フォールバックを提供します：

.vivid-element {
  /* 最大の互換性のための RGB フォールバック */
  color: #fa1a4c;
  /* サポートするブラウザ向けに元の色を保存 */
  color: color(display-p3 1 0.1 0.3);

  background-color: #6a805d;
  background-color: color(a98-rgb 0.44 0.5 0.37);
}

この機能により、モダンなカラースペースをすぐに使用できながら、デザインがすべてのブラウザで機能し、サポートするブラウザでは最適な色を表示し、他のブラウザでは妥当な近似を表示できます。

HWB 色

HWB（色相、白み、黒み）カラーモデルは、純粋な色相にどのくらいの白または黒が混合されているかに基づいて色を表現する直感的な方法を提供します。多くのデザイナーは、RGB や HSL 値を操作するよりも、色の変数を作成するためにこのアプローチの方が自然だと感じています。

.easy-theming {
  /* 白も黒も追加されていない純粋なシアン */
  --primary: hwb(180 0% 0%);

  /* 同じ色相、20% の白を追加（チント） */
  --primary-light: hwb(180 20% 0%);

  /* 同じ色相、30% の黒を追加（シェード） */
  --primary-dark: hwb(180 0% 30%);

  /* 白と黒の両方を追加したくすんだバージョン */
  --primary-muted: hwb(180 30% 20%);
}

Bun の CSS バンドラーは、すべてのブラウザとの互換性のために HWB 色を RGB に自動的に変換します：

.easy-theming {
  --primary: #00ffff;
  --primary-light: #33ffff;
  --primary-dark: #00b3b3;
  --primary-muted: #339999;
}

HWB モデルは、デザインシステムのために体系的な色の変数を作成するのに特に役立ち、RGB や HSL 値を直接操作するよりも、一貫したチントとシェードを作成するためのより直感的なアプローチを提供します。

カラー表記

モダンな CSS は、色を表現するためのより直感的で簡潔な方法を導入しました。スペース区切りの色構文は、RGB および HSL 値のカンマを不要にし、アルファチャンネル付きの 16 進数は、透明度を指定するコンパクトな方法を提供します。

.modern-styling {
  /* スペース区切りの RGB 表記（カンマなし） */
  color: rgb(50 100 200);

  /* アルファ付きのスペース区切りの RGB */
  border-color: rgba(100 50 200 / 75%);

  /* アルファチャンネル付き 16 進数（8 桁） */
  background-color: #00aaff80;

  /* 簡素な表記の HSL */
  box-shadow: 0 5px 10px hsl(200 50% 30% / 40%);
}

Bun の CSS バンドラーは、これらのモダンな色形式を自動的に変換して、古いブラウザとの互換性を確保します：

.modern-styling {
  /* 古いブラウザのためにカンマ形式に変換 */
  color: rgb(50, 100, 200);

  /* アルファチャンネルを適切に処理 */
  border-color: rgba(100, 50, 200, 0.75);

  /* 必要に応じて Hex+alpha を rgba に変換 */
  background-color: rgba(0, 170, 255, 0.5);

  box-shadow: 0 5px 10px rgba(38, 115, 153, 0.4);
}

この変換プロセスにより、よりクリーンでモダンな CSS を記述しながら、スタイルがすべてのブラウザで正しく機能することを保証できます。

light-dark() カラー関数

light-dark() 関数は、複雑なメディアクエリを必要とせずに、ユーザーのシステム設定に従うカラースキームを実装するためのエレガントなソリューションを提供します。この関数は 2 つの色値を受け入れ、現在のカラースキームコンテキストに基づいて適切な方を自動的に選択します。

:root {
  /* カラースキームサポートを定義 */
  color-scheme: light dark;
}

.themed-component {
  /* システム設定に基づいて適切な色を自動的に選択 */
  background-color: light-dark(#ffffff, #121212);
  color: light-dark(#333333, #eeeeee);
  border-color: light-dark(#dddddd, #555555);
}

/* 必要に応じてシステム設定をオーバーライド */
.light-theme {
  color-scheme: light;
}

.dark-theme {
  color-scheme: dark;
}

この機能をまだサポートしていないブラウザのために、Bun の CSS バンドラーは適切なフォールバックを使用して CSS 変数を使用するように変換します：

:root {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
  }
}

.light-theme {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
}

.dark-theme {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
}

.themed-component {
  background-color: var(--lightningcss-light, #ffffff) var(--lightningcss-dark, #121212);
  color: var(--lightningcss-light, #333333) var(--lightningcss-dark, #eeeeee);
  border-color: var(--lightningcss-light, #dddddd) var(--lightningcss-dark, #555555);
}

このアプローチにより、スタイルを複製したり複雑なメディアクエリを記述したりせずに、明暗のテーマを処理するクリーンな方法が得られ、まだネイティブでサポートしていないブラウザとの互換性を維持できます。

論理的プロパティ

CSS 論理的プロパティを使用すると、ドキュメントの書き込みモードとテキストの方向ではなく、物理的な画面の方向に対して、レイアウト、スペーシング、サイジングを定義できます。これは、異なる書き込みシステムに自動的に適応する真に国際的なレイアウトを作成するために不可欠です。

.multilingual-component {
  /* 書き方向に適応するマージン */
  margin-inline-start: 1rem;

  /* テキストの方向に関係なく意味をなすパディング */
  padding-block: 1rem 2rem;

  /* 上部の開始隅のボーダー半径 */
  border-start-start-radius: 4px;

  /* 書き込みモードを尊重するサイズ */
  inline-size: 80%;
  block-size: auto;
}

論理的プロパティを完全にサポートしていないブラウザのために、Bun の CSS バンドラーは適切な方向調整で物理的プロパティにコンパイルします：

/* 左から右への言語用 */
.multilingual-component:dir(ltr) {
  margin-left: 1rem;
  padding-top: 1rem;
  padding-bottom: 2rem;
  border-top-left-radius: 4px;
  width: 80%;
  height: auto;
}

/* 右から左への言語用 */
.multilingual-component:dir(rtl) {
  margin-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 2rem;
  border-top-right-radius: 4px;
  width: 80%;
  height: auto;
}

:dir() セレクターがサポートされていない場合、追加のフォールバックが自動的に生成され、レイアウトがすべてのブラウザと書き込みシステムで正しく機能することが保証されます。これにより、古いブラウザとの互換性を維持しながら、国際化されたデザインをはるかに簡単に作成できます。

:dir() セレクター

:dir() 疑似クラスセレクターを使用すると、テキストの方向（RTL または LTR）に基づいて要素にスタイルを適用でき、JavaScript なしで方向対応のデザインを作成する強力な方法を提供します。このセレクターは、ドキュメントまたは明示的な方向属性によって決定される方向性に基づいて要素に一致します。

/* テキストの方向に基づいて異なるスタイルを適用 */
.nav-arrow:dir(ltr) {
  transform: rotate(0deg);
}

.nav-arrow:dir(rtl) {
  transform: rotate(180deg);
}

/* テキストフローに基づいて要素を配置 */
.sidebar:dir(ltr) {
  border-right: 1px solid #ddd;
}

.sidebar:dir(rtl) {
  border-left: 1px solid #ddd;
}

:dir() セレクターをまだサポートしていないブラウザのために、Bun の CSS バンドラーは適切な言語マッピングでより広くサポートされている :lang() セレクターに変換します：

/* フォールバックとして言語ベースのセレクターを使用するように変換 */
.nav-arrow:lang(en, fr, de, es, it, pt, nl) {
  transform: rotate(0deg);
}

.nav-arrow:lang(ar, he, fa, ur) {
  transform: rotate(180deg);
}

.sidebar:lang(en, fr, de, es, it, pt, nl) {
  border-right: 1px solid #ddd;
}

.sidebar:lang(ar, he, fa, ur) {
  border-left: 1px solid #ddd;
}

この変換により、:dir() セレクターをネイティブでサポートしていないブラウザでも、方向対応の CSS を確実に記述できます。:lang() に複数の引数がサポートされていない場合、さらにフォールバックが自動的に提供されます。

:lang() セレクター

:lang() 疑似クラスセレクターを使用すると、要素が属する言語に基づいて要素をターゲットにでき、言語固有のスタイルを簡単に適用できます。モダンな CSS では、:lang() セレクターが複数の言語コードを受け入れ、言語固有のルールをより効率的にグループ化できます。

/* CJK 言語用のタイポグラフィ調整 */
:lang(zh, ja, ko) {
  line-height: 1.8;
  font-size: 1.05em;
}

/* 言語グループによる異なる引用スタイル */
blockquote:lang(fr, it, es, pt) {
  font-style: italic;
}

blockquote:lang(de, nl, da, sv) {
  font-weight: 500;
}

:lang() セレクターで複数の引数をサポートしていないブラウザのために、Bun の CSS バンドラーはこの構文を :is() セレクターを使用して変換し、同じ動作を維持します：

/* より良いブラウザサポートのために：is() でグループ化された複数の言語 */
:is(:lang(zh), :lang(ja), :lang(ko)) {
  line-height: 1.8;
  font-size: 1.05em;
}

blockquote:is(:lang(fr), :lang(it), :lang(es), :lang(pt)) {
  font-style: italic;
}

blockquote:is(:lang(de), :lang(nl), :lang(da), :lang(sv)) {
  font-weight: 500;
}

必要に応じて、Bun は :is() の追加のフォールバックも提供でき、言語固有のスタイルがすべてのブラウザで機能することが保証されます。このアプローチにより、異なる言語グループに固有のタイポグラフィとスタイリングルールを持つ国際化されたデザインを簡単に作成できます。

:is() セレクター

:is() 疑似クラス関数（旧 :matches()）は、複数のセレクターを一緒にグループ化することで、より簡潔で読みやすいセレクターを作成できるようにします。引数としてセレクターリストを受け取り、そのリスト内のいずれかのセレクターに一致する場合に一致し、CSS の重複を大幅に削減します。

/* これらを個別に記述する代わりに */
/* 
.article h1,
.article h2,
.article h3 {
  margin-top: 1.5em;
}
*/

/* このように記述できます */
.article :is(h1, h2, h3) {
  margin-top: 1.5em;
}

/* 複数のグループを持つ複雑な例 */
:is(header, main, footer) :is(h1, h2, .title) {
  font-family: "Heading Font", sans-serif;
}

:is() をサポートしていないブラウザのために、Bun の CSS バンドラーはベンダープレフィックス付きの代替形式を使用してフォールバックを提供します：

/* -webkit-any を使用したフォールバック */
.article :-webkit-any(h1, h2, h3) {
  margin-top: 1.5em;
}

/* -moz-any を使用したフォールバック */
.article :-moz-any(h1, h2, h3) {
  margin-top: 1.5em;
}

/* モダンなブラウザ向けに元のを保存 */
.article :is(h1, h2, h3) {
  margin-top: 1.5em;
}

/* フォールバック付きの複雑な例 */
:-webkit-any(header, main, footer) :-webkit-any(h1, h2, .title) {
  font-family: "Heading Font", sans-serif;
}

:-moz-any(header, main, footer) :-moz-any(h1, h2, .title) {
  font-family: "Heading Font", sans-serif;
}

:is(header, main, footer) :is(h1, h2, .title) {
  font-family: "Heading Font", sans-serif;
}

:not() セレクター

:not() 疑似クラスは、特定のセレクターに一致する要素を除外できます。このセレクターのモダンなバージョンは複数の引数を受け入れ、単一の簡潔なセレクターで複数のパターンを除外できます。

/* primary と secondary バリアントを除くすべてのボタンを選択 */
button:not(.primary, .secondary) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

/* サイドバーまたはフッター内を除くすべての見出しにスタイルを適用 */
h2:not(.sidebar *, footer *) {
  margin-top: 2em;
}

:not() で複数の引数をサポートしていないブラウザのために、Bun の CSS バンドラーはこの構文をより互換性のある形式に変換し、同じ動作を維持します：

/* 互換性のために：is() を使用した：not に変換 */
button:not(:is(.primary, .secondary)) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

h2:not(:is(.sidebar *, footer *)) {
  margin-top: 2em;
}

:is() がサポートされていない場合、Bun はさらにフォールバックを生成できます：

/* 最大の互換性のためのさらに多くのフォールバック */
button:not(:-webkit-any(.primary, .secondary)) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

button:not(:-moz-any(.primary, .secondary)) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

button:not(:is(.primary, .secondary)) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

この変換により、元のセレクターの特定の重要性と動作を維持しながら、負のセレクターがすべてのブラウザで正しく機能することが保証されます。

数学関数

CSS には、スタイルシート内で直接複雑な計算を実行できる豊富な数学関数が含まれています。これには、標準の数学関数（round()、mod()、rem()、abs()、sign()）、三角関数（sin()、cos()、tan()、asin()、acos()、atan()、atan2()）、指数関数（pow()、sqrt()、exp()、log()、hypot()）が含まれます。

.dynamic-sizing {
  /* 値を最小値と最大値の間に制限 */
  width: clamp(200px, 50%, 800px);

  /* 最も近い倍数に丸める */
  padding: round(14.8px, 5px);

  /* アニメーションまたはレイアウトの三角法 */
  transform: rotate(calc(sin(45deg) * 50deg));

  /* 複数の関数を持つ複雑な数学 */
  --scale-factor: pow(1.25, 3);
  font-size: calc(16px * var(--scale-factor));
}

Bun の CSS バンドラーは、すべての値が既知の定数（変数ではない）の場合、これらの数学式をビルド時に評価し、最適化された出力を生成します：

.dynamic-sizing {
  width: clamp(200px, 50%, 800px);
  padding: 15px;
  transform: rotate(35.36deg);
  --scale-factor: 1.953125;
  font-size: calc(16px * var(--scale-factor));
}

このアプローチにより、意味のある数学的関係を持つより表現豊かで保守しやすい CSS を記述でき、最大のブラウザ互換性とパフォーマンスのために最適化された値にコンパイルされます。

メディアクエリ範囲

モダンな CSS は、メディアクエリの直感的な範囲構文をサポートしており、<、>、<=、>= などの比較演算子を使用して、より冗長な min- および max- プレフィックスの代わりにブレークポイントを指定できます。この構文はより読みやすく、値と範囲について通常考える方法に一致します。

/* 比較演算子を使用したモダンな構文 */
@media (width >= 768px) {
  .container {
    max-width: 720px;
  }
}

/* <= と >= を使用した包括的範囲 */
@media (768px <= width <= 1199px) {
  .sidebar {
    display: flex;
  }
}

/* < と > を使用した排他的範囲 */
@media (width > 320px) and (width < 768px) {
  .mobile-only {
    display: block;
  }
}

Bun の CSS バンドラーは、これらのモダンな範囲クエリを従来のメディアクエリ構文に変換し、すべてのブラウザとの互換性を確保します：

/* 従来の min/max 構文に変換 */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .sidebar {
    display: flex;
  }
}

@media (min-width: 321px) and (max-width: 767px) {
  .mobile-only {
    display: block;
  }
}

これにより、より直感的で数学的なメディアクエリを記述でき、モダンな範囲構文をサポートしていないブラウザを含むすべてのブラウザでスタイルシートが正しく機能することが保証されます。

短縮形

CSS は、コードの可読性と保守性を向上させるいくつかのモダンな短縮形プロパティを導入しました。Bun の CSS バンドラーは、必要に応じてそれらを長形に変換することで、これらの便利な短縮形がすべてのブラウザで機能することを保証します。

/* 配置の短縮形 */
.flex-container {
  /* align-items と justify-items の短縮形 */
  place-items: center start;

  /* align-content と justify-content の短縮形 */
  place-content: space-between center;
}

.grid-item {
  /* align-self と justify-self の短縮形 */
  place-self: end center;
}

/* 2 値の overflow */
.content-box {
  /* 最初の値は水平方向、2 番目は垂直方向 */
  overflow: hidden auto;
}

/* 拡張された text-decoration */
.fancy-link {
  /* 複数のテキスト装飾プロパティを組み合わせる */
  text-decoration: underline dotted blue 2px;
}

/* 2 値の display 構文 */
.component {
  /* 外部表示タイプ + 内部表示タイプ */
  display: inline flex;
}

これらのモダンな短縮形をサポートしていないブラウザのために、Bun はそれらをコンポーネントの長形プロパティに変換します：

.flex-container {
  /* 展開された配置プロパティ */
  align-items: center;
  justify-items: start;

  align-content: space-between;
  justify-content: center;
}

.grid-item {
  align-self: end;
  justify-self: center;
}

.content-box {
  /* 個別の overflow プロパティ */
  overflow-x: hidden;
  overflow-y: auto;
}

.fancy-link {
  /* 個別のテキスト装飾プロパティ */
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: blue;
  text-decoration-thickness: 2px;
}

.component {
  /* 単一値の表示 */
  display: inline-flex;
}

この変換により、スタイルシートをクリーンで保守しやすいままにしながら、可能な限り広いブラウザの互換性を提供できます。

二重位置グラデーション

二重位置グラデーション構文は、同じ色を 2 つの隣接する位置に指定することで、グラデーションでハードなカラー停止を作成できるモダンな CSS 機能です。これにより、滑らかなフェードではなくシャープな遷移が作成され、ストライプ、カラーバンド、およびその他のマルチカラーデザインを作成するのに役立ちます。

.striped-background {
  /* 30%-40% で緑から赤へのシャープな遷移を作成 */
  background: linear-gradient(
    to right,
    yellow 0%,
    green 20%,
    green 30%,
    red 30%,
    /* 二重位置がハードストップを作成 */ red 70%,
    blue 70%,
    blue 100%
  );
}

.progress-bar {
  /* 個別のカラーセクションを作成 */
  background: linear-gradient(
    to right,
    #4caf50 0% 25%,
    /* 0% から 25% までの緑 */ #ffc107 25% 50%,
    /* 25% から 50% までの黄色 */ #2196f3 50% 75%,
    /* 50% から 75% までの青 */ #9c27b0 75% 100% /* 75% から 100% までの紫 */
  );
}

この構文をサポートしていないブラウザのために、Bun の CSS バンドラーはカラー停止を複製することで従来の形式に自動的に変換します：

.striped-background {
  background: linear-gradient(
    to right,
    yellow 0%,
    green 20%,
    green 30%,
    red 30%,
    /* 2 つのカラー停止に分割 */ red 70%,
    blue 70%,
    blue 100%
  );
}

.progress-bar {
  background: linear-gradient(
    to right,
    #4caf50 0%,
    #4caf50 25%,
    /* 緑のセクションの 2 つの停止 */ #ffc107 25%,
    #ffc107 50%,
    /* 黄色のセクションの 2 つの停止 */ #2196f3 50%,
    #2196f3 75%,
    /* 青のセクションの 2 つの停止 */ #9c27b0 75%,
    #9c27b0 100% /* 紫のセクションの 2 つの停止 */
  );
}

この変換により、ソースコードでよりクリーンな二重位置構文を使用でき、グラデーションがすべてのブラウザで正しく表示されることが保証されます。

system-ui フォント

system-ui 総称フォントファミリーを使用すると、デバイスのネイティブ UI フォントを使用でき、オペレーティングシステムに統合されたインターフェースを作成できます。これにより、各プラットフォームごとに異なるフォントスタックを指定せずに、よりネイティブな外観と操作性が得られます。

.native-interface {
  /* システムのデフォルト UI フォントを使用 */
  font-family: system-ui;
}

.fallback-aware {
  /* 明示的なフォールバック付きのシステム UI フォント */
  font-family: system-ui, sans-serif;
}

system-ui をサポートしていないブラウザのために、Bun の CSS バンドラーは包括的なクロスプラットフォームフォントスタックに自動的に展開します：

.native-interface {
  /* 主要なすべてのプラットフォームをサポートするように展開 */
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Noto Sans",
    Ubuntu,
    Cantarell,
    "Helvetica Neue";
}

.fallback-aware {
  /* 展開されたスタックの後に元のフォールバックを保存 */
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Noto Sans",
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    sans-serif;
}

このアプローチにより、ソースコードで system-ui だけを記述する簡潔さが得られながら、インターフェースがすべてのオペレーティングシステムとブラウザに正しく適応することが保証されます。展開されたフォントスタックには、macOS/iOS、Windows、Android、Linux の適切なシステムフォントと、古いブラウザ用のフォールバックが含まれています。

CSS モジュール

Bun のバンドラーは、次の機能をサポートして、通常の CSS に加えて CSS モジュールのバンドルもサポートしています：

• 設定なしで CSS モジュールファイル（.module.css）を自動的に検出
• 合成（composes プロパティ）
• CSS モジュールを JSX/TSX にインポート
• CSS モジュールの無効な使用法の警告/エラー

CSS モジュールは、すべてのクラス名とアニメーションがファイルにスコープされる CSS ファイル（.module.css 拡張子）です。CSS 宣言はデフォルトでグローバルスコープであるため、クラス名の衝突を回避するのに役立ちます。

内部では、Bun のバンドラーはローカルにスコープされたクラス名を一意の識別子に変換します。

始め方

.module.css 拡張子を持つ CSS ファイルを作成します：

.button {
  color: red;
}

.button {
  color: blue;
}

次に、このファイルを TSX ファイルなどにインポートできます：

import styles from "./styles.module.css";
import otherStyles from "./other-styles.module.css";

export default function App() {
  return (
    <>
      <button className={styles.button}>赤いボタン!</button>
      <button className={otherStyles.button}>青いボタン!</button>
    </>
  );
}

CSS モジュールファイルをインポートした styles オブジェクトは、すべてのクラス名をキー、それらの一意の識別子を値とするオブジェクトになります：

import styles from "./styles.module.css";
import otherStyles from "./other-styles.module.css";

console.log(styles);
console.log(otherStyles);

これは次のように出力されます：

{
  button: "button_123";
}

{
  button: "button_456";
}

ご覧のとおり、クラス名はファイルごとに一意であり、衝突を回避します！

合成

CSS モジュールを使用すると、クラスセレクターを一緒に合成できます。これにより、複数のクラスでスタイルルールを再利用できます。

例えば：

.button {
  composes: background;
  color: red;
}

.background {
  background-color: blue;
}

これは次と同じです：

.button {
  background-color: blue;
  color: red;
}

.background {
  background-color: blue;
}

composes を使用する際に覚えておくべきいくつかのルールがあります：

#button {
  /* 無効！`#button` はクラスセレクターではありません */
  composes: background;
}

.button,
.button-secondary {
  /* 無効！`.button, .button-secondary` は単純なセレクターではありません */
  composes: background;
}

別の CSS モジュールファイルからの合成

別の CSS モジュールファイルから合成することもできます：

.background {
  background-color: blue;
}

.button {
  composes: background from "./background.module.css";
  color: red;
}