Can't get twin.macro working with Bit

[demeralde]

Description

I haven't been able to get twin.macro working with Bit. I've installed a custom Babel config and babel-plugin-macros, however, it's throwing this error:

MacroError: The macro you imported from "undefined" is being executed outside the context of compilation with babel-plugin-macros. This indicates that you don't have the babel plugin "babel-plugin-macros" configured correctly. Please see the documentation for how to configure babel-plugin-macros properly: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md

Specifications

• Bit version: 0.0.512
• Node version: v14.17.6
• yarn version: 1.22.11
• Platform: Pop!_OS 21.04

Context and additional information

I've reproduced this issue here: https://github.com/dspacejs/react-tailwind-env

The error is in the tailwind-bit component.

Try running bit test ui/button (an example component which uses twin.macro), and you should get the error.

[GiladShoham]

This is more of a jest issue than a bit issue.
You will need to override the jest config and make sure to use babel for transform, then add the plugin to the jest config.
read more here - jaredpalmer/tsdx#383
Keep in mind that during bit build it will work without any change, as in the build/tag command we provide jest with the already compiled code (to better test the real usage)
see image attached

Also there are few other fixes you need to do to make it work.
I've created a PR for you - demeralde/react-tailwind-env#1
(This doesn't handle the jest config for bit test command.

[demeralde]

For reference, I got twin.macro working with Bit using the following env: https://github.com/dspacejs/react-tailwind-env/tree/main/components/envs/tailwind-bit

I basically just had to overwrite the Jest config, and add a custom transform which uses babel-plugin-macros.