Importing tw in all components

[eleretic]

Hi!

I was wondering if there is a way/plan to not have to import tw in all components which we want to use the prop in?
With emotion, the css prop is injected through a babel plugin. https://github.com/emotion-js/emotion/tree/master/packages/babel-preset-css-prop

I think it would be pretty cool to have built in tw prop throughout all components. Are there recommendations against this?

Was that discussed before?

Thanks!

[ben-rogerson]

Heya William 👋

I don't have any plans to avoid the 'twin.macro' import completely (like a vanilla babel plugin).
But you can currently use the tw (and css) prop by just importing the library like this:

import 'twin.macro'

const InputWithTwProp = () => <input tw="border hover:border-black" />

If you ever use styled-components instead of emotion, you'll also need to make sure "autoCssProp": true, is in your twin config.

[eleretic]

Hi Ben,

Thanks for the suggestion! That said, I am looking for a way to not have to add yet another import in every file we use :) I found a sub-optimal solution with https://github.com/PavelDymkov/babel-plugin-auto-import#babel-plugin-auto-import

Maybe I should try my hand at making a babel plugin

[ben-rogerson]

I recall someone trying something like this in the past but not getting too far with it.
They had some issues using a babel plugin to add imports for twin (another babel plugin).
But you might get further with it, let me know how it goes 👍

[luknl]

Hey, they just released a npm Babel plugin for twin!
(more info here)