styled-components 6.1.19 → 6.2.0

package/native/dist/types.d.ts

@@ -5,7 +5,7 @@ import { DefaultTheme } from './models/ThemeProvider';
 import createWarnTooManyClasses from './utils/createWarnTooManyClasses';
 import type { SupportedHTMLElements } from './utils/domElements';
 export { CSS, DefaultTheme, SupportedHTMLElements };
-export interface ExoticComponentWithDisplayName<P extends object = {}> extends React.ExoticComponent<P> {
+export interface ExoticComponentWithDisplayName<P extends BaseObject = {}> extends React.ExoticComponent<P> {
     defaultProps?: Partial<P> | undefined;
     displayName?: string | undefined;
 }
@@ -20,16 +20,16 @@ export type BaseObject = {};
 export type OmitNever<T> = {
     [K in keyof T as T[K] extends never ? never : K]: T[K];
 };
-export type FastOmit<T extends object, U extends string | number | symbol> = {
+export type FastOmit<T extends BaseObject, U extends string | number | symbol> = {
     [K in keyof T as K extends U ? never : K]: T[K];
 };
 export type Runtime = 'web' | 'native';
-export type AnyComponent<P extends object = any> = ExoticComponentWithDisplayName<P> | React.ComponentType<P>;
+export type AnyComponent<P extends BaseObject = any> = ExoticComponentWithDisplayName<P> | React.ComponentType<P>;
 export type KnownTarget = SupportedHTMLElements | 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> {
+export interface StyledOptions<R extends Runtime, Props extends BaseObject> {
     attrs?: Attrs<Props>[] | undefined;
     componentId?: (R extends 'web' ? string : never) | undefined;
     displayName?: string | undefined;
@@ -76,13 +76,13 @@ export type ExecutionProps = {
 export interface ExecutionContext extends ExecutionProps {
     theme: DefaultTheme;
 }
-export interface StyleFunction<Props extends object> {
+export interface StyleFunction<Props extends BaseObject> {
     (executionContext: ExecutionContext & Props): Interpolation<Props>;
 }
-export type Interpolation<Props extends object> = StyleFunction<Props> | StyledObject<Props> | TemplateStringsArray | string | number | false | undefined | null | Keyframes | StyledComponentBrand | RuleSet<Props> | Interpolation<Props>[];
-export type Attrs<Props extends object = BaseObject> = (ExecutionProps & Partial<Props>) | ((props: ExecutionContext & Props) => ExecutionProps & Partial<Props>);
-export type RuleSet<Props extends object = BaseObject> = Interpolation<Props>[];
-export type Styles<Props extends object> = TemplateStringsArray | StyledObject<Props> | StyleFunction<Props>;
+export type Interpolation<Props extends BaseObject> = StyleFunction<Props> | StyledObject<Props> | TemplateStringsArray | string | number | false | undefined | null | Keyframes | StyledComponentBrand | RuleSet<Props> | Interpolation<Props>[];
+export type Attrs<Props extends BaseObject = BaseObject> = (ExecutionProps & Partial<Props>) | ((props: ExecutionContext & Props) => ExecutionProps & Partial<Props>);
+export type RuleSet<Props extends BaseObject = BaseObject> = Interpolation<Props>[];
+export type Styles<Props extends BaseObject> = TemplateStringsArray | StyledObject<Props> | StyleFunction<Props>;
 export type NameGenerator = (hash: number) => string;
 export interface StyleSheet {
     create: Function;
@@ -92,7 +92,7 @@ export interface Keyframes {
     name: string;
     rules: string;
 }
-export interface Flattener<Props extends object> {
+export interface Flattener<Props extends BaseObject> {
     (chunks: Interpolation<Props>[], executionContext: object | null | undefined, styleSheet: StyleSheet | null | undefined): Interpolation<Props>[];
 }
 export interface Stringifier {
@@ -102,12 +102,12 @@ export interface Stringifier {
 export interface ShouldForwardProp<R extends Runtime> {
     (prop: string, elementToBeCreated: StyledTarget<R>): boolean;
 }
-export interface CommonStatics<R extends Runtime, Props extends object> {
+export interface CommonStatics<R extends Runtime, Props extends BaseObject> {
     attrs: Attrs<Props>[];
     target: StyledTarget<R>;
     shouldForwardProp?: ShouldForwardProp<R> | undefined;
 }
-export interface IStyledStatics<R extends Runtime, OuterProps extends object> extends CommonStatics<R, OuterProps> {
+export interface IStyledStatics<R extends Runtime, OuterProps extends BaseObject> extends CommonStatics<R, OuterProps> {
     componentStyle: R extends 'web' ? ComponentStyle : never;
     foldedComponentIds: R extends 'web' ? string : never;
     inlineStyle: R extends 'native' ? InstanceType<IInlineStyleConstructor<OuterProps>> : never;
@@ -118,7 +118,7 @@ export interface IStyledStatics<R extends Runtime, OuterProps extends object> ex
 /**
  * Used by PolymorphicComponent to define prop override cascading order.
  */
-export type PolymorphicComponentProps<R extends Runtime, BaseProps extends object, AsTarget extends StyledTarget<R> | void, ForwardedAsTarget extends StyledTarget<R> | void, AsTargetProps extends object = AsTarget extends KnownTarget ? React.ComponentPropsWithRef<AsTarget> : {}, ForwardedAsTargetProps extends object = ForwardedAsTarget extends KnownTarget ? React.ComponentPropsWithRef<ForwardedAsTarget> : {}> = NoInfer<FastOmit<Substitute<BaseProps, Substitute<ForwardedAsTargetProps, AsTargetProps>>, keyof ExecutionProps>> & FastOmit<ExecutionProps, 'as' | 'forwardedAs'> & {
+export type PolymorphicComponentProps<R extends Runtime, BaseProps extends BaseObject, AsTarget extends StyledTarget<R> | void, ForwardedAsTarget extends StyledTarget<R> | void, AsTargetProps extends BaseObject = AsTarget extends KnownTarget ? React.ComponentPropsWithRef<AsTarget> : {}, ForwardedAsTargetProps extends BaseObject = ForwardedAsTarget extends KnownTarget ? React.ComponentPropsWithRef<ForwardedAsTarget> : {}> = NoInfer<FastOmit<Substitute<BaseProps, Substitute<ForwardedAsTargetProps, AsTargetProps>>, keyof ExecutionProps>> & FastOmit<ExecutionProps, 'as' | 'forwardedAs'> & {
     as?: AsTarget;
     forwardedAs?: ForwardedAsTarget;
 };
@@ -129,14 +129,14 @@ export type PolymorphicComponentProps<R extends Runtime, BaseProps extends objec
  * props from the given rendering target to get proper typing for
  * any specialized props in the target component.
  */
-export interface PolymorphicComponent<R extends Runtime, BaseProps extends object> extends React.ForwardRefExoticComponent<BaseProps> {
+export interface PolymorphicComponent<R extends Runtime, BaseProps extends BaseObject> extends React.ForwardRefExoticComponent<BaseProps> {
     <AsTarget extends StyledTarget<R> | void = void, ForwardedAsTarget extends StyledTarget<R> | void = void>(props: PolymorphicComponentProps<R, BaseProps, AsTarget, ForwardedAsTarget>): React.JSX.Element;
 }
-export interface IStyledComponentBase<R extends Runtime, Props extends object = BaseObject> extends PolymorphicComponent<R, Props>, IStyledStatics<R, Props>, StyledComponentBrand {
+export interface IStyledComponentBase<R extends Runtime, Props extends BaseObject = BaseObject> extends PolymorphicComponent<R, Props>, IStyledStatics<R, Props>, StyledComponentBrand {
     defaultProps?: (ExecutionProps & Partial<Props>) | undefined;
     toString: () => string;
 }
-export type IStyledComponent<R extends Runtime, Props extends object = BaseObject> = IStyledComponentBase<R, Props> & 
+export type IStyledComponent<R extends Runtime, Props extends BaseObject = BaseObject> = IStyledComponentBase<R, Props> & 
 /**
  * TypeScript doesn't allow using a styled component as a key inside object
  * styles because "A computed property name must be of type 'string', 'number',
@@ -156,13 +156,13 @@ export type IStyledComponent<R extends Runtime, Props extends object = BaseObjec
  *  })
  */
 (R extends 'web' ? string : {});
-export interface IStyledComponentFactory<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object, OuterStatics extends object = BaseObject> {
-    <Props extends object = BaseObject, Statics extends object = BaseObject>(target: Target, options: StyledOptions<R, OuterProps & Props>, rules: RuleSet<OuterProps & Props>): IStyledComponent<R, Substitute<OuterProps, Props>> & OuterStatics & Statics;
+export interface IStyledComponentFactory<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends BaseObject, OuterStatics extends BaseObject = BaseObject> {
+    <Props extends BaseObject = BaseObject, Statics extends BaseObject = BaseObject>(target: Target, options: StyledOptions<R, OuterProps & Props>, rules: RuleSet<OuterProps & Props>): IStyledComponent<R, Substitute<OuterProps, Props>> & OuterStatics & Statics;
 }
-export interface IInlineStyleConstructor<Props extends object> {
+export interface IInlineStyleConstructor<Props extends BaseObject> {
     new (rules: RuleSet<Props>): IInlineStyle<Props>;
 }
-export interface IInlineStyle<Props extends object> {
+export interface IInlineStyle<Props extends BaseObject> {
     rules: RuleSet<Props>;
     generateStyleObject(executionContext: ExecutionContext & Props): object;
 }
@@ -173,8 +173,8 @@ export type CSSPseudos = {
 export type CSSKeyframes = object & {
     [key: string]: CSSObject;
 };
-export type CSSObject<Props extends object = BaseObject> = StyledObject<Props>;
-export interface StyledObject<Props extends object = BaseObject> extends CSSProperties, CSSPseudos {
+export type CSSObject<Props extends BaseObject = BaseObject> = StyledObject<Props>;
+export interface StyledObject<Props extends BaseObject = BaseObject> extends CSSProperties, CSSPseudos {
     [key: string]: StyledObject<Props> | string | number | StyleFunction<Props> | RuleSet<any> | undefined;
 }
 /**
@@ -200,5 +200,5 @@ export interface StyledObject<Props extends object = BaseObject> extends CSSProp
  */
 export type CSSProp = Interpolation<any>;
 export type NoInfer<T> = [T][T extends any ? 0 : never];
-export type Substitute<A extends object, B extends object> = FastOmit<A, keyof B> & B;
+export type Substitute<A extends BaseObject, B extends BaseObject> = FastOmit<A, keyof B> & B;
 export type InsertionTarget = HTMLElement | ShadowRoot;

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

@@ -1,4 +1,4 @@
 declare const elements: 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", "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", "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" | "map" | "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" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "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" | "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">;
+declare const _default: Set<"object" | "g" | "map" | "big" | "link" | "small" | "sub" | "sup" | "input" | "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" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "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" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "ellipse" | "foreignObject" | "image" | "line" | "linearGradient" | "marker" | "mask" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "text" | "tspan" | "use">;
 export default _default;
 export type SupportedHTMLElements = (typeof elements)[number];

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-components",
-  "version": "6.1.19",
+  "version": "6.2.0",
   "description": "CSS for the <Component> Age. Style components your way with speed, strong typing, and flexibility.",
   "publishConfig": {
     "access": "public"
@@ -23,7 +23,6 @@
     "test": "yarn run test:web && yarn run test:native",
     "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",
     "size": "bundlewatch",
     "prettier": "prettier src --write",
     "prettier:check": "prettier src --check",
@@ -56,12 +55,12 @@
   "dependencies": {
     "@emotion/is-prop-valid": "1.2.2",
     "@emotion/unitless": "0.8.1",
-    "@types/stylis": "4.2.5",
+    "@types/stylis": "4.2.7",
     "css-to-react-native": "3.2.0",
-    "csstype": "3.1.3",
+    "csstype": "3.2.3",
     "postcss": "8.4.49",
     "shallowequal": "1.1.0",
-    "stylis": "4.3.2",
+    "stylis": "4.3.6",
     "tslib": "2.6.2"
   },
   "peerDependencies": {
@@ -69,53 +68,57 @@
     "react-dom": ">= 16.8.0"
   },
   "devDependencies": {
-    "@babel/core": "7.24.5",
-    "@babel/helper-module-imports": "7.24.3",
-    "@babel/plugin-external-helpers": "7.24.1",
-    "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "7.20.7",
-    "@babel/plugin-transform-flow-strip-types": "7.24.1",
-    "@babel/preset-env": "7.24.5",
-    "@babel/preset-react": "7.24.1",
-    "@babel/preset-typescript": "7.24.1",
-    "@rollup/plugin-typescript": "11.1.6",
-    "@types/enzyme": "3.10.18",
-    "@types/jest": "29.5.12",
-    "@types/js-beautify": "1.14.3",
-    "@types/node": "18.19.31",
-    "@types/react": "17.0.80",
-    "@types/react-dom": "17.0.25",
-    "@types/react-frame-component": "4.1.6",
-    "@types/react-native": "0.69.26",
-    "@types/react-test-renderer": "17.0.9",
-    "@types/shallowequal": "1.1.5",
-    "babel-jest": "29.7.0",
-    "babel-plugin-add-module-exports": "1.0.4",
-    "babel-plugin-styled-components": "2.1.4",
-    "babel-plugin-tester": "10.1.0",
-    "bundlewatch": "0.3.3",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
-    "jest-serializer-html": "7.1.0",
-    "jest-watch-typeahead": "2.2.2",
-    "js-beautify": "1.15.1",
-    "prettier": "3.2.5",
-    "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-frame-component": "4.1.3",
-    "react-native": "0.70.15",
-    "react-test-renderer": "17.0.2",
-    "rollup": "3.29.4",
-    "rollup-plugin-commonjs": "10.1.0",
-    "rollup-plugin-json": "4.0.0",
-    "rollup-plugin-node-resolve": "5.2.0",
-    "rollup-plugin-replace": "2.2.0",
-    "rollup-plugin-sourcemaps": "0.6.3",
-    "rollup-plugin-terser": "7.0.2",
-    "stylis-plugin-rtl": "2.1.1",
-    "ts-toolbelt": "9.6.0",
-    "typescript": "5.4.5"
+    "@babel/core": "^7.24.5",
+    "@babel/helper-module-imports": "^7.24.3",
+    "@babel/plugin-external-helpers": "^7.24.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/plugin-transform-flow-strip-types": "^7.24.1",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/enzyme": "^3.10.18",
+    "@types/jest": "^30.0.0",
+    "@types/js-beautify": "^1.14.3",
+    "@types/node": "^18.19.31",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/react-frame-component": "^4.1.6",
+    "@types/react-native": "^0.71",
+    "@types/react-test-renderer": "^18.0.0",
+    "@types/shallowequal": "^1.1.5",
+    "babel-jest": "^30.1.2",
+    "babel-plugin-add-module-exports": "^1.0.4",
+    "babel-plugin-styled-components": "^2.1.4",
+    "babel-plugin-tester": "^10.1.0",
+    "bundlewatch": "^0.3.3",
+    "jest": "^30.1.3",
+    "jest-environment-jsdom": "^30.1.2",
+    "jest-serializer-html": "^7.1.0",
+    "jest-watch-typeahead": "^3.0.1",
+    "js-beautify": "^1.15.1",
+    "prettier": "^3.6.2",
+    "prop-types": "^15.8.1",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-frame-component": "^4.1.3",
+    "react-native": "~0.71",
+    "react-test-renderer": "^18.0.0",
+    "rollup": "^3.29.4",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-sourcemaps": "^0.6.3",
+    "rollup-plugin-terser": "^7.0.2",
+    "stylis-plugin-rtl": "^2.1.1",
+    "ts-toolbelt": "^9.6.0",
+    "typescript": "^5.4.5"
   },
   "bundlewatch": {
     "files": [

package/test-utils/setupTestFramework.ts

@@ -4,12 +4,17 @@ const suppressedErrors = [
   'Error: Could not parse CSS stylesheet',
   'Warning: Use the `defaultValue` or `value` props instead of setting children on <textarea>',
   'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
+  'Warning: <%s /> is using incorrect casing.',
+  'Warning: The tag <%s> is unrecognized in this browser.',
+  'Warning: React does not recognize the `%s` prop on a DOM element.',
+  'Warning: %s: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.',
+  'Warning: renderToNodeStream is deprecated. Use renderToPipeableStream instead.',
 ];
 
 beforeEach(() => {
   // Suppress errors from JSDOM CSS parser
   // See: https://github.com/jsdom/jsdom/issues/2177
-  console.error = (logged: any) => {
+  console.error = jest.fn((logged: any) => {
     const message = logged.stack || logged;
 
     if (
@@ -18,7 +23,7 @@ beforeEach(() => {
     ) {
       consoleError(logged);
     }
-  };
+  });
 });
 
 afterEach(() => {

package/dist/hoc/withTheme.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/native/dist/dist/hoc/withTheme.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/native/dist/hoc/withTheme.spec.d.ts

@@ -1 +0,0 @@
-export {};