Transitioning from Babel to SWC Rust WASM

jantimon / next-yak

a streamlined CSS-in-JS solution tailor-made for Next.js, seamlessly combining the expressive power of styled-components syntax with efficient build-time extraction and minimal runtime footprint, ensuring optimal performance and easy integration with existing atomic CSS frameworks like Tailwind CSS

https://yak.js.org

103 stars 2 forks source link

Transitioning from Babel to SWC Rust WASM #110

Open jantimon opened 1 week ago

jantimon commented 1 week ago

Yak goes SWC

Current Status

We currently use a Babel plugin for next-yak: babel-yak-plugin.ts
A Rust version using SWC is in development: lib.rs

Reasons for Transition

SWC API offers advanced capabilities:
- Better control over variable scopes thank to SWCs variable ID system
- Easier to control child visiting with visit_mut_children_with
- Simplified handling of Template Literals
Performance improvements with Rust and WASM
Right now next-yak runs before the default Next.js (SWC) compilation with babel -> leading to compiling everything twice

Open Questions

We have to decide wether we will support for .yak with SWC

Next step:

Testing injected comments (maybe with helpful improvements by SWC team)

jantimon commented 1 week ago

if the migration to swc is successful we should add it to the swc test suite:

https://x.com/kdy1dev/status/1809491396241539113?s=46&t=ekpYTshuIMZzGwibybTgkA

and add @swc/counter as dependency

https://x.com/swc_rs/status/1808501197504151593?s=46&t=ekpYTshuIMZzGwibybTgkA

jantimon commented 6 days ago

an ultra realistic rendering of a cute but badass young yak with shaggy fur, large horns, a colorful backpack, and a wide, joyful grin, riding confidently on a rusty flying rocket with the brand SWC written in yellow letters on the rocket at max speed, futuristic background

PR: https://github.com/jantimon/next-yak/pull/116/

Missing parts:

[ ] .yak.ts imports
[x] inject the yak import (import __styleYak from "./file.yak.module.css!=!./file?./file.yak.module.css";)
[x] fix css-mixin-nested
[x] configure in withYak
[ ] ensure all test cases from babel are covered
[x] add special thanks to @kdy1 to readme for his relentless support
[ ] remove all TODOs
[ ] fix playground
[ ] update docs

Fun Facts:

the idea for the name yak came from @jaggli and @j7i bought https://www.galaxus.ch/en/s5/product/living-nature-highland-cow-30-cm-stuffed-animals-15800562 as mascot

kdy1 commented 6 days ago

I really love the image

paulm17 commented 3 days ago

More a comment than anything else. But why SWC instead of OXC? I remember it was said that OXC was 3x faster?

Or are there any other factors at play here?

Btw, I don't know anything about this except that I find it fascinating and watching this unfold gives me something else to look at and research later. So thanks for making it public. 🚀

Mad-Kat commented 2 days ago

Thanks for writing. It's always good to get insights from the outside world 😄

At the moment this project is aimed at users of next.js and SWC is already standard there. It's relatively easy to migrate from Babel to SWC and we have some (little) experience on how rust and the plugin system of SWC works. Whereas the transform story of OXC is not yet finished (https://github.com/oxc-project/oxc/issues/974). Correct me if I'm wrong, as we didn't look too much into the rust ecosystem for babel transpilations. An additional plus point is that @kdy1 is so easy to approach and helps without hesitation when we have questions.

But this is just a step on our way and only time will tell what happens along the way. If you see good reasons or missed opportunities please don't hesitate to write us, open tickets or try something with a new PR. We're always happy to learn more, help people and drive the ecosystem forward.