CSS @import bundling
Bun's CSS parser bundles CSS files using @import statements. When you use @import in CSS files to import other CSS files, Bun combines them into a single bundled output.
css bundling & transpilation
32 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 asset paths with content hash
When CSS references local assets like `url("./logo.png")`, Bun copies the asset to the output directory and rewrites the path to include a content hash, for example: `url("./logo-[ABC123].png")`.
Importing CSS in JavaScript
To associate a CSS file with a JavaScript file, import it from the JavaScript file using `import "./styles.css";`. This generates both ./app.css and ./app.js in the output directory. Bun bundles all CSS files imported from JavaScript into a single 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.
TailwindCSS reference methods
Reference TailwindCSS in your project using one of three methods: a <link rel="stylesheet" href="tailwindcss" /> tag in HTML, an @import "tailwindcss"; statement in CSS, or import "tailwindcss"; in JavaScript. Only one of these is necessary, not all three.
CSS shorthand properties expansion
Bun's CSS bundler expands CSS shorthand properties for browsers that don't support them: place-items expands to align-items and justify-items; place-content expands to align-content and justify-content; place-self expands to align-self and justify-self; two-value overflow expands to overflow-x and overflow-y; text-decoration expands to text-decoration-line, text-decoration-style, text-decoration-color, and text-decoration-thickness; display: inline flex becomes display: inline-flex.
Double position gradient syntax conversion
Bun's CSS bundler converts double position gradient syntax to traditional format. green 30%, red 30% with double position creates a hard color stop; Bun converts this by duplicating color stops as green 30%, red 30% in traditional format. Compact syntax like #4caf50 0% 25% is expanded to #4caf50 0%, #4caf50 25%.
system-ui font family expansion
For browsers that don't support system-ui, Bun's CSS bundler expands it to a cross-platform font stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue". This includes system fonts for macOS/iOS, Windows, Android, and Linux, plus fallbacks for older browsers.
CSS Modules feature set
Bun's bundler supports CSS modules with the following features: detecting CSS module files (.module.css) with no configuration required; composition using the composes property; importing CSS modules into JSX/TSX; warnings/errors for invalid usages of CSS modules.
CSS transpiling enabled by default
Bun's bundler has built-in CSS support with transpiling and vendor prefixing enabled by default. The CSS parser and bundler is a direct port of LightningCSS, with a bundling approach inspired by esbuild. Modern and future CSS features are automatically converted to backwards-compatible equivalents without requiring configuration.
Bun CSS bundler default browser targets
By default, Bun's CSS bundler targets Edge 80+, Firefox 78+, Chrome 80+, Safari 14+, and Opera 67+.
CSS nesting syntax lowering
Bun's CSS bundler automatically converts CSS nesting syntax where child styles are written directly inside parent blocks into traditional flat CSS. Nested selectors like .card .title are flattened. Media queries and other at-rules can also be nested inside selectors and are correctly compiled to at-rule blocks outside the selector.
color-mix() function evaluation at build time
Bun's CSS bundler evaluates color-mix() functions at build time when all color values are known constants (not CSS variables), generating static color values. For example, color-mix(in srgb, blue 30%, red) is computed to a specific hex value like #b31a1a.
Relative color syntax computed at build time
Bun's CSS bundler computes relative color modifications at build time when not using CSS variables. Relative colors like lch(from purple calc(l + 15%) c h) are converted to static color values for browser compatibility.
LAB and OKLCH color space transpiling
Bun's CSS bundler converts LAB, LCH, OKLAB, and OKLCH color formats to backwards-compatible alternatives. It generates RGB fallback to the closest RGB approximation, then P3 fallback for browsers with wider gamut support, and preserves the original value for browsers that support it.
color() function with display-p3 and a98-rgb spaces
Bun's CSS bundler adds RGB fallbacks for the color() function when used with color spaces like display-p3 and a98-rgb. It generates RGB fallback first for maximum compatibility, then preserves the original for browsers that support the color space.
HWB color model transpiling to RGB
Bun's CSS bundler converts HWB (Hue, Whiteness, Blackness) colors to RGB for compatibility with all browsers. For example, hwb(180 0% 0%) is converted to #00ffff.
Modern color notation conversion for older browsers
Bun's CSS bundler converts modern CSS color notation to formats supported by older browsers. Space-separated RGB notation like rgb(50 100 200) is converted to comma format rgb(50, 100, 200). Hex colors with alpha channels like #00aaff80 are converted to rgba(0, 170, 255, 0.5).
light-dark() function transpiling with CSS variables fallback
For browsers that don't support light-dark(), Bun's CSS bundler converts it to CSS variables with fallbacks. It creates --buncss-light and --buncss-dark variables and uses @media (prefers-color-scheme: dark) to toggle between them. The transpiled output uses var(--buncss-light, lightColor) var(--buncss-dark, darkColor).
Logical properties transpiling with :dir() pseudo-class
Bun's CSS bundler converts logical CSS properties like margin-inline-start, padding-block, border-start-start-radius, inline-size, and block-size to physical properties. It uses :dir(ltr) and :dir(rtl) pseudo-classes to handle left-to-right and right-to-left text directions separately.
:dir() selector fallback to :lang() selector
For browsers that don't support the :dir() pseudo-class selector, Bun's CSS bundler converts it to the :lang() selector with language mappings. LTR languages like en, fr, de, es, it, pt, nl are grouped together, and RTL languages like ar, he, fa, ur are grouped together.
:lang() selector supports multiple language codes
The :lang() pseudo-class pseudo-class can accept multiple language codes in a single selector to group rules for related languages, for example :lang(zh, ja, ko). For browsers that don't support multiple arguments, Bun converts this to :is(:lang(zh), :lang(ja), :lang(ko)).
:is() selector vendor-prefixed fallbacks
Bun's CSS bundler provides fallbacks using vendor-prefixed alternatives for :is() pseudo-class. It generates :-webkit-any() for WebKit browsers and :-moz-any() for Firefox, preserving the original :is() for modern browsers. The vendor-prefixed versions have limitations with complex selectors and Bun only uses them when they work correctly.
CSS Modules .module.css file detection
CSS modules are detected automatically by Bun's bundler based on the .module.css file extension with no configuration required. A CSS module is a CSS file where all class names and animations are scoped to the file. Bun's bundler transforms locally scoped class names into unique identifiers.
CSS Modules import returns object mapping class names
Importing a CSS module into JavaScript/TypeScript gives an object that maps each class name to its unique identifier. For example, importing styles.module.css with class .button returns { button: "button_123" }. Each file gets unique identifiers, so class names don't collide between different files.
CSS Modules composition with composes property
CSS modules can compose class selectors together to reuse style rules. The composes property allows a class to inherit styles from another class: .button { composes: background; color: red; } combines background-color and color rules.
CSS Modules composes rules and restrictions
When using composes in CSS modules: a composes property must come before any regular CSS properties or declarations; you can only use composes on a simple selector with a single class name. Invalid usages include #button { composes: background; } (not a class selector) and .button, .button-secondary { composes: background; } (not a simple selector).
CSS Modules composition from separate files
CSS modules can compose from separate CSS module files using the syntax: .button { composes: background from "./background.module.css"; color: red; }. When composing classes from separate files, make sure they do not contain the same properties, as composing classes with conflicting properties is undefined behavior and output may differ and be unreliable.
:not() selector multi-argument transpiling
For browsers that don't support multiple arguments in :not() pseudo-class, Bun's CSS bundler converts button:not(.primary, .secondary) to button:not(:is(.primary, .secondary)). If :is() isn't supported, Bun generates further fallbacks using :-webkit-any() and :-moz-any() while preserving specificity and behavior.
Bun supports Tailwind CSS through bundler plugin
Bun's bundler has built-in support for Tailwind CSS through a native bundler plugin as one of its modern CSS features.
CSS math functions available
Bun's CSS bundler supports CSS math functions: standard functions round(), mod(), rem(), abs(), sign(); trigonometric functions sin(), cos(), tan(), asin(), acos(), atan(), atan2(); exponential functions pow(), sqrt(), exp(), log(), hypot().
CSS math functions evaluated at build time
Bun's CSS bundler evaluates CSS math function expressions at build time when all values are known constants, not variables. For example, padding: round(14.8px, 5px) is computed to 15px, and transform: rotate(calc(sin(45deg) * 50deg)) is computed to rotate(35.36deg).
Media query range syntax conversion
Bun's CSS bundler converts modern media query range syntax with comparison operators to traditional syntax. @media (width >= 768px) is converted to @media (min-width: 768px). Inclusive ranges like @media (768px <= width <= 1199px) are converted to @media (min-width: 768px) and (max-width: 1199px).