Repository navigation
Match React's unitless style properties when appending px in compat - #5280
Draft
JoviDeCroock wants to merge 1 commit into
Draft
JoviDeCroock wants to merge 1 commit into
JoviDeCroock wants to merge 1 commit into
Conversation
IS_NON_DIMENSIONAL appended "px" to fillOpacity, stopOpacity, strokeOpacity, strokeMiterlimit, aspectRatio and the Webkit-prefixed flex/box/column/animation counts, and left containIntrinsicHeight, columnHeight, columnRuleInset* and animationRange* unitless, so the browser dropped all of those declarations where Preact 10 and React render them. The regex is now case-insensitive behind an optional webkit prefix, so prefixed names share the unprefixed branches. Across every property Chrome exposes this goes from 20 to 0 dropped declarations where React keeps one (lowercase webkitColumns aside, now treated like columns). compat.mjs is 3 B smaller (brotli).
📊 Tachometer Benchmark ResultsSummaryduration
usedJSHeapSize
Resultscreate10kduration
usedJSHeapSize
filter-listduration
usedJSHeapSize
hydrate1kduration
usedJSHeapSize
many-updatesduration
usedJSHeapSize
replace1kduration
usedJSHeapSize
run-warmup-0
run-warmup-1
run-warmup-2
run-warmup-3
run-warmup-4
run-final
text-updateduration
usedJSHeapSize
tododuration
usedJSHeapSize
update10th1kduration
usedJSHeapSize
|
|
Size Change: -8 B (-0.05%) Total Size: 15.9 kB 📦 View Changed
ℹ️ View Unchanged
|
|
coverage: 99.853%. remained the same — JoviDeCroock/compat-unitless-styles into main |
marvinhagemeister
approved these changes
Sep 28, 2026
JoviDeCroock
marked this pull request as draft
September 28, 2026 11:16
Member
Author
|
To land this we'd do a major version of preact-render-to-string which removes automatic suffixing |
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
3 participants
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.
Note
Co-Authored with Claude
v11 moved the automatic
pxsuffix from core into compat'sIS_NON_DIMENSIONAL, and that regex misclassifies properties in both directions:fillOpacity,stopOpacity,strokeOpacity,strokeMiterlimit,aspectRatioand the Webkit-prefixed counts (WebkitFlexGrow,WebkitBoxFlex,WebkitColumnCount, …) gotpxappended, whilecontainIntrinsicHeight,columnHeight,columnRuleInset*andanimationRange*didn't. In each case the browser drops the declaration, where Preact 10 and React render it.The regex is now case-insensitive behind an optional
webkitprefix (soWebkitFlexGrowgoes through the same branch asflexGrow), with the other branches narrowed or merged against every property Chrome exposes. Rendering all 1,546 style names (camelCase, Webkit-cased, kebab-case,--foo) with2and0.5through each build in Chrome:* Lowercase
webkitColumnsis treated likecolumns/WebkitColumns(React only knows the capitalized spelling), andcolumns: 0.5isn't a valid count — same as React.Supersedes #5233 (thanks @dylanpulver), which covered the SVG opacities and
aspectRatio. compat is 3 B smaller (brotli), core untouched.