diff --git a/types/styled-components/index.d.ts b/types/styled-components/index.d.ts index b915040c7e..4a86aa245f 100644 --- a/types/styled-components/index.d.ts +++ b/types/styled-components/index.d.ts @@ -9,8 +9,8 @@ /// -import * as React from "react"; import * as CSS from "csstype"; +import * as React from "react"; export type CSSObject = CSS.Properties & // Index type to allow selector nesting @@ -30,7 +30,7 @@ export interface ThemeProps { } export type ThemedStyledProps = P & ThemeProps; -export type StyledProps

= ThemedStyledProps; +export type StyledProps

= ThemedStyledProps>; export type StyledComponentProps< // The Component from whose props are derived @@ -57,8 +57,8 @@ type StyledComponentPropsWithAs< export type FalseyValue = undefined | null | false; export type Interpolation

= | InterpolationValue - | InterpolationFunction

- | FlattenInterpolation

; + | FlattenInterpolation

+ | InterpolationFunction

; // must be an interface to be self-referential export interface FlattenInterpolation

extends ReadonlyArray> {} @@ -93,10 +93,15 @@ export interface GlobalStyleComponent extends React.ComponentClass> {} // remove the call signature from StyledComponent so Interpolation can still infer InterpolationFunction -type StyledComponentInterpolation = Pick< - AnyStyledComponent, - keyof StyledComponentBase ->; +type StyledComponentInterpolation = + | Pick< + StyledComponentBase, + keyof StyledComponentBase + > + | Pick< + StyledComponentBase, + keyof StyledComponentBase + >; // abuse Pick to strip the call signature from ForwardRefExoticComponent type ForwardRefExoticBase

= Pick< @@ -162,25 +167,45 @@ export interface StyledComponentBase< ): StyledComponent; } -export type ThemedStyledFunctionBase< +export interface ThemedStyledFunctionBase< C extends keyof JSX.IntrinsicElements | React.ComponentType, T extends object, O extends object = {}, A extends keyof any = never -> = +> { + ( + first: + | TemplateStringsArray + | NonNullable< + Interpolation< + ThemedStyledProps & O, T> + > + >, + ...rest: Array< + Interpolation< + ThemedStyledProps & O, T> + > + > + ): StyledComponent; // at least the first argument is required, whatever it is ( - first: NonNullable< - Interpolation< - ThemedStyledProps & O & U, T> - > - >, + first: + | TemplateStringsArray + | NonNullable< + Interpolation< + ThemedStyledProps< + StyledComponentPropsWithRef & O & U, + T + > + > + >, ...rest: Array< Interpolation< ThemedStyledProps & O & U, T> > > - ) => StyledComponent; + ): StyledComponent; +} export interface ThemedStyledFunction< C extends keyof JSX.IntrinsicElements | React.ComponentType, @@ -243,17 +268,13 @@ type StyledComponentInnerAttrs< export interface ThemedBaseStyledInterface extends ThemedStyledComponentFactories { - (tag: TTag): ThemedStyledFunction< - TTag, - T - >; (component: C): ThemedStyledFunction< StyledComponentInnerComponent, T, StyledComponentInnerOtherProps, StyledComponentInnerAttrs >; - >( + >( // unfortunately using a conditional type to validate that it can receive a `theme?: Theme` // causes tests to fail in TS 3.1 component: C @@ -265,10 +286,20 @@ export type ThemedStyledInterface = ThemedBaseStyledInterface< >; export type StyledInterface = ThemedStyledInterface; -export type BaseThemedCssFunction =

( - first: NonNullable>>, - ...interpolations: Array>> -) => Array>>; +export interface BaseThemedCssFunction { + ( + first: + | TemplateStringsArray + | NonNullable>>, + ...interpolations: Array>> + ): FlattenInterpolation>; +

( + first: + | TemplateStringsArray + | NonNullable>>, + ...interpolations: Array>> + ): FlattenInterpolation>; +} export type ThemedCssFunction = BaseThemedCssFunction< AnyIfEmpty @@ -296,7 +327,9 @@ export interface ThemedStyledComponentsModule< ): Keyframes; createGlobalStyle

( - first: NonNullable>>, + first: + | TemplateStringsArray + | NonNullable>>, ...interpolations: Array>> ): GlobalStyleComponent; @@ -366,7 +399,9 @@ export function keyframes( ): Keyframes; export function createGlobalStyle

( - first: NonNullable>>, + first: + | TemplateStringsArray + | NonNullable>>, ...interpolations: Array>> ): GlobalStyleComponent;