Repository navigation
Conversation
The CSS page says that Bun adds RGB fallbacks for lab(), oklch() and color() colors, with no exception. Bun adds them to color, the background and border properties, box-shadow and text-shadow in style rules. Other properties, @Keyframes and custom properties get none. The new section lists both groups. It shows what to write in the places that get no fallback: an RGB declaration before the declaration with the newer color, or an @supports rule for a custom property.
|
Status: docs change is ready for review. No code change. Reproduction: .a { color: lab(50% 40 59) }
.b { outline-color: lab(50% 40 59) }
.c { text-decoration-color: lab(50% 40 59) }
.d { caret-color: lab(50% 40 59) }
.e { fill: lab(50% 40 59) }
@keyframes k { from { color: lab(50% 40 59) } }Only |
|
Updated 11:41 AM PT - Oct 16th, 2026
✅ @robobun, your commit 30a6ec09e4c15bc1978bb41271e89e8785f56aa3 passed in 🧪 To try this PR locally: bunx bun-pr 45555That installs a local version of the PR into your bun-45555 --bun |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info
WalkthroughThe CSS bundler documentation now describes where Bun adds color fallbacks, the LAB-family channel format required for generation, and cases that receive no automatic fallback. It includes examples for ordered RGB declarations and an ChangesCSS color fallback documentation
Priority: ⬇️ Low Merge Risk: ⚪ Minimal · up to
|
| 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 and concisely describes the main documentation change: identifying where the CSS bundler adds color fallbacks. |
| Description check | |
The description explains the problem, documents the fix, and provides detailed verification results. It does not use the template headings exactly, but it includes the required information under equiv… |
Full details: Description check
-
Explanation
The description explains the problem, documents the fix, and provides detailed verification results. It does not use the template headings exactly, but it includes the required information under equivalent sections.
✨ Finishing Touches: 💡 1
-
🛠️ Fix failing CI checks: 💡
-
- Commit to this branch
- Create a new PR
-
- 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.
Comment @coderabbitai help to get the list of available commands.
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Nothing blocking. The comments below are optional suggestions. There is no need to push a fix for them before merging.
Beyond the inline finding on the @ supports pattern, I checked the new section's factual claims against the implementation: the handled-property list matches FallbackHandler in src/css/properties/prefix_handler.rs (only color and text-shadow, with fill/stroke/caret-color commented out) plus the background, border, border-image and box-shadow handlers, and the "no fallback inside @ keyframes" claim matches the unimplemented keyframes arm in src/css/rules/mod.rs. The lightness-as-percentage requirement and the voice rules (short sentences, active voice, "you") also hold up.
Extended reasoning...
Docs-only change adding a 50-line subsection to docs/bundler/css.mdx that enumerates which CSS properties receive lab/lch/oklab/oklch and color() fallbacks and recommends two workarounds. It touches no runtime code and no security-sensitive surface. The property list and the @ keyframes and custom-property claims were verified against src/css/properties/prefix_handler.rs and src/css/rules/mod.rs and are accurate; the one confirmed inline finding concerns the recommended @ supports workaround interacting with the always-on duplicate-condition drop at src/css/rules/mod.rs:529-534, which a human should weigh before merging.
The example now holds two selectors in one @supports rule, and the sentence before it says to use one rule.
There was a problem hiding this comment.
Nothing blocking. The comments below are optional suggestions. There is no need to push a fix for them before merging.
LGTM. The single @ supports block in the second snippet (commit 30a6ec0) addresses the duplicate-condition drop I raised on the earlier push.
Checked the new section's claims against main: box-shadow has its own handler (src/css/properties/box_shadow.rs:180) and color/text-shadow are the only FallbackHandler fields (src/css/properties/prefix_handler.rs:10-18); @ keyframes falls through the minify pass with no fallback step (src/css/rules/mod.rs:506-510); parse_lab/parse_lch require percentage lightness and numeric a/b/c (src/css/values/color.rs:1338-1340, 1364-1365), so the "write oklch(65% 0.25 10)" guidance matches the parser. Fences are balanced and the #where-bun-adds-color-fallbacks anchor matches the heading slug.
Extended reasoning...
Docs-only change of about 58 lines in docs/bundler/css.mdx adding a "Where Bun adds color fallbacks" subsection and one cross-link; no code, no security-sensitive surface, and no CODEOWNERS entry covers docs/. The behavioral claims were verified against the CSS property handlers, the keyframes arm of the rule minifier, and the lab/lch parsers on main, and the prior-push concern about adjacent duplicate @ supports blocks is resolved by the current snippet. The one remaining inline finding is a pre-existing minifier limitation that the snippet does not trigger as written, not an error in the documentation.
Problem
docs/bundler/css.mdx(lines 167, 197) promises RGB fallbacks forlab(),oklch()andcolor()colors with no exception.bun buildadds them to some properties only, and never inside@keyframes..e{fill:lab(50% 40 59)}and@keyframes k{from{color:lab(50% 40 59)}}printlab(50% 40 59)alone..a{color:lab(50% 40 59)}prints#bf5702, adisplay-p3color, thenlab(50% 40 59).BackgroundHandler,BorderHandler,BoxShadowHandlerandFallbackHandler(color,text-shadow) add color fallbacks.src/css/properties/prefix_handler.rs:12andsrc/css/rules/mod.rs:507mark the rest as not implemented.Fix
@keyframes, custom properties).lab()declaration, or one@supportsrule for custom properties.Background
@supports.FallbackHandlerproperties.Notes
What ran (debug build of main 5866b5f, default targets)
display-p3fallbacks forlab(50% 40 59), 31 of 31 rows:color,background(color and gradient),background-color,background-image,border,border-color, the four side shorthands and four side colors, the six logical shorthands and six logical colors,border-image,border-image-source,box-shadow,text-shadow. The 12 names that the section lists also ran withoklch(65% 0.25 10deg),lch(50% 70 40),oklab(65% 0.2 0.1)andcolor(display-p3 1 0.1 0.3).outline,outline-color,text-decoration,text-decoration-color,text-emphasis,text-emphasis-color,caret-color,accent-color,fill,stroke,column-rule,column-rule-color,scrollbar-color,filter,backdrop-filter,mask,mask-image,list-style-image,flood-color,lighting-color,stop-color, three-webkit-color properties, and a custom property.@keyframes: 0 of 56 rows get a fallback, the 31 handled rows included.@media,@supports,@layer,@container,@scope,@starting-styleand nested rules get the fallbacks.@page,@propertyand@font-palette-valuesstay as written.prop: #bf5702; prop: lab(50% 40 59)) stays a pair, in order, for 24 of 24 unhandled properties in style rules and for 31 of 31 properties in@keyframes, with and without--minify./* file */header line) on main and on bun 1.4.3. With--minifyboth declarations stay, in order.:root{--accent:lab(50% 40 59)} .button{color:var(--accent)}gets no fallback.Left out of the section
oklch(0.65 0.25 10),lab(55 78 35)andlch(55% 50% 30)get no fallback on main (run incolor). css: parse number and percentage channels in lab(), lch(), oklab(), oklch(), hsl() and hwb() #45084 changes that parser. The section only says which form to write (oklch(65% 0.25 10)), so its text stays true after css: parse number and percentage channels in lab(), lch(), oklab(), oklch(), hsl() and hwb() #45084.color(a98-rgb ...)gets no fallback on main. The "Color function" example above the new section shows one. css: fix color(a98-rgb), srgb-linear relative colors and color-mix(in xyz-d50) #38487 repairs the parser and corrects the digits of that example.var()value in a listed property (background-color: var(--x, lab(50% 40 59))) gets the RGB color in the rule and two@supportsrules. In other properties it stays as written.color: red; color: lab(50% 40 59)). Thebordershorthand andborder-imagewrite their own fallbacks.--target=bun,--target=node,--no-bundle) Bun adds no fallback.@supportsrules with the same condition: bun 1.4.3 and main keep only the first rule (bun bundler cannot handle css @supports #24770, and css: parse (property: value) @supports conditions as declarations and merge same-condition rules #38589 changes that arm). The section says to use one@supportsrule, and its example holds two selectors in one rule.#fb1f4e,color(display-p3 .904298 .236376 .325436), and threebackgroundlines). This PR does not change that example.Related
fill,stroke,caret-color,caret) and CSS: oklch() inside filter and backdrop-filter drop-shadow() is never lowered #44639 (filter,backdrop-filter). The tracking issue MVP of CSS parser #14167 leaveskeyframesunchecked under "Minification pass".