Newbie here: how to view the post-babel code that is generated by twin.macro?

[ChristineTham]

Newbie question:
Is it possible to view the transformed version (for styled-components / emotion) of the source file? I gather I can invoke babel-cli with the right options and view the output file, but being a newbie I don't know how to do this. How were the output examples in the documentation generated?

Another newbie question:
I am thinking it may be cool to transform a Tailwind component into theme-ui or chakra-ui and I was hoping there can be an automated way of doing that. Is this possible, or am I better off just writing the component from scratch using the Tailwind as a reference rather than automatic translation?

[ben-rogerson]

Great questions!

To view the transformed output you need to run the file through babel.

Once you’ve setup twin, you can run babel over the file like this:

npx babel index.js --out-file index-compiled.js

But to make this easier, you can use the twin-output-tester which is all setup and ready to go.

I am thinking it may be cool to transform a Tailwind component into theme-ui or chakra-ui and I was hoping there can be an automated way of doing that. Is this possible, or am I better off just writing the component from scratch using the Tailwind as a reference rather than automatic translation?

I believe you’ll need to convert the styling in those components manually as the code varies too much between those UI frameworks.
If you use the tester above, you'll at least be able to copy and paste some of the code.

[ChristineTham]

Thank you so much. And thanks for creating an awesome utility!