Repository navigation
fix(compiler): convert absolute length units to pixels - #492
Open
YevheniiKotyrlo wants to merge 1 commit into
Open
YevheniiKotyrlo wants to merge 1 commit into
YevheniiKotyrlo wants to merge 1 commit into
Conversation
css-values-4 fixes in, cm, mm, Q, pt and pc against the inch (1in = 96px), so each has an exact pixel value. parseLength warned and dropped all six, so a declaration, a variable and a media query holding one set nothing on native.
YevheniiKotyrlo
marked this pull request as ready for review
October 16, 2026 13:02
YevheniiKotyrlo
marked this pull request as draft
October 16, 2026 13:47
This was referenced Oct 16, 2026
Contributor
Author
YevheniiKotyrlo
marked this pull request as ready for review
October 16, 2026 15:00
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.


Problem
in,cm,mm,Q,ptandpcare absolute lengths: css-values-4 §6.2 fixes each against the inch, 1in = 96px, so each has an exact pixel value.parseLengthwarns and drops all six, so on native a declaration holding one sets nothing -width: 1in,border-top-width: 3pt,margin: 1in 1pc- and neither does a variable that resolves at runtime or a media query such as(min-width: 4in).Solution
parseLengthconverts the six units to pixels through one table,ABSOLUTE_UNIT_PIXELSinsrc/utilities/absolute-units.ts. Every route reads a length throughparseLength, so declarations, shorthands, transforms, shadows, font sizes, variables and media queries all convert, with or withoutinlineRem; lightningcss already folds acalc()mixing them withpx.Tests
src/__tests__/native/absolute-units.test.tsxrenders each unit as a declaration and through a variable declared twice, withinlineRem: false, in a media query and in a shorthand. All 15 fail onmain. The expected values are css-values-4's ratios, rounded as the compiler rounds every length.Verification
On Ubuntu with the workflow's steps - build, lint, typecheck,
yarn test,node --test node/__tests__/*.mjs, both library builds, the web export, the unstaged-changes checks and commitlint - everything passes.Not run: the iOS and Android example builds.
Unchanged: an absolute length set from JavaScript through
vars()reaches React Native as the string it was given.Device evidence, before and after: #492 (comment)
Merge order
It shares lines with #389 (
compiler/declarations.ts,utilities/index.ts), #391 (compiler/declarations.ts,utilities/index.ts), #413 (compiler/declarations.ts), #417 (compiler/declarations.ts), #420 (compiler/declarations.ts,utilities/index.ts), #491 (compiler/declarations.ts,utilities/index.ts), #494 (compiler/declarations.ts,utilities/index.ts), #495 (compiler/declarations.ts,utilities/index.ts); whichever lands second rebases.