Skip to content

[babel-plugin] polyfill all nonstandard properties in 'legacy-expand-… #1092

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

Merged
merged 1 commit into from
Jun 9, 2025

Conversation

mellyeliu
Copy link
Member

@mellyeliu mellyeliu commented Jun 5, 2025

Adding some missing polyfills for some of the more obscure nonstandard properties we use internally. Previously these would get translated to LTR/RTL, but we need to add mappings to standard logical properties.

  • borderStart
  • start, end -> insetInlineStart, insetInlineEnd
  • float: start, end -> float: inline-start, inline-end
  • borderTopStartRadius -> borderStartStartRadius

Synced with the flag turned on and off internally, all screenshot tests passing. Added some tests to to document the expected behaviour. These tests are a bit verbose and the structure hard to navigate, and I'm hoping we can clean them up and reorganize them soon after we ship logical styles.

  • transform-legacy-polyfills-test contains tests for all nonstandard properties
    • added both variants of legacy-expand-shorthands
  • stylex-transform-legacy-shorthands-test.js contains all expanded shorthands
    • added enableLogicalStylesPolyfill: false tests

@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 Jun 5, 2025
Copy link

github-actions bot commented Jun 5, 2025

workflow: benchmarks/perf

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

[email protected] compare
node ./compare.js /tmp/tmp.ke0E8eo1dg /tmp/tmp.ZBYhtKvX4o

Results Base Patch Ratio
babel-plugin: stylex.create
· basic create 529 536 1.01 +
· complex create 183 184 1.01 +
babel-plugin: stylex.createTheme
· basic themes 457 463 1.01 +
· complex themes 43 43 1.00

Copy link

github-actions bot commented Jun 5, 2025

workflow: benchmarks/size

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

[email protected] compare
node ./compare.js /tmp/tmp.PlW3KoBZkD /tmp/tmp.aPvymlS3Lp

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 537,611 1.00
· minified 7,435,904 7,435,904 1.00
benchmarks/size/.build/stylex.css
· compressed 100,509 100,509 1.00
· minified 754,513 754,513 1.00

Copy link
Contributor

@necolas necolas left a comment

Choose a reason for hiding this comment

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

Stamping to unblock. This will be faster than blocking on codemodding. And all these tests for legacy features will get deleted eventually

@mellyeliu
Copy link
Member Author

Most of the common rules margin/padding/border are codemodded, but there are a few dozen stragglers from autogen code or from folders where the lint rule is not enabled. valid-styles also never had autofixes for the less common nonstandard properties, only margin/padding/border properties. Opened a PR to add autofixes for the remaining properties: #1093

@mellyeliu mellyeliu merged commit 5b2fda1 into main Jun 9, 2025
9 checks passed
@mellyeliu mellyeliu deleted the ltr/rtl-fixes branch June 9, 2025 16:09
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.

3 participants