css: read a prefixed linear-gradient direction in the 2011 syntax by robobun · Pull Request #46697 · oven-sh/bun

robobun · 2026-10-24T05:54:24Z

Problem

bun build repaints a valid -webkit-, -moz- or -o-linear-gradient() and exits 0. -webkit-linear-gradient(top,red,blue) becomes -webkit-linear-gradient(#00f,red) under --minify. bottom and 180deg lose the direction with no flag.
Five sites in src/css/values/gradient.rs read the direction by the rules of the standard function: the parse default (:322), both to_css (:333, :970), Gradient::get_prefixed (:236), WebKitGradient::from_standard (:821).

Fix

The direction stays as written. No direction parses as top, and print omits only top, with no stop reversal and no angle rewrite.
A gradient that changes syntax gets a converted direction (to right becomes left): the prefixed copy and the -webkit-gradient() points.
Verified: test/js/bun/css/css.test.ts (115 rows fail on main). Also test/js/bun/css/ and the bundler CSS suites.
Self-reviewed: 15 concerns raised, 14 addressed. Not taken: an optional property test.

Background

The prefixed names use the 2011 syntax (css3-images-20110217): a keyword names the start side, 0deg points right, the default is top.
Upstream lightningcss fixed the copy in Fix linear-gradient direction conversion for legacy vendor-prefixed values parcel-bundler/lightningcss#936. Bug: Incorrect conversion of legacy -webkit-linear-gradient direction keywords parcel-bundler/lightningcss#1107 is open for the rest.
Considered the standard form at parse: a written angle passes twice through an f32 (.1deg prints .0999985deg). A printer-only patch leaves the copy wrong.

Downsides

Rendering changes where the browser applies a prefixed linear gradient: -webkit-linear-gradient(180deg, a, b) now paints right to left, as the unbundled file does.
Standard gradients: release .text +1,024 bytes. Instructions (no direction/angle/keyword): parse -3/+2/+10, print -3/-7/-9. mi_malloc calls: +0.
Not fixed: prefixed radial gradients. Notes lists the five defects handed off.

Notes

Repro. bun build a.css --outdir=o with a{background:<value>}, on main 5c6d4e2 and on 1.4.2:

input	`--minify` on main	no flag on main	this PR (`--minify` / no flag)
`-webkit-linear-gradient(top,red,blue)`	`(#00f,red)`	`(top, red, #00f)`	`(red,#00f)` / `(red, #00f)`
`-webkit-linear-gradient(bottom,red,blue)`	`(red,#00f)`	`(red, #00f)`	`(bottom,red,#00f)` / `(bottom, red, #00f)`
`-moz-linear-gradient(left,red,blue)`	`(270deg,red,#00f)`	as written	as written
`-webkit-linear-gradient(0deg,red,blue)`	`(#00f,red)`	as written	as written
`-webkit-linear-gradient(180deg,red,blue)`	`(red,#00f)`	`(red, #00f)`	as written
`linear-gradient(to right,red,blue),image-set(...)`	copy is `-webkit-linear-gradient(90deg,...)`	copy is `-webkit-linear-gradient(right, ...)`	copy is `-webkit-linear-gradient(left, ...)`

The last row needs no prefixed input. Under the default targets image-set() needs -webkit-, and get_fallbacks_image (src/css/small_list.rs) puts that prefix on every layer of the list. This PR corrects the direction of that copy and nothing else about it.

The same value compared equal to another one: .a{...-webkit-linear-gradient(red,blue)} .b{...-webkit-linear-gradient(bottom,red,blue)} merged into .a,.b{...}, because an omitted direction was stored as bottom.

The 2011 syntax. The WHATWG Compatibility Standard says -webkit-linear-gradient() "must be treated as an alias of linear-gradient as defined in css3-images-20110217". Chromium (css_gradient_value.cc, EndPointsFromAngle): "Prefixed gradients use polar coordinate angles, rather than bearing angles", angle_deg = 90 - angle_deg, and for a keyword the first point is the named side. Stylo keeps the direction as written beside a GradientCompatMode, and its default for a prefixed gradient is top. This PR stores the direction the same way.

Design. LineDirection::to_other_syntax is the only conversion table. Parsed prefixed input never passes through it on the print path, so a written angle keeps its value and unit. A generated copy prints its angle in deg, rounded to 3 decimals, as parcel-bundler/lightningcss#936 does. The angle is (90 - a) mod 360, with a reduced first. Upstream's (450 - deg).abs() % 360 maps 540deg to 90deg. A default direction prints as no direction, where upstream prints top.

Tests. Three expectations that existed before change: -webkit-, -moz- and -o-linear-gradient(bottom, yellow, blue) now keep bottom. They are ports of lightningcss tests that encode the defect. The new rows cover each prefixed name, the generated copies for old targets, the -webkit-gradient() points, the default targets, and one bun build run. With one of the five sites reverted, these counts of the 252 linear-gradient tests fail: 21 (parse default), 94 (LinearGradient::to_css), 19 (LineDirection::to_css), 41 (with_prefix), 14 (from_standard).

#42018 skips four upstream border-image rows that expect -webkit-linear-gradient(top, ...) in a generated copy. They pass after this PR with top, removed from the expectation. The PR that lands second can enable them. #15376 was the mirror defect (to right printed as right in the standard function).

Measurements, release builds of main 5c6d4e2 and of this PR. The sizes of the listed functions are the same after the review changes:

release .text: +1,024 bytes (size -A: 82,231,705 to 82,232,729). Image::to_css 6197 to 6293 B, LinearGradient::parse 1212 to 1273 B, Image::get_legacy_webkit 1340 to 1696 B, Image::get_prefixed 1082 to 986 B plus the new LinearGradient::with_prefix at 516 B. The stripped binary stays at 107,808,480 bytes.
out-of-line LineDirection symbols: 0 on main, 0 on PR.
instructions per unprefixed linear-gradient: parse -3 / +2 / +10, print -3 / -7 / -9 (gdb, instructions run in the function body with calls stepped over. linear-gradient(red,blue) / (45deg,red,blue) / (to right,red,blue) under minify. Parse 106 / 86 / 157 to 103 / 88 / 167. Print, Image::to_css, 80 / 123 / 113 to 77 / 116 / 104). The +10 is register moves on the keyword path. It has no new call or loop.
mi_malloc calls per gradient rule: unprefixed +0 (19 / 29 / 39 for 1 / 2 / 3 rules on both builds). Prefixed top under minify: 1 fewer per rule (28 / 46 / 64 to 27 / 44 / 61), because the stop reversal no longer runs.
in-tree stylesheets (test/js/bun/css/files, 15 files, target bun and browser, with and without minify): 0 of 60 outputs differ.
41 stylesheets from npm packages that ship prefixed gradients, with and without --minify: 118 declarations change in 19 of 82 outputs. 56 only drop an explicit top. 62 are corrected directions (52 stop orders restored, 8 keywords restored, 2 layer lists with bottom restored). 0 other.
unprefixed rows that gain or lose a -webkit-gradient() fallback: 0 of 112 (28 multiples of 90deg in each of deg, turn, grad and rad, target chrome 8).
pre-existing assertions changed: 3.

Not in this PR. Each item is a separate defect that main has today. Each one is handed to a separate fix.

Prefixed radial gradients are parsed, printed and copied by the standard grammar (RadialGradient::parse and to_css, the radial arms of Gradient::get_prefixed and WebKitGradient::from_standard). background:radial-gradient(circle at 30% 107%,red,blue);background:-webkit-radial-gradient(circle at 30% 107%,red,blue) keeps only the second declaration, which browsers reject.
get_fallbacks_image gives every layer the union of the prefixes that any layer needs. That is why an unprefixed gradient beside image-set() gets a prefixed copy at all.
A -moz- or -o- gradient declared after the standard one deletes the standard declaration, because Image::is_compatible (src/css/values/image.rs) does not look at the prefix.
Under --minify, the stop reversal of a standard to top gradient mis-paints stops that are out of order: linear-gradient(to top,green 50%,red 0%) becomes linear-gradient(red 100%,green 50%).
A 50% color hint is dropped when it is not the midpoint of its stops: linear-gradient(red 20%,50%,blue 60%) becomes linear-gradient(red 20%, #00f 60%).

A standard to <corner> copied to a prefixed corner is approximate on a box that is not square. The 2011 syntax has no equal spelling. Upstream has the same limit.

`-webkit-`, `-moz-` and `-o-linear-gradient()`, and their repeating forms, use the css3-images-20110217 syntax. A keyword names the side the gradient starts from, `0deg` points right, and the default is `top`. The parser, the printer and the two converters read that direction by the rules of the standard function. - Parse an omitted direction of a prefixed gradient as `top`. - Print a prefixed direction as written. Only `top` is left out. There is no stop reversal and no keyword-to-angle rewrite. - Convert the direction when a standard gradient gets a prefixed copy: `to right` becomes `left`, and an angle `a` becomes `90deg - a`. This is the conversion of parcel-bundler/lightningcss#936. - Compute the `-webkit-gradient()` points of a prefixed gradient from its own syntax. Co-authored-by: Lucas Weng <30640930+lucasweng@users.noreply.github.com>

robobun · 2026-10-24T05:54:35Z

^{Updated 3:06 AM PT - Oct 24th, 2026}

✅ @robobun, your commit 6494118aedd7c6c7f6c72357d4740298e194e5d6 passed in Build #131758! 🎉

🧪 To try this PR locally:

bunx bun-pr 46697

That installs a local version of the PR into your bun-46697 executable, so you can run:

bun-46697 --bun

robobun · 2026-10-24T05:54:39Z

Status: ready for review. The diff is green in CI.

CI on 6494118 (build 131758): 179 of 181 jobs passed. The other two are the darwin x64 - test-bun lanes, which wait for an agent.
No test failed on every try. Five tests failed one time and then passed: bun-serve-html, spawn_waiter_thread, node-http, worker_threads and node-net. None of them is a CSS test.
test/js/bun/css/css.test.ts: 115 rows fail on a release build of main. All 1481 pass on this branch.

How I reproduced it (bun 1.4.2 and a release build of main 5c6d4e2 print the same):

printf 'a{background:-webkit-linear-gradient(bottom,red,blue)}' > a.css
bun build a.css --outdir=o && cat o/a.css
# a { background: -webkit-linear-gradient(red, #00f); }      the direction is gone

With --minify, -webkit-linear-gradient(top,red,blue) prints -webkit-linear-gradient(#00f,red), and -moz-linear-gradient(left,red,blue) prints -moz-linear-gradient(270deg,red,#00f).

coderabbitai · 2026-10-24T06:01:03Z

No actionable comments were generated in the recent review.

Recent review info

Run configuration

Source mode: Auto
Repository: oven-sh/bun
Branch: robobun/926cb207/css-prefixed-linear-gradient-direction
File: .coderabbit.yaml
Commit: 372d9e7
Layers: Repository YAML
Review profile: ASSERTIVE
Plan: Advanced
Run ID: 173ba9c9-ed66-4376-9649-e09f455e498d

Commits

Reviewing files that changed from the base of the PR and between df6b7a1 and 372d9e7.

Files selected for processing: 2

src/css/values/gradient.rs
test/js/bun/css/css.test.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 0 remain after this review.

Walkthrough

Linear-gradient parsing, serialization, minification, and prefix conversion now apply syntax-specific direction defaults and conversions. Tests cover legacy prefixes, Chrome 8 endpoint output, layered images, and formatted and minified builds.

Changes

Gradient direction handling

Layer / File(s)	Summary
Syntax-specific defaults and serialization `src/css/values/gradient.rs`, `test/js/bun/css/css.test.ts`	Parsing and serialization use different defaults for standard and prefixed gradients. Direction conversion and minification preserve the prefixed syntax’s direction behavior. Tests cover legacy direction parsing and serialization.
Prefix conversion and output `src/css/values/gradient.rs`, `test/js/bun/css/css.test.ts`	Prefix generation converts directions between standard and prefixed syntax. WebKit endpoint conversion and tests cover browser prefixes, image layers, and formatted and minified builds.

Suggested reviewers: jarred-sumner

Priority: Normal

Merge Risk: Minimal · up to 372d9

The change consistently preserves prefixed linear-gradient directions across parsing, serialization, minification, and prefix generation, with no actionable merge-blocking risk identified.

Pre-merge checks: 4

Check name	Status	Explanation
Title check		The title names the main change: reading a prefixed linear-gradient direction in the 2011 syntax. The PR preserves written directions in -webkit-, -moz-, and -o-linear-gradient() and converts directio…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.
Description check		The description is complete and relevant. It explains the problem, fix, scope, verification, test coverage, performance impact, and known limitations. It does not use the template headings exactly, bu…

Full details: Title check

Explanation

The title names the main change: reading a prefixed linear-gradient direction in the 2011 syntax. The PR preserves written directions in -webkit-, -moz-, and -o-linear-gradient() and converts directions when the syntax changes. The title is specific and matches the objectives and file summaries.

Full details: Description check

Explanation

The description is complete and relevant. It explains the problem, fix, scope, verification, test coverage, performance impact, and known limitations. It does not use the template headings exactly, but it provides the required information in equivalent sections.

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

claude

Nothing blocking. The comments below are optional suggestions. There is no need to push a fix for them before merging.

Beyond the inline findings, I also checked the removed != Bottom && != 180deg guard in the LinearGradient::to_css fallback branch: is_default in the first branch already catches the bottom keyword and any unit of angle reducing to 180deg via to_degrees(), so the fallback branch cannot print a default direction that the old code omitted. The prefixed 270deg keeping its angle under minify is by design (a prefixed angle stays as written), and the radial arms of get_prefixed are explicitly left out in the description.

Extended reasoning...

The change rewrites direction handling for vendor-prefixed linear gradients in src/css/values/gradient.rs (parse default, two printers, the prefixed copy, and the -webkit-gradient() fallback) and adds rows to test/js/bun/css/css.test.ts; it touches no security-sensitive surface. Verified findings are posted inline and one further verified finding was withheld, so approval is off the table; this note only records the sibling concerns examined and ruled out.

Additional findings (outside the current diff — GitHub can't attach inline comments there):

🟣 src/css/values/gradient.rs — Users with -moz-linear-gradient(to right, red, blue), which Firefox 10-15 accepts, get the whole declaration left as an unparsed token list: no color minification, no fallback generation, and the new 2011 direction logic never runs. At src/css/values/gradient.rs:956-958 LineDirection::parse skips the to keyword only for unprefixed gradients and never accepts it for a prefixed one, so the direction parse fails, the default is taken, and parse_items then fails on the ident to. Fix: accept an optional to <side> in a prefixed gradient and store it in the standard syntax (converting with to_other_syntax or a flag), so a -moz- gradient written in the modern form is parsed, minified and copied like the others.

Why this was flagged

Trigger: a stylesheet containing -moz-linear-gradient(to right, red, blue), reaching LinearGradient::parse at src/css/values/gradient.rs:311 via Gradient::parse at gradient.rs:130-131. LineDirection::parse(i, true) at gradient.rs:949 tries an angle, then skips expect_ident_matching(b"to") because is_prefixed is true (gradient.rs:956-958), then HorizontalPositionKeyword::parse and VerticalPositionKeyword::parse both reject the ident to, so the direction falls back to LineDirection::default(true) at gradient.rs:318 and parse_items at gradient.rs:320 fails on to. The property is kept as an unparsed token list and printed verbatim: colors are not minified, no -webkit-/-o- copies are produced, and the new direction handling in this PR is bypassed. The base branch fails the same way, so the output is unchanged by this PR. Remedy: accept an optional to in prefixed parse and convert the result into the 2011 representation.

Verification: LinearGradient::parse (src/css/values/gradient.rs:312-313) calls LineDirection::parse(i, true) for a prefixed gradient; at gradient.rs:956-958 the to ident is only consumed when !is_prefixed, so the default direction is taken (line 318) and parse_items (line 320) fails on the ident to. Lines 956-958 are byte-identical in the base, so merging makes nothing worse.
🟣 src/css/values/gradient.rs — nit, pre-existing: users targeting old Chrome still get no -webkit-gradient() fallback for a standard angle written as -90deg, 360deg, 450deg or 1turn, while the same angle in a prefixed gradient now does. The diff reduces prefixed angles modulo 360 through to_other_syntax() before the exact match at gradient.rs:856-863, but the standard arm still compares the raw angle.to_degrees(). Fix: reduce the angle with rem_euclid(360.0) at gradient.rs:855 (or share the reduction with to_other_syntax) so every spelling of a quarter-turn angle gets the legacy fallback. The new rows at css.test.ts (-90deg, 360deg, 450deg, 1turn with empty points) pin the gap.

Why this was flagged

A stylesheet with linear-gradient(-90deg, red, blue) or linear-gradient(1turn, red, blue) built with a chrome 8 target reaches WebKitGradient::from_standard via Image::get_fallbacks (image.rs:173). For an unprefixed gradient the direction is used as parsed (gradient.rs:828-829) and the Angle arm at gradient.rs:855-865 compares angle.to_degrees() to exactly 0, 90, 180 or 270, so -90 and 360 fall to return None and no -webkit-gradient() line is emitted. The base branch behaves the same way for standard angles, so this is pre-existing. The diff however adds reduction for the prefixed side: -webkit-linear-gradient(-90deg, ...) now goes through to_other_syntax() at gradient.rs:831, whose rem_euclid(360.0) at gradient.rs:1015 maps it to 180deg and yields the fallback. The sibling standard arm was left unreduced and the new chrome-8 standard rows (["-90deg", "", "180deg"], ["360deg", "", "90deg"], ["450deg", "", "0deg"], ["1turn", "", "90deg"]) assert the missing fallback as expected output.

Verification: pre-existing (nit): triggered when a standard linear-gradient(-90deg|360deg|450deg|1turn, ...) is built with a target (e.g. chrome 8). The Angle arm at src/css/values/gradient.rs:854-866 does let degrees = angle.to_degrees(); with no reduction, so all hit return None and no -webkit-gradient() layer is emitted. The base branch has the identical raw comparison, so merging makes nothing worse there.

`LineDirection::to_other_syntax` computed `450 - a` and then reduced the result. `90 - a` names the same direction and matches the doc comment. The comment on the rounding now says that it keeps three decimals. The `bun build` test no longer pipes a stdout that it does not read.

claude

Code review found no issues

No high-confidence issues detected in this change.

robobun · 2026-10-24T06:46:29Z

Reply to the two findings of the automated review that are outside the diff. Both are behavior that main has today. This PR does not change either one.

-moz-linear-gradient(to right, ...) stays unparsed. The output is the text as written, so nothing repaints. I left it out on purpose. Only Gecko reads to under -moz- (Stylo switches such a gradient to the modern syntax). Chromium and Gecko reject to under -webkit-, so a parser that accepts to under every prefix would turn a declaration that browsers drop into a live one. A -moz--only arm is a possible follow-up. Its gain is color minification for a form that only Firefox 10 to 15 needed.

No -webkit-gradient() for a standard -90deg, 360deg, 450deg or 1turn. This PR keeps the output of unprefixed gradients on that route byte-identical (0 of 112 probe rows differ), and the new rows pin that. The route needs a target such as Chrome 9 or Safari 6 and older. No released bun build can select one: the targets come from Targets::for_bundler_target, and the override variables exist only in debug builds. The -webkit-linear-gradient() copy in the same rule still covers Chrome 10 and later. To reduce the standard angle is a one-line change, but it moves unprefixed output, so it belongs in its own PR.

claude

Code review found no issues

No high-confidence issues detected in this change.

robobun · 2026-10-24T12:24:58Z

An additional check of this branch, and one difference from main that the Notes do not list.

Check. I built gradient.rs at 6494118 on main a8b5e92. I painted 15 authored -webkit-linear-gradient() forms in headless Chrome 153 (keywords, corners, angles, pixel and percent stops). Each one is next to its bun build output, with and without --minify. At 8 sample points per box, 0 of 15 paint differently from the source. With bun 1.4.3, 8 of 15 do.

Difference. It is not a wrong gradient. It needs a -webkit-gradient() target (Chrome 9 or older), and a release bun build cannot select one.

Take a standard angle that equals a side but is not written as 0deg, 90deg, 180deg or 270deg. In a single rule it gets no -webkit-gradient(), as on main. When the rule merges with a later rule, it now gets one:

cssInternals.prefixTest, targets { chrome: 8 << 16 }

.a{background-image:linear-gradient(-90deg, red, blue)}
  background-image: -webkit-linear-gradient(180deg, red, #00f);
  background-image: linear-gradient(-90deg, red, #00f);

.a{background-image:linear-gradient(-90deg, red, blue)} .a{color:red}
  background-image: -webkit-gradient(linear, 100% 0, 0 0, from(red), to(#00f));
  background-image: -webkit-linear-gradient(180deg, red, #00f);
  color: red;
  background-image: linear-gradient(-90deg, red, #00f);

merge_style_rules (src/css/rules/mod.rs:1129) minifies the merged declarations a second time. That pass reads the generated -webkit-linear-gradient(180deg, ...). from_standard converts it with to_other_syntax, which reduces the angle to 270deg, and the exact match succeeds. The first pass compares the unreduced -90deg. Output that is fed back in gives the same result as the merge.

Of 20 directions tried, 7 differ between the single rule and the merged rule: -90deg, -180deg, 360deg, 450deg, 540deg, 1turn, 90.0004deg. On main all 20 agree.

@mikamikasuki

### What does this PR do? Consolidates the open pull requests on the CSS parser (`src/css`: parsing, minifying, lowering, printing, CSS modules) into one. 179 open pull requests were in scope. Each was judged by one rule: **the output must mean to a browser what the input meant.** Every claim was run through a build of `main`, a build with the change, lightningcss 1.33 and Chromium 156 (CSSOM, computed values, painted pixels for colors and gradients), and counted against 10,116 real stylesheets: the published CSS of about 190 popular npm packages, plus stylesheets from open source repositories. 107 land here, whole or in part, most of them cut down. The source diff is net negative. Of the 10,116, 9,509 are stylesheets that someone ships. The rest are test fixtures of other tools (521), Tailwind v4 source that needs its plugin (59) and SCSS, PostCSS or template source (27). | 9,509 shipped stylesheets | `main` | this branch | |---|---|---| | fail to build | 71 | 35 | | ... of those, valid CSS that Bun rejects | | 0 | | minified output reads differently in Chromium than the input | 552 | 2 | | CSS modules with a name that is referenced but not defined, or exported but not defined | 166 | 0 | | all 10,116 | `main` | this branch | |---|---|---| | fail to build | 192 | 141 | | minified output reads differently in Chromium than the input | 593 | 15 | | build on `main`, fail here | | 0 | | right on `main`, wrong here (minified, and at the default targets) | | 0 | | size of the minified output, no targets | 162.32 MB | 162.47 MB (+0.093%) | | size of the output at the default targets | 224.1 MB | 210.2 MB (-6.2%) | A syntax error is a build error, with one exception: the IE star hack `*zoom: 1` is skipped, because tachyons and handsontable ship it. The 35 shipped stylesheets that fail are invalid CSS: 28 have a selector that Chromium drops (semantic-ui-css, swiper, @ionic/core, Adobe Spectrum, xp.css), 2 an `@import` after other rules, and one each `@supports not X and Y`, a nested `@keyframes`, a stray comma, a selector list in `::slotted()`, `@media screen\0` (govuk-frontend). The 2 that read differently fold a `color-mix()` inside a gradient (see the known gaps). The growth of the minified output is rules and declarations that `main` deleted by mistake: 87 KB of rules, 45 KB of prefixed declarations that only browser targets can rule out. #### Popular CSS that `main` breaks today - normalize.css, modern-normalize, sanitize.css: `font-family: monospace, monospace` is collapsed to `monospace`, which changes the font size from 16px to 13px (#46662). - CKEditor 5, Tabler, Carbon, VitePress, Ionic, PatternFly, Excalidraw: a rule of custom properties is deleted as a "duplicate" of a later rule with the same selector and other custom properties. 37 stylesheets lose 1,681 custom properties (#33684). - Material Components, daisyUI, DocSearch, plyr: a `var()` size loses to its own fallback (#42101). - nextra, daisyUI, CKEditor: declarations written after a nested rule are moved above it (#45462). - antd 4, purecss, govuk-frontend: browser hacks in selector lists start to apply everywhere (#42100). - foundation-sites, flatpickr, 98.css, blueprintjs, scalar, react-datepicker: the build fails on valid CSS (#46756, #38552, #38534). tachyons, handsontable: it fails on the IE star hack (#46751). - nodejs.org, Mantine: a CSS module exports classes that no rule defines, because the `@apply` or `@mixin` in them is moved out of the rule (#46759). - hint.css and 42 more: `z-index: 1000001` and `1000000` become the same number (#46715). - Adobe Spectrum: `--version: 5.0.1` prints as `5.1`. - A quarter of all stylesheets: minified output has a stray space in `align-items: center` (#41993). #### Behavior changes to look at first 1. **`light-dark()` is kept as written at the default browser targets** (#42009). The lowered form `var(--buncss-light, a) var(--buncss-dark, b)` is invalid unless a compiled `color-scheme` covers the element: 184 of the 215 real stylesheets that get it never define the variable, so every browser drops the declaration. The docs section on the polyfill is removed. 2. **`border` is not built from longhands** (#42072): `border-width:0;border-style:solid;border-color:red` stays three declarations, because `border` also resets `border-image`. 305 real stylesheets grow by 30 KB in total; `bootstrap.min.css` by 113 bytes, 5 gzipped. No real stylesheet was found where the old merge shows, so this is the one to drop if size matters more. 14 existing expectations change. 3. **A CSS module no longer exports names that only occur inside `:global(...)`** (#45487). 73 real modules lose 202 export keys, all of them names that no rule has. `import { g }` or `composes: g` of such a name becomes a build error. 4. **Container names and `@counter-style` names stay global in a CSS module** (#45247 by @mikamikasuki). `main` hashes the `@container` name but not `container-name`, so a named query never matches. postcss-modules (Vite, css-loader, Next.js) keeps them global; lightningcss and esbuild hash both. Global keeps a container that is queried from another file or from JS working. 5. **Syntax errors are build errors, also two that `main` lets through**: a media query that stops short (`@media screen and {`, `@media not {`, `@import "a.css" screen and;`) and `@media (width <) foo {`. No stylesheet of the 10,116 has either. A condition that is valid by the grammar though no browser knows it, `( ... )` or `fn( ... )`, is kept as written (#46756): `(min-width:0\0)`, `(not(hover))`. 6. **Declarations after a nested rule stay where they were written**, as a nested declarations rule (#45462). Changes the output of 199 real stylesheets; in a fuzz of 2,850 nested programs compared by computed style, `main` was wrong in 1,056 and the pull request's code, before it was trimmed here, in none. 7. **`Bun.color`**: `color()` inputs are converted instead of returned as a string (`Bun.color("color(srgb 1 0 0)", "hex")` was `"color(srgb 1 0 0)"`); `currentColor`, system colors and `light-dark()` give `null` in the converting formats instead of the keyword as a string; a relative color or `color-mix()` outside sRGB is clipped, not gamut-mapped (`hsl(from oklch(100% .399 336.3) h s l)` is `#ff5bff`, was `#fff`). 8. The `:-moz-any()` and `:-webkit-any()` copies of rules with `:is()` are gone at the default targets (#45945, #42029). The `:-webkit-any()` copy outranked the original rule: `.title{color:blue} :is(h1,h2,h3){color:red}` painted red. 5.8% of all default-target output was the `:-moz-any()` copies. 9. `Property` grows from 216 to 224 bytes: `Url` stores its text as a slice so that two `url()` values can be compared (#46895). The pull request packed a pointer and a `u32` behind `unsafe` to avoid that. #### Not in this PR, needs a decision - **Raise the default browser targets (#40369) and add a `cssTarget` option (#40368).** Today: Chrome 80, Edge 80, Firefox 78, Safari 14, Opera 67, and no public way to change them. At Vite 8's floor the output of the 9,924 stylesheets is 15.3% smaller (3.9% gzipped). About a dozen fixes here only matter at today's floor, and code for older targets is unreachable without the option. - Vendor prefixes for `user-select`, `appearance`, `hyphens` and five more (#45814): 1,116 real stylesheets lack a prefix they need at the default targets. And for `backdrop-filter` (#44648): 173. - Clip instead of gamut-map in the sRGB fallback of a plain wide-gamut color: deletes about 90 lines, changes every pinned fallback hex. If the mapping stays, #44647 by @oddharsh makes it closer to what browsers paint (colors off by 2/255 or more: 168 to 110 of 3,170 real ones). #### Changes **Rules: duplicates, merging, nesting, fallbacks** - The `:-moz-any()` copy of every rule with `:is()` or `:not(a, b)` is gone: Firefox 78 has `:is()` (#45945). 1,164 real stylesheets - Keep declarations written after a nested rule in place with a nested declarations rule (#45462). 379 real stylesheets - With nesting compiled away, an unknown at-rule inside a style rule was moved out of it: `.wrapper{@apply flex}` printed a bare `@apply flex;` and the rule was gone, so a CSS module exported a class that no rule defines. It now stays in a block under the compiled selector. 72 real modules with Tailwind's `@apply`, 25 with Mantine's `@mixin` (#46759). 316 real stylesheets - Keep !important in the rules generated for logical properties and color-scheme (#38597). 311 real stylesheets - With browser targets, remove an earlier duplicate rule only when its declaration block is equal (#46861). 171 real stylesheets - Compare custom property names in `PropertyId` equality and importance in duplicate-rule detection (#33684). 40 real stylesheets - Keep same-condition @supports rules and empty named @layer blocks (#46733). 31 real stylesheets - Keep target-added vendor prefix passes on cloned and re-minified rules, and never print a bare `:full-screen` (#43339). 12 real stylesheets - Keep the selectors on rules added for color fallbacks and logical properties (#43240). 3 real stylesheets - A later declaration of a property drops the `@supports` color copies of the earlier one, which printed after the rule and won (#45560). 2 real stylesheets - Do not merge style rules in a stylesheet that holds `revert-rule` (#46953). 1 real stylesheets - `@import ... supports(-webkit-mask: none)` kept its prefix (#38589) **Properties and shorthands** - Print align-items:center without a stray space when no safe/unsafe keyword is given (#41993). 3,317 real stylesheets - Emit the physical longhands instead of the inset shorthand for targets without it (#38583). 1,452 real stylesheets - Keep the stops of an upward gradient as written, and drop a `50%` hint only at the midpoint (#46790). 104 real stylesheets - Emit unparsed border-block-* declarations when compiling logical borders (#38582). 89 real stylesheets - Keep repeated font families and dedupe only the inserted system-ui fallbacks (#46662). 88 real stylesheets - A `width` / `height` / `min-*` / `max-*` with `var()` or `env()` was printed before the plain fallback written above it, so the fallback won (#42101). 26 real stylesheets - Keep box-orient and box-direction when flex-direction or flex-flow follows (#45672). 16 real stylesheets - Write held prefixed background declarations at every flush (#46882). 6 real stylesheets - Derive equality for Size2D and BorderRadius, and keep every prefix in the border-radius handler (#45665). 2 real stylesheets - Print `none` instead of an empty border-image, mask-border or mask-box-image value (#45143). 2 real stylesheets - Keep font/transition sub-properties on the side of the shorthand they were written on (#41990). 2 real stylesheets - CSS-wide keywords are not names: `font:12px Arial;font-family:inherit` printed `font:12px inherit`, `color-scheme:inherit` and `color-scheme:auto` printed `normal`, `transition-property:unset` was folded into `transition` (#42022). 2 real stylesheets - Only fold font longhands into `font` when the rule declared a `font` (#45459) - Keep a font family name quoted when its identifiers do not read back as the same name (#46606) - Stop rewriting valid positions into ones browsers reject (#45197) - `border` is no longer built from longhands unless the rule also sets what `border` resets (`border-image`), and an author's `border-image` reset is no longer dropped. `transition` is likewise only written where the rule wrote one, because it resets `transition-behavior` (#42072) - `border; border-image: <gradient>; border-image-slice: 1` lost the gradient in every default build (#42018) - A prefixed `linear-gradient` keeps its direction, written or generated: the prefixed syntax names the starting side and measures angles differently (#46697) **At-rules** - Print @font-face format() keywords as strings (#37979). 439 real stylesheets - Print @supports `not` conditions without a leading space (#38559). 88 real stylesheets - Reset after the number token of a unicode-range (#45835). 33 real stylesheets - Keep `<general-enclosed>` media and container conditions as written (#46756). 24 real stylesheets - A strict range such as `(width < 768px)` lowered for old targets still matched at exactly 768px. The step is now `.02px`. The `not all and` form for other units is not taken (#46806). 18 real stylesheets - Keep scanning an @supports condition after a nested block (#38552). 9 real stylesheets - Every `@counter-style name` printed as `@counter-stylename`, which browsers drop (also #46692). In a CSS module the name now stays global, like the `list-style` that refers to it (#33679). 9 real stylesheets - Keep a keyframe whose block has an invalid item (#46288). 2 real stylesheets - Read an @Property initial-value on the stylesheet's parser, keep an unmatched value as written (#45806). 2 real stylesheets - `@media {}` is `all`. A media query that stops after `and`, `or` or `not` (`@media screen and {`) is a build error; `main` printed `not all` or dropped the condition, silently. The `@layer` and type selector parts are not taken (#46869). 2 real stylesheets - Accept a name-only `@container` and a `style()` feature with no value (#46689). 1 real stylesheets - Parse `<timeline-range-name> <percentage>` keyframe selectors (#45652) - Allow `or` inside parentheses after a media type (#45088) - Print the `=` comparison in media and container queries as `=` (#45071) - Parse the @font-palette-values font-family descriptor as a list of family names (#45484) **Selectors** - Never wrap a selector list in :is() (#46787). 414 real stylesheets - Stop emitting :-webkit-any() copies of :is() that outrank the original rule (#42029). 373 real stylesheets - With browser targets, a selector list with a vendor-prefixed member was split, which revives hacks that rely on other engines dropping the whole list: `.s *::-ms-backdrop,.s{flex:auto}` applied everywhere. Rewritten; the list is printed as written (#42100). 42 real stylesheets - Print the vendor prefix on downleveled :any-link, :read-only, :read-write, :placeholder-shown and :autofill (#42131). 12 real stylesheets - Fix nesting lowering of a `&` that does not lead its selector (#43047). 8 real stylesheets - `@scope`: `&` and implicit selectors compile to `:where(:scope)`, relative selectors and bare declarations parse (#43165). 7 real stylesheets - Only reject bare :global / :local pseudo-classes in CSS modules (#38534). 5 real stylesheets - Stop truncating `@scope to (...)` and stop replacing `&` in the scope-end selector (#43146). 2 real stylesheets - `[xl|href$=".pdf"]` lost its namespace prefix (#45159). 2 real stylesheets - Match An+B keywords exactly and take only `+` as the leading sign (#42953). 1 real stylesheets - Parse ::details-content and ::picker() like ::part() (#45504). 1 real stylesheets - Parse :window-inactive as an ordinary pseudo-class, and accept it after ::selection (#45815) - Print :nth-col(1) and :nth-last-col(1) in functional form (#41575) - `li::before::marker` failed the build (#45810) - `&` inside `:nth-child(... of S)` is resolved when nesting is compiled away. The second selector serializer (326 lines) is deleted (#43024) **Colors and `Bun.color`** - Keep light-dark() as written under the default browser targets (#42009). 227 real stylesheets - Number and percentage channels parse in `lab()`, `lch()`, `oklab()`, `oklch()`, `hsl()` and `hwb()`; the hue of `lch` / `oklch` is no longer scaled by alpha (#45084). 130 real stylesheets - `Bun.color` returns `null` for `currentColor`, system colors and `light-dark()` in the converting formats, instead of the CSS keyword as a string (#33047). 130 real stylesheets - Relative colors: channel keywords are on the scale of their function (`rgb(from #369 calc(r + 10) g b)`), the origin's alpha is kept, a relative color kept as written gets no `@supports` copies, and a result outside sRGB is not folded (#45362). 31 real stylesheets - Keep rotate: 0deg out of none, and keep the origin alpha in relative colors (#38486). 13 real stylesheets - Compute the D50 reference white in f32 so greys convert to lab(l 0 0) like lightningcss (#38535). 7 real stylesheets - Return a missing hue for a grey from conversions into lch, oklch, hsl and hwb (#45201). 5 real stylesheets - Fix color(a98-rgb), srgb-linear relative colors and color-mix(in xyz-d50) (#38487). 4 real stylesheets - Match named colors without regard to ASCII case (#45092). 3 real stylesheets - Fold min(), max() and clamp() over plain numbers (#39515) - `calc(l - .08)` in a percentage channel of a relative color became NaN and printed `#000` (also #45970) (#45971) - Bun.color: convert color() inputs instead of returning them as a CSS string (#38488) - A `color-mix(in srgb, ...)` result outside sRGB prints `color(srgb ...)` instead of a gamut-mapped hex (#39269) **`calc()` and numbers** - Rounding to 6 significant digits ate into the integer part: `z-index:2147483647` became `2147480000`, `max-width:9999999px` became `10000000px`, `--x:1234567.5` became `1234570`. It now only cuts a fraction short: a value kept as tokens prints its source text, a typed value prints every integer digit and at least one digit of the fraction (#46715). 43 real stylesheets - A number without a unit is no longer repaired into `px` (`height:1.5715` is dropped by a standards-mode browser, so it prints as written), `calc(-1 * 0)` is not a length, and on a property of the range [0,∞] (sizes, border radii, padding, border and outline widths, gap, `flex-basis`, `font-size`) a `calc()` that folds below zero prints `0` instead of an invalid negative literal, and a negative literal no longer replaces the valid declaration before it (`width:10px;width:-5px` printed `width:-5px`) (#42104). 24 real stylesheets - Print numbers from the f32's shortest digits, not its f64 expansion (#38565). 17 real stylesheets - Print negative numbers below 1 with a single minus sign (#38516) - Keep math functions over two different length units as written (#38489) - Fold rem() with a truncated quotient, so it keeps the sign of the dividend (#32286) - A one-argument `min()` / `max()` around a sum printed without any function (`width:100% - 20px`) (#46145) - `round()` breaks ties upward and handles a negative step as browsers do (#45249) **CSS modules** - A CSS module exports its `@keyframes` names (`styles.spin`). Hashing is unchanged (#46720). 145 real stylesheets - A name inside `:global(...)` prints plain but was exported as `name_<hash>`, a class no rule has (also #38573) (#45487). 90 real stylesheets - Keep container names global in CSS modules (#45247). 6 real stylesheets - Tag the keyframes name when an `animation` value falls back to raw tokens (#46034). 6 real stylesheets - In a plain stylesheet `composes: a from "./b.css"` was treated as an import: the file was inlined and an absolute path printed (#45961). 4 real stylesheets - Drop a rejected composes instead of failing the file at print time (#38538). 1 real stylesheets - Keep every rule's custom properties for the composes conflict check (#38523) - Keep composes working after a nested rule in the same block (#38520) - `IdentOrRef::hash` read 2 of 16 bytes, so in release builds every class of a module hashed alike (#30784) **Tokens, `url()`, diagnostics** - The block skip stack no longer allocates on every block exit (#39533) - Report the diagnostic's line without its line breaks in position.lineText (#38342). 192 real stylesheets - Compare `url()` values by their text (#46895). 26 real stylesheets - Values kept as tokens keep the blanks they were written with instead of having them re-invented at print time: `attr(x type(<number>))` printed `type(< number> )`, which browsers drop. Minified output still drops the blanks that cannot matter (#45577). 19 real stylesheets - The IE star hack (`*zoom:1`) failed the whole build. The declaration is skipped, as every browser does. It is the one syntax error that builds: tachyons, handsontable and jasmine ship it (#46751). 8 real stylesheets - The path of a copied asset spliced into `url()` is always quoted, so a file name with a space or a parenthesis cannot end the `url()` (#41557). 7 real stylesheets - Move the skip loop of parse_until_before out of the generic body (#39520) - Remove dead code from bun_css: the unused `impl Default for Property` (#45618) - Default the at-rule and qualified-rule parser traits, drop the url_to_css shim (#31999) **Speed** Four inputs that took quadratic or exponential time, or produced output out of proportion, are now linear, with no new limit and no extra pass (#31639, #42243, #38531, #43421). **Tests only** - `css-fuzz.test.ts` never ran in CI and timed out on debug builds; it is a deterministic table now (#38500) - `nth-anplusb-ident.test.ts` counts heaps in a child process (#46331) - `color.test.ts` checks the ansi-16 sweep with one `expect()` (#42824) - Not CSS, but it failed this PR's CI and fails on `main` too: `ws-proxy.test.ts` on Windows, "a message sent during a TLS renegotiation arrives after it". The helper server now renegotiates from the callback of the frame's write (#46170) **No pull request covered these** - `--v: 5.0.1` printed as `5.1`, `--w: 1.0.0` as `10`, `--x: 1+2` as `12`, `2n+1` as `2n1`: a number token that touches another keeps its source text. - `color-scheme: auto` printed as `normal`, and `color-scheme: dark light` as `light dark`. - A bare `:global` or `:local` in a CSS module sets the scope of the names after it, up to the end of the selector, as in css-loader. It was a build error. - The scrollbar states (`a:horizontal`, `::-webkit-scrollbar{&:horizontal{}}`) are valid in a plain compound, as in WebKit and Blink. - Without browser targets, `-webkit-box-align`, `-ms-flex-align` and the like were dropped next to their standard form (flatpickr, foundation-sites, materialize-css: 28 stylesheets), and `-webkit-fill-available` before `-moz-available` (beercss). - `(-o-min-device-pixel-ratio: 2/1)` printed as `2`. - `sin()`, `cos()` and `tan()` are exact at multiples of 90deg: `calc(100px * cos(90deg))` printed `-.00000437114px`. - A `display-p3` color at targets that have P3 but not the other `color()` spaces (Safari 10.1 to 14) got itself as a fallback. - `width: rem(-18px, 5px)` folds to a negative literal once `rem()` is right; it prints `0`. - Consecutive nested declarations rules, which arise when same-query `@media` blocks in one rule merge, are folded into one and count against the existing selector expansion limit as the `&{}` rules they replace did. #### Known and not fixed here - Four longhands are still folded into a `transition` the author did not write where the targets add a prefixed copy of a property (`mask-image` at Chrome 80): only the shorthand gives the copy its own times. - A later `background`, `box-shadow` or `border-*` declaration still loses to the `@supports` copy of an earlier `var()` value of the same property with a wide-gamut color. Same on `main`; #45560 is taken for the properties of the fallback handler and for unparsed values only. - A merged rule prints the unprefixed name in the passes of the rule it absorbed: `.d::-webkit-input-placeholder{}.d::-moz-placeholder{}` prints `::placeholder` for the second (#42106, not taken: it breaks the merge of prefix-equivalent rules). - The `border`, `outline` and `font` shorthands, `line-height`, `scroll-padding`, `background-size` and a few more still print a `calc()` that folds below zero as a negative literal. No real stylesheet has one. - `all` is not a property Bun knows, so `a{margin-top:1px;all:unset}` prints `all` first. Same on `main`. - A selector kept as raw tokens loses the blank before `*` when minified: `--sel: .dark *` prints `.dark*`. Same on `main`. - `width:calc(0% + 12px)` folds to `12px`, which lays out differently in a table cell. Same on `main`. - The `:dir()` / `:lang()` rules of a lowered logical property print before the nested rules of their rule, so a logical declaration written after a nested rule of equal specificity still loses to it. Same on `main`. - A fraction is still rounded to 6 significant digits (`12345.678` prints `12345.7`, `33.3333333333%` prints `33.3333%`). Keeping every digit would add up to 282 KB over the corpus. - `@keyframes "quoted"` is hashed in a module but not exported. - In a module, a keyframes name inside a `var()` fallback is not hashed: `animation: var(--enter, fade 1s)`. Same on `main`. - A `color-mix()` or relative color folded to a hex inside a gradient changes the interpolation from Oklab to sRGB (VS Code, clawhub). Printing `color(srgb ..)` instead needs a fallback for `mask-image`, `list-style-image` and custom properties at the default targets, which have none. - A comma list in `@container` still fails the build. - After a bare `:global`, names that are hashed at print time (`::view-transition-old(foo)`) are still hashed; inside `:global(...)` they are not. #### Pull requests in scope that do not land here - Duplicates of a pull request that lands here: #36961 (of #37979), #38478 (of #46662), #38480 (of #46733), #38482 (of #46715), #38491 (of #38500), #38508 (of #45201), #38513 (of #45362), #38573 (of #45487), #38640 (of #38500), #45525 (of #45247), #45589 (of #46756), #45970 (of #45971) - Already fixed on `main`: #38674 - Right, but for input nobody writes (0 of 10,116 stylesheets, and not new syntax): #31916, #38526, #38592, #39349, #41139, #41801, #42042, #42484, #43078, #45604, #45908, #46086, #46221, #46224, #46273, #46694, #46707, #46737, #46755, #46816, #46870, #46934 - Right or harmless, but not worth their code, their bigger output or the behavior they change: #30905, #31924, #33332, #34426, #36225, #38006, #38512, #38547, #38551, #38561, #38572, #38576, #38607, #38623, #38667, #38692, #42106, #42912, #42918, #43407, #43434, #44700, #45442, #45546, #45747, #45759, #45825, #45946, #46061, #46127, #46206 - Need a decision (see above), stay open: #40368, #40369, #44647, #44648, #45814 - Stays open: #45787 Out of scope: CSS linking and chunking in the bundler, the dev server, docs-only pull requests, and repository-wide sweeps that touch `src/css` in passing. Thanks to @mikamikasuki (#45247), @alii (#39520, #31999) and @oddharsh, whose measurements on #40369 and #41990 were used. Fixes #16727. Fixes #24770. Fixes #30772. Fixes #44704. Fixes #45089. Fixes #45237. Fixes #46872. ### How did you verify your code works? - The 35 CSS test files pass on a debug build, also with `FORCE_COLOR=1`. 600+ of the tests in this branch fail on a build of `main`. An earlier head of this branch passed all 179 CI jobs that ran. - The reproduction of each issue listed above was run on `main` (wrong) and on this branch (right). - Differential run over the 10,116 stylesheets, `main` against this branch, minified without targets and through `Bun.build` at the default targets: no stylesheet that builds on `main` fails; Chromium 156 compares the output with the input rule by rule (CSSOM, then computed values on a sized element in a standards-mode document, colors as painted pixels in sRGB and P3). The comparison has 195 control pairs that must read equal or different. For stylesheets that read differently on both builds, mostly because of lowering, the sets of differences were compared; the three new ones are two minifier fixtures that are wrong on both and one comparison artifact. - CSS modules are checked for consistency instead, since hashed names defeat the comparison: every reference points at a name the output defines, every export exists. - `Bun.color`: 59 inputs in 13 formats on both builds; every changed cell was read.

Jarred-Sumner · 2026-10-27T19:55:37Z

Part of this landed in #47025 (7942008). Its description says what was taken.

A prefixed linear-gradient keeps its direction, written or generated: the prefixed syntax names the starting side and measures angles differently

robobun · 2026-10-27T20:55:36Z

Thanks. I compared main at 7942008 with this branch, on a debug build of main.

The report is fixed on main:

bun build --minify prints -webkit-linear-gradient(top,red,blue) as -webkit-linear-gradient(red,#00f). It keeps bottom, and it keeps left as a keyword.
Four of the five sites of this PR landed: the parse default, both printers and the generated copy.

Two parts did not land. I do not plan a new PR for them:

WebKitGradient::from_standard still reads a prefixed direction by the standard rules. Only a target such as Chrome 9 or Safari 6 reaches it, and no release build can select one. One case is new with the top default: for such a target, -webkit-linear-gradient(red, blue) now gets -webkit-gradient(linear, 0 100%, 0 0, ...), which runs from the bottom to the top. Before, that case printed 0 0, 0 100%. It matters only if a cssTarget option (Bun.build: add cssTarget option to set CSS browser targets #40368) lands.
A generated angle is not rounded. The copy of linear-gradient(89.9deg, ...) prints .0999985deg. The direction is correct.

robobun assigned Jarred-Sumner Oct 24, 2026

github-actions Bot added the claude label Oct 24, 2026

claude Bot reviewed Oct 24, 2026

View reviewed changes

Comment thread test/js/bun/css/css.test.ts Resolved

Comment thread src/css/values/gradient.rs Resolved

robobun mentioned this pull request Oct 24, 2026

css: print the space after @counter-style, and hash the counter style name in list-style in CSS modules #46692

Closed