Improved Flow type inference of props for inline functions passed to …

…the `styled` factory (#2199)

* fix: make Flow infer prop types for inline styled functions

* fix: update flow ignore comment

* Update .changeset/rare-beans-think.md

Co-authored-by: Mitchell Hamilton <mitchell@hamil.town>
Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>

.changeset/rare-beans-think.md

@@ -0,0 +1,5 @@
+---
+'@emotion/styled': patch
+---
+
+Improved Flow type inference of props for inline functions passed to the `styled` factory.

packages/styled/flow-tests/styled.js

@@ -11,3 +11,15 @@ const validProp = <Div color="red" />
 
 // $FlowFixMe: expect error - color property should be a string
 const invalidProp = <Div color={2} />
+
+styled<Props>(props => <div className={props.className}>{props.color}</div>)`
+  color: ${props => props.color};
+`
+
+styled<Props>(props => {
+  const color: string = props.color
+  const className: string = props.className
+  // $FlowFixMe: expect error - color should be a string
+  const colorTest: number = props.color
+  return <div className={props.className}>{props.color}</div>
+})``

packages/styled/src/base.js

@@ -1,12 +1,12 @@
 // @flow
 import * as React from 'react'
-import type { ElementType } from 'react'
 import {
   getDefaultShouldForwardProp,
   composeShouldForwardProps,
   type StyledOptions,
   type CreateStyled,
-  type PrivateStyledComponent
+  type PrivateStyledComponent,
+  type StyledElementType
 } from './utils'
 import { withEmotionCache, ThemeContext } from '@emotion/react'
 import { getRegisteredStyles, insertStyles } from '@emotion/utils'
@@ -185,7 +185,7 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
     })
 
     Styled.withComponent = (
-      nextTag: ElementType,
+      nextTag: StyledElementType<Props>,
       nextOptions?: StyledOptions
     ) => {
       return createStyled(nextTag, {

packages/styled/src/utils.js

@@ -1,9 +1,17 @@
 // @flow
-import type { ElementType, StatelessFunctionalComponent } from 'react'
+import type {
+  ElementType,
+  StatelessFunctionalComponent,
+  AbstractComponent
+} from 'react'
 import isPropValid from '@emotion/is-prop-valid'
 
 export type Interpolations = Array<any>
 
+export type StyledElementType<Props> =
+  | string
+  | AbstractComponent<{ ...Props, className: string }, mixed>
+
 export type StyledOptions = {
   label?: string,
   shouldForwardProp?: string => boolean,
@@ -14,7 +22,7 @@ export type StyledComponent<Props> = StatelessFunctionalComponent<Props> & {
   defaultProps: any,
   toString: () => string,
   withComponent: (
-    nextTag: ElementType,
+    nextTag: StyledElementType<Props>,
     nextOptions?: StyledOptions
   ) => StyledComponent<Props>
 }
@@ -67,7 +75,7 @@ export type CreateStyledComponent = <Props>(
 
 export type CreateStyled = {
   <Props>(
-    tag: ElementType,
+    tag: StyledElementType<Props>,
     options?: StyledOptions
   ): (...args: Interpolations) => StyledComponent<Props>,
   [key: string]: CreateStyledComponent,