Bun JS CSS

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 文件中重復父選擇器，您可以在父塊內直接編寫子樣式。

scss

/* 使用嵌套 */
.card {
  background: white;
  border-radius: 4px;

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

  .content {
    padding: 1rem;
  }
}

Bun 的 CSS 打包器自動將此嵌套語法轉換為適用於所有瀏覽器的傳統扁平 CSS：

css

/* 編譯輸出 */
.card {
  background: white;
  border-radius: 4px;
}

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

.card .content {
  padding: 1rem;
}

您還可以在選擇器內嵌套媒體查詢和其他 at-rule，無需重復選擇器模式：

scss

.responsive-element {
  display: block;

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

這編譯為：

css

.responsive-element {
  display: block;
}

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

顏色混合

color-mix() 函數提供了一種簡單的方法，根據指定比例在選定的顏色空間中混合兩種顏色。這個強大的功能讓您無需手動計算結果值即可創建顏色變體。

scss

.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%);
  }
}

當所有顏色值已知（不是 CSS 變量）時，Bun 的 CSS 打包器在構建時評估這些顏色混合，生成適用於所有瀏覽器的靜態顏色值：

css

.button {
  /* 計算為確切的結果顏色 */
  background-color: #b31a1a;
}

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

此功能對於創建具有編程派生的陰影、色調和強調色的顏色系統特別有用，無需預處理器或自定義工具。

相對顏色

CSS 現在允許您使用相對顏色語法修改單個顏色組件。這個強大的功能讓您可以通過調整特定屬性（如亮度、飽和度或單個通道）來創建顏色變體，而無需重新計算整個顏色。

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

當不使用 CSS 變量時，Bun 的 CSS 打包器在構建時計算這些相對顏色修改，並生成靜態顏色值以實現瀏覽器兼容性：

css

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

這種方法對於主題生成、創建可訪問的顏色變體或基於數學關系構建顏色比例（而不是硬編碼每個值）非常有用。

LAB 顏色

現代 CSS 支持感知均勻的顏色空間，如 LAB、LCH、OKLAB 和 OKLCH，它們比傳統 RGB 具有顯著優勢。這些顏色空間可以表示超出標准 RGB 色域的顏色，從而實現更生動和視覺上一致的設計。

css

.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 打包器自動將這些高級顏色格式轉換為向後兼容的替代方案，適用於尚不支持它們的瀏覽器：

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 空間之外。這允許您訪問更寬的色域並創建更生動的設計。

css

.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 回退：

css

.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 值相比，許多設計師發現這種方法對於創建顏色變體更自然。

css

.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，以兼容所有瀏覽器：

css

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

HWB 模型特別容易為設計系統創建系統顏色變體，提供了一種比直接使用 RGB 或 HSL 創建一致色調和暗色更直觀的方法。

顏色表示法

現代 CSS 引入了更直觀和簡潔的顏色表達方式。空格分隔的顏色語法消除了 RGB 和 HSL 值中對逗號的需求，而帶 alpha 通道的十六進制顏色提供了一種指定透明度的緊湊方式。

css

.modern-styling {
  /* 空格分隔的 RGB 表示法（無逗號） */
  color: rgb(50 100 200);

  /* 帶 alpha 的空格分隔 RGB */
  border-color: rgba(100 50 200 / 75%);

  /* 帶 alpha 通道的十六進制（8 位） */
  background-color: #00aaff80;

  /* 帶簡化表示法的 HSL */
  box-shadow: 0 5px 10px hsl(200 50% 30% / 40%);
}

Bun 的 CSS 打包器自動轉換這些現代顏色格式，以確保與舊版瀏覽器的兼容性：

css

.modern-styling {
  /* 為舊版瀏覽器轉換為逗號格式 */
  color: rgb(50, 100, 200);

  /* 適當處理 alpha 通道 */
  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() 函數提供了一種優雅的解決方案，用於實現尊重用戶系統偏好的配色方案，無需復雜的媒體查詢。此函數接受兩個顏色值，並根據當前配色方案上下文自動選擇合適的顏色。

css

: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 變量：

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 邏輯屬性允許您相對於文檔的書寫模式和文本方向定義布局、間距和大小，而不是物理屏幕方向。這對於創建真正國際化的布局至關重要，這些布局可自動適應不同的書寫系統。

css

.multilingual-component {
  /* 適應書寫方向的邊距 */
  margin-inline-start: 1rem;

  /* 無論文本方向如何都有意義的內邊距 */
  padding-block: 1rem 2rem;

  /* 頂部起始角的邊框半徑 */
  border-start-start-radius: 4px;

  /* 尊重書寫模式的尺寸 */
  inline-size: 80%;
  block-size: auto;
}

對於不完全支持邏輯屬性的瀏覽器，Bun 的 CSS 打包器將它們編譯為具有適當方向調整的物理屬性：

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 的方向感知設計。此選擇器根據文檔或顯式方向屬性確定的方向性匹配元素。

css

/* 根據文本方向應用不同樣式 */
.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() 選擇器，帶有適當的語言映射：

css

/* 轉換為使用基於語言的選擇器作為回退 */
.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;
}

此轉換讓您編寫方向感知的 CSS，在所有瀏覽器上可靠工作，即使那些尚不原生支持 :dir() 選擇器的瀏覽器。如果不支持 :lang() 的多個參數，會自動提供進一步的回退。

:lang() 選擇器

:lang() 偽類選擇器允許您根據元素所在的語言定位元素，使其易於應用特定於語言的樣式。現代 CSS 允許 :lang() 選擇器接受多個語言代碼，讓您更有效地分組特定於語言的規則。

css

/* 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() 選擇器以保持相同行為：

css

/* 使用 :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 中的重復。

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 打包器使用供應商前綴替代方案提供回退：

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() 偽類允許您排除匹配特定選擇器的元素。此選擇器的現代版本接受多個參數，讓您使用單個簡潔的選擇器排除多個模式。

css

/* 選擇除 primary 和 secondary 變體之外的所有按鈕 */
button:not(.primary, .secondary) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

/* 將樣式應用於除側邊欄或頁腳內的所有標題 */
h2:not(.sidebar *, footer *) {
  margin-top: 2em;
}

對於不支持 :not() 中多個參數的瀏覽器，Bun 的 CSS 打包器將此語法轉換為更兼容的形式，同時保留相同行為：

css

/* 轉換為使用 :not 與 :is() 以獲得兼容性 */
button:not(:is(.primary, .secondary)) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

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

如果不支持 :is()，Bun 可以生成進一步的回退：

css

/* 甚至更多回退以獲得最大兼容性 */
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()）。

css

.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 打包器在構建時評估這些數學表達式，從而產生優化的輸出：

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- 前綴。此語法更具可讀性，與我們正常思考值和范圍的方式匹配。

css

/* 使用比較運算符的現代語法 */
@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 打包器將這些現代范圍查詢轉換為傳統媒體查詢語法，以兼容所有瀏覽器：

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 打包器確保這些方便的簡寫在所有瀏覽器上工作，必要時將它們轉換為它們的長寫等效版本。

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;
}

/* 雙值 overflow */
.content-box {
  /* 第一個值用於水平，第二個用於垂直 */
  overflow: hidden auto;
}

/* 增強的 text-decoration */
.fancy-link {
  /* 組合多個文本裝飾屬性 */
  text-decoration: underline dotted blue 2px;
}

/* 雙值 display 語法 */
.component {
  /* 外部顯示類型 + 內部顯示類型 */
  display: inline flex;
}

對於不支持這些現代簡寫的瀏覽器，Bun 將它們轉換為它們的組件長寫屬性：

css

.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 */
  display: inline-flex;
}

此轉換確保您的樣式表保持簡潔和可維護，同時提供最廣泛的瀏覽器兼容性。

雙位置漸變

雙位置漸變語法是一個現代 CSS 特性，允許您通過在兩個相鄰位置指定相同的顏色在漸變中創建硬顏色停止。這創建了尖銳的過渡而不是平滑的淡入淡出，這對於創建條紋、色帶和其他多色設計很有用。

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 打包器通過復制顏色停止自動將其轉換為傳統格式：

css

.striped-background {
  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%,
    #4caf50 25%,
    /* 綠色部分的兩個停止 */ #ffc107 25%,
    #ffc107 50%,
    /* 黃色部分的兩個停止 */ #2196f3 50%,
    #2196f3 75%,
    /* 藍色部分的兩個停止 */ #9c27b0 75%,
    #9c27b0 100% /* 紫色部分的兩個停止 */
  );
}

此轉換讓您在源代碼中使用更清晰的雙位置語法，同時確保漸變在所有瀏覽器上正確顯示。

system-ui 字體

system-ui 通用字體系列允許您使用設備的原生 UI 字體，創建與操作系統更集成的界面。這提供了更原生的外觀和感覺，而無需為每個平台指定不同的字體系列。

css

.native-interface {
  /* 使用系統的默認 UI 字體 */
  font-family: system-ui;
}

.fallback-aware {
  /* 具有顯式回退的系統 UI 字體 */
  font-family: system-ui, sans-serif;
}

對於不支持 system-ui 的瀏覽器，Bun 的 CSS 打包器自動將其擴展為全面的跨平台字體系列：

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 模塊是具有 .module.css 擴展名的 CSS 文件，其中所有類名和動畫都限定在文件范圍內。這有助於您避免類名沖突，因為 CSS 聲明默認是全局作用域的。

在內部，Bun 的打包器將本地作用域的類名轉換為唯一標識符。

入門

創建具有 .module.css 擴展名的 CSS 文件：

css

.button {
  color: red;
}

css

.button {
  color: blue;
}

然後您可以將此文件導入到 TSX 文件中，例如：

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 模塊允許您將類選擇器組合在一起。這讓您可以在多個類之間重用樣式規則。

例如：

css

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

.background {
  background-color: blue;
}

等同於編寫：

css

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

.background {
  background-color: blue;
}

使用 composes 時，請記住幾條規則：

css

#button {
  /* 無效！`#button` 不是類選擇器 */
  composes: background;
}

.button,
.button-secondary {
  /* 無效！`.button, .button-secondary` 不是簡單選擇器 */
  composes: background;
}

從單獨的 CSS 模塊文件組合

您還可以從單獨的 CSS 模塊文件組合類：

css

.background {
  background-color: blue;
}

css

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

轉譯 ​

瀏覽器兼容性 ​

語法降級 ​

嵌套 ​

顏色混合 ​

相對顏色 ​

LAB 顏色 ​

顏色函數 ​

HWB 顏色 ​

顏色表示法 ​

light-dark() 顏色函數 ​

邏輯屬性 ​

:dir() 選擇器 ​

:lang() 選擇器 ​

:is() 選擇器 ​

:not() 選擇器 ​

數學函數 ​

媒體查詢范圍 ​

簡寫 ​

雙位置漸變 ​

system-ui 字體 ​

CSS 模塊 ​

入門 ​

組合 ​

從單獨的 CSS 模塊文件組合 ​

轉譯

瀏覽器兼容性

語法降級

嵌套

顏色混合

相對顏色

LAB 顏色

顏色函數

HWB 顏色

顏色表示法

light-dark() 顏色函數

邏輯屬性

:dir() 選擇器

:lang() 選擇器

:is() 選擇器

:not() 選擇器

數學函數

媒體查詢范圍

簡寫

雙位置漸變

system-ui 字體

CSS 模塊

入門

組合

從單獨的 CSS 模塊文件組合