Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minify compiled style keys #875

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Minify compiled style keys #875

wants to merge 2 commits into from

Conversation

necolas
Copy link
Contributor

@necolas necolas commented Jan 29, 2025

What changed / motivation ?

Reduce the size of minifed JS by "minifying" the compiled style keys produced by StyleX. This patch uses a base 62 hashing function to generate smaller hashes, which are prefixed with k to avoid requiring quotes around hashes that start with a number.

Fix #741

Pre-flight checklist

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jan 29, 2025
Copy link

github-actions bot commented Jan 29, 2025

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.yZ8XYLGM5S /tmp/tmp.MaGJx9lbT7

Results Base Patch Ratio
stylex/lib/stylex.js
· compressed 985 985 1.00
· minified 3,154 3,154 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 567,170 537,601 0.95 !!
· minified 10,232,457 7,435,890 0.73 !!
rollup-example/.build/stylex.css
· compressed 100,609 100,609 1.00
· minified 755,721 755,721 1.00

@@ -374,7 +374,7 @@ describe('Evaluation of imported values works based on configuration', () => {
_inject2("@property ----__hashed_var__1jqb1tb { syntax: \\"*\\"; inherits: false;}", 0);
const styles = {
color: color => [{
"--__hashed_var__1jqb1tb": color == null ? null : "__hashed_var__b69i2g",
kUBWw5: "__hashed_var__b69i2g",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Regression for dynamic styles

@necolas
Copy link
Contributor Author

necolas commented Feb 27, 2025

Updated to use a new feature flag for controlling this behavior - enableMinifiedKeys, by default true.

Reduce the size of minifed JS by "minifying" the compiled style keys
produced by StyleX. This patch uses a base 62 hashing function to
generate smaller hashes, which are prefixed with `k` to avoid requiring
quotes around hashes that start with a number.
Avoid false positives on code contained within inline babel snapshots
Copy link
Contributor

@nmn nmn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The config option makes this a lot safer to roll out. Thanks!

@necolas
Copy link
Contributor Author

necolas commented Feb 27, 2025

I still need to figure out why the dynamic styles output changed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Shorten property names in compiled JS output
4 participants