Could use more clarity around { debug: true } messages

[jeremyzilar]

On my first install and run of this plugin (with { debug: true } on in our .babelrc.js file), I am getting a series of messages in the console and would like to find out more about what they mean. I also looked for this information in the Readme.

As a new user, it would be nice to add more clarity.

babel-plugin-twin: Injected import in “/Users/jeremy/Sites/joinbonsai/client/src/marketingRoutes.tsx”
babel-plugin-twin: Skipped injection in “/Users/jeremy/Sites/joinbonsai/client/src/components/marketing/shared/section.tsx”

Before digging into why I am getting them, I wonder if more clarity could be added by grouping output messages by Injected and Skipped and offering a one-line note about why and what could be done? Or just adding a block of text to the README.

Thank you for working on this!

[jeremyzilar]

Oh now I understand why import tw, { styled } from "twin.macro" was saying 'tw' is defined but never used in only some of the files. If we are using <div tw="h-48">, then it doesn't need the import in the file. But it was working like this before we installed this plugin... will keep investigating

[ben-rogerson]

Cheers for the feedback, I'll put some more info into those debug messages.

If we are using <div tw="h-48">, then it doesn't need the import in the file. But it was working like this before we installed this plugin...

Without babel-macro-twin we have to add import 'twin.macro' in the file to use the tw/css props (unless the css prop is getting injected via another babel plugin).