Browser Support

Bamboo emits modern CSS and supports the latest stable releases of major browsers with:

• CSS Variables (opens in a new tab)
• CSS Cascade Layers (opens in a new tab)
• modern selectors such as :where() (opens in a new tab) and :is() (opens in a new tab)
• light-dark() (opens in a new tab)

Baseline

Chrome >= 123
Edge >= 123
Firefox >= 146
iOS >= 17.5
Safari >= 17.5
Android >= 123
Opera >= 109

Bamboo reads this fixed baseline when it optimizes CSS. It deliberately does not read a consuming project's browserslist configuration, so identical source always compiles to identical CSS.

Compiled slot recipes return complete atom strings and do not emit @scope, so slot recipes add no separate browser requirement.

Semantic tokens and light-dark()

A semantic token with a _osDark value and nothing else conditional is emitted as one declaration:

:where(:root, :host) {
  color-scheme: light dark;
  --colors-bg: light-dark(var(--colors-white), var(--colors-black));
}

color-scheme is emitted with the tokens rather than the reset. A sheet using preflight: false still needs it for light-dark() to select its dark arm. It has zero specificity, so an application can override it on a subtree:

[data-theme='dark'] {
  color-scheme: dark;
}

A token that also carries _osLight keeps its media blocks, because folding it would put a media declaration and a light-dark() arm in play for the same variable. _dark also remains separate because it is a selector rather than an operating-system media query.

Additional CSS processing

PostCSS remains useful for application CSS outside Bamboo—for example, to run Autoprefixer. Bamboo itself is compiled and emitted by its Vite plugin.

Cascade-layer flattening is unsupported. Removing layer boundaries changes Bamboo's precedence contract.