styled-components 6.0.0-beta.2 → 6.0.0-beta.3

package/native/dist/types.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import ComponentStyle from './models/ComponentStyle';
 import { DefaultTheme } from './models/ThemeProvider';
 import createWarnTooManyClasses from './utils/createWarnTooManyClasses';
-interface ExoticComponentWithDisplayName<P = unknown> extends React.ExoticComponent<P> {
+interface ExoticComponentWithDisplayName<P = any> extends React.ExoticComponent<P> {
     defaultProps?: Partial<P>;
     displayName?: string;
 }
@@ -12,7 +12,7 @@ export declare type OmitNever<T> = {
 export declare type Runtime = 'web' | 'native';
 export { DefaultTheme };
 export declare type AnyComponent<P = any> = ExoticComponentWithDisplayName<P> | React.ComponentType<P>;
-export interface StyledOptions<R extends Runtime, Props> {
+export interface StyledOptions<R extends Runtime, Props extends object> {
     attrs?: Attrs<Props>[];
     componentId?: R extends 'web' ? string : never;
     displayName?: string;
@@ -22,26 +22,34 @@ export interface StyledOptions<R extends Runtime, Props> {
 export declare type KnownTarget = keyof JSX.IntrinsicElements | AnyComponent;
 export declare type WebTarget = string | KnownTarget;
 export declare type NativeTarget = AnyComponent;
-export interface BaseExtensibleObject {
-    [key: string]: any;
-}
-export interface ExtensibleObject extends BaseExtensibleObject {
-    $as?: KnownTarget;
-    $forwardedAs?: KnownTarget;
+export declare type Dict<T> = {
+    [key: string]: T;
+};
+export interface ExecutionProps {
+    /**
+     * Dynamically adjust the rendered component or HTML tag, e.g.
+     * ```
+     * const StyledButton = styled.button``
+     *
+     * <StyledButton as="a" href="/foo">
+     *   I'm an anchor now
+     * </StyledButton>
+     * ```
+     */
     as?: KnownTarget;
     forwardedAs?: KnownTarget;
     theme?: DefaultTheme;
 }
-export interface ExecutionContext extends ExtensibleObject {
+export interface ExecutionContext extends ExecutionProps {
     theme: DefaultTheme;
 }
-export interface StyleFunction<Props = BaseExtensibleObject> {
+export interface StyleFunction<Props extends object> {
     (executionContext: ExecutionContext & Props): Interpolation<Props>;
 }
-export declare type Interpolation<Props> = StyleFunction<Props> | StyledObject<Props> | TemplateStringsArray | string | number | undefined | null | Keyframes | IStyledComponent<'web', any, any> | Interpolation<Props>[];
-export declare type Attrs<Props> = (ExtensibleObject & Props) | ((props: ExecutionContext & Props) => Partial<Props>);
-export declare type RuleSet<Props> = Interpolation<Props>[];
-export declare type Styles<Props> = TemplateStringsArray | StyledObject<Props> | StyleFunction<Props>;
+export declare type Interpolation<Props extends object> = StyleFunction<Props> | StyledObject<Props> | TemplateStringsArray | string | number | false | undefined | null | Keyframes | IStyledComponent<'web', any, any> | Interpolation<Props>[];
+export declare type Attrs<Props extends object> = (ExecutionProps & Props) | ((props: ExecutionContext & Props) => Partial<Props>);
+export declare type RuleSet<Props extends object> = Interpolation<ExecutionContext & Props>[];
+export declare type Styles<Props extends object> = TemplateStringsArray | StyledObject<Props> | StyleFunction<Props>;
 export declare type NameGenerator = (hash: number) => string;
 export interface StyleSheet {
     create: Function;
@@ -51,58 +59,56 @@ export interface Keyframes {
     name: string;
     rules: string;
 }
-export interface Flattener<Props> {
+export interface Flattener<Props extends object> {
     (chunks: Interpolation<Props>[], executionContext: Object | null | undefined, styleSheet: Object | null | undefined): Interpolation<Props>[];
 }
-export declare type FlattenerResult<Props> = RuleSet<Props> | number | string | string[] | IStyledComponent<any, any> | Keyframes;
+export declare type FlattenerResult<Props extends object> = RuleSet<Props> | number | string | string[] | IStyledComponent<any, any, any> | Keyframes;
 export interface Stringifier {
     (css: string, selector?: string, prefix?: string, componentId?: string): string[];
     hash: string;
 }
 export interface ShouldForwardProp<R extends Runtime> {
-    (prop: string, elementToBeCreated?: StyledTarget<R>): boolean;
+    (prop: string, elementToBeCreated: StyledTarget<R>): boolean;
 }
-export interface CommonStatics<R extends Runtime, Props> {
+export interface CommonStatics<R extends Runtime, Props extends object> {
     attrs: Attrs<Props>[];
     target: StyledTarget<R>;
     shouldForwardProp?: ShouldForwardProp<R>;
     withComponent: any;
 }
-export interface IStyledStatics<R extends Runtime, OuterProps = unknown> extends CommonStatics<R, OuterProps> {
+export interface IStyledStatics<R extends Runtime, OuterProps extends object> extends CommonStatics<R, OuterProps> {
     componentStyle: R extends 'web' ? ComponentStyle : never;
     foldedComponentIds: R extends 'web' ? Array<string> : never;
     inlineStyle: R extends 'native' ? InstanceType<IInlineStyleConstructor<OuterProps>> : never;
     target: StyledTarget<R>;
     styledComponentId: R extends 'web' ? string : never;
     warnTooManyClasses?: R extends 'web' ? ReturnType<typeof createWarnTooManyClasses> : never;
-    withComponent: <Target extends StyledTarget<R>, Props = unknown>(tag: Target) => IStyledComponent<R, Target, OuterProps & Props>;
-}
-declare type PolymorphicComponentProps<R extends Runtime, ActualComponent extends StyledTarget<R>, PropsToBeInjectedIntoActualComponent extends {}, ActualComponentProps = ActualComponent extends KnownTarget ? React.ComponentPropsWithRef<ActualComponent> : {}> = React.HTMLAttributes<ActualComponent> & Omit<PropsToBeInjectedIntoActualComponent, keyof ActualComponentProps | 'as' | '$as'> & ActualComponentProps & ({
-    $as: ActualComponent;
-    as?: AnyComponent;
-} | {
-    as?: ActualComponent;
-});
-interface PolymorphicComponent<R extends Runtime, FallbackComponent extends StyledTarget<R>, ExpectedProps = unknown, PropsToBeInjectedIntoActualComponent = unknown> extends React.ForwardRefExoticComponent<ExpectedProps> {
-    <ActualComponent extends StyledTarget<R> = FallbackComponent>(props: PolymorphicComponentProps<R, ActualComponent, ExpectedProps & PropsToBeInjectedIntoActualComponent>): React.ReactElement<PolymorphicComponentProps<R, ActualComponent, ExecutionContext & ExpectedProps & PropsToBeInjectedIntoActualComponent>, ActualComponent>;
-}
-export interface IStyledComponent<R extends Runtime, Target extends StyledTarget<R>, Props = unknown> extends PolymorphicComponent<R, Target, Props, ExecutionContext>, IStyledStatics<R, Props> {
-    defaultProps?: Partial<ExtensibleObject & (Target extends KnownTarget ? React.ComponentProps<Target> : {}) & Props>;
+    withComponent: <Target extends StyledTarget<R>, Props extends object = object>(tag: Target) => IStyledComponent<R, Target, OuterProps & Props>;
+}
+declare type PolymorphicComponentProps<R extends Runtime, E extends StyledTarget<R>, P extends object> = {
+    as?: E;
+    theme?: DefaultTheme;
+} & P & (E extends KnownTarget ? Omit<React.ComponentProps<E>, keyof P | 'as'> : object);
+interface PolymorphicComponent<R extends Runtime, P extends object, FallbackComponent extends StyledTarget<R>> extends React.ForwardRefExoticComponent<P> {
+    <E extends StyledTarget<R> = FallbackComponent>(props: PolymorphicComponentProps<R, E, P>): React.ReactElement | null;
+}
+export interface IStyledComponent<R extends Runtime, Target extends StyledTarget<R>, Props extends object> extends PolymorphicComponent<R, Props, Target>, IStyledStatics<R, Props> {
+    defaultProps?: Partial<ExecutionProps & (Target extends KnownTarget ? React.ComponentProps<Target> : {}) & Props>;
     toString: () => string;
 }
-export interface IStyledComponentFactory<R extends Runtime, Target extends StyledTarget<R>, Props = unknown, Statics = unknown> {
-    (target: Target, options: StyledOptions<R, Props>, rules: RuleSet<Props>): IStyledComponent<R, Target, Props> & Statics;
+export interface IStyledComponentFactory<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object, OuterStatics extends object = object> {
+    <Props extends object = object, Statics extends object = object>(target: Target, options: StyledOptions<R, OuterProps>, rules: RuleSet<OuterProps & Props>): IStyledComponent<R, Target, OuterProps & Props> & OuterStatics & Statics;
 }
-export interface IInlineStyleConstructor<Props = unknown> {
+export interface IInlineStyleConstructor<Props extends object> {
     new (rules: RuleSet<Props>): IInlineStyle<Props>;
 }
-export interface IInlineStyle<Props = unknown> {
+export interface IInlineStyle<Props extends object> {
     rules: RuleSet<Props>;
     generateStyleObject(executionContext: Object): Object;
 }
 export declare type StyledTarget<R extends Runtime> = R extends 'web' ? WebTarget : NativeTarget;
-export interface StyledObject<Props = ExecutionContext> {
-    [key: string]: BaseExtensibleObject | string | number | StyleFunction<Props>;
+export interface StyledObject<Props extends object = ExecutionContext> {
+    [key: string]: Dict<any> | string | number | StyleFunction<Props>;
 }
 /**
  * Override DefaultTheme to get accurate typings for your project.
@@ -126,4 +132,4 @@ export interface StyledObject<Props = ExecutionContext> {
  * }
  * ```
  */
-export declare type CSSProp = string | StyledObject | StyleFunction;
+export declare type CSSProp = string | StyledObject | StyleFunction<any>;

package/native/dist/utils/determineTheme.d.ts

@@ -1,2 +1,2 @@
-import { ExtensibleObject } from '../types';
-export default function determineTheme(props: ExtensibleObject, providedTheme: any, defaultProps?: any): any;
+import { ExecutionProps } from '../types';
+export default function determineTheme(props: ExecutionProps, providedTheme: any, defaultProps?: any): any;

package/native/dist/utils/empties.d.ts

@@ -1,3 +1,3 @@
-import { ExtensibleObject } from '../types';
+import { Dict } from '../types';
 export declare const EMPTY_ARRAY: readonly any[];
-export declare const EMPTY_OBJECT: Readonly<ExtensibleObject>;
+export declare const EMPTY_OBJECT: Readonly<Dict<any>>;

package/native/dist/utils/flatten.d.ts

@@ -1,4 +1,4 @@
 import StyleSheet from '../sheet';
-import { ExecutionContext, ExtensibleObject, Interpolation, Stringifier } from '../types';
-export declare const objToCssArray: (obj: ExtensibleObject, prevKey?: string) => string[];
-export default function flatten<Props = unknown>(chunk: Interpolation<Props>, executionContext?: ExecutionContext & Props, styleSheet?: StyleSheet, stylisInstance?: Stringifier): Interpolation<Props>;
+import { Dict, ExecutionContext, Interpolation, RuleSet, Stringifier } from '../types';
+export declare const objToCssArray: (obj: Dict<any>, prevKey?: string) => string[];
+export default function flatten<Props extends object>(chunk: Interpolation<Props>, executionContext?: ExecutionContext & Props, styleSheet?: StyleSheet, stylisInstance?: Stringifier): Interpolation<Props> | RuleSet<Props>;

package/native/dist/utils/interleave.d.ts

@@ -1,2 +1,2 @@
 import { Interpolation } from '../types';
-export default function interleave<Props = unknown>(strings: TemplateStringsArray, interpolations: Interpolation<Props>[]): Interpolation<Props>[];
+export default function interleave<Props extends object>(strings: TemplateStringsArray, interpolations: Interpolation<Props>[]): Interpolation<Props>[];

package/native/dist/utils/isStaticRules.d.ts

@@ -1,2 +1,2 @@
 import { RuleSet } from '../types';
-export default function isStaticRules<Props = unknown>(rules: RuleSet<Props>): boolean;
+export default function isStaticRules<Props extends object>(rules: RuleSet<Props>): boolean;

package/native/dist/utils/isStyledComponent.d.ts

@@ -1,2 +1,2 @@
 import { IStyledComponent } from '../types';
-export default function isStyledComponent(target: any): target is IStyledComponent<'web', any>;
+export default function isStyledComponent(target: any): target is IStyledComponent<'web', any, any>;

package/native/dist/utils/mixinDeep.d.ts

@@ -1,7 +1,7 @@
-import { ExtensibleObject } from '../types';
+import { ExecutionProps } from '../types';
 /**
  * Arrays & POJOs merged recursively, other objects and value types are overridden
  * If target is not a POJO or an Array, it will get source properties injected via shallow merge
  * Source objects applied left to right.  Mutates & returns target.  Similar to lodash merge.
  */
-export default function mixinDeep(target?: ExtensibleObject, ...sources: any[]): ExtensibleObject;
+export default function mixinDeep(target?: ExecutionProps, ...sources: any[]): ExecutionProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-components",
-  "version": "6.0.0-beta.2",
+  "version": "6.0.0-beta.3",
   "description": "Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress",
   "types": "dist/index.d.ts",
   "main": "dist/styled-components.cjs.js",
@@ -134,7 +134,7 @@
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
     "stylis-plugin-rtl": "^2.1.1",
-    "typescript": "^4.7.4",
+    "typescript": "^4.8.3",
     "utility-types": "^3.10.0"
   },
   "bundlewatch": {