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

package/native/dist/types.d.ts

@@ -6,19 +6,18 @@ interface ExoticComponentWithDisplayName<P = unknown> extends React.ExoticCompon
     defaultProps?: Partial<P>;
     displayName?: string;
 }
+export declare type OmitNever<T> = {
+    [K in keyof T as T[K] extends never ? never : K]: T[K];
+};
+export declare type Runtime = 'web' | 'native';
 export { DefaultTheme };
 export declare type AnyComponent<P = any> = ExoticComponentWithDisplayName<P> | React.ComponentType<P>;
-export interface StyledOptions<Props> {
+export interface StyledOptions<R extends Runtime, Props> {
     attrs?: Attrs<Props>[];
-    componentId?: string;
+    componentId?: R extends 'web' ? string : never;
     displayName?: string;
-    parentComponentId?: string;
-    shouldForwardProp?: ShouldForwardProp;
-}
-export interface StyledNativeOptions<Props> {
-    attrs?: Attrs<Props>[];
-    displayName?: string;
-    shouldForwardProp?: ShouldForwardProp;
+    parentComponentId?: R extends 'web' ? string : never;
+    shouldForwardProp?: ShouldForwardProp<R>;
 }
 export declare type KnownTarget = keyof JSX.IntrinsicElements | AnyComponent;
 export declare type WebTarget = string | KnownTarget;
@@ -36,11 +35,11 @@ export interface ExtensibleObject extends BaseExtensibleObject {
 export interface ExecutionContext extends ExtensibleObject {
     theme: DefaultTheme;
 }
-export interface StyleFunction<Props = ExecutionContext> {
-    (executionContext: Props): Interpolation<Props>;
+export interface StyleFunction<Props = BaseExtensibleObject> {
+    (executionContext: ExecutionContext & Props): Interpolation<Props>;
 }
-export declare type Interpolation<Props> = StyleFunction<Props> | StyledObject<Props> | TemplateStringsArray | string | number | Keyframes | IStyledComponent<any, any> | Interpolation<Props>[];
-export declare type Attrs<Props> = (ExtensibleObject & Props) | ((props: Props) => Partial<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 NameGenerator = (hash: number) => string;
@@ -60,49 +59,39 @@ export interface Stringifier {
     (css: string, selector?: string, prefix?: string, componentId?: string): string[];
     hash: string;
 }
-export interface ShouldForwardProp {
-    (prop: string, isValidAttr: (prop: string) => boolean, elementToBeCreated?: WebTarget | NativeTarget): boolean;
+export interface ShouldForwardProp<R extends Runtime> {
+    (prop: string, elementToBeCreated?: StyledTarget<R>): boolean;
 }
-export interface CommonStatics<Props> {
+export interface CommonStatics<R extends Runtime, Props> {
     attrs: Attrs<Props>[];
-    target: StyledTarget;
-    shouldForwardProp?: ShouldForwardProp;
+    target: StyledTarget<R>;
+    shouldForwardProp?: ShouldForwardProp<R>;
     withComponent: any;
 }
-export interface IStyledStatics<OuterProps = unknown> extends CommonStatics<OuterProps> {
-    componentStyle: ComponentStyle;
-    foldedComponentIds: Array<string>;
-    target: WebTarget;
-    styledComponentId: string;
-    warnTooManyClasses?: ReturnType<typeof createWarnTooManyClasses>;
-    withComponent: <Target extends WebTarget, Props = unknown>(tag: Target) => IStyledComponent<Target, OuterProps & Props>;
+export interface IStyledStatics<R extends Runtime, OuterProps = unknown> 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<ActualComponent extends StyledTarget, PropsToBeInjectedIntoActualComponent extends {}, ActualComponentProps = ActualComponent extends KnownTarget ? React.ComponentPropsWithRef<ActualComponent> : {}> = React.HTMLAttributes<ActualComponent> & Omit<PropsToBeInjectedIntoActualComponent, keyof ActualComponentProps | 'as' | '$as'> & ActualComponentProps & ({
+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<FallbackComponent extends StyledTarget, ExpectedProps = unknown, PropsToBeInjectedIntoActualComponent = unknown> extends React.ForwardRefExoticComponent<ExpectedProps> {
-    <ActualComponent extends StyledTarget = FallbackComponent>(props: PolymorphicComponentProps<ActualComponent, ExpectedProps & PropsToBeInjectedIntoActualComponent>): React.ReactElement<PolymorphicComponentProps<ActualComponent, ExecutionContext & ExpectedProps & PropsToBeInjectedIntoActualComponent>, 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<Target extends WebTarget, Props = unknown> extends PolymorphicComponent<Target, Props, ExecutionContext>, IStyledStatics<Props> {
+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>;
     toString: () => string;
 }
-export interface IStyledComponentFactory<Target extends WebTarget, Props = unknown, Statics = unknown> {
-    (target: Target, options: StyledOptions<Props>, rules: RuleSet<Props>): IStyledComponent<Target, Props> & Statics;
-}
-export interface IStyledNativeStatics<OuterProps = unknown> extends CommonStatics<OuterProps> {
-    inlineStyle: InstanceType<IInlineStyleConstructor<OuterProps>>;
-    target: NativeTarget;
-    withComponent: <Target extends NativeTarget, Props = unknown>(tag: Target) => IStyledNativeComponent<Target, OuterProps & Props>;
-}
-export interface IStyledNativeComponent<Target extends NativeTarget, Props = unknown> extends PolymorphicComponent<Target, Props, ExecutionContext>, IStyledNativeStatics<Props> {
-    defaultProps?: Partial<ExtensibleObject & (Target extends KnownTarget ? React.ComponentProps<Target> : {}) & Props>;
-}
-export interface IStyledNativeComponentFactory<Target extends NativeTarget, Props = unknown, Statics = unknown> {
-    (target: Target, options: StyledNativeOptions<Props>, rules: RuleSet<Props>): IStyledNativeComponent<Target, Props> & Statics;
+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 IInlineStyleConstructor<Props = unknown> {
     new (rules: RuleSet<Props>): IInlineStyle<Props>;
@@ -111,7 +100,7 @@ export interface IInlineStyle<Props = unknown> {
     rules: RuleSet<Props>;
     generateStyleObject(executionContext: Object): Object;
 }
-export declare type StyledTarget = WebTarget | NativeTarget;
+export declare type StyledTarget<R extends Runtime> = R extends 'web' ? WebTarget : NativeTarget;
 export interface StyledObject<Props = ExecutionContext> {
     [key: string]: BaseExtensibleObject | string | number | StyleFunction<Props>;
 }

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

@@ -1,2 +1,2 @@
 import { StyledTarget } from '../types';
-export default function generateDisplayName(target: StyledTarget): string;
+export default function generateDisplayName(target: StyledTarget<any>): string;

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

@@ -1,2 +1,2 @@
 import { StyledTarget } from '../types';
-export default function getComponentName(target: StyledTarget): string;
+export default function getComponentName(target: StyledTarget<any>): string;

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

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

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

@@ -1,2 +1,2 @@
 import { StyledTarget } from '../types';
-export default function isTag(target: StyledTarget): boolean;
+export default function isTag(target: StyledTarget<'web'>): target is string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-components",
-  "version": "6.0.0-beta.1",
+  "version": "6.0.0-beta.2",
   "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",
@@ -69,7 +69,6 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@babel/traverse": "^7.18.8",
-    "@emotion/is-prop-valid": "^1.1.3",
     "@emotion/unitless": "^0.7.4",
     "css-to-react-native": "^3.0.0",
     "shallowequal": "^1.1.0",