styled-components 6.0.0-beta.9 → 6.0.0-rc.1

package/native/dist/types.d.ts

@@ -6,24 +6,24 @@ interface ExoticComponentWithDisplayName<P = any> extends React.ExoticComponent<
     defaultProps?: Partial<P>;
     displayName?: string;
 }
-export declare type OmitNever<T> = {
+export type OmitNever<T> = {
     [K in keyof T as T[K] extends never ? never : K]: T[K];
 };
-export declare type Runtime = 'web' | 'native';
+export type Runtime = 'web' | 'native';
 export { DefaultTheme };
-export declare type AnyComponent<P = any> = ExoticComponentWithDisplayName<P> | React.ComponentType<P>;
-export declare type KnownTarget = keyof JSX.IntrinsicElements | AnyComponent;
-export declare type WebTarget = string | KnownTarget;
-export declare type NativeTarget = AnyComponent;
-export declare type StyledTarget<R extends Runtime> = R extends 'web' ? WebTarget : NativeTarget;
+export type AnyComponent<P = any> = ExoticComponentWithDisplayName<P> | React.ComponentType<P>;
+export type KnownTarget = keyof JSX.IntrinsicElements | AnyComponent;
+export type WebTarget = string | KnownTarget;
+export type NativeTarget = AnyComponent;
+export type StyledTarget<R extends Runtime> = R extends 'web' ? WebTarget : NativeTarget;
 export interface StyledOptions<R extends Runtime, Props extends object> {
-    attrs?: AttrsArg<Props>[];
+    attrs?: Attrs<Props>[];
     componentId?: R extends 'web' ? string : never;
     displayName?: string;
     parentComponentId?: R extends 'web' ? string : never;
     shouldForwardProp?: ShouldForwardProp<R>;
 }
-export declare type Dict<T> = {
+export type Dict<T> = {
     [key: string]: T;
 };
 export interface ExecutionProps {
@@ -48,14 +48,13 @@ export interface ExecutionContext extends ExecutionProps {
     theme: DefaultTheme;
 }
 export interface StyleFunction<Props extends object> {
-    (executionContext: Omit<ExecutionContext, keyof Props> & Props): Interpolation<Props>;
-}
-export declare type Interpolation<Props extends object> = StyleFunction<Props> | StyledObject<Props> | TemplateStringsArray | string | number | false | undefined | null | Keyframes | OmitSignatures<IStyledComponent<'web', any, any>> | Interpolation<Props>[];
-export declare type AttrsArg<Props extends object> = (Omit<ExecutionProps, keyof Props> & Props) | ((props: Omit<ExecutionContext, keyof Props> & Props) => Partial<Props>);
-export declare type Attrs = object | ((...args: any) => object);
-export declare type RuleSet<Props extends object> = Interpolation<Props>[];
-export declare type Styles<Props extends object> = TemplateStringsArray | StyledObject<Props> | StyleFunction<Props>;
-export declare type NameGenerator = (hash: number) => string;
+    (executionContext: ExecutionContext & Omit<Props, keyof ExecutionContext>): Interpolation<Props>;
+}
+export type Interpolation<Props extends object> = StyleFunction<Props> | StyledObject<Props> | TemplateStringsArray | string | number | false | undefined | null | Keyframes | IStyledComponent<'web', any, any> | Interpolation<Props>[];
+export type Attrs<Props extends object = object> = (ExecutionProps & Props) | ((props: ExecutionContext & Props) => Partial<Props>);
+export type RuleSet<Props extends object> = Interpolation<Props>[];
+export type Styles<Props extends object> = TemplateStringsArray | StyledObject<Props> | StyleFunction<Props>;
+export type NameGenerator = (hash: number) => string;
 export interface StyleSheet {
     create: Function;
 }
@@ -67,7 +66,7 @@ export interface Keyframes {
 export interface Flattener<Props extends object> {
     (chunks: Interpolation<Props>[], executionContext: Object | null | undefined, styleSheet: Object | null | undefined): Interpolation<Props>[];
 }
-export declare type FlattenerResult<Props extends object> = RuleSet<Props> | number | string | string[] | IStyledComponent<'web', any, any> | Keyframes;
+export type FlattenerResult<Props extends object> = RuleSet<Props> | number | string | string[] | IStyledComponent<'web', any, any> | Keyframes;
 export interface Stringifier {
     (css: string, selector?: string, prefix?: string, componentId?: string): string[];
     hash: string;
@@ -76,13 +75,13 @@ export interface ShouldForwardProp<R extends Runtime> {
     (prop: string, elementToBeCreated: StyledTarget<R>): boolean;
 }
 export interface CommonStatics<R extends Runtime, Props extends object> {
-    attrs: AttrsArg<Props>[];
+    attrs: Attrs<Props>[];
     target: StyledTarget<R>;
     shouldForwardProp?: ShouldForwardProp<R>;
 }
 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;
+    foldedComponentIds: R extends 'web' ? string : never;
     inlineStyle: R extends 'native' ? InstanceType<IInlineStyleConstructor<OuterProps>> : never;
     target: StyledTarget<R>;
     styledComponentId: R extends 'web' ? string : never;
@@ -91,24 +90,19 @@ export interface IStyledStatics<R extends Runtime, OuterProps extends object> ex
 /**
  * Used by PolymorphicComponent to define prop override cascading order.
  */
-export declare type PolymorphicComponentProps<R extends Runtime, E extends StyledTarget<R>, P extends object> = Omit<E extends KnownTarget ? P & Omit<React.ComponentPropsWithRef<E>, keyof P> : P, 'as' | 'theme'> & {
+export type PolymorphicComponentProps<R extends Runtime, E extends StyledTarget<R>, P extends object> = Omit<E extends KnownTarget ? P & Omit<React.ComponentPropsWithRef<E>, keyof P> : P, 'as' | 'theme'> & {
     as?: P extends {
         as?: string | AnyComponent;
     } ? P['as'] : E;
     theme?: DefaultTheme;
 };
-/**
- * Remove the function call signature, keeping the additional properties.
- * https://stackoverflow.com/a/62502740/347386
- */
-declare type OmitSignatures<T> = Pick<T, keyof T>;
 /**
  * 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<R extends Runtime, P extends object, FallbackComponent extends StyledTarget<R>> extends OmitSignatures<React.ForwardRefExoticComponent<P>> {
+export 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> {
@@ -116,7 +110,7 @@ export interface IStyledComponent<R extends Runtime, Target extends StyledTarget
     toString: () => string;
 }
 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;
+    <Props extends object = object, Statics extends object = object>(target: Target, options: StyledOptions<R, OuterProps & Props>, rules: RuleSet<OuterProps & Props>): IStyledComponent<R, Target, OuterProps & Props> & OuterStatics & Statics;
 }
 export interface IInlineStyleConstructor<Props extends object> {
     new (rules: RuleSet<Props>): IInlineStyle<Props>;
@@ -129,25 +123,24 @@ export interface StyledObject<Props extends object> {
     [key: string]: Dict<any> | string | number | StyleFunction<Props> | StyledObject<Props>;
 }
 /**
- * Override DefaultTheme to get accurate typings for your project.
+ * 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.
  *
- * ```
- * // create styled-components.d.ts in your project source
- * // if it isn't being picked up, check tsconfig compilerOptions.types
- * import type { CSSProp } from "styled-components";
- * import Theme from './theme';
+ * To enable support for the `css` prop in TypeScript, create a `styled-components.d.ts` file in
+ * your project source with the following contents:
  *
- * type ThemeType = typeof Theme;
- *
- * declare module "styled-components" {
- *  export interface DefaultTheme extends ThemeType {}
- * }
+ * ```ts
+ * import type { CSSProp } from "styled-components";
  *
  * declare module "react" {
- *  interface DOMAttributes<T> {
+ *  interface Attributes {
  *    css?: CSSProp;
  *  }
  * }
  * ```
+ *
+ * In order to get accurate typings for `props.theme` in `css` interpolations, see
+ * {@link DefaultTheme}.
  */
-export declare type CSSProp = string | StyledObject<any> | StyleFunction<any>;
+export type CSSProp = RuleSet<any>;

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

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

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

@@ -1,2 +1,2 @@
-declare const _default: readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "use", "var", "video", "wbr", "circle", "clipPath", "defs", "ellipse", "foreignObject", "g", "image", "line", "linearGradient", "marker", "mask", "path", "pattern", "polygon", "polyline", "radialGradient", "rect", "stop", "svg", "text", "tspan"];
+declare const _default: Set<"object" | "g" | "big" | "link" | "small" | "sub" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "svg" | "circle" | "clipPath" | "defs" | "ellipse" | "foreignObject" | "image" | "line" | "linearGradient" | "marker" | "mask" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "text" | "tspan" | "use">;
 export default _default;

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

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

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

@@ -40,11 +40,11 @@ declare const MEMO_STATICS: {
     propTypes: boolean;
     type: boolean;
 };
-declare type OmniComponent = AnyComponent;
-declare type ExcludeList = {
+type OmniComponent = AnyComponent;
+type ExcludeList = {
     [key: string]: true;
 };
-declare type NonReactStatics<S extends OmniComponent, C extends ExcludeList = {}> = {
+type NonReactStatics<S extends OmniComponent, C extends ExcludeList = {}> = {
     [key in Exclude<keyof S, S extends React.MemoExoticComponent<any> ? keyof typeof MEMO_STATICS | keyof C : S extends React.ForwardRefExoticComponent<any> ? keyof typeof FORWARD_REF_STATICS | keyof C : keyof typeof REACT_STATICS | keyof typeof KNOWN_STATICS | keyof C>]: S[key];
 };
 export default function hoistNonReactStatics<T extends OmniComponent, S extends OmniComponent, C extends ExcludeList = {}>(targetComponent: T, sourceComponent: S, excludelist?: C): T & NonReactStatics<S, C>;

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

@@ -1 +1 @@
-export default function isFunction(test: any): boolean;
+export default function isFunction(test: any): test is Function;

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

@@ -1 +1 @@
-export default function isPlainObject(x: any): boolean;
+export default function isPlainObject(x: any): x is Record<any, any>;

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

@@ -1 +1 @@
-export default function isStatelessFunction(test: any): boolean;
+export default function isStatelessFunction(test: any): test is Function;

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

@@ -1,4 +1,5 @@
 /**
  * Convenience function for joining strings to form className chains
  */
-export default function joinStrings(...args: any[]): string;
+export declare function joinStrings(a?: string, b?: string): string;
+export declare function joinStringArray(arr: string[], sep?: string): string;

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

@@ -1,6 +1,6 @@
 import { Middleware } from 'stylis';
 import { Stringifier } from '../types';
-export declare type ICreateStylisInstance = {
+export type ICreateStylisInstance = {
     options?: {
         namespace?: string;
         prefix?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-components",
-  "version": "6.0.0-beta.9",
+  "version": "6.0.0-rc.1",
   "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",
@@ -10,9 +10,7 @@
     "./dist/styled-components.esm.js": "./dist/styled-components.browser.esm.js",
     "./dist/styled-components.cjs.js": "./dist/styled-components.browser.cjs.js"
   },
-  "sideEffects": [
-    "./src/base.js"
-  ],
+  "sideEffects": false,
   "scripts": {
     "generateErrors": "node scripts/generateErrorMap.js",
     "prebuild": "rimraf dist && yarn generateErrors",
@@ -23,8 +21,6 @@
     "test:web": "jest -c jest.config.main.js",
     "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",
     "lint:size": "bundlewatch",
     "prettier": "prettier src/** --write",
     "prepublishOnly": "cp ../../README.md . && yarn build"
@@ -34,10 +30,8 @@
     "url": "git+https://github.com/styled-components/styled-components.git"
   },
   "files": [
-    "CHANGELOG.md",
-    "CODE_OF_CONDUCT.md",
-    "CONTRIBUTING.md",
     "LICENSE",
+    "README.md",
     "dist",
     "native",
     "test-utils",
@@ -59,52 +53,40 @@
   },
   "homepage": "https://styled-components.com",
   "dependencies": {
-    "@babel/cli": "^7.20.7",
-    "@babel/core": "^7.20.7",
+    "@babel/cli": "^7.21.0",
+    "@babel/core": "^7.21.0",
     "@babel/helper-module-imports": "^7.18.6",
     "@babel/plugin-external-helpers": "^7.18.6",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@babel/traverse": "^7.20.10",
+    "@babel/preset-typescript": "^7.21.0",
+    "@babel/traverse": "^7.21.2",
     "@emotion/unitless": "^0.8.0",
-    "css-to-react-native": "^3.0.0",
+    "css-to-react-native": "^3.2.0",
     "shallowequal": "^1.1.0",
-    "stylis": "^4.1.3",
-    "tslib": "^2.4.1"
+    "stylis": "^4.2.0",
+    "tslib": "^2.5.0"
   },
   "peerDependencies": {
     "babel-plugin-styled-components": ">= 2",
     "react": ">= 16.8.0",
-    "react-dom": ">= 16.8.0",
-    "shallowequal": ">= 1",
-    "stylis": "^4.0.0",
-    "tslib": "^2.0.0"
+    "react-dom": ">= 16.8.0"
   },
   "peerDependenciesMeta": {
     "babel-plugin-styled-components": {
       "optional": true
-    },
-    "shallowequal": {
-      "optional": true
-    },
-    "stylis": {
-      "optional": true
-    },
-    "tslib": {
-      "optional": true
     }
   },
   "devDependencies": {
-    "@babel/plugin-transform-flow-strip-types": "^7.19.0",
-    "@rollup/plugin-typescript": "^10.0.1",
+    "@babel/plugin-transform-flow-strip-types": "^7.21.0",
+    "@rollup/plugin-typescript": "^11.0.0",
     "@types/babel-plugin-macros": "^2.8.4",
     "@types/enzyme": "^3.10.12",
-    "@types/jest": "^29.2.4",
+    "@types/jest": "^29.4.0",
     "@types/js-beautify": "^1.13.1",
-    "@types/node": "^18.11.17",
+    "@types/node": "^18.14.2",
     "@types/react": "^17.0.22",
     "@types/react-dom": "^17.0.9",
     "@types/react-frame-component": "^4.1.3",
@@ -112,33 +94,26 @@
     "@types/react-test-renderer": "^17.0.1",
     "@types/shallowequal": "^1.1.1",
     "@types/stylis": "^4.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.47.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^29.3.1",
+    "babel-jest": "^29.4.3",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-styled-components": "^2.0.7",
     "babel-plugin-tester": "^10.0.0",
     "bundlewatch": "^0.3.3",
-    "eslint": "^8.30.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.11",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
+    "csstype": "^3.1.2",
+    "jest": "^29.4.3",
+    "jest-environment-jsdom": "^29.4.3",
     "jest-serializer-html": "^7.0.0",
-    "jest-watch-typeahead": "^2.0.0",
+    "jest-watch-typeahead": "^2.2.2",
     "js-beautify": "^1.14.7",
-    "prettier": "^2.8.1",
+    "prettier": "^2.8.4",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-frame-component": "^4.0.2",
     "react-native": "^0.70.6",
     "react-test-renderer": "^17.0.2",
-    "rollup": "^3.0.0",
+    "rollup": "^3.18.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
@@ -146,7 +121,7 @@
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
     "stylis-plugin-rtl": "^2.1.1",
-    "typescript": "^4.8.4",
+    "typescript": "^4.9.5",
     "utility-types": "^3.10.0"
   },
   "bundlewatch": {

package/dist/hooks/useTheme.d.ts

@@ -1,3 +0,0 @@
-import { DefaultTheme } from '../models/ThemeProvider';
-declare const useTheme: () => DefaultTheme | undefined;
-export default useTheme;