facebook / react-strict-dom

React Strict DOM (RSD) standardizes the development of styled React components for web and native.
https://facebook.github.io/react-strict-dom
MIT License
3.2k stars 161 forks source link

Fix inheritance of em-based lineHeight #167

Closed necolas closed 4 months ago

necolas commented 4 months ago

Make sure the computed lineHeight is inherited, unless it's a unitless value which should act as a fontSize multiplier.

Native (before)

image image

Native (after)

image image

Web (before and after)

image image
github-actions[bot] commented 4 months ago

compressed-size: runtime library

Size change: +0.01 kB Total size: 20.35 kB

Filename: gzip (minify) kB size kB change % change
./packages/react-strict-dom/dist/native/index.js 16.45 (53.21) +0.01 (+0.12) +0.1% (+0.2%) 🟡
View unchanged | Filename: gzip (minify) | kB size | kB change | % change | | :--- | :--- | :--- | :--- | | `./packages/react-strict-dom/dist/dom/index.js` | **2.94** (8.79) | **0.00** (0.00) | **0.0%** (0.0%) | | `./packages/react-strict-dom/dist/dom/runtime.js` | **0.95** (2.33) | **0.00** (0.00) | **0.0%** (0.0%) |
github-actions[bot] commented 4 months ago

RSD benchmarks (for native)

Base 5de720eb

react-strict-dom@0.0.19 benchmarks npm run build:benchmarks && node --jitless benchmarks/run.js

react-strict-dom@0.0.19 build:benchmarks rollup --config ./tools/rollup-benchmarks.config.js

css.create ops/sec deviation (%) samples
small 1,198,247 0.20 96
small with units 440,329 1.30 95
small with variables 657,487 1.92 93
several small 332,806 0.30 95
large 219,473 0.26 92
large with polyfills 152,094 0.67 93
complex 105,019 0.20 95
unsupported 231,649 0.24 95
css.createTheme ops/sec deviation (%) samples
simple theme 228,822 0.16 97
polyfill theme 215,782 0.12 99
css.props ops/sec deviation (%) samples
small 235,904 0.18 98
small with units 188,613 0.30 95
small with variables 105,639 0.41 94
small with variables of units 75,415 0.49 97
large 101,266 0.27 92
large with polyfills 26,055 0.25 94
complex 18,150 0.37 95
unsupported 75,486 0.24 93
simple merge 161,545 0.20 94
wide merge 13,786 0.24 93
deep merge 13,627 0.33 92
internals ops/sec deviation (%) samples
extractStyleThemes 425,851 0.16 97
flattenStyle 660,695 0.16 93

Patch f876a6cb

react-strict-dom@0.0.19 benchmarks npm run build:benchmarks && node --jitless benchmarks/run.js

react-strict-dom@0.0.19 build:benchmarks rollup --config ./tools/rollup-benchmarks.config.js

css.create ops/sec deviation (%) samples
small 1,148,735 0.28 97
small with units 441,639 0.24 94
small with variables 672,655 1.23 92
several small 327,022 0.26 97
large 215,647 0.23 96
large with polyfills 152,095 0.17 95
complex 104,564 0.16 97
unsupported 231,671 0.24 94
css.createTheme ops/sec deviation (%) samples
simple theme 229,317 0.12 95
polyfill theme 216,045 0.17 96
css.props ops/sec deviation (%) samples
small 237,574 0.60 94
small with units 188,311 0.25 95
small with variables 106,138 0.15 94
small with variables of units 75,509 0.23 97
large 102,975 0.40 93
large with polyfills 26,253 0.27 95
complex 18,215 0.35 93
unsupported 75,580 0.24 94
simple merge 161,697 0.19 93
wide merge 13,876 0.21 93
deep merge 13,667 0.39 94
internals ops/sec deviation (%) samples
extractStyleThemes 421,305 1.29 95
flattenStyle 662,906 0.12 97
github-actions[bot] commented 4 months ago

workflow: benchmarks (native)

Comparison of benchmark test results, measured in operations per second (higher is faster.) Suite Base Patch Ratio
css.create
· small 1,193,261 1,144,691 0.96 -
· small with units 447,895 449,189 1.00 +
· small with variables 668,552 676,016 1.01 +
· several small 333,486 329,901 0.99 -
· large 217,549 215,427 0.99 -
· large with polyfills 152,603 153,252 1.00 +
· complex 104,293 105,502 1.01 +
· unsupported 234,316 232,298 0.99 -
css.createTheme
· simple theme 227,226 226,397 1.00 -
· polyfill theme 214,814 213,792 1.00 -
css.props
· small 235,558 239,623 1.02 +
· small with units 186,861 188,377 1.01 +
· small with variables 104,709 105,793 1.01 +
· small with variables of units 74,301 75,141 1.01 +
· large 100,656 103,270 1.03 +
· large with polyfills 25,775 26,164 1.02 +
· complex 17,876 18,133 1.01 +
· unsupported 75,412 75,509 1.00 +
· simple merge 163,637 162,063 0.99 -
· wide merge 13,594 13,802 1.02 +
· deep merge 13,396 13,528 1.01 +
internals
· extractStyleThemes 424,815 425,221 1.00 +
· flattenStyle 650,390 651,761 1.00 +