From 2f99e63576a03c9b44e3a9b23747e1ca4fec7d62 Mon Sep 17 00:00:00 2001
From: Federico Zivolo <federico.zivolo@gmail.com>
Date: Sat, 26 Oct 2019 17:50:28 +0200
Subject: [PATCH] fix: make styled package return proper types

---
 packages/styled-base/src/index.js  |  3 ++-
 packages/styled-base/src/utils.js  |  3 ++-
 packages/styled/flow-tests/flow.js | 13 +++++++++++++
 packages/styled/src/index.js       |  2 +-
 site/src/components/Title.js       |  2 +-
 5 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 packages/styled/flow-tests/flow.js

diff --git a/packages/styled-base/src/index.js b/packages/styled-base/src/index.js
index b5cd64eb3..8a688c123 100644
--- a/packages/styled-base/src/index.js
+++ b/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}`
       }
     })
diff --git a/packages/styled-base/src/utils.js b/packages/styled-base/src/utils.js
index 6a4d36195..6e4ac85fd 100644
--- a/packages/styled-base/src/utils.js
+++ b/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
 }
diff --git a/packages/styled/flow-tests/flow.js b/packages/styled/flow-tests/flow.js
new file mode 100644
index 000000000..0754fdc58
--- /dev/null
+++ b/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} />
diff --git a/packages/styled/src/index.js b/packages/styled/src/index.js
index eea895068..6c0359b46 100644
--- a/packages/styled/src/index.js
+++ b/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)
 })
 
diff --git a/site/src/components/Title.js b/site/src/components/Title.js
index 14d7d440b..f593f8048 100644
--- a/site/src/components/Title.js
+++ b/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,