css bundling

33 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

CSS bundler 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, and Tailwind (through a native bundler plugin).

CSS transpiling enabled by default

Transpiling and vendor prefixing are enabled by default in Bun's CSS bundler, so you can use modern and future CSS features without worrying about browser compatibility.

CSS parser and bundler origin

Bun's CSS parser and bundler is a direct port of LightningCSS, with a bundling approach inspired by esbuild.

Default browser compatibility targets

By default, Bun's CSS bundler targets the following browsers: Edge 80+, Firefox 78+, Chrome 80+, Safari 14+, and Opera 67+.

CSS nesting syntax support

Bun's CSS bundler supports CSS nesting syntax, automatically converting nested selectors into traditional flat CSS. For example, nested child styles like `.card .title` are flattened to work in all browsers. Media queries and other at-rules can also be nested inside selectors.

color-mix() function support

Bun's CSS bundler supports the `color-mix()` function which blends two colors at a given ratio in a chosen color space. The bundler evaluates color mixes at build time when all color values are known (not CSS variables), generating static color values that work in all browsers.

Relative color syntax support

Bun's CSS bundler supports relative color syntax to modify individual components of an existing color (lightness, saturation, or individual channels). The bundler computes these modifications at build time when not using CSS variables and generates static color values.

LAB color space support

Bun's CSS bundler converts modern CSS LAB, LCH, OKLAB, and OKLCH color formats to backwards-compatible alternatives for browsers that don't support them, providing fallbacks to RGB and display-p3 color spaces.

color() function support

Bun's CSS bundler supports the `color()` function for specifying colors in predefined color spaces beyond traditional RGB. For browsers that don't support these color spaces, the bundler adds RGB fallbacks while preserving the original for supporting browsers.

HWB color model support

Bun's CSS bundler supports HWB (Hue, Whiteness, Blackness) color model and converts HWB colors to RGB for compatibility with all browsers.

Modern color notation support

Bun's CSS bundler supports modern CSS color notation including space-separated RGB values (no commas), space-separated HSL values, and hex colors with alpha channels. These are converted to comma-separated formats and rgba() notation for older browsers.

light-dark() function support

Bun's CSS bundler supports the `light-dark()` function which takes two colors and applies one based on the current color scheme. For browsers that don't support it, the bundler converts it to CSS variables with fallbacks using media queries for system preference detection.

Logical properties support

Bun's CSS bundler supports CSS logical properties that define layout relative to document writing mode and text direction. For browsers that don't fully support them, the bundler compiles them to physical properties using `:dir()` selectors for both ltr and rtl text directions.

:dir() pseudo-class support

Bun's CSS bundler supports the `:dir()` pseudo-class for styling elements based on text direction. For browsers that don't support it, the bundler converts it to the `:lang()` selector with appropriate language mappings for RTL and LTR languages.

:lang() pseudo-class with multiple arguments

Bun's CSS bundler supports passing multiple language codes to a single `:lang()` selector to group rules for related languages. For browsers that don't support multiple arguments, the bundler converts this to `:is()` selector syntax with the same behavior.

:is() pseudo-class support

Bun's CSS bundler supports the `:is()` pseudo-class function (formerly `:matches()`) which matches if any selector in the list matches. For browsers that don't support `:is()`, the bundler provides fallbacks using vendor-prefixed `-webkit-any()` and `-moz-any()` alternatives, with the original preserved for modern browsers.

:not() pseudo-class with multiple arguments

Bun's CSS bundler supports the `:not()` pseudo-class with multiple arguments to exclude several patterns. For browsers that don't support multiple arguments, the bundler converts this to use `:not(:is())` syntax with the same behavior.

CSS math functions support

Bun's CSS bundler supports CSS math functions including standard functions (round, mod, rem, abs, sign), trigonometric functions (sin, cos, tan, asin, acos, atan, atan2), and exponential functions (pow, sqrt, exp, log, hypot). The bundler evaluates these expressions at build time when all values are known constants (not variables).

Media query range syntax support

Bun's CSS bundler supports media query range syntax with comparison operators (<, >, <=, >=) instead of min- and max- prefixes. The bundler converts range queries to traditional media query syntax for compatibility with all browsers.

CSS shorthand properties support

Bun's CSS bundler supports modern CSS shorthand properties including place-items, place-content, place-self, two-value overflow, enhanced text-decoration, and two-value display syntax. For browsers that don't support these shorthands, the bundler converts them to their component longhand properties.

Double position gradient syntax support

Bun's CSS bundler supports double position gradient syntax to specify the same color at two adjacent positions for hard color stops. For browsers that don't support this syntax, the bundler converts it to traditional format by duplicating color stops.

system-ui font family support

Bun's CSS bundler supports the `system-ui` generic font family which uses the device's native UI font. For browsers that don't support it, the bundler expands it to a cross-platform font stack including -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, and Helvetica Neue.

CSS Modules support

Bun's bundler supports CSS modules with features including: detecting CSS module files (.module.css) with no configuration, composition using the composes property, importing CSS modules into JSX/TSX, and warnings/errors for invalid usages of CSS modules.

CSS module file detection

Bun's bundler detects CSS module files automatically by the .module.css file extension with no configuration required.

CSS module scoping behavior

In Bun's CSS modules, all class names and animations are scoped to the file. The bundler transforms locally scoped class names into unique identifiers to avoid class name collisions.

CSS module import returns object

When importing a CSS module in Bun, you receive an object that maps each class name to its unique identifier. For example, importing `styles.module.css` with a `.button` class yields an object like `{ button: "button_123" }`.

CSS module composition with composes property

CSS modules in Bun support composition using the `composes` property to reuse style rules across multiple classes. The composes property can reference other classes in the same file or from separate CSS module files using `composes: className from "./path.module.css"`.

CSS module composition rules

Two rules apply when using `composes` in CSS modules: (1) A `composes` property must come before any regular CSS properties or declarations, and (2) You can only use `composes` on a simple selector with a single class name. It cannot be used with ID selectors or multiple selectors.

CSS module composition from separate files warning

When composing classes from separate CSS module files, make sure they do not contain the same properties. The CSS module spec says that composing classes from separate files with conflicting properties is undefined behavior: the output may differ and be unreliable.

CSS bundling merges into single file

CSS files are bundled together into a single .css file in the output directory.

CSS bundling with @import

Bun's CSS bundler supports `@import` statements in CSS files to import other CSS files. All imported CSS is bundled together with the original CSS file.

CSS asset path rewriting with content hash

When CSS references local assets via `url()`, Bun copies the asset to the output directory and rewrites the path to include a content hash. For example, `url("./logo.png")` becomes `url("./logo-[ABC123].png")`.

Import CSS in JavaScript

To associate CSS with a JavaScript file, import it from the JavaScript file using `import "./styles.css";`. This generates a separate CSS file per entry point. If the same CSS file is imported from multiple JavaScript files, Bun includes it only once in the output CSS file.

Give your agent this brain