Move global type declarations to a separate import

[Alphy11]

Hey! Absolutely love using twin.macro.

One issue we are hitting is that if we ever import twin.macro the global declaration of the tw prop occurs on any component. This means that any component regardless of if it supports the css prop, or the className prop receives this type.

As an example, in https://github.com/ben-rogerson/twin.examples/tree/master/component-library-emotion when using any of the components you defined, the tw prop is available, even though it just gets swallowed. This creates a bad dev experience for devs when they see the prop available, and it doesn't actually affect anything. Either: moving to the approach that emotion uses to only add it if className is available, or, moving the global declaration out of the default export, so we can import tw and GlobalStyles separately.

[ben-rogerson]

Hey there, great to hear you've been enjoying twin.

I'm keen on improving the types or looking over a pr as I'm most busy right now.

moving to the approach that emotion uses to only add it if className is available

Would you be able to share this example - it sounds interesting.

[Alphy11]

Yeah! https://github.com/emotion-js/emotion/blob/f3c51e8aca287170e43110bee2e4527eacfcada4/packages/react/types/jsx-namespace.d.ts

That said, it still would be helpful to make the tw prop optional, as we would like to remove it for consistency reasons as well. We prefer not to modify the global JSX types, to simplify developer experience with using types.

[ben-rogerson]

Thanks for that example.
Sounds like a good feature to me - I'm heavily involved in the v3 release at the moment so there's slim chance I can look at this soon - but I will be able to look at a PR :hint: 🙂

[Alphy11]

Of course, happy to take a crack at it sometime soon-ish! seems relatively involved, so unsure when I'll pick it up. But it's at the top of my backlog as long as you're open to it.