MathiasGilson / Tailwind-Styled-Component

Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering
MIT License
818 stars 43 forks source link

Fix: library returning any by default #73

Closed L-Marcel closed 2 years ago

L-Marcel commented 2 years ago

I tried to use the library with Typescript, but Typescript is returning "any" value type for all exported values.

I see an error in the last lines. Apparently, the "Object.assing" is returning "any" because the type of the "templateFunctionFactory" is "any".

const tw = Object.assign(templateFunctionFactory, intrinsicElementsMap);
//tw is any

In Styled Components exists an advanced typescript reference to return by default the map off all elements in the DOM and pass like as a function the same value.

But, I not understand her. So I passed the "templateFunctionFactory" like as an attribute.

const tw = Object.assign
  ({
    factory: templateFunctionFactory
  }, intrinsicElementsMap);

//tw is  { factory: any; } & IntrinsicElementsTemplateFunctionsMap

Now it's possible to pass the props:

tw.button<{ variant: string }>`
  ${props => props.variant}
`

/*
props is Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<...>> & {
    ...;
}

and props.variant is a string
*/
MathiasGilson commented 2 years ago

Hello @L-Marcel,

I'm not sure to understand the code you submitted and it doesn't pass the tests.

It looks like this is just a hacky way to get rid of a typing issue without solving it, so I can't merge this as is.

I think the other PR might solve your issue though.

Please feel free to reopen if you think this is addressing the issue and not just going around it

Many thanks