CSS-in-JS & Macro Support

[jeremyswann]

Firstly loving this package guys, nice and minimal.

It would be nice to be able to replace the default rendered className: string as a macro supported string like twin.macro using the tw: string prop. Otherwise, I have to generate a css file just to support the class transitions, not the worst thing ever but I think there is enough of a use case for a feature here. This could also potentially support CSS-in-JS for packages like Emotion's css prop?

maybe called macro: string then in use; could be "tw" or "css" the resulting div generated would render tw="transition duration-100 ease-out" instead of className="transition duration-100 ease-out":

<Transition
  macro="tw"
  show={isShowing}
  enter="transition duration-100 ease-out"
  enterFrom="transform scale-95 opacity-0"
  enterTo="transform scale-100 opacity-100"
  leave="transition duration-75 ease-out"
  leaveFrom="transform scale-100 opacity-100"
  leaveTo="transform scale-95 opacity-0"
>
    I will fade in and out
</Transition>

[RobinMalfait]

Hey! Thank you for your suggestion!
Much appreciated! 🙏

I don't think this is a good idea from a library perspective. There are new tools every day, and I don't think it makes sense to provide API's in Headless UI for every new tool that exists. Instead using a low-level API like we now have with classNames makes more sense. Most tools like emotion, styled-components, twin.macro, ... all have a way to generate the required classNames.

We discussed this before and I think the better approach is to use the tools that already exists, checkout this thread: #80 (comment)

[jeremyswann]

Thanks @RobinMalfait, that's exactly what I needed 👍🏼