diff --git a/packages/styled-base/src/index.js b/packages/styled-base/src/index.js index b5cd64eb38..8a688c123b 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

= 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 6a4d36195f..6e4ac85fd0 100644 --- a/packages/styled-base/src/utils.js +++ b/packages/styled-base/src/utils.js @@ -46,5 +46,6 @@ export type CreateStyledComponent =

( 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 0000000000..d5c46a3218 --- /dev/null +++ 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 index eea8950685..6c0359b469 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 14d7d440b2..f593f80486 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,