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

fix: avoid traversing on Program:enter #786

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Conversation

nmn
Copy link
Contributor

@nmn nmn commented Nov 27, 2024

Better compatibility with pre-transformation

StyleX is sometimes used alongside other code transformation that can generate StyleX code. Examples include the React-Strict-DOM Babel plugin and tailwind-to-stylex.

The StyleX compiler has to do multiple passes of the entire tree to compile and then optimize the code. Previously, some of the transformations happened using a path.traverse in Program:enter. Because of how Babel runs multiple plugins, this meant that StyleX would often transform before previous transforms were completed. This could result incomplete compilation.

This change moves some code around to move things to the normal tree traversal or Program:exit. This will ensure that StyleX can consume any code generated by previous transforms.

Note

There is no functional change to the output of the Babel plugin.

@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 Nov 27, 2024
Copy link

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.qPIIp4d3tx /tmp/tmp.HP3qK9rivF

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

@necolas
Copy link
Contributor

necolas commented Nov 27, 2024

FWIW the RSD preset doesn't generate any StyleX code

@necolas
Copy link
Contributor

necolas commented Nov 27, 2024

Is this something you can unit test to validate?

@nmn
Copy link
Contributor Author

nmn commented Nov 27, 2024

FWIW the RSD preset doesn't generate any StyleX code

I should explain better, but RSD will transform stylex={} into {...stylex.props()} right? StyleX normally optimizes them away if all the styles are defined locally. When the stylex.props is inserted by a Babel plugin, it may fail to do so.

Is this something you can unit test to validate?

Yes, I don't want to add a new dependency just for a test, so I'll try coming up with a minimal Babel plugin just for the test.

(I tested this independently on top of tailwind-to-stylex.)

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