fix: big refactor to enable cleaner dynamic styles within conditional…
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.
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 |