Bun CSS

CSS

> Bun's bundler has built-in support for CSS with modern features

Bun's bundler has built-in support for CSS with the following features:

• Transpiling modern/future features to work on all browsers (including vendor prefixing)
• Minification
• CSS Modules
• Tailwind (via a native bundler plugin)

Transpiling

Bun's CSS bundler lets you use modern/future CSS features without having to worry about browser compatibility — all thanks to its transpiling and vendor prefixing features which are enabled by default.

Bun's CSS parser and bundler is a direct Rust → Zig port of LightningCSS, with a bundling approach inspired by esbuild. The transpiler converts modern CSS syntax into backwards-compatible equivalents that work across browsers.

A huge thanks goes to the amazing work from the authors of LightningCSS and esbuild.

Browser Compatibility

By default, Bun's CSS bundler targets the following browsers:

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

Syntax Lowering

Nesting

The CSS Nesting specification allows you to write more concise and intuitive stylesheets by nesting selectors inside one another. Instead of repeating parent selectors across your CSS file, you can write child styles directly within their parent blocks.

```scss title="styles.css" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}} / With nesting / .card { background: white; border-radius: 4px;

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

.content { padding: 1rem; } }

Bun's CSS bundler automatically converts this nested syntax into traditional flat CSS that works in all browsers:

```css title="styles.css" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}}
/* Compiled output */
.card {
  background: white;
  border-radius: 4px;
}

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

.card .content {
  padding: 1rem;
}

You can also nest media queries and other at-rules inside selectors, eliminating the need to repeat selector patterns:

```scss title="styles.css" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}} .responsive-element { display: block;

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

This compiles to:

```css title="styles.css" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}}
.responsive-element {
  display: block;
}

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

Color mix

The color-mix() function gives you an easy way to blend two colors together according to a specified ratio in a chosen color space. This powerful feature lets you create color variations without manually calculating the resulting values.

```scss title="styles.css" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}} .button { / Mix blue and red in the RGB color space with a 30/70 proportion / background-color: color-mix(in srgb, blue 30%, red);

/ Create a lighter variant for hover state / &:hover { background-color: color-mix(in srgb, blue 30%, red, white 20%); } }

Bun's CSS bundler evaluates these color mixes at build time when all color values are known (not CSS variables), generating static color values that work in all browsers:

```css title="styles.css" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}}
.button {
  /* Computed to the exact resulting color */
  background-color: #b31a1a;
}

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

This feature is particularly useful for creating color systems with programmatically derived shades, tints, and accents without needing preprocessors or custom tooling.

Relative colors

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

```css title="styles.css" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}} .theme-color { / Start with a base color and increase lightness by 15% / --accent: lch(from purple calc(l + 15%) c h);

/ Take our brand blue and make a desaturated version / --subtle-blue: oklch(from var(--brand-blue) l calc(c * 0.8) h); }

Bun's CSS bundler computes these relative color modifications at build time (when not using CSS variables) and generates static color values for browser compatibility:

```css  theme={"theme":{"light":"github-light","dark":"dracula"}}
.theme-color {
  --accent: lch(69.32% 58.34 328.37);
  --subtle-blue: oklch(60.92% 0.112 240.01);
}

This approach is extremely useful for theme generation, creating accessible color variants, or building color scales based on mathematical relationships instead of hard-coding each value.

LAB colors

Modern CSS supports perceptually uniform color spaces like LAB, LCH, OKLAB, and OKLCH that offer significant advantages over traditional RGB. These color spaces can represent colors outside the standard RGB gamut, resulting in more vibrant and visually consistent designs.

```css title="styles.css" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}} .vibrant-element { / A vibrant red that exceeds sRGB gamut boundaries / color: lab(55% 78 35);

/ A smooth gradient using perceptual color space / background: linear-gradient(to right, oklch(65% 0.25 10deg), oklch(65% 0.25 250deg)); }

Bun's CSS bundler automatically converts these advanced color formats to backwards-compatible alternatives for browsers that don't yet support them:

```css title="styles.css" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}}
.vibrant-element {
  /* Fallback to closest RGB approximation */
  color: #ff0f52;
  /* P3 fallback for browsers with wider gamut support */
  color: color(display-p3 1 0.12 0.37);
  /* Original value preserved for browsers that support it */
  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));
}

This layered approach ensures optimal color rendering across all browsers while allowing you to use the latest color technologies in your designs.

Color function

The color() function provides a standardized way to specify colors in various predefined color spaces, expanding your design options beyond the traditional RGB space. This allows you to access wider color gamuts and create more vibrant designs.

```css title="styles.css" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}} .vivid-element { / Using the Display P3 color space for wider gamut colors / color: color(display-p3 1 0.1 0.3);

/ Using A98 RGB color space / background-color: color(a98-rgb 0.44 0.5 0.37); }

For browsers that don't support these advanced color functions yet, Bun's CSS bundler provides appropriate RGB fallbacks:

```css title="styles.css" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}}
.vivid-element {
  /* RGB fallback first for maximum compatibility */
  color: #fa1a4c;
  /* Keep original for browsers that support it */
  color: color(display-p3 1 0.1 0.3);

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

This functionality lets you use modern color spaces immediately while ensuring your designs remain functional across all browsers, with optimal colors displayed in supporting browsers and reasonable approximations elsewhere.

HWB colors

The HWB (Hue, Whiteness, Blackness) color model provides an intuitive way to express 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.

```css title="styles.css" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}} .easy-theming { / Pure cyan with no white or black added / --primary: hwb(180 0% 0%);

/ Same hue, but with 20% white added (tint) / --primary-light: hwb(180 20% 0%);

/ Same hue, but with 30% black added (shade) / --primary-dark: hwb(180 0% 30%);

/ Muted version with both white and black added / --primary-muted: hwb(180 30% 20%); }

Bun's CSS bundler automatically converts HWB colors to RGB for compatibility with all browsers:

```css title="styles.css" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}}
.easy-theming {
  --primary: #00ffff;
  --primary-light: #33ffff;
  --primary-dark: #00b3b3;
  --primary-muted: #339999;
}

The HWB model makes it particularly easy to create systematic color variations for design systems, providing a more intuitive approach to creating consistent tints and shades than working directly with RGB or HSL values.

Color notation

Modern CSS has introduced more intuitive and 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.

```css title="styles.css" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}} .modern-styling { / Space-separated RGB notation (no commas) / color: rgb(50 100 200);

/ Space-separated RGB with alpha / border-color: rgba(100 50 200 / 75%);

/ Hex with alpha channel (8 digits) / background-color: #00aaff80;

/ HSL with simplified notation / box-shadow: 0 5px 10px hsl(200 50% 30% / 40%); }

Bun's CSS bundler automatically converts these modern color formats to ensure compatibility with older browsers:

```css title="styles.css" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}}
.modern-styling {
  /* Converted to comma format for older browsers */
  color: rgb(50, 100, 200);

  /* Alpha channels handled appropriately */
  border-color: rgba(100, 50, 200, 0.75);

  /* Hex+alpha converted to rgba when needed */
  background-color: rgba(0, 170, 255, 0.5);

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

This conversion process lets you write cleaner, more modern CSS while ensuring your styles work correctly across all browsers.

light-dark() color function

The light-dark() function provides an elegant solution for implementing color schemes that respect the user's system preference without requiring complex media queries. This function accepts two color values and automatically selects the appropriate one based on the current color scheme context.

```css title="styles.css" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}} :root { / Define color scheme support / color-scheme: light dark; }

.themed-component { / Automatically picks the right color based on system preference / background-color: light-dark(#ffffff, #121212); color: light-dark(#333333, #eeeeee); border-color: light-dark(#dddddd, #555555); }

/ Override system preference when needed / .light-theme { color-scheme: light; }

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

For browsers that don't support this feature yet, Bun's CSS bundler converts it to use CSS variables with proper fallbacks:

```css title="styles.css" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}}
: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);
}

This approach gives you a clean way to handle light and dark themes without duplicating styles or writing complex media queries, while maintaining compatibility with browsers that don't yet support the feature natively.

Logical properties

CSS logical properties let you define layout, spacing, and sizing relative to the document's writing mode and text direction rather than physical screen directions. This is crucial for creating truly international layouts that automatically adapt to different writing systems.

```css title="styles.css" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}} .multilingual-component { / Margin that adapts to writing direction / margin-inline-start: 1rem;

/ Padding that makes sense regardless of text direction / padding-block: 1rem 2rem;

/ Border radius for the starting corner at the top / border-start-start-radius: 4px;

/ Size that respects the writing mode / inline-size: 80%; block-size: auto; }

For browsers that don't fully support logical properties, Bun's CSS bundler compiles them to physical properties with appropriate directional adjustments:

```css title="styles.css" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}}
/* For left-to-right languages */
.multilingual-component:dir(ltr) {
  margin-left: 1rem;
  padding-top: 1rem;
  padding-bottom: 2rem;
  border-top-left-radius: 4px;
  width: 80%;
  height: auto;
}

/* For right-to-left languages */
.multilingual-component:dir(rtl) {
  margin-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 2rem;
  border-top-right-radius: 4px;
  width: 80%;
  height: auto;
}

If the :dir() selector isn't supported, additional fallbacks are automatically generated to ensure your layouts work properly across all browsers and writing systems. This makes creating internationalized designs much simpler while maintaining compatibility with older browsers.

:dir() selector

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

```css title="styles.css" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}} / Apply different styles based on text direction / .nav-arrow:dir(ltr) { transform: rotate(0deg); }

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

/ Position elements based on text flow / .sidebar:dir(ltr) { border-right: 1px solid #ddd; }

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

For browsers that don't support the `:dir()` selector yet, Bun's CSS bundler converts it to the more widely supported `:lang()` selector with appropriate language mappings:

```css title="styles.css" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}}
/* Converted to use language-based selectors as fallback */
.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;
}

This conversion lets you write direction-aware CSS that works reliably across browsers, even those that don't yet support the :dir() selector natively. If multiple arguments to :lang() aren't supported, further fallbacks are automatically provided.

:lang() selector

The :lang() pseudo-class selector allows you to target elements based on the language they're in, making it easy to apply language-specific styling. Modern CSS allows the :lang() selector to accept multiple language codes, letting you grou

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jarle
• Source: jarle/bun-skills
• License: MIT

Install and usage instructions live in the source repository linked above.