fix(web): add lineHeight to unitless CSS properties#3937
fix(web): add lineHeight to unitless CSS properties#3937lightstrike wants to merge 2 commits intotamagui:maintamagui/tamagui:mainfrom lightstrikelabs:fix/web-unitless-line-heightlightstrikelabs/tamagui:fix/web-unitless-line-heightCopy head branch name to clipboard
Conversation
|
Tied into the flex one, this is one where if we're aligning to web then we'd want to do that, but it's a breaking change and would have to be in v3. |
natew
left a comment
There was a problem hiding this comment.
LGTM. The fix is correct — CSS spec defines unitless line-height as a font-size multiplier, so appending px to numeric values was always wrong (e.g. lineHeight: 1.15 producing line-height: 1.15px which collapses text to ~1px). Both stylePropsUnitless and unitlessNumbers need to be in sync for the runtime and compiler paths respectively, and the PR correctly updates both. The \!isWeb guard in normalizeValueWithProperty ensures native is unaffected. Font token values go through getVarRef and resolve to CSS variables (strings), so they're unaffected. The breaking change for users passing raw integer lineHeight props directly (e.g. lineHeight={24}) is warranted — the previous behavior was the bug. Tests are thorough.
Summary
lineHeightvalues (e.g.,1.15) were incorrectly gettingpxappended during CSS extraction, producingline-height:1.15pxinstead ofline-height:1.15line-heightis a multiplier of font-size —1.15pxis an absolute ~1px height that causes text to visually collapselineHeighttostylePropsUnitless(helpers) andunitlessNumbers(react-native-web-internals) so both runtime and compiler paths treat it as unitlessnormalizeValueWithPropertybails on!isWebbefore consulting the unitless listTrade-offs
lineHeight: 62means 62 absolute pixels. After this fix, on web it becomesline-height: 62(a 62x multiplier). However:lineHeight: '62px'lineHeightTest plan
getStylesAtomic.web.test.tsx: numeric lineHeight, integer lineHeight, string percentage passthrough, opacity unitless guard, fontSize px guardcore-testweb tests pass with zero regressions