[robobun]

Blocked on #38489 and #32286. Without them round(16px, 1em) folds to 16px and rem(-7px, 3px) to 2px.

Problem

• text-shadow reads its lengths with LengthValue::parse (src/css/properties/text.rs:6), which has no math arm: a value with calc() stays a token list.
• No fold or target check runs: text-shadow: 15px 0 red; text-shadow: round(1em, 5px) 0 red builds to the round() line alone, for targets without round().

Fix

• The four lengths are Length values (a literal or a calc() tree), read with Length::parse_with_range (new, the lightningcss name).
• Blur and spread are non-negative: math below zero becomes 0, and a negative literal leaves the declaration as written.
• Verified: test/js/bun/css/css.test.ts, block text-shadow (25 of 40 rows fail on main). Self-reviewed: 28 concerns raised, 27 addressed.

Background

• FallbackHandler keeps an earlier text-shadow only if the later one is typed and a target lacks it. css: keep an unparsed width/height/color after the declarations written before it #42101 keeps it for every unparsed value. This PR adds the folds and the target check.
• Considered a swap to Length::parse: it prints a calc(1px - 6px) blur as -5px, which browsers reject.

Downsides

• A plain text-shadow costs more: 3,246 instructions for 1px 1px 2px red (was 2,863), 88 bytes per TextShadow (was 56), 2,048 bytes of .text.
• Two wrong folds of box-shadow and lightningcss main apply here (css: fold one-argument hypot() to the absolute value of its argument #38639, css: fold round() by choosing between the lower and upper multiple of |B| #45249): hypot(-3px) prints -3px. Main prints them as written.
• text-shadow: 1px 1px red; text-shadow: 0 0 -5px lab(40% 56.6 39) loses its first line until css: keep an unparsed width/height/color after the declarations written before it #42101 lands.

Notes

Reproduce

printf '.d { text-shadow: 15px 0 red; text-shadow: round(1em, 5px) 0 red }\n.e { box-shadow: 15px 0 red; box-shadow: round(1em, 5px) 0 red }\n.f { text-shadow: calc(1px + 2px) 0 0 red }\n' > in.css
bun build ./in.css --outdir out && cat out/in.css

• main: .d has the round() line only, .e has both lines, .f prints calc(1px + 2px) 0 0 red.
• this PR: .d has both lines, .f prints 3px 0 red.

What Length::parse_with_range does

slot	range	negative literal	math that resolves below zero (or to NaN)
x, y	All	typed	typed
blur, spread	NonNegative	error, the declaration prints as written	0

• In every slot, math that resolves to a number (calc(1 + 2), sign(-2px)) is an error, so the declaration prints as written. So is the bare sum or product that a one-argument min(), max() or hypot() leaves behind, because it prints without calc() (min(1em + 2px) as 1em + 2px, css: wrap a one-argument min()/max() sum or product in calc() #38654). Other math is typed and printed as math.
• It tries the literal before the math function. Length::parse tries math first. The two start with different tokens, so the result is the same.
• Length::parse and its callers do not change. box-shadow still prints 0 0 calc(1px - 6px) red as 0 0 -5px red. css: treat out-of-range and unit-less numeric values as invalid instead of merging or repairing them #42104 owns the range check for the other properties, and the two PRs touch the same lines of text.rs.
• The spread is read only when the blur was read. A length that is not a blur is not a spread.

References

• css-text-decor-4, text-shadow: "Negative spread values are invalid." css-values-4: a math function is range-checked after it is resolved, and NaN does not escape a top-level calculation ("it's censored into a zero value", https://drafts.csswg.org/css-values-4/#calc-ieee).
• Chrome 153, computed text-shadow: calc(NaN * 1px) 0 red and rem(1px, 0px) 0 red are 0px 0px 0px. 0 0 calc(1px - 6px) red has a blur of 0px. calc(infinity * 1px) 0 red is 3.40282e+38px. 0 0 -5px red is dropped, and the declaration before it applies.
• lightningcss main (ab14f90, with Add NonNegative wrapper for numeric values parcel-bundler/lightningcss#1329): TextShadow { x_offset: Length, y_offset: Length, blur: NonNegative<Length>, spread: NonNegative<Length> }. 1.33.0 does not have the range yet and prints 0 0 -5px red.
• 36 rows, minified, against lightningcss main: 23 are equal. 5 differ in white space only (both keep the declaration as written). 3 differ on purpose: for a one-argument min(), max() or hypot() of a sum, lightningcss prints 1em + 2px 0 red, which is not valid CSS, and this PR keeps the declaration as written. The other 5 are the rows under Order.

Order

• This PR has one commit and does not carry the two fold fixes. An earlier shape of the branch had their commits stacked in front. The review of that shape found rows where the fold fixes are worse than main (width: mod(1in, 1pt) goes from 0 to 1.33333px, margin-left: rem(-.3px, .1px) goes from 0 to --7.45058e-9px), and one of their rows fails on macOS arm64 (rotate(atan2(0px, -1in)) prints 3.14159rad). Those findings belong to css: keep math functions over two different length units as written #38489 and css: fold rem() with a truncated quotient, so it keeps the sign of the dividend #32286, where that code is decided.
• The two blockers are bugs that only Bun has: lightningcss main prints round(16px, 1em) as written and rem(-7px, 3px) as -1px. The two folds under Downsides are wrong in lightningcss main too: hypot(-3px) as -3px and round(-2.5px, 1px) as -3px.
• Without the two fixes a typed text-shadow folds five of the 36 rows above as box-shadow does on main: round(1in, 5px) to 96px, mod(1in, 5px) to 0, round(16px, 1em) to 16px, rem(-7px, 3px) rem(7px, -3px) to 2px -2px, hypot(1in, 3px, 4px) to 96.5816px.
• With css: fold rem() with a truncated quotient, so it keeps the sign of the dividend #32286, rem(-7px, 3px) rem(7px, -3px) is -1px 1px, as in lightningcss main. css: keep math functions over two different length units as written #38489 as it is now keeps a function over two different length units as written, so round(16px, 1em), round(1in, 5px), mod(1in, 5px) and hypot(1in, 3px, 4px) stay as written. lightningcss main prints 95px, 1px and 11px for the last three. css: keep math functions over two different length units as written #38489 has the reason (browsers are a step apart for some of these inputs) and an open question to the maintainer about it. If css: keep math functions over two different length units as written #38489 folds two absolute units again, the hypot() row also needs css: fold hypot() with three or more arguments pairwise #38501.
• This PR's diff is text.rs, Length::parse_with_range in values/length.rs, NumericRange in values/number.rs, and the text-shadow block (+58/-7 source lines).

Measurements (release builds of main f2405c382d and of this PR)

• Type sizes (cargo rustc -p bun_css --lib -- -Zprint-type-sizes): TextShadow 56 to 88 bytes, SmallList<TextShadow, 1> 64 to 96 bytes, Property 216 to 216 bytes.
• Instructions in one parse_value::<SmallList<TextShadow, 1>> call (gdb single-step, second call of each value): 1px 1px 2px red 2,863 to 3,246. 1px 1px red 2,538 to 2,664. none 1,287 to 1,480. 1px 1px 2px 3px red 3,236 to 3,401. perf and valgrind are not on the machine.
• Token reads per shadow, with a blur and without: main 8 and 8, this PR 9 and 8. box-shadow, which tries math first, reads 15 and 15. Failed math probes per shadow: 1 here, 4 in box-shadow.
• The 15 stylesheets in test/js/bun/css/files (17 text-shadow declarations): LengthValue::parse 20,137 to 20,134 calls, Length::parse 3,371 to 3,371, Calc::<Length>::parse_with 3,437 to 3,454. The 17 extra calls are one failed probe per text-shadow declaration. A stylesheet with no text-shadow runs the same code as before.
• Allocations in one parse: one block per declaration, 56 bytes before and 88 bytes now. round(1em, 5px) 0 red takes 6 blocks, the same as in box-shadow.
• Release binary (size): .text 106,016,187 to 106,018,235 bytes. The TextShadow symbols and Length::parse_with_range go from 5,625 to 7,846 bytes (nm -S).
• Output of real CSS: 3,375 stylesheets from 256 npm packages and the 15 in-tree ones, printed with the default targets and minified with no targets. 46 do not parse on any build. No output changes. The 757 text-shadow declarations in them have no math in a length and no negative blur or spread literal.
• Nested invalid math in the blur slot (round(round(... foo ..., 5px), 5px)): 17, 33 and 65 calls of the calc parser at depth 16, 32 and 64.

Typed, but not valid in a browser (as on main for a value without math)

• A number without a unit is read as px: calc(1px + 2px) 5 red prints 3px 5px red. css: treat out-of-range and unit-less numeric values as invalid instead of merging or repairing them #42104 owns that check.
• A shadow with a spread is typed and printed, and no browser supports the spread.

Suites (debug build)

• test/js/bun/css/css.test.ts: 1,354 pass, 0 fail. On main 25 fail, all in this block.
• The other files in test/js/bun/css except css-fuzz.test.ts and nested-vendor-prefix-duplication.test.ts: 1,183 pass, 0 fail.
• test/bundler/css, test/bundler/esbuild/css.test.ts and the CSS regression tests 20546, 21907, 22317, 25785, 25794, 27117, 27458: 251 pass, 0 fail.

Self-review

• Done on an earlier shape of this branch. It asked for these changes, and they are in: the two fold fixes are not part of this PR, the range parse is on Length with the upstream names, a negative spread from math is 0 as the spec says, a negative literal leaves the declaration as written, and the one-argument min() case is refused.
• Rejected: wrap that bare sum in calc() inside the reader. It would be a second fix for css: wrap a one-argument min()/max() sum or product in calc() #38654 in another place. The reader refuses the value, so the output stays as on main.

Not in this PR

• src/css/properties/transform.rs:7 has the same import. There the handler keeps the earlier declaration only when the later one is unparsed, so the same change loses the fallback for translateZ(), translate3d() and perspective(). It needs a target check in TransformHandler first.
• Math inside custom properties and inside properties Bun does not parse. docs: correct the CSS math functions example and say where math is evaluated #45114 documents that limit.

---

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

fails on main (without fix)

ASAN without fix: BUILD FAILED (no junit output)
$ 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
error: Source list 'bindgenV2' matched nothing
  at: file:///workspace/bun/scripts/glob-sources.ts
  hint: Patterns: src/**/*.bindv2.ts
error: script "bd" exited with code 1
__F:-1:S:0

release without fix: 49 failed, 72 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.78ms]
Output .foo {
  content: "+";
}

(pass) css tests > .foo {
  content: "\2b";
} [0.39ms]
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.22ms]
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: 72 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;
} [4.42ms]
Output .foo {
  content: "+";
}

(pass) css tests > .foo {
  content: "\2b";
} [1.07ms]
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.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: wh
... (truncated)

release with fix: 72 skipped
$ bun scripts/build.ts --profile=release
[configured] bun-profile → bun (stripped) in 1603ms (unchanged)
ninja: Entering directory `/workspace/bun/build/release'
[1/241] gen ErrorCode+*.h
[2/241] gen bindgenv2
[3/241] gen bake.{client,server,error}.js
-> bake.client.js, bake.server.js, bake.error.js
[4/239] gen NodeModuleModule.lut.h
Generating /workspace/bun/build/release/codegen/NodeModuleModule.lut.h from /workspace/bun/src/jsc/modules/NodeModuleModule.cpp
[5/239] gen .bind.ts → GeneratedBindings.cpp
[6/239] gen generated_host_exports.rs
generated_host_exports.rs: 120 exports (host=5, lazy=10, generic=105, rust=0); 249 extern-C blocks audited
[7/239] gen BunObject.lut.h
Generating /workspace/bun/build/release/codegen/BunObject.lut.h from /workspace/bun/src/jsc/bindings/BunObject.cpp
[8/239] gen ZigGeneratedClasses.{cpp,h,rs}
Found 2 classes from /workspace/bun/src/jsc/resolve_message.classes.ts
  - ResolveMessage (15 fields)
  - BuildMessage (10 fields)
Found 1 classes from /workspace/bun/src/runtime/api/Archive.classes.ts
  - Archive (4 fields, 1 class fields)
Found 2 classes from /workspace/bun/src/runtime/api/BunObject.classes.ts
  - ResourceUsage (8 field
... (truncated)

diff hotspot

src/css/properties/text.rs  |  27 ++++++--
 src/css/values/length.rs    |  30 ++++++++-
 src/css/values/number.rs    |   8 +++
 test/js/bun/css/css.test.ts | 155 ++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 213 insertions(+), 7 deletions(-)

gate history · 1 passed · 0 rejected · iteration 0

evidence per changed file

file                         reads  edits  tests
src/css/properties/text.rs       4      4     38
src/css/values/length.rs         2      3     38
src/css/values/number.rs         1      2     38
test/js/bun/css/css.test.ts      3      3     38

[robobun]

^{Updated 9:18 AM PT - Oct 17th, 2026}

⏳ @robobun, your commit 6c730ba is still building in Build #127611, but has 3 failures so far (All Failures):

• test/js/node/test/parallel/test-tls-connect-given-socket.js - crash reported on 🍎 27 aarch64
• test/js/sql/sql-close-pending-connection.test.ts - code 1 on 🍎 27 aarch64
• test/js/node/net/node-net.test.ts - code 1 on 🍎 27 aarch64

[robobun]

Status: closed, not merged. #47025 consolidated the open CSS parser pull requests and did not take this change (see the maintainer's comment below).

• The fold fixes this PR waited for landed in css: consolidate the open CSS parser fixes #47025: css: keep math functions over two different length units as written #38489, css: fold rem() with a truncated quotient, so it keeps the sign of the dividend #32286, css: fold round() by choosing between the lower and upper multiple of |B| #45249 and css: wrap a one-argument min()/max() sum in calc() and give hypot() one fold for every argument count #46145.
• text-shadow keeps its lengths as on main: a value with a math function stays a token list and prints as written.

[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: Advanced
• Run ID: 18f59464-05bf-4458-a09a-5d0c5485aca3

📥 Commits

Reviewing files that changed from the base of the PR and between 4873399 and b2bae55.

📒 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; 1 remain after this review.

Walkthrough

Length parsing now supports numeric range constraints and converts both operands during cross-unit operations. Text-shadow parsing applies nonnegative constraints to blur and spread, with added minification and browser-target tests.

Changes

CSS length math and text-shadow parsing

Layer / File(s)	Summary
Length range parsing and math evaluation src/css/values/number.rs, src/css/values/length.rs	Added NumericRange and Length::parse_with_range. Negative or NaN scalar calculation results become zero for nonnegative lengths. Cross-unit operations now convert both operands to pixels.
Text-shadow parsing and output src/css/properties/text.rs, test/js/bun/css/css.test.ts	Offsets remain unrestricted. Blur and spread accept nonnegative lengths, and spread is parsed only after a valid blur. Tests cover minification, invalid values, fallbacks, and browser-target prefixing.

Priority: ➖ Normal

Merge Risk: ⚪ Minimal · up to b2bae

No merge-blocking issue is established by the supplied evidence. Normal validation remains appropriate before merging.

Pre-merge checks: 4

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.
Description check		The description clearly explains the problem, fix, scope, tradeoffs, and verification results. It does not use the template headings exactly, but it contains the required information in equivalent sec…
Title check		The title is concise and accurately describes the primary change: parsing CSS math functions in text-shadow lengths.

Full details: Description check

Explanation

The description clearly explains the problem, fix, scope, tradeoffs, and verification results. It does not use the template headings exactly, but it contains 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[claude]

Findings marked 🟡 are optional suggestions and need no follow-up push.

[claude]

Still open from earlier reviews (4):

• Unresolved: 4 minor or pre-existing.

[claude]

Code review found no new issues

No new issues were found in this update; 1 finding from earlier reviews is still open above.

Still open from earlier reviews (1):

• 🔴 src/css/values/length.rs:438 — Users writing text-shadow math with mixed units get a wrong folded value after merging; base printed the declaration as…

If you have decided not to act on one of these findings, resolve its thread (a reply alone leaves it open) and the next review stops counting it. To review this commit again now, use Re-run on its "Claude Code Review" check.

[robobun]

#38489 changed. This PR does not carry its commit, so there is nothing to replace here, but the rows under Order are affected:

• round(16px, 1em) stays as written with css: keep math functions over two different length units as written #38489, as before.
• css: keep math functions over two different length units as written #38489 no longer folds a function over two absolute units. round(1in, 5px), mod(1in, 5px) and hypot(1in, 3px, 4px) stay as written. They were 95px, 1px and 11px with the earlier shape of css: keep math functions over two different length units as written #38489.
• The reason: engines disagree at a step. Chrome 153 computes round(down, 70mm, 1cm) as 264.567px and Firefox 140 as 226.772px, so no literal is what both compute from the source. The question which value to print is open at the top of css: keep math functions over two different length units as written #38489, with the two other shapes linked.
• css: keep math functions over two different length units as written #38489 is rebased onto main. Its test block is still named math functions with mixed length units and is still inserted before describe("border_spacing").

[robobun]

#46145 fixes the bare sum of a one-argument min() or max() in calc.rs. It replaces #38654, #38639 and #38501.

After it lands, the value arrives here as Calc::Function(MathFunction::Calc(..)):

• Length::parse_with_range can drop its refusal of Calc::Sum and Calc::Product.
• The rows min(1em + 2px) 0 red and max(2 * min(1em, 2px)) 0 red print calc(1em + 2px) 0 red and calc(2*min(1em,2px)) 0 red.
• The row 0 0 hypot(1em + 2px) red keeps hypot(1em + 2px), now as a typed value.

#46145 does not change length.rs. Lengths in two units stay with #38489.

[robobun]

#32286 changed. Its fold is a - b * (a / b).trunc() now. It was a % b.

• rem(-7px, 3px) rem(7px, -3px) still folds to -1px 1px.
• margin-left: rem(-.3px, .1px) prints 0 again (a % b printed --7.45058e-9px), and rem(25%, 5%) prints 0% again (a % b printed 5%). Operands of one sign fold to the same bits as on main.
• The branch of css: fold rem() with a truncated quotient, so it keeps the sign of the dividend #32286 is on f2de590254. Its source commit is 9e590fbb6d.

[Jarred-Sumner]

Not taken in #47025 (7942008), which consolidated the open CSS parser pull requests. It is right or harmless, but not worth its code, the bigger output or the behavior it changes.