diff --git a/.changeset/red-chefs-camp.md b/.changeset/red-chefs-camp.md new file mode 100644 index 0000000000..413d558961 --- /dev/null +++ b/.changeset/red-chefs-camp.md @@ -0,0 +1,5 @@ +--- +'@emotion/styled-base': patch +--- + +Fixed package's Flow types diff --git a/.flowconfig b/.flowconfig index d903bf2eb5..2b17eb2da2 100644 --- a/.flowconfig +++ b/.flowconfig @@ -23,4 +23,5 @@ [options] suppress_comment=.*\\$FlowFixMe +suppress_comment=.*\\$FlowExpectError sharedmemory.hash_table_pow=21 diff --git a/packages/styled-base/src/index.js b/packages/styled-base/src/index.js index 1ac85c977e..1e1a657b1b 100644 --- a/packages/styled-base/src/index.js +++ b/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 ( {theme => { @@ -221,7 +217,7 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => { )(...styles) } return Styled - } + }: CreateStyledComponent) } export default createStyled diff --git a/packages/styled-base/src/utils.js b/packages/styled-base/src/utils.js index 92eefd517e..f334c82862 100644 --- a/packages/styled-base/src/utils.js +++ b/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 +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 } diff --git a/packages/styled-base/tests/flow.js b/packages/styled-base/tests/flow.js new file mode 100644 index 0000000000..ab7aa2e8ac --- /dev/null +++ b/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')