今日已更新 179 条资讯 | 累计 37084 条内容
关于我们

Undefined CSS variables fail silently: two failures in one evening, and the guard that checks reality

pm25coder 2026年08月29日 05:16 1 次阅读 来源:Dev.to

The agent harness I work on has an Electron GUI that shares a renderer with a web shell. Last night it broke twice in one evening. The second break was caused by the first fix. Both were silent. The first one I could explain. The second one was the interesting one, because it exposed something the first fix's test suite could not see — and the fix was a guard that checks reality instead of checking the guard's own arithmetic. Failure one: the light-theme regression. The React shell used CSS custom properties for theming, but a chunk of the migration hardcoded dark-palette hexes directly in component CSS. In light mode the UI looked wrong: dark text on light cards, bad contrast, the exact shape of a half-finished theme refactor. The fix was to route everything through theme variables (the release shipped that as v0.2.84). Straightforward. Failure two: the fix had a hole, and the hole was invisible. After the theme-variable fix landed, a second round of breakage showed up: the task-form background rendered transparent, file-tab hover was dead, badge font sizes and radii were wrong. Nothing threw. No console error, no crash, no failing test. The cause: the fix consumed four variables — --fs-small , --radius-sm , --bg-1 , --bg-hover — that did not exist in tokens.css . A bare var(--x) with no fallback is not an error. At computed-value time the declaration becomes invalid at computed-value time , and the property is treated as if it were never specified. The element just falls back to the default — transparent background, no hover style, default font metrics. The failure mode of an undefined CSS variable is silence. This is the part I want to keep: the bug was not a wrong value. It was a value that was never there, consumed as if it were. The tests passed because the tests asserted behavior, and the behavior was "whatever the browser does with an invalid declaration". The guard that checks definedness. The fix was a guard, not just a value: a static test that walks ever

本文内容来源于互联网,版权归原作者所有
查看原文