[robobun]

Problem

• bun build prints .a{width:100px;width:var(--w)} as .a{width:var(--w);width:100px}, so 100px wins in every browser. Same for inherit and calc-size(), on all 12 size properties, with or without --minify.
• Cause: SizeHandler (src/css/properties/size.rs) pushes a Property::Unparsed size while earlier sizes are still buffered. lightningcss added the flush in parcel-bundler/lightningcss@22a8b6f. Bun's port predates it.
• color, text-shadow and the logical corner radii overwrite the earlier declaration instead: .a{color:red;color:contrast-color(blue)} prints .a{color:contrast-color(blue)}.

Fix

• SizeHandler flushes its buffer before an unparsed size.
• FallbackHandler appends an unparsed color/text-shadow, and BorderRadiusHandler flushes a buffered logical corner first. A later parsed value still replaces an earlier one.
• Verified: test/js/bun/css/css.test.ts, block a value that does not parse keeps the declaration before it. It checks all 223 typed properties. 20 of 24 tests fail on 1.4.2 and main.

Background

• Each declaration block goes through per-family handlers that buffer values to merge them, and write them on flush.
• A value the typed parser rejects (var(), a CSS-wide keyword, an unknown function) stays Property::Unparsed. A browser can drop it, so the declaration before it must stay.
• Considered keeping the overwrite for color when the later value holds var(). Every other handler keeps both.

Downsides

• color:red;color:var(--c) now keeps color:red (10 bytes), dead in browsers that support var().
• A size written again after an unparsed size no longer merges with the first one.
• Measured on the 15 stylesheets in test/js/bun/css/files: 2,732,962 bytes before and after, gzip -9 is 3 bytes smaller.

Notes

• Upstream: Duplicate CSS properties are removed or output in the wrong order parcel-bundler/lightningcss#547 reports both faces. Commit 22a8b6f (2024-11-03) fixed the size order with the same one-line flush. The color half still reproduces on lightningcss 1.30.2 (color:red;color:foo(bar) prints color:foo(bar)). Bun's CSS port landed on 2024-09-26.
• Reproduced on 1.4.2 and on a build of main (367d939d9): width, height, min-*, max-*, block-size, inline-size and their min-/max- forms are reordered when the later value is var(), env(), inherit, calc-size(), anchor-size() or anything else kept as raw tokens. color, text-shadow and border-{start,end}-{start,end}-radius lose the earlier declaration.
• Sweep: for each of the 223 typed properties, a{p:<parsed>;p:<unparsed>} with var(--x), inherit and banana(1) as the unparsed value (665 pairs). 54 pairs print wrong without this change (36 reordered sizes, 18 dropped fallbacks), 0 with it. The sweep is the last test of the block. The typed parsers of color-scheme, font-family, transition and transition-property accept inherit as an identifier, so the sweep leaves that pair out for them. color-scheme:inherit prints color-scheme:normal with and without this change (css: keep css-wide keywords and percentage stretch out of the font and transition shorthands #42022 covers that parser).
• Size numbers are from two debug builds of the same commit, with and without the three src/ files. 13 of the 15 minified stylesheets are byte-identical. materialize (5 rules) and pico (3 rules) change declaration order only, for example nav{...;height:var(--navbar-height-mobile);...;width:100%} now keeps width:100% where it was written.
• color:red;color:var(--c) and color:red;color:inherit now keep red, as every other handler already does (font-weight:700;font-weight:var(--x)).
• The Tailwind v4 'rounded-full' has wrong value after bundle with bun #18064 row in css.test.ts changes order only: height: infinity is unparsed, so width now flushes before it.
• Related, with a different mechanism: css: keep font/transition sub-properties on the side of the shorthand they were written on #41990 (font/transition shorthand moved after longhands it resets) and css: make the all shorthand reset the declarations before it #42042 (all).
• css: treat out-of-range and unit-less numeric values as invalid instead of merging or repairing them #42104 builds on this branch. It adds range and unit checks so that width:-5px, font-weight:1001, calc(0) as a length and translate(10) are treated as invalid. It is a separate PR because it makes the parser stricter than lightningcss on purpose.

---

[human-review] gate passed · iteration 0 · 4 files touched

fails on main (without fix)

ASAN without fix: 21 failed, 69 skipped
$ BUN_DEBUG_QUIET_LOGS=1 bun scripts/build.ts --profile=debug --quiet test "--reporter=junit" "--reporter-outfile=/tmp/pr_gate.xml" test/js/bun/css/css.test.ts
bun test v1.4.4 (367d939d9)

test/js/bun/css/css.test.ts:
Output .flexrow {
  flex-direction: row;
}

.flexcol {
  flex-direction: column;
}

.hello {
  flex-wrap: wrap;
}

.world {
  flex-wrap: nowrap;
}

(pass) css tests > .flexrow {
	flex-direction: row;
}

.flexcol {
	flex-direction: column;
}

.hello {
	flex-wrap: wrap;
}

.world {
	flex-wrap: nowrap;
} [17.74ms]
Output .foo {
  content: "+";
}

(pass) css tests > .foo {
  content: "\2b";
} [1.97ms]
Output div {
  --foo: 1 1 1 #0101011a, 2 2 2 #02020233;
  --bar: 1 1 1 #01010116, 2 2 2 #02020233;
}

(pass) css tests > custom property cases > div {
        --foo: 1 1 1 rgba(1, 1, 1, 0.1), 2 2 2 rgba(2, 2, 2, 0.2);
        --bar: 1 1 1 #01010116, 2 2 2 #02020233;
      } [2.68ms]
Output :root {
  --my-color: red;
  --my-bg: white;
  --my-font-size: 16px;
}

.element {
  color: var(--my-color);
  background-color: var(--my-bg);
  font-size: var(--my-font-size);
}

(pass) css tests > custom property cases > :root {
        --my-color: red;
        --my-bg: w
... (truncated)

release without fix: 21 failed, 69 skipped
bun test v1.4.3-canary.1 (367d939d9)

test/js/bun/css/css.test.ts:
Output .flexrow {
  flex-direction: row;
}

.flexcol {
  flex-direction: column;
}

.hello {
  flex-wrap: wrap;
}

.world {
  flex-wrap: nowrap;
}

(pass) css tests > .flexrow {
	flex-direction: row;
}

.flexcol {
	flex-direction: column;
}

.hello {
	flex-wrap: wrap;
}

.world {
	flex-wrap: nowrap;
} [0.51ms]
Output .foo {
  content: "+";
}

(pass) css tests > .foo {
  content: "\2b";
} [0.15ms]
Output div {
  --foo: 1 1 1 #0101011a, 2 2 2 #02020233;
  --bar: 1 1 1 #01010116, 2 2 2 #02020233;
}

(pass) css tests > custom property cases > div {
        --foo: 1 1 1 rgba(1, 1, 1, 0.1), 2 2 2 rgba(2, 2, 2, 0.2);
        --bar: 1 1 1 #01010116, 2 2 2 #02020233;
      } [0.15ms]
Output :root {
  --my-color: red;
  --my-bg: white;
  --my-font-size: 16px;
}

.element {
  color: var(--my-color);
  background-color: var(--my-bg);
  font-size: var(--my-font-size);
}

(pass) css tests > custom property cases > :root {
        --my-color: red;
        --my-bg: white;
        --my-font-size: 16px;
      }
      .element {
        color: var(--my-color);
        background-color: var(--my-bg);
        font-size: 
... (truncated)

passes on PR (with fix)

ASAN with fix: 69 skipped
$ BUN_DEBUG_QUIET_LOGS=1 bun scripts/build.ts --profile=debug --quiet test "--reporter=junit" "--reporter-outfile=/tmp/pr_gate.xml" test/js/bun/css/css.test.ts
bun test v1.4.4 (367d939d9)

test/js/bun/css/css.test.ts:
Output .flexrow {
  flex-direction: row;
}

.flexcol {
  flex-direction: column;
}

.hello {
  flex-wrap: wrap;
}

.world {
  flex-wrap: nowrap;
}

(pass) css tests > .flexrow {
	flex-direction: row;
}

.flexcol {
	flex-direction: column;
}

.hello {
	flex-wrap: wrap;
}

.world {
	flex-wrap: nowrap;
} [8.48ms]
Output .foo {
  content: "+";
}

(pass) css tests > .foo {
  content: "\2b";
} [3.53ms]
Output div {
  --foo: 1 1 1 #0101011a, 2 2 2 #02020233;
  --bar: 1 1 1 #01010116, 2 2 2 #02020233;
}

(pass) css tests > custom property cases > div {
        --foo: 1 1 1 rgba(1, 1, 1, 0.1), 2 2 2 rgba(2, 2, 2, 0.2);
        --bar: 1 1 1 #01010116, 2 2 2 #02020233;
      } [23.90ms]
Output :root {
  --my-color: red;
  --my-bg: white;
  --my-font-size: 16px;
}

.element {
  color: var(--my-color);
  background-color: var(--my-bg);
  font-size: var(--my-font-size);
}

(pass) css tests > custom property cases > :root {
        --my-color: red;
        --my-bg: w
... (truncated)

release with fix: 69 skipped
$ bun scripts/build.ts --profile=release
[configured] bun-profile → bun (stripped)
  target       linux-x64-gnu
  build type   Release
  build dir    ./build/release
  revision     a1e16bd132
  features     lto, baseline

23 deps, 136 codegen, 1176 objects in 1986ms

ninja: Entering directory `/workspace/bun/build/release'
[1/4] fetch lolhtml
[lolhtml] up to date
[2/4] fetch rust-argon2
[rust-argon2] up to date
[2/4] cargo plan → /workspace/bun/build/release/rust-target/plan.json
247 units: 175 lib, 16 proc-macro (host), 19 custom-build (host), 15 run custom-build, 17 lib (host), 4 run custom-build (host), 1 rlib
[3/4] reconfigure
[1/1502] mkdir stamps
[2/1502] mkdir codegen
[3/1502] gen bake.{client,server,error}.js
-> bake.client.js, bake.server.js, bake.error.js
[4/1502] gen string-map defines_table
[5/1502] gen ErrorCode+*.h
[6/1502] install /workspace/bun
bun install v1.4.3-canary.1 (367d939d9)

Checked 26 installs across 65 packages (no changes) [1.84s]
[7/1502] install /workspace/bun/packages/bun-error
bun install v1.4.3-canary.1 (367d939d9)

Checked 1 install across 2 packages (no changes) [41.00ms]
[8/1502] rustc unicode_xid 
[9/1502] rustc unicode_iden
... (truncated)

diff hotspot

src/css/properties/border_radius.rs  |   8 +-
 src/css/properties/prefix_handler.rs |   9 +-
 src/css/properties/size.rs           |   2 +
 test/js/bun/css/css.test.ts          | 156 ++++++++++++++++++++++++++++++++++-
 4 files changed, 166 insertions(+), 9 deletions(-)

gate history · 2 passed · 0 rejected · iteration 0

evidence per changed file

file                                  reads  edits  tests
src/css/properties/border_radius.rs       1      1     51
src/css/properties/prefix_handler.rs      1      1     51
src/css/properties/size.rs                5      4     50
test/js/bun/css/css.test.ts               8     10     48

[robobun]

^{Updated 7:27 PM PT - Oct 10th, 2026}

✅ @robobun, your commit a1e16bd132fd3c517a0626972b75e81ea6e25ccc passed in Build #124416! 🎉

---

🧪   To try this PR locally:

bunx bun-pr 42101

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

bun-42101 --bun

[robobun]

Reproduced on Bun 1.4.2 and on a build of main (367d939d9) with bun build, with and without --minify:

• .a{width:100px;width:var(--w)} prints .a{width:var(--w);width:100px}. The same happens for inherit, calc-size() and anchor-size(), and for height and the min-/max- forms.
• .a{color:red;color:contrast-color(blue)} prints .a{color:contrast-color(blue)}.

The css.test.ts block a value that does not parse keeps the declaration before it fails there (20 of 24 tests) and passes with this branch. The branch is merged with current main.

#42104 builds on this branch.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository: oven-sh/bun/.coderabbit.yaml
• Review profile: ASSERTIVE
• Plan: Essentials
• Run ID: 047c9456-1780-4d12-93dd-d2f77c02b0bd

---

---

---

📥 Commits

Reviewing files that changed from the base of the PR and between 898c856 and a1e16bd.

---

---

---

📒 Files selected for processing (1)

• 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; 6 remain after this review.

---

---

---

---

Walkthrough

CSS property handlers now preserve earlier declarations when later values are unparsed. Size and logical border-radius handlers flush pending state before emitting unparsed declarations. Tests cover declaration ordering, replacement, and prefixing.

Changes

CSS declaration ordering

Layer / File(s)	Summary
Preserve unparsed declaration order src/css/properties/prefix_handler.rs, src/css/properties/size.rs, src/css/properties/border_radius.rs	Unparsed declarations are appended without replacing earlier declarations. Size and logical border-radius handlers flush pending state before emitting unparsed properties.
Validate minifier and prefixer ordering test/js/bun/css/css.test.ts	Tests cover parsed declarations followed by invalid or unparsed values, replacement by later valid values, logical and physical border-radius values, and Safari inline-size prefixing.

Priority: ➖ Normal

Merge Risk: ⚪ Minimal · up to a1e16

The change preserves earlier CSS declarations when later values are unparsed, and the remaining logical-corner ordering difference does not alter rendered styles. No material merge risk remains beyond normal checks.

Pre-merge checks | 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
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.
Title check		The title clearly summarizes the main CSS declaration-order fix and identifies the affected properties.
Description check		The description is detailed and covers the problem, fix, verification results, scope, and tradeoffs. It uses different headings from the template but includes the required information.

---

---

_{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.

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

• 🟣 src/css/properties/border_radius.rs — Pre-existing, same bug class this PR fixes for size/color: logical_property_helper! overwrites the buffered slot without flushing when an unparsed logical corner follows a parsed one, so .a{border-start-start-radius:1px;border-start-start-radius:var(--r)} still drops the 1px fallback (all four border-{start,end}-{start,end}-radius are affected; physical corners already flush at line 407). Fix: guard the overwrite the way margin_padding.rs:808 does — flush when the slot is already Some and the incoming value is Property::Unparsed, so the parsed fallback is emitted before the unparsed one.

  Extended reasoning...

  BorderRadiusHandler::handle_property routes an Unparsed whose property_id is BorderStartStartRadius (etc.) into logical_property_helper! (border_radius.rs:370-404). That macro (lines 211-222) only flushes on a category change, then does $self.$prop = Some($val), overwriting whatever was buffered. So border-start-start-radius: 1px buffers start_start = Some(BorderStartStartRadius(1px)); the following border-start-start-radius: var(--r) buffers start_start = Some(Unparsed(...)), discarding 1px; flush then emits only var(--r). Browsers that resolve --r to something invalid (or leave it undefined) get unset instead of the authored 1px fallback — identical user-visible failure to the size/color cases this PR fixes. The sibling margin_padding.rs handler already guards this exact case at line 808 (self.logical_slot_is_some(field) && matches!(val, Property::Unparsed(_)) → flush), and REVIEW.md asks for the whole class to be fixed in one PR. Base behaves the same (pre-existing); reporting because the PR is a partial fix for this class and its test block…

  Verification: pre-existing — the trace holds. In /home/claude/bun/src/css/properties/border_radius.rs, logical_property_helper! (lines 211-222) only flushes on a category change (if $self.category != PropertyCategory::Logical), then unconditionally does $self.$prop = Some($val) at line 219. A parsed Property::BorderStartStartRadius(1px) (lines 297-305) buffers into start_start and sets `category =…

[robobun]

The logical corner radii had the same overwrite, confirmed: .a{border-start-start-radius:1px;border-start-start-radius:var(--r)} printed only the var(). 6ce4700 makes BorderRadiusHandler flush a buffered logical corner before an unparsed one (the guard the margin/padding/inset handler already has) and adds rows for it to the same test block.

[claude]

LGTM — the border-radius follow-up and comment trims look good.

Traced FallbackHandler's append-not-replace against color:red;color:banana;color:blue and color:banana;color:red — the index update to dest.len() lets a later parsed value overwrite the unparsed slot, so both dedup directions still work. The size.rs flush calls sit before flushed_properties.insert, so buffered physical/logical sizes emit ahead of the unparsed value without double-emission. The .rounded-full snapshot reorder is a real consequence of flushing width before the unparsed height:infinity, not a loosened assertion. The border_radius.rs $val → local val binding avoids double-evaluating the macro argument now that it's read twice.

Extended reasoning...

Overview

This PR fixes CSS-minifier declaration-ordering bugs across three property handlers. SizeHandler (src/css/properties/size.rs) now flushes buffered width/height/min-/max- before emitting an unparsed size, in both the physical match arm and logical_unparsed_helper!. FallbackHandler (src/css/properties/prefix_handler.rs) now appends an unparsed color/text-shadow and updates the tracked index to the new slot, instead of overwriting dest[i]. BorderRadiusHandler's logical_property_helper! (src/css/properties/border_radius.rs) now flushes when the target logical-corner slot is already occupied and the incoming value is Property::Unparsed, mirroring what the margin/padding/inset handler already does. Eighteen new minify_test/prefix_test rows in test/js/bun/css/css.test.ts cover color, text-shadow, six size properties, and both logical and physical border-radius corners, plus one existing snapshot whose property order changes as a direct result of the size flush.

Security risks

None. This is output-ordering logic in the CSS minifier operating on already-parsed declaration lists. No untrusted-length arithmetic, no allocation sizing from external input, no filesystem or network access, no auth/crypto surfaces. The worst failure mode is a suboptimal or reordered stylesheet.

Level of scrutiny

Moderate — the semantics ("browsers drop a declaration they cannot parse, so the earlier one is the fallback") are subtle, but the fix is mechanical: two flush() insertions, one replace→append, and one extra flush condition. I hand-traced the FallbackHandler change through the sequences the tests assert (red;banana, red;banana;blue, banana;red, red;var(--c), var(--c);red) and the index bookkeeping produces the expected output in each, including the dedup-from-behind case where a later parsed value overwrites the unparsed slot at the recorded index. The border_radius.rs change correctly binds $val to a local before the two uses, avoiding double evaluation of the macro argument. The .rounded-full snapshot change was checked against the input: height: infinity is unparsed (bare infinity outside calc()), so the new flush emits the buffered width first — the new order is source-order-preserving, not a weakened assertion.

Other factors

Since the earlier review on this PR, two commits landed: one adding the logical border-radius fix (bringing that handler in line with the size and margin handlers — "fix the whole class") and one shortening the two added comments to single lines per the repo convention. The inline bot threads at those lines are plausibly addressed by that commit. No CODEOWNERS entry covers src/css/. The PR cites parcel-bundler/lightningcss#547 as the upstream reference for the size-handler flush, satisfying the "reference implementation is the spec" rule for ported code. Test coverage spans the variant matrix (physical + logical, parsed-before-unparsed and unparsed-before-parsed, var()/env()/unknown-function/invalid-keyword) and lives in the existing test file alongside related coverage.

[claude]

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

LGTM — the three handler changes converge on the flush-before-unparsed shape every other property handler in src/css/properties already uses, and the generated matrix test exercises all of them through the real minifier output.

Extended reasoning...

The Rust side is four lines: SizeHandler flushes its buffer before emitting an unparsed size (physical arm and logical_unparsed_helper!, matching lightningcss#547), FallbackHandler appends an unparsed color/text-shadow instead of overwriting the recorded slot (the index field is still read by the parsed branch at prefix_handler.rs:57, so a later parsed value still replaces it), and the logical border-radius macro flushes a buffered corner before an unparsed one, copying the existing margin_padding.rs:808 pattern. I grepped the Unparsed arms of background, box_shadow, align, font, flex, transform, transition, border and border_image — all already flush first, so size.rs was the only outlier and the bug class is covered. The matrix test is live: minifyTestWithOptions in src/css_jsc/css_internals.rs returns the minified code, which is compared against the sources. The .rounded-full expectation change is a genuine consequence (width is now flushed ahead of the unparsed height; border-radius stays buffered in its own handler). No security-sensitive surface, no CODEOWNERS entry for src/css, and the single inline finding is a pre-existing comment-accuracy nit on the color-scheme exclusion.

[claude]

Code review found no issues

No high-confidence issues detected in this change.

[Jarred-Sumner]

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

A width / height / min-* / max-* with var() or env() was printed before the plain fallback written above it, so the fallback won. 26 real stylesheets

[robobun]

I checked main at 7942008 against the tests of this PR and against real CSS.

• On main: the size part. A width, height, min-* or max-* value with var(), env(), inherit, calc-size() or anchor-size() now stays after the fallback above it.
• Not on main: color, text-shadow and the four logical border-*-radius longhands. A value that does not parse still replaces the parsed declaration before it. a{color:red;color:banana} prints a{color:banana}.
• Chrome 153 computes the same style from source and output for 678 of the 688 rows of this PR's test block. On 1.4.2 it is 645. The 10 rows that remain are the three properties above.
• I found no real stylesheet where that remainder shows. 6,778 stylesheets from 324 npm packages have 368 distinct pairs of color or text-shadow declarations in one block. In 353 the later value has var() or env(), which every default target reads. In none of the other 15 does a value that Bun cannot parse follow a valid one.
• For all properties, the same stylesheets have 2,925 distinct cases of one property declared more than once in a block. On 1.4.2, Chrome computes a different style from the output for 58 of them (57 are sizes with var() or env()). On main, for none.

Nothing more from my side on this one.

[robobun]

Correction to my comment above. The color part does show in real CSS outside that npm corpus:

• TRezendes/pride_palette pride-palette.css writes color: #000000; color: contrast-color(#ff69b4) in 232 rules. Main prints none of the 232 fallbacks.
• GoogleChrome/lighthouse viewer.css writes color: #0000ee; color: -webkit-link. Main prints only color:-webkit-link.
• @csstools/postcss-contrast-color-function prints color: rgb(0, 0, 0); color: contrast-color(...). Main prints that pair without the first declaration.

#47284 carries the color and text-shadow part with a narrower rule than this PR had. A value with var() or env() still replaces the earlier declaration, so the 353 pairs counted above do not change.