Stop appending "px" to unitless SVG paint and aspect-ratio values - #5233
Open
dylanpulver wants to merge 1 commit into
Open
Stop appending "px" to unitless SVG paint and aspect-ratio values#5233dylanpulver wants to merge 1 commit into
dylanpulver wants to merge 1 commit into
Conversation
IS_NON_DIMENSIONAL misses aspectRatio, fillOpacity, stopOpacity,
strokeOpacity and strokeMiterlimit. None accepts a <length>, so the
appended px makes the value invalid and the browser drops the whole
declaration: style={{ aspectRatio: 2 }} renders nothing at all.
All five are in React's isUnitlessNumber.
📊 Tachometer Benchmark ResultsSummaryA summary of the benchmark results will show here once they finish. ResultsThe full results of your benchmarks will show here once they finish. |
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
1 participant
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.
IS_NON_DIMENSIONALmisses five properties that reject a<length>, so the appendedpxmakes the value invalid and the browser drops the declaration outright:style={{ … }}aspectRatio: 2aspect-ratio: 2 / 1fillOpacity: 0.5fill-opacity: 0.5stopOpacity: 0.5stop-opacity: 0.5strokeOpacity: 0.5stroke-opacity: 0.5strokeMiterlimit: 3stroke-miterlimit: 3All five sit in React's
isUnitlessNumber.Corpus: every CSS property Chromium exposes, camelCase and kebab — 1,261 names. 26 classifications change, zero regressions: 10 dropped declarations restored, 6 are
stroke-width/-dasharray/-dashoffsetgoing2px→2(spec-equivalent, matches React), 10 no-ops (fill,stroke,-linecap,-linejoin,stop-colorreject a bare number either way).Deliberately uncovered:
boxFlex,boxFlexGroup,boxOrdinalGroup,flexPositive,flexNegative— React keeps them for the 2009 flexbox draft; Chromium accepts neither2nor2pxfor any.Two naive alternatives measured and rejected:
f[lo]→f[ilo]sweeps infilterandfield-sizingand still leaves 4 of 5 broken;aspalone leaves 4 broken and fails the new test.Reverting only
util.jsfails the new test and nothing else (46/47). Full suite 1306 passing; Compressed size 3,913 → 3,920 gzipped (+7 B).🤖 Written with Claude Code (claude-opus-5)