Roadmap for stailwc #2
Replies: 7 comments 5 replies
-
I will note that I am observing roughly 10-15x better build performance using |
Beta Was this translation helpful? Give feedback.
-
Some great work here Alex! |
Beta Was this translation helpful? Give feedback.
-
Wow this is super exciting. I hope you two end up collaborating, as this will truly be game-changing. Maybe I'll study Rust and jump in at some point! |
Beta Was this translation helpful? Give feedback.
-
Really looking forward to this! I've been waiting for some |
Beta Was this translation helpful? Give feedback.
-
This looks amazing! Is it possible to use this currently without nextjs? I tried
But got some vague errors. Keep up the great work! |
Beta Was this translation helpful? Give feedback.
-
Hi, thank you for great plugin! Could you give us an insight regarding transparency issues? Are there any still persisting? Thank you 🙏 |
Beta Was this translation helpful? Give feedback.
-
Small update, I spent some time overhauling the snapshot tests to handle individual test cases, and have also added transparency support to most plugins. Current coverage compared to twin.macro is I have opened two issues with SWC that are blocking a '1.0' release (swc-project/swc#7430 and swc-project/swc#7429) and will update here with progress :) |
Beta Was this translation helpful? Give feedback.
-
👋 Welcome!
Motivation
SWC is a fast alternative to babel written in rust that supports rust-native plugins. Naturally, with a focus on speed, we can expect build times to improve dramatically. nextjs has recently started using
swc
internally which means great speedups for most people.Twin Macro
Twin macro is one of my favourite libraries. It is fast, informative, integrates nicely with my IDE, and provides an excellent css-in-js experience. However, it doesn't work with swc, meaning you are 'stuck' using babel with next meaning slow builds and a 'deprecated' build process. There is no simple way to port
twin.macro
over toswc
as-is as it depends on babel-plugin-macro which is, to no surprise, heavily tied to babel.SWC Plugins
An SWC plugin defines a transformation over a source file. Now that nextjs supports
emotion
orstyled-components
through swc plugins, we can piggy back off of that and do swc-level transformations from tailwind directives toemotion
orstyled-components
directives. This means our plugin essentially just 'translates', and heavily reduces the amount of work required.Results
I ran some basic benchmarks and found some pretty promising results so far. The benchmarks are not at all rigorous (hence the 'early indications' disclaimer), and consist of clearing the cache, waiting for the server to launch, and then visiting a page of our nextjs web app, and waiting for a build of that page.
Babel + twin.macro
SWC + stailwc
That is a 10x improvement! 🚀 🔥
This is averaged across a few runs with little regard for the scientific process however I think its clear from the gap that we are talking about an order-of-magnitude improvement.
Roadmap
We have a fairly solid foundation, but we are still missing a number of 'subjects' (ie the tailwind directives). Do get a good idea of what is available, look at the
literal.rs
file: https://github.com/arlyon/stailwc/blob/master/src/parse/literal.rsBeta Was this translation helpful? Give feedback.
All reactions