How can I get Bit to work with twin.macro?

[demeralde]

I can't seem to get Bit working with twin.macro. Has anyone here set this up with Tailwind CSS?

Basically the problem is it thinks this styled import doesn't exist:

import tw, { styled } from "twin.macro";

const Container = styled.header(() => [tw`w-full bg-red p-3`]);

And then it throws this error:

styles.ts:3 Uncaught TypeError: Cannot read property 'header' of undefined
    at Object../node_modules/@cannabitrx/applayout.navbar/dist/styles.js (styles.ts:3)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at Object../node_modules/@cannabitrx/applayout.navbar/dist/navbar.js (navbar.tsx:11)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at Object../node_modules/@cannabitrx/applayout.navbar/dist/navbar.composition.js (navbar.composition.tsx:2)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at Module../node_modules/.cache/bit/teambit.preview/preview/base/tailwind/webpack/__compositions-1627981342583.js (__compositions-1627981342583.js:7)

twin.macro has worked fine with my other projects. So I'm not sure what's going on here.

[ben-rogerson]

Try switching the styled import with your css-in-js library import, does it still throw?

[demeralde]

@ben-rogerson yep this seems to work:

import tw from "twin.macro";
import styled from "@emotion/styled";

I'm not sure why I can't import styled from twin.macro, though.

Now I'm getting this error (which I'm currently investigating):

Uncaught 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

I'm guessing it's probably because Bit hasn't installed the proper Babel plugins.

[ben-rogerson]

Sounds right on the money there.
Also looks like babel-plugin-macros can be added pretty easily using their babel compiler - is that what you're using here?