MathiasGilson / Tailwind-Styled-Component

Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Allow falsy return values in template elements

mauriceackel opened this issue · comments

Hi,

when I try to do this:

const Heading = tw.h1<HeadingProps>`
  text-2xl
  ${(props) => props.primary && 'text-red-500'}
`;

where primary is of type boolean | undefined...

I get a TypeError:

Type 'false | "text-red-500" | undefined' is not assignable to type 'string | null | undefined'.
  Type 'boolean' is not assignable to type 'string'.ts(2322)
[tailwind.d.ts(23, 83): ]()The expected type comes from the return type of this signature.

Given that there is this code already, could the allowed return type for template components be extended to include false? (Or perhaps even more "falsy" typescript types?)

Edit:
The reason for this request is that the only other way I see to achieve this is to use props.primary ? 'text-red-500' : undefined, which I find overly verbose for this task

Hey @MathiasGilson, I created #63 to support this functionality. I would be glad if you can take a look at it!