WhatBrokeToday
FAQ
Today's Trends
mediumInvestigatingBun

Bun CSS Bundler Alters Rule and Layer Order from Source Files

  1. Investigating(current)
  2. Trending(upcoming)
  3. Workaround available(upcoming)
  4. Resolved(upcoming)

Executive summary

Bun's CSS bundler applies rules and layers in a different order than the source files during builds. Specifically, hoisting external @import statements moves them ahead of rules that originally came first, causing visual regressions such as incorrect styling.

No verified workaround yet

None of the linked reports describe a mitigation. Follow this incident to hear when one appears.

Official fix
Technical root cause

Bun moves external @import statements to the top of the bundle because CSS only allows @import at the top, which alters the execution order relative to preceding rules.

Evidence

1 report · 1 GitHubShow
  1. [1]
    GitHub First report
    CSS bundler: cases where the bundle applies rules or layers in a different order than the source files(opens GitHub issue in a new tab)

    Found while testing #47882, on the code that it merged. Examples 1 to 3 were checked in Chrome 157: the source files give green, and the bundle gives red. Outputs are from bun build entry.css --minify-whitespace. A hoisted external @import moves ahead of rules that came first CSS only allows @import at the top, so Bun moves external imports there. This changes the order, also with no layers: / entry.css / @import "./a.css"; / .t { color: red } / @import "https://example.com/ext.css"; / .t {…

    by alii 0upvotes 3comments

Timeline

  1. First report on GitHub issue

    CSS bundler: cases where the bundle applies rules or layers in a different order than the source files

    Source