Bun JS CSS

Бандлер Bun имеет встроенную поддержку CSS со следующими возможностями:

Транспиляция современных/будущих возможностей для работы во всех браузерах (включая вендорные префиксы)
Минификация
CSS Modules
Tailwind (через нативный плагин бандлера)

Транспиляция

Бандлер CSS Bun позволяет использовать современные/будущие возможности CSS без беспокойства о совместимости с браузерами — все благодаря функциям транспиляции и добавления вендорных префиксов которые включены по умолчанию.

Парсер и бандлер CSS Bun — это прямой порт LightningCSS с Rust на Zig с подходом к связыванию вдохновленным esbuild. Транспайлер преобразует современный синтаксис CSS в обратно совместимые эквиваленты которые работают во всех браузерах.

NOTE

Огромная благодарность авторам LightningCSS и esbuild за их замечательную работу.

Совместимость с браузерами

По умолчанию бандлер CSS Bun нацелен на следующие браузеры:

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

Понижение синтаксиса

Вложенность

Спецификация CSS Nesting позволяет писать более лаконичные и интуитивные таблицы стилей вкладывая селекторы друг в друга. Вместо повторения родительских селекторов по всему CSS-файлу вы можете писать дочерние стили прямо внутри родительских блоков.

scss

/* С вложенностью */
.card {
  background: white;
  border-radius: 4px;

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

  .content {
    padding: 1rem;
  }
}

Бандлер CSS Bun автоматически преобразует этот вложенный синтаксис в традиционный плоский CSS который работает во всех браузерах:

css

/* Скомпилированный вывод */
.card {
  background: white;
  border-radius: 4px;
}

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

.card .content {
  padding: 1rem;
}

Вы также можете вкладывать медиа-запросы и другие at-правила внутри селекторов устраняя необходимость повторять паттерны селекторов:

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 */
  &: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. Эти цветовые пространства могут представлять цвета за пределами стандартной гаммы sRGB обеспечивая более яркие и визуально согласованные дизайны.

css

.vibrant-element {
  /* Ярко-красный который превышает границы гаммы sRGB */
  color: lab(55% 78 35);

  /* Плавный градиент с использованием перцептуального цветового пространства */
  background: linear-gradient(to right, oklch(65% 0.25 10deg), oklch(65% 0.25 250deg));
}

Бандлер CSS 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. Это позволяет получить доступ к более широким цветовым гаммам и создавать более яркие дизайны.

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

Для браузеров которые еще не поддерживают эти расширенные цветовые функции бандлер CSS Bun предоставляет соответствующие резервные варианты 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 (Hue, Whiteness, Blackness) предоставляет интуитивный способ выражения цветов на основе того сколько белого или черного смешано с чистым оттенком. Многие дизайнеры находят этот подход более естественным для создания цветовых вариаций по сравнению с манипулированием значениями 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%);
}

Бандлер CSS Bun автоматически преобразует цвета HWB в RGB для совместимости со всеми браузерами:

css

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

Модель HWB особенно удобна для создания систематических цветовых вариаций для дизайн-систем предоставляя более интуитивный подход к созданию согласованных оттенков и теней чем работа напрямую с RGB или HSL.

Обозначение цвета

Современный CSS представил более интуитивные и лаконичные способы выражения цветов. Синтаксис с разделением пробелами устраняет необходимость в запятых в значениях RGB и HSL в то время как hex-цвета с альфа-каналом предоставляют компактный способ указания прозрачности.

css

.modern-styling {
  /* Синтаксис RGB с разделением пробелами (без запятых) */
  color: rgb(50 100 200);

  /* RGB с разделением пробелами и альфой */
  border-color: rgba(100 50 200 / 75%);

  /* Hex с альфа-каналом (8 цифр) */
  background-color: #00aaff80;

  /* HSL с упрощенным обозначением */
  box-shadow: 0 5px 10px hsl(200 50% 30% / 40%);
}

Бандлер CSS 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() предоставляет элегантное решение для реализации цветовых схем которые уважают системные предпочтения пользователя без необходимости в сложных медиа-запросах. Эта функция принимает два цветовых значения и автоматически выбирает подходящее в зависимости от текущего контекста цветовой схемы.

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

Для браузеров которые еще не поддерживают эту функцию бандлер CSS 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 позволяют определять макет отступы и размеры относительно режима письма документа и направления текста а не физических направлений экрана. Это критически важно для создания по-настоящему международных макетов которые автоматически адаптируются к различным системам письма.

css

.multilingual-component {
  /* Отступ который адаптируется к направлению письма */
  margin-inline-start: 1rem;

  /* Внутренний отступ который имеет смысл независимо от направления текста */
  padding-block: 1rem 2rem;

  /* Радиус границы для начального угла вверху */
  border-start-start-radius: 4px;

  /* Размер который уважает режим письма */
  inline-size: 80%;
  block-size: auto;
}

Для браузеров которые не полностью поддерживают логические свойства бандлер CSS 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. Этот селектор сопоставляет элементы на основе их направленности определенной документом или явными атрибутами направления.

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() бандлер CSS Bun преобразует его в более широко поддерживаемый селектор :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() бандлер CSS Bun преобразует этот синтаксис в использование селектора :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() бандлер CSS 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() позволяет исключать элементы которые соответствуют определенному селектору. Современная версия этого селектора принимает несколько аргументов позволяя исключать несколько паттернов с помощью одного лаконичного селектора.

css

/* Выбрать все кнопки кроме вариантов primary и secondary */
button:not(.primary, .secondary) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

/* Применить стили ко всем заголовкам кроме тех что внутри sidebar или footer */
h2:not(.sidebar *, footer *) {
  margin-top: 2em;
}

Для браузеров которые не поддерживают несколько аргументов в :not() бандлер CSS Bun преобразует этот синтаксис в более совместимую форму сохраняя то же поведение:

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

Бандлер CSS 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-. Этот синтаксис более читаем и соответствует тому как мы обычно думаем о значениях и диапазонах.

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

Бандлер CSS 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 представил несколько современных сокращенных свойств которые улучшают читаемость и поддерживаемость кода. Бандлер 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;
}

/* Двухзначное overflow */
.content-box {
  /* Первое значение для горизонтального второе для вертикального */
  overflow: hidden auto;
}

/* Расширенное text-decoration */
.fancy-link {
  /* Комбинирует несколько свойств декорации текста */
  text-decoration: underline dotted blue 2px;
}

/* Двухзначный синтаксис display */
.component {
  /* Внешний тип display + внутренний тип display */
  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% */
  );
}

Для браузеров которые не поддерживают этот синтаксис бандлер CSS Bun автоматически преобразует его в традиционный формат дублируя цветовые остановки:

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 бандлер CSS 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 Modules

Бандлер Bun также поддерживает связывание CSS-модулей в дополнение к обычному CSS с поддержкой следующих возможностей:

Автоматическое обнаружение файлов CSS-модулей (.module.css) без дополнительной конфигурации
Композиция (свойство composes)
Импорт CSS-модулей в JSX/TSX
Предупреждения/ошибки для некорректного использования CSS-модулей

CSS-модуль — это CSS-файл (с расширением .module.css) где все имена классов и анимации ограничены областью файла. Это помогает избежать коллизий имен классов так как CSS-объявления по умолчанию имеют глобальную область видимости.

Под капотом бандлер Bun преобразует локально ограниченные имена классов в уникальные идентификаторы.

Начало работы

Создайте CSS-файл с расширением .module.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}>Red button!</button>
      <button className={otherStyles.button}>Blue button!</button>
    </>
  );
}

Объект styles от импорта файла CSS-модуля будет объектом со всеми именами классов в качестве ключей и их уникальными идентификаторами в качестве значений:

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 Modules ​

Начало работы ​

Композиция ​

Композиция из отдельного файла CSS-модуля ​

Транспиляция

Совместимость с браузерами

Понижение синтаксиса

Вложенность

Смешивание цветов

Относительные цвета

Цвета LAB

Функция цвета

Цвета HWB

Обозначение цвета

Функция цвета light-dark()

Логические свойства

Селектор :dir()

Селектор :lang()

Селектор :is()

Селектор :not()

Математические функции

Диапазоны медиа-запросов

Сокращения

Градиенты с двойной позицией

Шрифт system-ui

CSS Modules

Начало работы

Композиция

Композиция из отдельного файла CSS-модуля