Macro for tw prop

[itsMapleLeaf]

Hey! I put together a super barebones babel macro, which transforms tw="..." into className={tw("... ")}, and also adds the appropriate import. Here's the repo: https://github.com/itsMapleLeaf/twind.macro

• Install from git: npm i -D tw-in-js/twind.macro (or yarn add or pnpm i)

• Add babel-plugin-macros https://github.com/kentcdodds/babel-plugin-macros

• Use like so:

  import 'twind.macro'
  const Button = () => <button tw="bg-blue-500">button!</button>

I recall seeing a macro listed on this project's roadmap somewhere, so I haven't published it to NPM or anything. This is just a head start more than anything, and still has some edge cases unaccounted for (duplicate imports, className and tw prop on the same element, etc.)

[itsMapleLeaf]

Update: I ironed out the remaining edge cases I mentioned: merging with existing className, and allowing separate use of tw, which is re-exported from the macro: import { tw } 'twind.macro'

I can't really think of much else to add here; the rest of the magic is handled by the tw function, which is nice. I guess the remaining thing is to maybe clean up the code a bit, and/or import it into the twind repo 👀

[sastan]

This looks really great. I have some family things to take of this week.... In the mean time i have created a repo (https://github.com/tw-in-js/twind.macro) if you would like to have twind.macro in the @tw-in-js org.

Because there already is twin.macro i'm unsure if we can publish it as twind.macro. Maybe @twind/macro... Would that work with babel macros?

[itsMapleLeaf]

Yeah, generally speaking, anything ending with macro will work. We also have the option of running it as a subpackage of twind, so twind/macro

[sastan]

That would mean all the babel dependencies need to be installed regardless if you are using it. We aim to have as little as dependencies as possible. I would prefer @twind/macro if that would work.

[itsMapleLeaf]

Ah, makes sense. Yeah, @twind/macro sounds good to me 👍 I'll push up my code in a bit

[itsMapleLeaf]

Published the code and added a placeholder README 🔥 https://github.com/tw-in-js/twind.macro

[sastan]

Great. I hope i can look through code soon and we can publish this asap! Thank you so much for the work!