8000 [babel-plugin] Make 'property-specificity' the default 'styleResolution' by necolas · Pull Request #1064 · facebook/stylex · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

[babel-plugin] Make 'property-specificity' the default 'styleResolution' #1064

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 1 commit into from
Jun 26, 2025
Merged

[babel-plugin] Make 'property-specificity' the default 'styleResolution' #1064

merged 1 commit into from
Jun 26, 2025

Conversation

necolas
Copy link
Contributor
@necolas necolas commented May 16, 2025 •
edited
Loading

Changing the default styleResolution enforces more disallowed shorthands and reduces the size of the generated JavaScript objects.

Summary of the benchmark results is below.

  • 10% faster compilation of create.
  • 35% less generated JS after minification.
  • 8% less generated JS after compression.
  • No significant change to size of CSS.
  • 48% faster runtime merging by default (with caching).
  • 630% faster runtime merging without caching.

Every metric we track is significantly improved or neutral as a result of this change.

Notes:

  1. This change primarily affects styles using shorthands. Some of the benchmark fixtures (e.g., "basic create") contain a greater proportion of these styles than others, (e.g., "complex create"), which explains some of the differences in results.
  2. The generated JS results are "synthetic", because the fixtures are almost 100% StyleX code and not StyleX mixed in with other JS as is the case in practice (e.g., when used in React components). In real-world scenarios we should expect to see far less impact on the total size of JS bundles, as StyleX-generated JS will be a smaller fraction of the total JS. But we can still conclude that the JS generated by StyleX will be reduced by about 35% in total.

@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 May 16, 2025
@github-actions GitHub Actions
Copy link
github-actions bot commented May 16, 2025 •
edited
Loading

workflow: benchmarks/perf

Comparison of performance test results, measured in operations per second. Larger is better.

benchmarks@0.13.1 compare
node ./compare.js /tmp/tmp.k4T3ohDurV /tmp/tmp.1UJ17IWE64

Results Base Patch Ratio
babel-plugin: stylex.create
· basic create 513 575 1.12 !!
· complex create 190 192 1.01 +
babel-plugin: stylex.createTheme
· basic themes 451 445 0.99 -
· complex themes 42 40 0.95 -

@necolas necolas force-pushed the babel-plugin/default-property-specificity branch from d643302 to f23901b Compare May 17, 2025 01:56
@github-actions GitHub Actions
Copy link
github-actions bot commented May 17, 2025 •
edited
Loading

workflow: benchmarks/size

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

benchmarks@0.13.1 compare
node ./compare.js /tmp/tmp.adRmkSfzkc /tmp/tmp.M6cfC6dRo3

Results Base Patch Ratio
@stylexjs/stylex/lib/cjs/stylex.js
· compressed 1,222 1,222 1.00
· minified 3,679 3,679 1.00
@stylexjs/stylex/lib/cjs/inject.js
· compressed 1,227 1,227 1.00
· minified 3,224 3,224 1.00
benchmarks/size/.build/bundle.js
· compressed 537,611 495,990 0.92 !!
· minified 7,435,904 4,843,460 0.65 !!
benchmarks/size/.build/stylex.css
· compressed 100,509 100,374 1.00 -
· minified 754,513 754,717 1.00 +

@necolas
Copy link
Contributor Author
necolas commented May 17, 2025 •
edited
Loading

I tested one of the runtime impacts of this change. The styleq runtime has benchmarks, and I added a couple of fixtures to represent the different compiled style objects created by StyleX for application-order and property-specificity. Larger is better (more operations per second)

Results application-order property-specificity Ratio
runtime merge
· merge 5,624,582 8,361,751 1.48 !!
· merge (no cache) 346,941 2,532,571 7.30 !!

This is the source style (taken from one of the StyleX unit tests)

export const styles = stylex.create({
  error: {
    borderColor: 'red blue',
    borderStyle: 'dashed solid',
    borderWidth: '0 0 2px 0',
    margin: 'calc((100% - 50px) * 0.5) 20px 0',
    padding: 'calc((100% - 50px) * 0.5) var(--rightpadding, 20px)',
  },
  short: {
    borderBottomWidth: '5px',
    borderBottomStyle: 'solid',
    borderBottomColor: 'red',
    borderColor: 'var(--divider)',
    borderRadius: borderRadius * 2,
    borderStyle: 'solid',
    borderWidth: 1,
    marginTop: 'calc((100% - 50px) * 0.5)',
    marginRight: 20,
    marginBottom: 0,
    paddingTop: 0,
  },
});

The output for property-specificity:

// property-specificity output
export const styles = {
  error: {
    kVAM5u: "xs4buau",
    ksu8eU: "xn06r42",
    kMzoRj: "xn43iik",
    kogj98: "xe4njm9",
    kmVPX3: "x1lmef92",
    $$css: true
  },
  short: {
    kt9PQ7: "xa309fb",
    kfdmCh: "x1q0q8m5",
    kL6WhQ: "xud65wk",
    kVAM5u: "x1lh7sze",
    kaIpWk: "x12oqio5",
    ksu8eU: "x1y0btm7",
    kMzoRj: "xmkeg23",
    keoZOQ: "xxsse2n",
    km5ZXQ: "x1wh8b8d",
    k1K539: "xat24cr",
    kLKAdn: "xexx8yu",
    $$css: true
  }
};

The output for application-order:

// application-order output
export const styles = {
  error: {
    kVAM5u: "xs4buau",
    kzOINU: null,
    kGJrpR: null,
    kaZRDh: null,
    kBCPoo: null,
    k26BEO: null,
    k5QoK5: null,
    kLZC3w: null,
    kL6WhQ: null,
    ksu8eU: "xn06r42",
    kJRH4f: null,
    kVhnKS: null,
    k4WBpm: null,
    k8ry5P: null,
    kSWEuD: null,
    kDUl1X: null,
    kPef9Z: null,
    kfdmCh: null,
    kMzoRj: "xn43iik",
    kjGldf: null,
    k2ei4v: null,
    kZ1KPB: null,
    ke9TFa: null,
    kWqL5O: null,
    kLoX6v: null,
    kEafiO: null,
    kt9PQ7: null,
    kogj98: "xe4njm9",
    kUOVxO: null,
    keTefX: null,
    koQZXg: null,
    k71WvV: null,
    km5ZXQ: null,
    kqGvvJ: null,
    keoZOQ: null,
    k1K539: null,
    kmVPX3: "x1lmef92",
    kg3NbH: null,
    kuDDbn: null,
    kE3dHu: null,
    kP0aTx: null,
    kpe85a: null,
    k8WAf4: null,
    kLKAdn: null,
    kGO01o: null,
    $$css: true
  },
  short: {
    kVAM5u: "x1lh7sze",
    kzOINU: null,
    kGJrpR: null,
    kaZRDh: null,
    kBCPoo: null,
    k26BEO: null,
    k5QoK5: null,
    kLZC3w: null,
    kL6WhQ: null,
    kaIpWk: "x12oqio5",
    krdFHd: null,
    kfmiAY: null,
    kVL7Gh: null,
    kT0f0o: null,
    kIxVMA: null,
    ksF3WI: null,
    kqGeR4: null,
    kYm2EN: null,
    ksu8eU: "x1y0btm7",
    kJRH4f: null,
    kVhnKS: null,
    k4WBpm: null,
    k8ry5P: null,
    kSWEuD: null,
    kDUl1X: null,
    kPef9Z: null,
    kfdmCh: null,
    kMzoRj: "xmkeg23",
    kjGldf: null,
    k2ei4v: null,
    kZ1KPB: null,
    ke9TFa: null,
    kWqL5O: null,
    kLoX6v: null,
    kEafiO: null,
    kt9PQ7: null,
    keoZOQ: "xxsse2n",
    km5ZXQ: "x1wh8b8d",
    keTefX: null,
    k71WvV: null,
    k1K539: "xat24cr",
    kLKAdn: "xexx8yu",
    $$css: true
  }
};

mellyeliu
mellyeliu approved these changes May 19, 2025
View reviewed changes
Copy link
Member
@mellyeliu mellyeliu left a comment

Choose a reason for hiding this comment

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

lgtm! js size improvements look great

maybe we queue this for the next release because the 0.13.0 has some breaking changes already

@necolas necolas force-pushed the babel-plugin/default-property-specificity branch from f23901b to 5d08e71 Compare June 3, 2025 16:58
@necolas necolas mentioned this pull request Jun 10, 2025
Closed
@necolas
[babel-plugin] Make 'property-specificity' the default 'styleResolution'
75194ef 
Changing the default styleResolution enforces more disallowed shorthands
and reduces the size of the generated JavaScript objects.
@necolas necolas force-pushed the babel-plugin/default-property-specificity branch from 5d08e71 to 75194ef Compare June 26, 2025 20:53
@necolas necolas merged commit 58a569e into main Jun 26, 2025
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mellyeliu mellyeliu mellyeliu approved these changes

@Jta26 Jta26 Awaiting requested review from Jta26 Jta26 is a code owner

@vincentriemer vincentriemer Awaiting requested review from vincentriemer vincentriemer is a code owner

Assignees
No one assigned
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
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@necolas @mellyeliu @facebook-github-bot
0