Typescript support for extended Styled Components

Hi, I’ve been using the macro to extend components and have recently started also using Typescript and I’m getting errors from the tsc when using extended components:

So, this works in regular JSX:

const PinkButton = tw(Button)`bg-pink`;

but when it becomes TSX then I get this error:

Argument of type 'FunctionComponent<Props>' is not assignable to parameter of type 'TemplateStringsArray'.

The workaround for this is to import styled and call it like this:

const PinkButton = styled(Button)`${tw`bg-pink`}`;

Which is great for now but everywhere else I’m using tw.div etc and would like to be able to consistently use tw instead of having to import styled when extending components.

https://github.com/ben-rogerson/twin.macro/pull/24 fixed other issues but there’s still this case.

[ben-rogerson]

Thanks for your thoughts on this Daro. I agree with your Tailwind alignment points and thanks for alerting me to the lack of documentation on the component wrapping. I use component wrapping on the regular and actually don’t go past a single level 😮 I’m planning to create some TypeScript demos in the future and it would be great to add typescript support for the feature without the workaround.

Edit: I’ve now documented the wrapping in feature in the readme.

[itsMapleLeaf]

I don’t really feel personally motivated to implement this. Firstly because it’s not documented(?), and ideologically, I feel like using this a lot would lead down an inheritance-heavy path over that favoring composition. An example in case I’m unclear:

// these are only a few classes, but imagine they're way longer, since buttons generally are
const Button = tw.button`...`
const PinkButton = tw(Button)`bg-pink`
const UnderlineButton = tw(Button)`underline`
const PinkUnderlineButton = tw(/* ??? */)` ??? `

// I'd prefer this
const pinkButtonStyle = `bg-pink`
const underlineButtonStyle = `underline`

// then apply them to any element/component
// don't have to make new styled components, or fool around with 'as' prop
<button css={pinkButtonStyle} />
<a css={underlineButtonStyle} />
<Link to="/" css={[pinkButtonStyle, underlineButtonStyle]} />

There are ways around the diamond problem I’ve pointed out, but with the alternate path here, it’s something I don’t even have to think about, and I think it aligns more with Tailwind’s core philosophy.

---

That aside, if someone wants to pick up the mantle, I’ll gladly review the PR, provided the type tests are also updated