styled-components 6.0.0-alpha.7 → 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;
@@ -57,52 +56,42 @@ export interface Flattener<Props> {
 }
 export declare type FlattenerResult<Props> = RuleSet<Props> | number | string | string[] | IStyledComponent<any, any> | Keyframes;
 export interface Stringifier {
-    (css: string, selector?: string, prefix?: string, componentId?: string): string;
+    (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/native/dist/utils/stylis.d.ts

@@ -1,9 +1,10 @@
+import { Middleware } from 'stylis';
 import { Stringifier } from '../types';
 declare type StylisInstanceConstructorArgs = {
     options?: {
         prefix?: boolean;
     };
-    plugins?: stylis.Middleware[];
+    plugins?: Middleware[];
 };
 export default function createStylisInstance({ options, plugins, }?: StylisInstanceConstructorArgs): Stringifier;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-components",
-  "version": "6.0.0-alpha.7",
+  "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",
@@ -20,8 +20,8 @@
     "postbuild": "yarn lint:size",
     "pretest": "yarn generateErrors",
     "test": "yarn test:web && yarn test:native",
-    "test:web": "jest -c jest.config.main.js",
-    "test:native": "jest -c jest.config.native.js",
+    "test:web": "jest -c jest.config.main.js --forceExit",
+    "test:native": "jest -c jest.config.native.js --forceExit",
     "test:integration": "jest -c jest.config.integration.js --runInBand --forceExit",
     "format": "eslint ./**/*.js --fix",
     "lint": "eslint src",
@@ -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",
@@ -90,7 +89,7 @@
     "@rollup/plugin-typescript": "^8.3.3",
     "@types/babel-plugin-macros": "^2.8.4",
     "@types/enzyme": "^3.10.9",
-    "@types/jest": "^27.0.2",
+    "@types/jest": "^28.1.6",
     "@types/js-beautify": "^1.13.1",
     "@types/node": "^14.0.0",
     "@types/react": "^17.0.22",
@@ -103,7 +102,7 @@
     "@typescript-eslint/eslint-plugin": "^4.20.0",
     "@typescript-eslint/parser": "^4.20.0",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^27.0.6",
+    "babel-jest": "^28.1.3",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-styled-components": "^2.0.5",
@@ -114,9 +113,11 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "jest": "^27.0.6",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
     "jest-image-snapshot": "^4.2.0",
     "jest-serializer-html": "^7.0.0",
+    "jest-watch-typeahead": "^2.0.0",
     "js-beautify": "^1.13.0",
     "prettier": "^2.2.0",
     "prop-types": "^15.7.2",
@@ -133,7 +134,6 @@
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
     "stylis-plugin-rtl": "^2.1.1",
-    "tslib": "^2.4.0",
     "typescript": "^4.7.4",
     "utility-types": "^3.10.0"
   },

package/test-utils/setupTestFramework.ts

@@ -3,14 +3,20 @@ const consoleError = console.error;
 const suppressedErrors = [
   'Error: Could not parse CSS stylesheet',
   'Warning: Use the `defaultValue` or `value` props instead of setting children on <textarea>',
+  'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
 ];
 
 beforeEach(() => {
   // Suppress errors from JSDOM CSS parser
   // See: https://github.com/jsdom/jsdom/issues/2177
-  console.error = (message: any) => {
-    if (!suppressedErrors.some(suppressedError => message.includes(suppressedError))) {
-      consoleError(message);
+  console.error = (logged: any) => {
+    const message = logged.stack || logged;
+
+    if (
+      typeof message !== 'string' ||
+      !suppressedErrors.some(suppressedError => message.includes(suppressedError))
+    ) {
+      consoleError(logged);
     }
   };
 });