Make StyledComponent type polymorphic

[FezVrasta]

I started to use the new Flow types into my project, and I figured out it would make sense to make StyledComponent a polymorphic type, so that we can do this:

const Foo = styled<Props>(props => <div {...props} />)`
  color: ${props => props.color};
`;

const Bar = styled<Props>('div')`
  color: ${props => props.color};
`;

Which would allow to:

1. type props inside the styled component logic
2. allow to workaround the lack of tagged template support of Flow

Unfortunately I doubt my Flow knowledge is good enough to implement this without breaking the existing types, which make sense because we also want to allow:

const Foo = styled.div<Props>`
  color: ${props => props.color};
`;

What do you think?

[Andarist]

Well, I'm not sure if there is anyone other than you willing to jump on this. This definitely makes sense, I just don't have enough expertise with flow to implement this myself. I also don't understand how those types were used so far, so it's hard to assess what might be breaking and what is not.

I'm not against breaking changes in types though - I believe that we can release type changes each minor version~ (it's completely unergonomic to make them bump major versions).

[FezVrasta]

I think it could be enough to change the CreateStyled call signature, while leaving the [key: string]: ... type as is it now.

That way we can still do styled.div<Props>(), we can do styled<Props>(fn)(), but we'll not be allowed to do styled(fn)<Props>() (which I think would be okay).

[Andarist]

This got fixed by #1588 (merged to next branch)