styled components typed as "any"

[FezVrasta]

Current behavior:

Right now the styled components are annotated with any, I was wondering why this decision was made and if it's something you'd be interested in fixing? I'm referring to the Flow types.

Expected behavior:

I would expect the generated styled components to have a React$ComponentType type rather than any.

Environment information:

• react version: 16.9.0
• emotion version: 10.0.7

[Andarist]

Isn't the return type being annotated here -

emotion/packages/styled-base/src/index.js

Line 58 in a8b9a7f

return function(): StyledComponent {

?

[FezVrasta]

I think the styled component is

emotion/packages/styled-base/src/index.js

Line 85 in a8b9a7f

const Styled: any = withEmotionCache((props, context, ref) => {

At least, Flow marks const Foo = styled.div() as any

[Andarist]

That's weird because simplified version if this seems to work "as expected":
https://flow.org/try/#0PQKgBAAgZgNg9gdzCYAoVUCuA7AxgFwEs5swo44AKADwEoAuMbTAWwCMBTAJzAG9UAkLhIBnfGACGjCdgCeYALxgA5MsFcO+TF1ITUAX3TDsYsGwk8l5KrVRA

Could you check which version of the flow are you using? Might be that this is already fixed or that this is an issue with flow itself, not emotion's code.

[FezVrasta]

I'm on 0.108.0, you can try it yourself with the below code:

const Foo: string = styled.div();

this should throw a type error, but it doesn't

[FezVrasta]

I know it doesn't prove much, but here's a screenshot of Flow being happy with it.

These two examples behave the same, so that makes me think they are both any

[Andarist]

Could you prepare a runnable repro case?

[FezVrasta]

Yeah I wanted to make one on CodeSandbox but it ends up they don’t support Flow 😒 I’ll try to prepare one today

[FezVrasta]

I didn't have time to prepare a repro yet, but I just noticed that @emotion/styled/macro doesn't provide a .flow counterpart, so that files is marked as untyped by Flow (leading to any annotation).

edit: I created a PR to fix this specific issue #1562

[FezVrasta]

I managed to make Flow kinda work on CodeSandbox 🥳

https://codesandbox.io/s/gatsby-starter-default-3u6vt

In the terminal, run yarn flow to see the output:

Here the problem happens on @emotion/styled, so it's not related to the macro issue I reported above.