Support SWC

[vjpr]

SWC is a more-performant Babel replacement written in Rust. Next.js is already providing support for it.

Here is the tracking issue for babel-plugin-macros support: kentcdodds/babel-plugin-macros#144

[ben-rogerson]

Some pretty awesome tech for sure - here's my recent response on it:

https://twitter.com/HamatoYogi/status/1428225954531393537

[atxiii]

I wrote about it in my blog;
https://blog.mrcatdev.com/how-to-config-nextjs-for-babel-plugin-macros-like-twinmacro-without-disabling-swc-compiler

[ben-rogerson]

Looks like swc is planning to scrap the existing plugin api in favor of a rust-based one in v2 (they're currently at v1.2.81 and I'm unsure how long away they are from a v2 release):

Warning: Plugin apis are going to be deprecated in v2. With v2, swc will provide a rust-based plugin api instead.

From Using custom plugins with swc

[vjpr]

Plugin apis are going to be deprecated in v2

I have asked @kdy1 here for some further clarity on this. https://twitter.com/vrouesnel/status/1430472878231900160

A complete JS-based, Babel plugin API would be awesome, because you could migrate overnight to SWC, and then gradually port your plugins to native Rust plugins.

tweet: ...it's no small job though

Agreed. From swc@v2 it would require a full rewrite in Rust it seems. I hope the JS api is maintained.

There is also the upcoming Rome toolchain which is rewriting in Rust and also exploring using SWC, which could make SWC a good rewrite target.

[ben-rogerson]

Thanks for chasing that up - I see from the replies that it looks certain a rewrite would be required.
Problem with that is that I haven't written in rust before!

[jvanderen1]

Sounds like a good first project for someone to contribute 🤓

[lightyen]

There is a performance issue need to be solved: swc-project/swc#2175

[vjpr]

FYI, plugin api for SWC now released: https://twitter.com/swc_rs/status/1492454606118752257

[dredshep]

not possible to use twin macro with it yet right?

[ben-rogerson]

that's right

[zfogg]

why not?

[ben-rogerson]

Rust is the language used to create plugins for SWC but I have no experience - anyone know how to rewrite babel-plugin-macros in rust?

[ndom91]

@ben-rogerson was doing some googling, as swc seems to have been working on porting a bunch of babel plugins, but unfortunately not babel-plugin-macros (yet).

However, I came across another github issue where they mentioned similar functionality already built-in to swc core. Maybe this is sufficient for you / twin.macro as well? See: swc-project/swc#18 (comment)

EDIT: Ah nevermind, they were talking about babel-plugin-debug-macros, read too quick 😅

[arlyon]

Hi all (cc @ben-rogerson) I have been maintaining a plugin for 'native' SWC. It is now in a pretty good space as I've mainly been prototyping with it but it works out of the box using next.js 13.0.1 and their swc plugin api and I'm very happy with the speed so far (10x or so).

See here:

• https://www.npmjs.com/package/stailwc
• https://github.com/arlyon/stailwc

I have deliberately not bothered going down the babel-plugin-macros route as I was interested in seeing how feasible a pure-rust solution would be. It currently leans on the swc emotion / styled-components plugin, and transpiles all the tailwind styles to css directives.

See this discussion for a roadmap arlyon/stailwc#2

[MattCCC]

Thanks @arlyon ! Did you make it working with styled-components anyhow? I tried initially but compiler seems to fail on tw inside of css

[arlyon]

It works with both emotion and styled-components with a few caveats that will be resolved in the near future (waiting on upstream changes).

[koniuszy]

@arlyon
I've opened an issue for styled-components, great stuff - thank you!

Do you support this as well?
https://www.npmjs.com/package/babel-plugin-twin

[arlyon]

stailwc does not need to be imported in files where you choose to use it, simply use the tw attribute.

[mosesoak]

We're also pining for a SWC solution -- @arlyon are you putting any energy into stailwc? Seems really promising...

I also wanted to ask about a workaround that was posted a while back: https://github.com/c-rick/next-twin from @c-rick

And the same solution for emotion https://github.com/atxiii/next-twin-swc-emotion (blog post: https://blog.mrcatdev.com/how-to-config-nextjs-for-babel-plugin-macros-like-twinmacro-without-disabling-swc-compiler) from user @atxiii.

Is this a potentially viable interim solution until someone figures out how to rearchitect Twin for Rust? I haven't had any luck with it yet, but I'm on Next 13 which might make a difference. I get MacroError: The macro you imported from "undefined" is being executed outside the context of compilation with babel-plugin-macros.

[ben-rogerson]

@mosesoak I've updated all the next.js examples to now use that workaround which enables SWC. Ref

[u3u]

This solution seems to require putting the files that use twin.macro into the specified directory and compiling them with babel, which doesn't make sense if almost all the files in my project use twin.macro, right?

[ben-rogerson]

The aim there is to allow swc to work alongside babel and if performance becomes an issue then drop back to the old config that disables swc.
Also, you can adjust your directories in withTwin.js - so it doesn't box you in to a folder structure.

[wottpal]

that's super awesome, just updated one of my twin.macro projects and it worked almost instantly 🔥

it would be even nicer, if the withTwin function gets supported by twin.macro itself! to get something like:

// …
 
// eslint-disable-next-line @typescript-eslint/no-var-requires
const withTwin = require('twin.macro/withTwin')([
  'src/components',
  'src/pages',
  'src/styles',
])
nextConfig = withTwin(nextConfig)

// …

i think, even if it's a workaround, it should be at least considered to move it into the package itself. as stated above it's unclear when an actual rust support for babel-plugin-macros will happen…

[ben-rogerson]

Yep agreed, that would tidy it up. I was planning on publishing a separate pkg but I do like the idea of grabbing the config from twin.macro.
Trouble with that idea is there's a different config per css-in-js solution and each of them requires different babel packages.

[mgcrea]

Would be awesome to have this!

Might be easier to achieve now that there is an official [@swc/plugin-styled-components](https://github.com/swc-project/plugins/tree/main/packages/styled-components plugin), should give a pretty good insight of what a future swc for twin.macro would look like.

Any work started on this or not yet?

[maurimura]

@ben-rogerson I love twin.macro and I really like to have support for swc.

I'm not a Rust expert, but I'm happy to help to port this as much as I can. Is there any plan in mind?

[ben-rogerson]

I'd love to port it but afraid my skills in Rust haven't progressed enough to start on this yet.
I've already rewritten twin to provide a separation from babel-macros - all of the macro code is within the macro directory and so that's the folder that will need to be reimplemented in rust/typescript.

[wfischer42]

I'm curious about Turbopack support as well. After trying it out for the first time, my "dream" developer experience would combine Turborepo with tailwind via twin.macro and styled-components.

If it's already separated from babel-macros, the Turbopack docs seem to suggest that a rust port wouldn't be necessary to use it with turbopack / swc, but I don't fully understand the relationship so I'm not sure if I'm interpreting it right...

[arlyon]

@wfischer42 I contribute to turborepo/turbopack, so I may be able to give some insight. Turbopack does not yet support SWC plugins but will in the future, meaning by extension that stailwc (disclaimer, I am the author) will also work.

They are also experimenting with native support for js-based plugins, so there may be a world where webpack compatibility works out of the box (cough like rspack https://www.rspack.dev/ cough). Note that SWC used to have a js plugin system, but this has been replaced with rust.

I personally use stailwc for my side projects (and at work) as I can implement missing parts as I work, but it is rough around the edges as this is all currently 'bleeding edge' tech.

[bryhasagithub]

Hey! Just checkin in to see if y'all have found a Rust Developer yet? Would love to hear updates on this if there are any :)