styled-components 5.3.9 → 5.3.10

package/native/dist/test/types.d.ts

@@ -1 +1,9 @@
-export {};
+import { CSSProp } from '../index';
+/**
+ * `css` prop
+ */
+declare module 'react' {
+    interface Attributes {
+        css?: CSSProp;
+    }
+}

package/native/dist/types.d.ts

@@ -17,7 +17,7 @@ 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;
@@ -51,8 +51,7 @@ export interface StyleFunction<Props extends object> {
     (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 AttrsArg<Props extends object> = (Omit<ExecutionProps, keyof Props> & Props) | ((props: Omit<ExecutionContext, keyof Props> & Props) => Partial<Props>);
-export type Attrs = object | ((...args: any) => object);
+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;
@@ -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;
@@ -124,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';
- *
- * type ThemeType = typeof 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:
  *
- * 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 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/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(a: string | undefined, b: string): string;
+export declare function joinStrings(a?: string, b?: string): string;
+export declare function joinStringArray(arr: string[], sep?: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-components",
-  "version": "5.3.9",
+  "version": "5.3.10",
   "description": "Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress",
   "main": "dist/styled-components.cjs.js",
   "jsnext:main": "dist/styled-components.esm.js",

package/primitives/dist/styled-components-primitives.cjs.js

@@ -155,7 +155,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 var SC_ATTR = typeof process !== 'undefined' && typeof process.env !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || 'data-styled';
 var SC_ATTR_ACTIVE = 'active';
 var SC_ATTR_VERSION = 'data-styled-version';
-var SC_VERSION = "5.3.9";
+var SC_VERSION = "5.3.10";
 var SPLITTER = '/*!sc*/\n';
 var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
 var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean' ? SC_DISABLE_SPEEDY : typeof process !== 'undefined' && typeof process.env !== 'undefined' ? typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' && process.env.REACT_APP_SC_DISABLE_SPEEDY !== '' ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false' ? false : process.env.REACT_APP_SC_DISABLE_SPEEDY : typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' && process.env.SC_DISABLE_SPEEDY !== '' ? process.env.SC_DISABLE_SPEEDY === 'false' ? false : process.env.SC_DISABLE_SPEEDY : process.env.NODE_ENV !== 'production' : false); // Shared empty execution context when generating static styles
@@ -998,8 +998,8 @@ function addUnitIfNeeded(name, value) {
     return '';
   }
 
-  if (typeof value === 'number' && value !== 0 && !(name in unitless)) {
-    return value + "px"; // Presumes implicit 'px' suffix for unitless numbers
+  if (typeof value === 'number' && value !== 0 && !(name in unitless) && !name.startsWith('--')) {
+    return value + "px"; // Presumes implicit 'px' suffix for unitless numbers except for CSS variables
   }
 
   return String(value).trim();