CSS

Bun 的打包工具内置支持 CSS，具有以下功能：

转译现代/未来特性以兼容所有浏览器（包括厂商前缀）
压缩
CSS 模块
Tailwind（通过原生打包插件）

转译

Bun 的 CSS 打包工具让你可以使用现代/未来的 CSS 特性，而不必担心浏览器兼容性 —— 这都要归功于其默认启用的转译和厂商前缀功能。 Bun 的 CSS 解析器和打包工具是 LightningCSS 从 Rust 到 Zig 的直接移植，打包方法则受 esbuild 启发。转译器将现代 CSS 语法转换为适用于各种浏览器的向后兼容等价物。

特别感谢 LightningCSS 和 esbuild 的作者们的出色工作。

浏览器兼容性

默认情况下，Bun 的 CSS 打包目标浏览器包括：

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

语法降级

嵌套

CSS 嵌套规范允许你通过将选择器嵌套在彼此内部来编写更简洁、更直观的样式表。你无需在整个 CSS 文件中重复父选择器，可以直接在父块内书写子样式。

styles.css

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

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

  .content {
    padding: 1rem;
  }
}

Bun 的 CSS 打包工具会自动将此嵌套语法转换成传统的扁平 CSS，以兼容所有浏览器：

styles.css

/* 编译输出 */
.card {
  background: white;
  border-radius: 4px;
}

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

.card .content {
  padding: 1rem;
}

你也可以在选择器内嵌套媒体查询和其他 at 规则，避免重复选择器模式：

styles.css

.responsive-element {
  display: block;

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

编译后为：

styles.css

.responsive-element {
  display: block;
}

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

颜色混合

The color-mix() function blends two colors together according to a specified ratio in a chosen color space. Use it to create color variations without manually calculating the resulting values.

styles.css

.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 变量），生成适用于所有浏览器的静态颜色值：

styles.css

.button {
  /* 精确计算得到的结果色 */
  background-color: #b31a1a;
}

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

此功能特别适合创建程序推导的颜色系统，如色调、色深和强调色，无需预处理器或自定义工具。

相对颜色

CSS allows you to modify individual components of a color using relative color syntax. Create color variations by adjusting specific attributes like lightness, saturation, or individual channels without having to recalculate the entire color.

styles.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 变量时），生成适用于浏览器的静态颜色值：

styles.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 色域的颜色，带来更鲜明和视觉一致的设计。

styles.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 打包工具会自动将这些高级色彩格式转换为向后兼容的备选方案，以支持尚未实现的浏览器：

styles.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 函数

color() 函数提供了一种标准化方式，使用各种预定义色彩空间来指定颜色，拓展了传统 RGB 空间以外的设计选项。这样可访问更宽广的色域，创造更鲜艳的设计。

styles.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 备选：

styles.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 颜色

The HWB (Hue, Whiteness, Blackness) color model expresses colors based on how much white or black is mixed with a pure hue. Many designers find this approach more natural for creating color variations compared to manipulating RGB or HSL values.

styles.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：

styles.css

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

The HWB model is well-suited for creating systematic color variations for design systems, providing a more direct approach to creating consistent tints and shades than working with RGB or HSL values.

颜色表示法

Modern CSS has introduced more concise ways to express colors. Space-separated color syntax eliminates the need for commas in RGB and HSL values, while hex colors with alpha channels provide a compact way to specify transparency.

styles.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 打包工具自动将这些现代颜色格式转为兼容旧版浏览器的格式：

styles.css

.modern-styling {
  /* 转为旧版需要的逗号格式 */
  color: rgb(50, 100, 200);

  /* 透明度通道妥善处理 */
  border-color: rgba(100, 50, 200, 0.75);

  /* 十六进制带 alpha 转为 rgba */
  background-color: rgba(0, 170, 255, 0.5);

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

这一转换过程让你编写更简洁现代的 CSS，同时确保样式在所有浏览器中正常工作。

light-dark() 颜色函数

The light-dark() function implements color schemes that respect the user’s system preference without requiring media queries. This function accepts two color values and automatically selects the appropriate one based on the current color scheme context.

styles.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 变量及适当回退的写法：

styles.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 逻辑属性允许你根据文档的书写模式和文本方向定义布局、间距及尺寸，而非物理屏幕方向。对于创建自动适配不同书写系统的国际化布局至关重要。

styles.css

.multilingual-component {
  /* 适应书写方向的外边距 */
  margin-inline-start: 1rem;

  /* 无论文本方向，都合理的内边距 */
  padding-block: 1rem 2rem;

  /* 顶部起始角的边框半径 */
  border-start-start-radius: 4px;

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

对于不完全支持逻辑属性的浏览器，Bun 的 CSS 打包工具会将其编译为带适当方向调整的物理属性：

styles.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() 选择器

The :dir() pseudo-class selector allows you to style elements based on their text direction (RTL or LTR), letting you create direction-aware designs without JavaScript. This selector matches elements based on their directionality as determined by the document or explicit direction attributes.

styles.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() 选择器并添加适当语言映射：

styles.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() 选择器

The :lang() pseudo-class selector targets elements based on the language they’re in, enabling language-specific styling. Modern CSS supports passing multiple language codes to :lang(), letting you group language-specific rules more efficiently.

styles.css

/* 针对中日韩语言的排版调整 */
: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() 选择器以保持相同行为：

styles.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 书写重复。

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

厂商前缀版本相比标准化的 :is() 选择器存在一定限制，尤其在复杂选择器中。Bun 会智能处理这些限制，仅在能正确工作的情况下使用前缀版本。

:not() 选择器

:not() 伪类允许你排除匹配指定选择器的元素。现代版本支持多个参数，允许你用更简洁的选择器排除多种模式。

styles.css

/* 选择所有按钮，排除主按钮和次按钮 */
button:not(.primary, .secondary) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

/* 应用样式于所有标题，排除侧边栏或页脚内的 */
h2:not(.sidebar *, footer *) {
  margin-top: 2em;
}

对于不支持多参数 :not() 的浏览器，Bun 的 CSS 打包工具将该语法转换成兼容版本，并保留相同行为：

styles.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 会生成进一步回退：

styles.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())。

styles.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 打包工具会在构建时对所有已知常量（非变量）求值，生成优化的输出：

styles.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，然后编译为优化的值，实现最高浏览器兼容性和性能。

媒体查询范围

Modern CSS supports range syntax for media queries, allowing you to specify breakpoints using comparison operators like <, >, <=, and >= instead of the more verbose min- and max- prefixes. This syntax is more readable and matches how you typically think about values and ranges.

styles.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 打包工具会将这些现代范围查询转换为传统媒体查询语法，确保兼容所有浏览器：

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

This lets you write more readable media queries while ensuring your stylesheets work correctly across all browsers, including those that don’t support the modern range syntax.

简写属性

CSS 引入了多个现代简写属性，提升代码可读性和可维护性。Bun 的 CSS 打包工具确保这些便捷简写在所有浏览器上可用，必要时转成长写属性。

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

/* 双值溢出属性 */
.content-box {
  /* 第一个值对应水平，第二个垂直 */
  overflow: hidden auto;
}

/* 增强的文本装饰 */
.fancy-link {
  /* 结合多条文本装饰属性 */
  text-decoration: underline dotted blue 2px;
}

/* 双值 display 语法 */
.component {
  /* 外层和内层显示类型 */
  display: inline flex;
}

对于不支持这些现代简写的浏览器，Bun 会转换为对应的长写组件属性：

styles.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-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 特性，通过在渐变中相邻的两个位置指定相同颜色，创建硬色阶过渡。适合制作条纹、色带及多色设计。

styles.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 打包工具自动转换为传统格式，复制颜色停点：

styles.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 字体，创造与操作系统更为融合的界面外观。无需为每个平台指定不同字体堆栈即可达到更原生的感觉。

styles.css

.native-interface {
  /* 使用系统默认 UI 字体 */
  font-family: system-ui;
}

.fallback-aware {
  /* 带显式回退的系统 UI 字体 */
  font-family: system-ui, sans-serif;
}

对于不支持 system-ui 的浏览器，Bun 的 CSS 打包工具自动扩展为跨平台的综合字体堆栈：

styles.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 模块

除常规 CSS 外，Bun 的打包工具还支持打包 CSS 模块，具有如下特性：

零配置自动检测 CSS 模块文件（.module.css）
组合（composes 属性）
在 JSX/TSX 中导入 CSS 模块
对 CSS 模块错误用法给予警告/错误提示

CSS 模块是采用 .module.css 扩展名的 CSS 文件，其中所有类名和动画都限定于文件内，避免因 CSS 声明默认全局导致的类名冲突。底层，Bun 的打包工具将局部作用域的类名转为唯一标识符。

快速入门

创建一个以 .module.css 结尾的 CSS 文件：

styles.module.css

.button {
  color: red;
}

other-styles.module.css

.button {
  color: blue;
}

然后你可以导入此文件，比如在 TSX 文件中：

https://mintcdn.com/bun-zhcndoc/cnUTwgMuf4cCrwC-/icons/typescript.svg?fit=max&auto=format&n=cnUTwgMuf4cCrwC-&q=85&s=e7767043c9e885c34f2d6c8fe2a95217

app.tsx

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

export default function App() {
  return (
    <>
      <button className={styles.button}>Red button!</button>
      <button className={otherStyles.button}>Blue button!</button>
    </>
  );
}

导入的 styles 对象将包含所有类名及其唯一标识符：

app.tsx

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

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

输出将为：

app.tsx

{
  button: "button_123";
}

{
  button: "button_456";
}

由此可见，每个文件的类名都是独一无二的，避免冲突！

组合

CSS 模块允许你组合类选择器，实现样式规则的复用。例如：

styles.module.css

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

.background {
  background-color: blue;
}

等同于写：

styles.module.css

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

.background {
  background-color: blue;
}

使用 composes 有几点规则要注意：

组合规则：

composes 属性必须写在任何常规 CSS 属性之前
只能在带有单个类名的简单选择器上使用 composes

styles.module.css

#button {
  /* 无效！`#button` 不是类选择器 */
  composes: background;
}

.button,
.button-secondary {
  /* 无效！`.button, .button-secondary` 不是简单选择器 */
  composes: background;
}

从独立 CSS 模块文件组合

你也可以从其他 CSS 模块文件中组合类：

background.module.css

.background {
  background-color: blue;
}

styles.module.css

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

组合来自不同文件的类时，请确保它们不包含相同的属性。CSS 模块规范指出，来自不同文件且属性冲突的组合行为未定义，导致输出可能不同且不可靠。

核心

开发服务器

资源处理

可执行文件

扩展

优化

迁移

转译

浏览器兼容性

语法降级

嵌套

颜色混合

相对颜色

LAB 颜色

color 函数

HWB 颜色

颜色表示法

light-dark() 颜色函数

逻辑属性

:dir() 选择器

:lang() 选择器

:is() 选择器

:not() 选择器

数学函数

媒体查询范围

简写属性

双点位置渐变

system-ui 字体

CSS 模块

快速入门

组合

从独立 CSS 模块文件组合

核心

开发服务器

资源处理

可执行文件

扩展

优化

迁移

​转译

​浏览器兼容性

​语法降级

​嵌套

​颜色混合

​相对颜色

​LAB 颜色

​color 函数

​HWB 颜色

​颜色表示法

​light-dark() 颜色函数

​逻辑属性

​:dir() 选择器

​:lang() 选择器

​:is() 选择器

​:not() 选择器

​数学函数

​媒体查询范围

​简写属性

​双点位置渐变

​system-ui 字体

​CSS 模块

​快速入门

​组合

​从独立 CSS 模块文件组合

转译

浏览器兼容性

语法降级

嵌套

颜色混合

相对颜色

LAB 颜色

color 函数

HWB 颜色

颜色表示法

light-dark() 颜色函数

逻辑属性

:dir() 选择器

:lang() 选择器

:is() 选择器

:not() 选择器

数学函数

媒体查询范围

简写属性

双点位置渐变

system-ui 字体

CSS 模块

快速入门

组合

从独立 CSS 模块文件组合