import type * as CSS from 'csstype'; import React from 'react'; import ComponentStyle from './models/ComponentStyle'; import { DefaultTheme } from './models/ThemeProvider'; import createWarnTooManyClasses from './utils/createWarnTooManyClasses'; import type { SupportedHTMLElements } from './utils/domElements'; export { CSS, DefaultTheme, SupportedHTMLElements }; export interface ExoticComponentWithDisplayName

extends React.ExoticComponent

{ defaultProps?: Partial

| undefined; displayName?: string | undefined; } /** * Use this type to disambiguate between a styled-component instance * and a StyleFunction or any other type of function. */ export type StyledComponentBrand = { readonly _sc: symbol; }; export type BaseObject = {}; export type OmitNever = { [K in keyof T as T[K] extends never ? never : K]: T[K]; }; export type FastOmit = { [K in keyof T as K extends U ? never : K]: T[K]; }; export type Runtime = 'web' | 'native'; export type AnyComponent

= ExoticComponentWithDisplayName

| React.ComponentType

; export type KnownTarget = SupportedHTMLElements | AnyComponent; export type WebTarget = (string & {}) | KnownTarget; export type NativeTarget = AnyComponent; export type StyledTarget = R extends 'web' ? WebTarget : NativeTarget; export interface StyledOptions { attrs?: Attrs[] | undefined; componentId?: (R extends 'web' ? string : never) | undefined; displayName?: string | undefined; parentComponentId?: (R extends 'web' ? string : never) | undefined; shouldForwardProp?: ShouldForwardProp | undefined; } export type Dict = { [key: string]: T; }; /** * This type is intended for when data attributes are composed via * the `.attrs` API: * * ```tsx * styled.div.attrs({ 'data-testid': 'foo' })`` * ``` * * Would love to figure out how to support this natively without having to * manually compose the type, but haven't figured out a way to do so yet that * doesn't cause specificity loss (see `test/types.tsx` if you attempt to embed * `DataAttributes` directly in the `Attrs<>` type.) */ export type DataAttributes = { [key: `data-${string}`]: any; }; export type ExecutionProps = { /** * Dynamically adjust the rendered component or HTML tag, e.g. * ``` * const StyledButton = styled.button`` * * * I'm an anchor now * * ``` */ as?: KnownTarget | undefined; forwardedAs?: KnownTarget | undefined; theme?: DefaultTheme | undefined; }; /** * ExecutionProps but with `theme` narrowed from optional to required. * * Note: in RSC environments where ThemeProvider is a no-op, * `theme` will be `undefined` at runtime. */ export interface ExecutionContext extends ExecutionProps { theme: DefaultTheme; } export interface StyleFunction { (executionContext: ExecutionContext & Props): Interpolation; } export type Interpolation = StyleFunction | StyledObject | TemplateStringsArray | string | number | false | undefined | null | Keyframes | StyledComponentBrand | RuleSet | Interpolation[]; export type Attrs = (ExecutionProps & Partial>) | ((props: ExecutionContext & Props) => ExecutionProps & Partial>); export type RuleSet = Interpolation[]; export type Styles = TemplateStringsArray | StyledObject | StyleFunction; export type NameGenerator = (hash: number) => string; export interface StyleSheet { create: Function; } export interface Keyframes { id: string; name: string; rules: string; } export interface Flattener { (chunks: Interpolation[], executionContext: object | null | undefined, styleSheet: StyleSheet | null | undefined): Interpolation[]; } export interface Stringifier { (css: string, selector?: string | undefined, prefix?: string | undefined, componentId?: string | undefined): string[]; hash: string; } export interface ShouldForwardProp { (prop: string, elementToBeCreated: StyledTarget): boolean; } export interface CommonStatics { attrs: Attrs[]; target: StyledTarget; shouldForwardProp?: ShouldForwardProp | undefined; } export interface IStyledStatics extends CommonStatics { componentStyle: R extends 'web' ? ComponentStyle : never; foldedComponentIds: R extends 'web' ? string : never; inlineStyle: R extends 'native' ? InstanceType> : never; target: StyledTarget; styledComponentId: R extends 'web' ? string : never; warnTooManyClasses?: (R extends 'web' ? ReturnType : never) | undefined; } /** * Used by PolymorphicComponent to define prop override cascading order. */ export type PolymorphicComponentProps | void, ForwardedAsTarget extends StyledTarget | void, AsTargetProps extends BaseObject = AsTarget extends KnownTarget ? React.ComponentPropsWithRef : {}, ForwardedAsTargetProps extends BaseObject = ForwardedAsTarget extends KnownTarget ? React.ComponentPropsWithRef : {}> = OverrideStyle>, keyof ExecutionProps>> & FastOmit & { as?: AsTarget; forwardedAs?: ForwardedAsTarget; }>; /** * This type forms the signature for a forwardRef-enabled component * that accepts the "as" prop to dynamically change the underlying * rendered JSX. The interface will automatically attempt to extract * props from the given rendering target to get proper typing for * any specialized props in the target component. */ export interface PolymorphicComponent extends React.ForwardRefExoticComponent & { as?: StyledTarget | undefined; forwardedAs?: StyledTarget | undefined; }> { (props: OverrideStyle> & FastOmit & { as?: BaseProps extends { as?: infer A; } ? A : void; forwardedAs?: BaseProps extends { forwardedAs?: infer A; } ? A : void; }>): React.JSX.Element; , ForwardedAsTarget extends StyledTarget | void = void>(props: PolymorphicComponentProps & { as: AsTarget; }): React.JSX.Element; >(props: PolymorphicComponentProps & { forwardedAs: ForwardedAsTarget; }): React.JSX.Element; } export interface IStyledComponentBase extends PolymorphicComponent, IStyledStatics, StyledComponentBrand { defaultProps?: (ExecutionProps & Partial) | undefined; toString: () => string; } /** * Intersected with `string` so styled components can be used as computed * property keys in object styles: `{ [MyComponent]: { ... } }`. * The conditional `R extends 'web' ? string : {}` was removed to avoid * a type alias with a conditional - type aliases require full structural * comparison on every use, while this unconditional intersection is cheaper. */ export type IStyledComponent = IStyledComponentBase & string; export interface IStyledComponentFactory, in out OuterProps extends BaseObject, out OuterStatics extends BaseObject = BaseObject> { (target: Target, options: StyledOptions, rules: RuleSet): IStyledComponent> & OuterStatics & Statics; } export interface IInlineStyleConstructor { new (rules: RuleSet): IInlineStyle; } export interface IInlineStyle { rules: RuleSet; generateStyleObject(executionContext: ExecutionContext & Props): object; } export type CSSProperties = CSS.Properties; export type CSSPropertiesWithVars = CSSProperties & { [key: `--${string}`]: string | number | undefined; }; type OverrideStyle

= P extends { style?: infer S; } ? Omit & { style?: CSSPropertiesWithVars | (S & {}); } : P; export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject; }; export type CSSKeyframes = object & { [key: string]: CSSObject; }; export type CSSObject = StyledObject; export interface StyledObject extends CSSProperties, CSSPseudos { [key: string]: StyledObject | string | number | StyleFunction | RuleSet | undefined; } /** * The `css` prop is not declared by default in the types as it would cause `css` to be present * on the types of anything that uses styled-components indirectly, even if they do not use the * babel plugin. * * To enable support for the `css` prop in TypeScript, create a `styled-components.d.ts` file in * your project source with the following contents: * * ```ts * import type { CSSProp } from "styled-components"; * * declare module "react" { * interface Attributes { * css?: CSSProp; * } * } * ``` * * In order to get accurate typings for `props.theme` in `css` interpolations, see * {@link DefaultTheme}. */ export type CSSProp = Interpolation; /** * @deprecated Use the built-in NoInfer from TypeScript 5.4+ directly. * Kept for backward compatibility. */ export type NoInfer = [T][T extends any ? 0 : never]; export type Substitute = keyof B extends never ? A : FastOmit & B; /** * Makes keys in K optional while keeping all others required. * Used to make attrs-provided props optional on the final component. */ export type MakeAttrsOptional

= keyof K extends never ? P : FastOmit & Partial>; export type InsertionTarget = HTMLElement | ShadowRoot;