Is it possible to integrate twin.macro natively with Mitosis?

[ohkimur]

I integrated twin.macro with Mitosis, but only partially. I'm interested to see if there are parts of the compiler that play better with Babel since my current approach strips the typescript types away, and that's a significant downside.

[samijaber]

Many questions:

• what's twin.macro?
• what does it mean to integrate it with Mitosis?
• what types are being stripped away, and where?
• what partial work did you do already?

[ohkimur]

@samijaber twin.macro is a way to use tailwindcss as CSS in js. I find this very cool because you can keep all the CSS inside each component. Basically, with an approach as twin.macro we could have the best world of tailwindcss and CSS in js.

It's implemented as a macro for Babel, which is not ideal, but conceptually I love the idea (and I'm not the only one).

[ohkimur]

@illustrofia If you have any clever ideas regarding this topic, we can chat here about this topic.

[ohkimur]

@samijaber @mhevery @steve8708 As far as I understand, Mitosis uses Babel under the hood. Is it possible to expose the Babel configuration and allow for adding additional presets and Babel plugins? If that would be possible, integrating something like twin.macro would be very easy.

NOTE: I managed to use Babel to transpile the tsx files with tailwindcss classes to css-in-js tsx files. Then I pass those files to Mitosis to generate the targets. It works great, but I would love to be able to avoid the extra transpile step if possible. I think this could be achieved by exposing the babel configuration from mitosis.