// TypeScript Version: 3.0 // changed from: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/styled-components import * as React from 'react'; type Omit = Pick>; // Any prop that has a default prop becomes optional, but its type is unchanged // Undeclared default props are augmented into the resulting allowable attributes // If declared props have indexed properties, ignore default props entirely as keyof gets widened // Wrap in an outer-level conditional type to allow distribution over props that are unions type Defaultize = P extends any ? string extends keyof P ? P : Pick> & Partial>> & Partial>> : never; type ReactDefaultizedProps = C extends { defaultProps: infer D } ? Defaultize : P; export type StyledComponentProps< // The Component from whose props are derived C extends keyof JSX.IntrinsicElements | React.ComponentType, // The other props added by the template O extends object, // The props that are made optional by .attrs A extends keyof any > = Omit> & O, A> & Partial & O, A>> & WithChildrenIfReactComponentClass; // Because of React typing quirks, when getting props from a React.ComponentClass, // we need to manually add a `children` field. // See https://github.com/DefinitelyTyped/DefinitelyTyped/pull/31945 // and https://github.com/DefinitelyTyped/DefinitelyTyped/pull/32843 type WithChildrenIfReactComponentClass< C extends keyof JSX.IntrinsicElements | React.ComponentType > = C extends React.ComponentClass ? { children?: React.ReactNode } : {}; type StyledComponentPropsWithAs< C extends keyof JSX.IntrinsicElements | React.ComponentType, O extends object, A extends keyof any > = StyledComponentProps & { as?: C }; // abuse Pick to strip the call signature from ForwardRefExoticComponent type ForwardRefExoticBase

= Pick< React.ForwardRefExoticComponent

, keyof React.ForwardRefExoticComponent >; export interface StyledComponent< C extends keyof JSX.IntrinsicElements | React.ComponentType, O extends object = {}, A extends keyof any = never > extends ForwardRefExoticBase> { // add our own fake call signature to implement the polymorphic 'as' prop // NOTE: TS <3.2 will refuse to infer the generic and this component becomes impossible to use in JSX // just the presence of the overload is enough to break JSX // // TODO (TypeScript 3.2): actually makes the 'as' prop polymorphic (props: StyledComponentProps & { as?: never }): React.ReactElement< StyledComponentProps >; = C>( props: StyledComponentPropsWithAs, ): React.ReactElement>; withComponent< WithC extends keyof JSX.IntrinsicElements | React.ComponentType >( component: WithC, ): StyledComponent; } export type StyledComponentPropsWithRef< C extends keyof JSX.IntrinsicElements | React.ComponentType > = React.ComponentPropsWithRef; type Attrs> = ((props: P) => A) | A; export interface StyledFunction< C extends keyof JSX.IntrinsicElements | React.ComponentType, O extends object = {}, A extends keyof any = never > { (...rest: any[]): StyledComponent; // tslint:disable-next-line:no-unnecessary-generics (...rest: any[]): StyledComponent; attrs< U extends object, NewA extends Partial & U> & { [others: string]: any; } = Partial & U> >( provideProps: Attrs< ReactDefaultizedProps> & U, NewA >, ): StyledFunction; } export type StyledTags = { readonly [TTag in keyof JSX.IntrinsicElements]: StyledFunction; }; export interface StyledOptions { allowAs?: boolean; } export type mapper = (input: TInner) => TOuter; export interface CreateStyled extends StyledTags { >( component: C, options?: StyledOptions, ): StyledFunction; < C extends keyof JSX.IntrinsicElements | React.ComponentType, OtherProps extends object >( component: C, options?: StyledOptions, ): StyledFunction; // tslint:disable-line:no-unnecessary-generics } declare const styled: CreateStyled; export function css( template: TemplateStringsArray, ...args: any[] ): Record; export default styled; declare module 'react' { interface DOMAttributes { css?: string | Record; } } declare global { namespace JSX { interface IntrinsicAttributes { css?: string | Record; } } }