Not working with `twin.macro`

demeralde commented 3 years ago

I can't seem to get Bit working with twin.macro.

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)

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

Reproducible environment

https://github.com/dspacejs/react-tailwind-env

Check the tailwind-button.tsx component for where I've tried using twin.macro.

GiladShoham commented 3 years ago

for this to work you will need to extend the webpack babel plugin with these plugins:

"babel-plugin-twin",
"babel-plugin-macros",

So in the webpack transformer of the react-tailwind-env, you will need to search for the correct rule in both devServerConfig and previewConfig (the rule is not exactly the same) and add them. You will also need to make sure these 2 plugins are dependencies of the env.

demeralde commented 3 years ago

@GiladShoham thanks, I'll give it a shot and let you know how it goes.

teambit / react-tailwind-env

Not working with `twin.macro` #5

Reproducible environment