stylex icon indicating copy to clipboard operation
stylex copied to clipboard

fix: big refactor to enable cleaner dynamic styles within conditional…

Open nmn opened this issue 1 year ago • 1 comments

The previous PR did not correctly handle space-separated classNames that are applied to a single CSS property as the information to know which className in the list should be applied conditionally was lost.

This PR does a big refactor to collect and report that information to connect classNames to their original object paths so any className that resolves to a dynamic style value (via a variable) will be applied conditionally only if the dynamic value is not null or undefined.

This even fixes a bug where if a dynamic value for, say color in a :hover style resolved to null, instead of having no :hover styles as is expected, hover styles are applied and set to an undefined variable which resolves to a "default" value for the given property. In practice this means that even if the default color value is red, instead of the color remaining red on :hover as well, it would become black as that is the default color value.

This issue has been fixed as part of this PR.

One remaining bug

There is still one remaining bug specifically when using the legacy-expand-shorthands config option. Any classNames with dynamic values used for a shorthand will not be applied conditionally.

nmn avatar Oct 04 '24 09:10 nmn

workflow: benchmarks/size

Comparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.

@stylexjs/[email protected] size:compare ./size-compare.js /tmp/tmp.asyHLxSG80 /tmp/tmp.18xfjZHjV6

Results Base Patch Ratio
stylex/lib/stylex.js
· compressed 899 899 1.00
· minified 3,223 3,223 1.00
stylex/lib/StyleXSheet.js
· compressed 1,266 1,266 1.00
· minified 3,776 3,776 1.00
rollup-example/.build/bundle.js
· compressed 563,484 563,025 1.00 -
· minified 10,185,368 10,185,368 1.00
rollup-example/.build/stylex.css
· compressed 99,154 99,154 1.00
· minified 745,649 745,649 1.00

github-actions[bot] avatar Oct 04 '24 09:10 github-actions[bot]