fix: make styled package return proper types

emotion-js · Oct 26, 2019 · f8d31ba · f8d31ba
1 parent ee69409
commit f8d31ba
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 4 deletions.
diff --git 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
@@ -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
@@ -0,0 +1,6 @@
+// @flow
+import styled from '../src'
+
+export const Foo = styled.div<{}>({
+  color: 'red'
+})
diff --git 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
@@ -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,