fix: refactor styled-base Flow types to work again

packages/styled-base/src/index.js

@@ -77,6 +77,7 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
       }
     }
 
+    // $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class
     const Styled: PrivateStyledComponent<P> = withEmotionCache(
       (props, context, ref) => {
         return (
@@ -201,7 +202,7 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
         ) {
           return 'NO_COMPONENT_SELECTOR'
         }
-        // $FlowFixMe
+        // $FlowFixMe: coherce undefined to string
         return `.${targetClassName}`
       }
     })

packages/styled-base/src/utils.js

@@ -46,5 +46,6 @@ export type CreateStyledComponent = <P>(
 
 export type CreateStyled = {
   (tag: React.ElementType, options?: StyledOptions): CreateStyledComponent,
-  [key: string]: CreateStyledComponent
+  [key: string]: CreateStyledComponent,
+  bind: () => CreateStyled
 }

packages/styled/flow-tests/flow.js

@@ -0,0 +1,13 @@
+// @flow
+import * as React from 'react'
+import styled from '../src'
+
+type Props = { color: string }
+const Foo = styled.div<Props>({
+  color: 'red'
+})
+
+export const valid = <Foo color="red" />
+
+// $FlowExpectError: color must be string
+export const invalid = <Foo color={2} />

packages/styled/src/index.js

@@ -5,7 +5,7 @@ import { tags } from './tags'
 // bind it to avoid mutating the original function
 const newStyled = styled.bind()
 
-tags.forEach(tagName => {
+tags.forEach((tagName: string) => {
   newStyled[tagName] = newStyled(tagName)
 })
 

site/src/components/Title.js

@@ -3,7 +3,7 @@ import styled from '@emotion/styled'
 import { constants, mq, colors } from '../utils/style'
 import * as markdownComponents from '../utils/markdown-styles'
 
-export default styled(markdownComponents.h1)(
+export default styled(markdownComponents.h1)<{}>(
   mq({
     paddingTop: 0,
     marginTop: 0,