Roadmap for stailwc

[arlyon]

👋 Welcome!

🚨 Want to get involved? We just added snapshot testing so go ahead and run the snapshot tests with cargo test -- --ignored and start hacking on failing diffs!

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 to swc 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 or styled-components through swc plugins, we can piggy back off of that and do swc-level transformations from tailwind directives to emotion or styled-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.

rm -rf .next && API_URL=https://dev-api.mdisrupt.com yarn dev > /dev/null 2>&1 &
sleep 3
echo triggering build
time (curl -s localhost:3000/experts > /dev/null)

Babel + twin.macro

triggering build

real    1m7.617s
user    0m0.006s
sys     0m0.002s

SWC + stailwc

triggering build

real    0m5.638s
user    0m0.003s
sys     0m0.003s

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.rs

• JSX attribute syntax
• template tag syntax
• important
• negative values
• tailwind config parsing
• custom font support
• global CSS
• emotion creation
• styled-components support
• arbitrary css
• transparency
• groups
• tailwind form plugin
• tailwind prose plugin
• excellent coverage of tailwind
• component syntax
• component inheritance syntax
• plugin suggestions
• recovering parser

[arlyon]

I will note that I am observing roughly 10-15x better build performance using swc and stailwc than with twin.macro and babel 🚀 🔥

[ben-rogerson]

Some great work here Alex!
Keen on having a chat on this? hit me up on discord?

[mosesoak]

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!

[ben-rogerson]

I'm keen if Alex is :)

[filipditrich]

Really looking forward to this! I've been waiting for some twin.macro alternative with swc support, in order to stop finally using Babel.
👍🏻

[reinvanimschoot]

This looks amazing! Is it possible to use this currently without nextjs?

I tried

    "experimental": {
      "plugins": [["stailwc", {}]]
    }

But got some vague errors.

Keep up the great work!

[arlyon]

Where exactly did you put that? If you mean using it with SWC on its own, yes it is possible, and there is an example in the examples folder. You will however need to convert your tailwind config following the process in index.js. If you'd like to dedicate some time to supporting this (and potentially writing a basic integration test in an examples folder) it would be more than appreciated.

[minhdtb]

@arlyon I have the same question. Does this plugin also support CRA or only nextjs?

[arlyon]

I would be open to a PR with an example for CRA. My assumption is that as long as swc is set up correctly with a recent version, that it should work out of the box but I don't have a premade example to point to.

I will mention that since the 'regular old swc' example works, that you should be able to just copy over the config stuff quite easily.

[MattCCC]

Hi, thank you for great plugin! Could you give us an insight regarding transparency issues? Are there any still persisting? Thank you 🙏

[arlyon]

Hi! The two primary remaining features are negative modifiers and transparency. The first works in a lot of cases but has edge-cases that are incorrect, while transparency is not handled at all. I plan on finishing those up once the name mangling bug from SWC is resolved upstream, which currently requires a pretty ugly (but functional) workaround. See #23 for more.

[arlyon]

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 7576 passed; 2646 failed. Now that the coverage information is so much more granular I am going to aim to close the gap while figuring out which tests not to support. The main areas now are some of the weirder negatives (all the basic cases work), suboptimal modifier parsing, some commands nested more than 2 deep (ie. border-spacing-x-5 is Plugin::Border(Border::Spacing(Spacing::X)) which the syntax doesn't support), as well as the workaround for the global styles and styled components.

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 :)