Fix: #43 overly complex typing issues, fixes #61 ,adds withStyle functionality

[Dudeonyx]

This pr fixes the typing issues #43 from v2.1.4.

The issue stemmed from keyof JSX.IntrinsicElements which was quadractically expanding for some reason. This fix simply gets the prop typing for input Elements rather than the tag name.

I actually came up with this fix months ago but I couldn't post it because I was at a data science boot camp then had to deal with health issues that made me stop programming for some time. Sorry really should have made time for this sooner

I also heavily borrowed some of styled-components typing to make this more robust.

This also fixes issue #61 which could be a breaking change since the output is different than before when dealing with inherited classes and $as props, depends on how you think about it.

Adds withStyle functionality: this is there for when truly dynamic css properties are needed. e.g The following example allows the color of Box to be set to any color name/hex/RGB/HSL value inputted as well as the width something that tailwind cannot handle in a truly dynamic manner

const Box = tw.div`
    h-32
    w-32
    m-9
`.withStyle<{ color: string }>((p) => ({ backgroundColor: p.color, width: p.width }))

const ColorChange = ()=> {
    const [color, setColor] = useState("blue")

    const onChange = (e: any) => {
        console.log(`input`, e.target.value)
        setColor(e.target.value)
    }
   const [width, setWidth] = useState(100)
   const onChange2 = (e: any) => {
        console.log(`input`, e.target.value)
        setWidth(e.target.value)
    }
  return (
              <div>
                <p>Try changing the color code below</p>
                <Input onChange={onChange} value={color} />
                <p>Try changing the width below</p>
                <Input onChange={onChange2} value={width} />
                <Box color={color} width={width + 'px'}/>
            </div>
  )
}

[Dudeonyx]

@rayzr522 please help look at it

[MathiasGilson]

Hello @Dudeonyx,

I hope you are feeling better now!

Thank you so much for taking the time to do all this work! Great job!

I'll have to test it a bit but I'll try to merge it as soon as possible.

Take care

[MathiasGilson]

Hey @Dudeonyx

I got this error message on tailwind.tsx

Do you think it could lead to compilation issues?