github-actions[bot]
commented
1 month ago workflow: benchmarks/size
Comparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.
@stylexjs/scripts@0.8.0 size:compare ./size-compare.js /tmp/tmp.LuB14pXxuu /tmp/tmp.lh3ryT1kwc
| Results | Base | Patch | Ratio | |
|---|---|---|---|---|
| stylex/lib/stylex.js | ||||
| · compressed | 729 | 729 | 1.00 | |
| · minified | 2,541 | 2,541 | 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,025 | 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 |
What changed
We recently fixed an issue with how pseudo selectors are sorted in StyleX to ensure we don't accidentally mix up pseudo classes and pseudo elements incorrectly.
However, while we fixed the generated rules in the previous PR, the string hashed to generate a unique className was still using the old logic. This would mean that, e.g. if you used both
::before:hoverand:hover::beforeselectors in your styles for the exact same property and value, both rules would generate the same className.(TODO: Create a separate commit to actually demonstrate this edge-case in a test)
This PR updates the logic used when generating the className to match the logic used when generating the CSS rule to fix this issue.
Fixes #749