fix: refactor styled-base Flow types to work again

.changeset/red-chefs-camp.md

@@ -0,0 +1,5 @@
+---
+'@emotion/styled-base': patch
+---
+
+Fixed package's Flow types

.flowconfig

@@ -23,4 +23,5 @@
 
 [options]
 suppress_comment=.*\\$FlowFixMe
+suppress_comment=.*\\$FlowExpectError
 sharedmemory.hash_table_pow=21

.flowconfig-ci

@@ -24,5 +24,6 @@
 
 [options]
 suppress_comment=.*\\$FlowFixMe
+suppress_comment=.*\\$FlowExpectError
 server.max_workers=1
 sharedmemory.hash_table_pow=21

packages/styled-base/src/index.js

@@ -4,7 +4,9 @@ import type { ElementType } from 'react'
 import {
   getDefaultShouldForwardProp,
   type StyledOptions,
-  type CreateStyled
+  type CreateStyled,
+  type CreateStyledComponent,
+  type StyledComponent
 } from './utils'
 import { withEmotionCache, ThemeContext } from '@emotion/core'
 import { getRegisteredStyles, insertStyles } from '@emotion/utils'
@@ -17,12 +19,6 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
 
 let isBrowser = typeof document !== 'undefined'
 
-type StyledComponent = (
-  props: *
-) => React.Node & {
-  withComponent(nextTag: ElementType, nextOptions?: StyledOptions): *
-}
-
 let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
   if (process.env.NODE_ENV !== 'production') {
     if (tag === undefined) {
@@ -55,7 +51,7 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
     shouldForwardProp || getDefaultShouldForwardProp(baseTag)
   const shouldUseAs = !defaultShouldForwardProp('as')
 
-  return function(): StyledComponent {
+  return (function() {
     let args = arguments
     let styles =
       isReal && tag.__emotion_styles !== undefined
@@ -82,7 +78,7 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
       }
     }
 
-    const Styled: any = withEmotionCache((props, context, ref) => {
+    const Styled: StyledComponent = withEmotionCache((props, context, ref) => {
       return (
         <ThemeContext.Consumer>
           {theme => {
@@ -221,7 +217,7 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
       )(...styles)
     }
     return Styled
-  }
+  }: CreateStyledComponent)
 }
 
 export default createStyled

packages/styled-base/src/utils.js

@@ -1,9 +1,31 @@
 // @flow
 import * as React from 'react'
+import type { ElementType } from 'react'
 import isPropValid from '@emotion/is-prop-valid'
 
 export type Interpolations = Array<any>
 
+export type StyledOptions = {
+  label?: string,
+  shouldForwardProp?: string => boolean,
+  target?: string
+}
+
+export type StyledComponent = {
+  (Interpolations): React$Node,
+  withComponent: (
+    nextTag: ElementType,
+    nextOptions?: StyledOptions
+  ) => StyledComponent,
+  displayName: string,
+  defaultProps: any,
+  __emotion_real: StyledComponent,
+  __emotion_base: any,
+  __emotion_styles: any,
+  __emotion_forwardProp: any,
+  toString: () => string
+}
+
 const testOmitPropsOnStringTag = isPropValid
 const testOmitPropsOnComponent = (key: string) =>
   key !== 'theme' && key !== 'innerRef'
@@ -17,19 +39,9 @@ export const getDefaultShouldForwardProp = (tag: React.ElementType) =>
     ? testOmitPropsOnStringTag
     : testOmitPropsOnComponent
 
-export type StyledOptions = {
-  label?: string,
-  shouldForwardProp?: string => boolean,
-  target?: string
-}
-
-type CreateStyledComponent = (...args: Interpolations) => *
-
-type BaseCreateStyled = (
-  tag: React.ElementType,
-  options?: StyledOptions
-) => CreateStyledComponent
+export type CreateStyledComponent = (...args: Interpolations) => StyledComponent
 
-export type CreateStyled = BaseCreateStyled & {
+export type CreateStyled = {
+  (tag: React.ElementType, options?: StyledOptions): CreateStyledComponent,
   [key: string]: CreateStyledComponent
 }

packages/styled-base/tests/flow.js

@@ -0,0 +1,8 @@
+// @flow
+import createStyled from '../src'
+import type { CreateStyledComponent } from '../src/utils'
+
+export const valid: CreateStyledComponent = createStyled('div')
+
+// $FlowExpectError: we can't cast a StyledComponent to string
+export const invalid: string = createStyled('div')