npm - styled-components - Versions diffs - 5.3.9 → 5.3.11 - Mend

styled-components 5.3.9 → 5.3.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (236) hide show

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

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

package/native/dist/test/veryLargeUnionType.d.ts ADDED Viewed

@@ -0,0 +1 @@

package/native/dist/types.d.ts CHANGED Viewed

@@ -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;
@@ -26,6 +26,9 @@ export interface StyledOptions<R extends Runtime, Props extends object> {
 export type Dict<T> = {
     [key: string]: T;
 };
+export interface DataAttributes {
+    [key: `data-${string}`]: unknown;
+}
 export interface ExecutionProps {
     /**
      * Dynamically adjust the rendered component or HTML tag, e.g.
@@ -48,11 +51,10 @@ export interface ExecutionContext extends ExecutionProps {
     theme: DefaultTheme;
 }
 export interface StyleFunction<Props extends object> {
-    (executionContext: ExecutionContext & Omit<Props, keyof ExecutionContext>): Interpolation<Props>;
+    (executionContext: ExecutionContext & Props): 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 Interpolation<Props extends object> = StyleFunction<Props> | StyledObject<Props> | TemplateStringsArray | string | number | false | undefined | null | Keyframes | IStyledComponent<'web', any> | Interpolation<Props>[];
+export type Attrs<Props extends object = object> = (ExecutionProps & Props) | ((props: ExecutionContext & Props) => 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 +78,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,7 +93,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, 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 ? Omit<P, keyof React.ComponentPropsWithRef<E>> & React.ComponentPropsWithRef<E> : P, 'as' | 'theme'> & {
     as?: P extends {
         as?: string | AnyComponent;
     } ? P['as'] : E;
@@ -106,7 +108,7 @@ export type PolymorphicComponentProps<R extends Runtime, E extends StyledTarget<
 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> {
+export interface IStyledComponent<R extends Runtime, Target extends StyledTarget<R>, Props extends object = Target extends KnownTarget ? React.ComponentPropsWithRef<Target> : object> extends PolymorphicComponent<R, Props, Target>, IStyledStatics<R, Props> {
     defaultProps?: Partial<(Target extends KnownTarget ? ExecutionProps & Omit<React.ComponentProps<Target>, keyof ExecutionProps> : ExecutionProps) & Props>;
     toString: () => string;
 }
@@ -121,28 +123,31 @@ export interface IInlineStyle<Props extends object> {
     generateStyleObject(executionContext: Object): Object;
 }
 export interface StyledObject<Props extends object> {
-    [key: string]: Dict<any> | string | number | StyleFunction<Props> | StyledObject<Props>;
+    [key: string]: string | number | StyleFunction<Props> | StyledObject<Props> | undefined;
 }
 /**
- * Override DefaultTheme to get accurate typings for your project.
- *
- * ```
- * // 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';
+ * 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.
  *
- * 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>;
+export type NoInfer<T> = [T][T extends any ? 0 : never];
+export type SubsetOnly<A, B> = {
+    [K in keyof A]: K extends keyof B ? A[K] : never;
+};

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

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

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

@@ -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 | null, b?: string | null): string;
+export declare function joinStringArray(arr: string[], sep?: string): string;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "styled-components",
-  "version": "5.3.9",
+  "version": "5.3.11",
   "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 CHANGED Viewed

@@ -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.11";
 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();