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

Merged
merged 2 commits into from
Dec 23, 2024
Merged

fix: avoid traversing on Program:enter #786

merged 2 commits into from
Dec 23, 2024

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

github-actions bot commented Nov 27, 2024

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.8jMZe8lI2n /tmp/tmp.u8Fz65Gvd3

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 567,110 567,110 1.00
· minified 10,232,512 10,232,512 1.00
rollup-example/.build/stylex.css
· compressed 100,626 100,626 1.00
· minified 757,176 757,176 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.)

@nmn nmn force-pushed the fix/late-compilation branch from 49f3500 to e4fa214 Compare December 23, 2024 10:16
@nmn nmn merged commit 82ce61f into main Dec 23, 2024
8 checks passed
@nmn nmn deleted the fix/late-compilation branch December 23, 2024 10:23
aminaopio pushed a commit to aminaopio/stylex that referenced this pull request Dec 23, 2024
* fix: avoid traversing on Program:enter
* chore: add a test for pre-plugins
aminaopio pushed a commit to aminaopio/stylex that referenced this pull request Dec 27, 2024
* fix: avoid traversing on Program:enter
* chore: add a test for pre-plugins
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