styled-components 5.2.1 → 5.3.11

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

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

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

@@ -0,0 +1,2 @@
+import { RuleSet } from '../types';
+export default function isStaticRules<Props extends object>(rules: RuleSet<Props>): boolean;

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

@@ -0,0 +1,2 @@
+import { IStyledComponent } from '../types';
+export default function isStyledComponent(target: any): target is IStyledComponent<'web', any, any>;

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

@@ -0,0 +1,2 @@
+import { StyledTarget } from '../types';
+export default function isTag(target: StyledTarget<'web'>): target is string;

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

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

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

@@ -0,0 +1,6 @@
+/**
+ * Arrays & POJOs merged recursively, other objects and value types are overridden
+ * If target is not a POJO or an Array, it will get source properties injected via shallow merge
+ * Source objects applied left to right.  Mutates & returns target.  Similar to lodash merge.
+ */
+export default function mixinDeep(target: any, ...sources: any[]): any;

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

@@ -0,0 +1 @@
+export default function getNonce(): string | null;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-components",
-  "version": "5.2.1",
+  "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",
@@ -65,10 +65,10 @@
   "dependencies": {
     "@babel/helper-module-imports": "^7.0.0",
     "@babel/traverse": "^7.4.5",
-    "@emotion/is-prop-valid": "^0.8.8",
+    "@emotion/is-prop-valid": "^1.1.0",
     "@emotion/stylis": "^0.8.4",
     "@emotion/unitless": "^0.7.4",
-    "babel-plugin-styled-components": ">= 1",
+    "babel-plugin-styled-components": ">= 1.12.0",
     "css-to-react-native": "^3.0.0",
     "hoist-non-react-statics": "^3.0.0",
     "shallowequal": "^1.1.0",
@@ -98,7 +98,7 @@
     "react-dom": "^16.8.6",
     "react-frame-component": "^4.0.2",
     "react-is": "^16.8.6",
-    "react-native": "^0.59.8",
+    "react-native": "^0.63.4",
     "react-primitives": "^0.8.0",
     "react-test-renderer": "^16.8.6",
     "rollup": "^1.13.1",

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

@@ -15,7 +15,7 @@ var unitless = _interopDefault(require('@emotion/unitless'));
 var supportsColor = _interopDefault(require('supports-color'));
 var hoist = _interopDefault(require('hoist-non-react-statics'));
 
-// 
+//      
 
 /* eslint-disable no-bitwise */
 var AD_REPLACER_R = /(a)(d)/gi;
@@ -43,7 +43,7 @@ function generateAlphabeticName(code) {
   return (getAlphabeticChar(x % charsLength) + name).replace(AD_REPLACER_R, '$1-$2');
 }
 
-// 
+//      
 
 /* eslint-disable */
 var SEED = 5381; // When we have separate strings it's useful to run a progressive
@@ -64,34 +64,34 @@ var hash = function hash(x) {
   return phash(SEED, x);
 };
 
-// 
+//      
 var generateComponentId = (function (str) {
   return generateAlphabeticName(hash(str) >>> 0);
 });
 
-// 
+//      
 function getComponentName(target) {
   return (process.env.NODE_ENV !== 'production' ? typeof target === 'string' && target : false) || // $FlowFixMe
   target.displayName || // $FlowFixMe
   target.name || 'Component';
 }
 
-// 
+//      
 function isFunction(test) {
   return typeof test === 'function';
 }
 
-// 
+//      
 function isStatelessFunction(test) {
   return typeof test === 'function' && !(test.prototype && test.prototype.isReactComponent);
 }
 
-// 
+//      
 var isPlainObject = (function (x) {
   return x !== null && typeof x === 'object' && (x.toString ? x.toString() : Object.prototype.toString.call(x)) === '[object Object]' && !reactIs.typeOf(x);
 });
 
-// 
+//      
 function isStyledComponent(target) {
   return target && typeof target.styledComponentId === 'string';
 }
@@ -151,16 +151,16 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-// 
-var SC_ATTR = typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || 'data-styled';
+//      
+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.2.1";
+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.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 !== 'undefined' && 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'); // Shared empty execution context when generating static styles
+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
 
-// 
+//      
 var EMPTY_ARRAY = Object.freeze([]);
 var EMPTY_OBJECT = Object.freeze({});
 
@@ -184,7 +184,7 @@ var errorMap = {
   "17": "CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n"
 };
 
-// 
+//      
 var ERRORS = process.env.NODE_ENV !== 'production' ? errorMap : {};
 /**
  * super basic version of sprintf
@@ -221,7 +221,7 @@ function throwStyledComponentsError(code) {
   }
 }
 
-// 
+//      
 /** Create a GroupedTag with an underlying Tag implementation */
 
 var makeGroupedTag = function makeGroupedTag(tag) {
@@ -315,7 +315,7 @@ var DefaultGroupedTag = /*#__PURE__*/function () {
   return DefaultGroupedTag;
 }();
 
-// 
+//      
 var MAX_SMI = 1 << 31 - 1;
 var groupIDRegister = new Map();
 var reverseRegister = new Map();
@@ -343,11 +343,15 @@ var getIdForGroup = function getIdForGroup(group) {
   return reverseRegister.get(group);
 };
 var setGroupForId = function setGroupForId(id, group) {
+  if (group >= nextFreeGroup) {
+    nextFreeGroup = group + 1;
+  }
+
   groupIDRegister.set(id, group);
   reverseRegister.set(group, id);
 };
 
-// 
+//      
 var SELECTOR = "style[" + SC_ATTR + "][" + SC_ATTR_VERSION + "=\"" + SC_VERSION + "\"]";
 var MARKER_RE = new RegExp("^" + SC_ATTR + "\\.g(\\d+)\\[id=\"([\\w\\d-]+)\"\\].*?\"([^\"]*)");
 var outputSheet = function outputSheet(sheet) {
@@ -360,7 +364,7 @@ var outputSheet = function outputSheet(sheet) {
     if (id === undefined) continue;
     var names = sheet.names.get(id);
     var rules = tag.getGroup(group);
-    if (names === undefined || rules.length === 0) continue;
+    if (!names || !rules || !names.size) continue;
     var selector = SC_ATTR + ".g" + group + "[id=\"" + id + "\"]";
     var content = '';
 
@@ -393,7 +397,7 @@ var rehydrateNamesFromContent = function rehydrateNamesFromContent(sheet, id, co
 };
 
 var rehydrateSheetFromTag = function rehydrateSheetFromTag(sheet, style) {
-  var parts = style.innerHTML.split(SPLITTER);
+  var parts = (style.textContent || '').split(SPLITTER);
   var rules = [];
 
   for (var i = 0, l = parts.length; i < l; i++) {
@@ -437,14 +441,14 @@ var rehydrateSheet = function rehydrateSheet(sheet) {
   }
 };
 
-// 
+//      
 
 /* eslint-disable camelcase, no-undef */
 var getNonce = function getNonce() {
   return typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
 };
 
-// 
+//      
 var ELEMENT_TYPE = 1;
 /* Node.ELEMENT_TYPE */
 
@@ -502,7 +506,7 @@ var getSheet = function getSheet(tag) {
   return undefined;
 };
 
-// 
+//      
 /** Create a CSSStyleSheet-like tag depending on the environment */
 
 var makeTag = function makeTag(_ref) {
@@ -654,9 +658,10 @@ var StyleSheet = /*#__PURE__*/function () {
 
     this.options = _extends({}, defaultOptions, {}, options);
     this.gs = globalStyles;
-    this.names = new Map(names); // We rehydrate only once and use the sheet that is created first
+    this.names = new Map(names);
+    this.server = !!options.isServer; // We rehydrate only once and use the sheet that is created first
 
-    if (!this.options.isServer && IS_BROWSER && SHOULD_REHYDRATE) {
+    if (!this.server && IS_BROWSER && SHOULD_REHYDRATE) {
       SHOULD_REHYDRATE = false;
       rehydrateSheet(this);
     }
@@ -843,7 +848,7 @@ function createStylisInstance(_temp) {
 
   var selfReferenceReplacer = function selfReferenceReplacer(match, offset, string) {
     if ( // do not replace the first occurrence if it is complex (has a modifier)
-    (offset === 0 ? !COMPLEX_SELECTOR_PREFIX.includes(string[_selector.length]) : true) && // no consecutive self refs (.b.b); that is a precedence boost and treated differently
+    (offset === 0 ? COMPLEX_SELECTOR_PREFIX.indexOf(string[_selector.length]) === -1 : true) && // no consecutive self refs (.b.b); that is a precedence boost and treated differently
     !string.match(_consecutiveSelfRefRegExp)) {
       return "." + _componentId;
     }
@@ -901,7 +906,7 @@ function createStylisInstance(_temp) {
   return stringifyRules;
 }
 
-// 
+//      
 var StyleSheetContext = React__default.createContext();
 var StyleSheetConsumer = StyleSheetContext.Consumer;
 var StylisContext = React__default.createContext();
@@ -909,7 +914,7 @@ var StylisConsumer = StylisContext.Consumer;
 var masterSheet = new StyleSheet();
 var masterStylis = createStylisInstance();
 
-// 
+//      
 
 var Keyframes = /*#__PURE__*/function () {
   function Keyframes(name, rules) {
@@ -949,7 +954,7 @@ var Keyframes = /*#__PURE__*/function () {
   return Keyframes;
 }();
 
-// 
+//      
 
 /**
  * inlined version of
@@ -984,7 +989,7 @@ function hyphenateStyleName(string) {
   return uppercaseCheck.test(string) ? string.replace(uppercasePattern, prefixAndLowerCase).replace(msPattern, '-ms-') : string;
 }
 
-// 
+//      
 
 function addUnitIfNeeded(name, value) {
   // https://github.com/amilajack/eslint-plugin-flowtype-errors/issues/133
@@ -993,14 +998,14 @@ 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();
 }
 
-// 
+//      
 /**
  * It's falsish not falsy because 0 is allowed.
  */
@@ -1015,10 +1020,10 @@ var objToCssArray = function objToCssArray(obj, prevKey) {
   for (var key in obj) {
     if (!obj.hasOwnProperty(key) || isFalsish(obj[key])) continue;
 
-    if (isPlainObject(obj[key])) {
-      rules.push.apply(rules, objToCssArray(obj[key], key));
-    } else if (isFunction(obj[key])) {
+    if (Array.isArray(obj[key]) && obj[key].isCss || isFunction(obj[key])) {
       rules.push(hyphenateStyleName(key) + ":", obj[key], ';');
+    } else if (isPlainObject(obj[key])) {
+      rules.push.apply(rules, objToCssArray(obj[key], key));
     } else {
       rules.push(hyphenateStyleName(key) + ": " + addUnitIfNeeded(key, obj[key]) + ";");
     }
@@ -1075,7 +1080,7 @@ function flatten(chunk, executionContext, styleSheet, stylisInstance) {
   return isPlainObject(chunk) ? objToCssArray(chunk) : chunk.toString();
 }
 
-// 
+//      
 var printed = {};
 function warnOnce(message) {
   if (printed[message]) return;
@@ -1083,7 +1088,7 @@ function warnOnce(message) {
   if (typeof console !== 'undefined' && console.warn) console.warn(message);
 }
 
-// 
+//      
 var SINGLE_QUOTE = "'".charCodeAt(0);
 var DOUBLE_QUOTE = '"'.charCodeAt(0);
 var BACKSLASH = '\\'.charCodeAt(0);
@@ -1354,7 +1359,7 @@ function tokenize(input, options) {
   return tokens;
 }
 
-// 
+//      
 var HIGHLIGHT_THEME = {
   brackets: [36, 39],
   // cyan
@@ -1632,7 +1637,7 @@ var CssSyntaxError = /*#__PURE__*/function () {
   return CssSyntaxError;
 }();
 
-// 
+//      
 
 /* eslint-disable valid-jsdoc */
 var defaultRaw = {
@@ -1978,7 +1983,7 @@ var Stringifier = /*#__PURE__*/function () {
   return Stringifier;
 }();
 
-// 
+//      
 function stringify(node, builder) {
   var str = new Stringifier(builder);
   str.stringify(node);
@@ -2789,7 +2794,7 @@ var Comment = /*#__PURE__*/function (_Node) {
   return Comment;
 }(Node);
 
-// 
+//      
 
 var Parser = /*#__PURE__*/function () {
   function Parser(input) {
@@ -3315,7 +3320,7 @@ var Parser = /*#__PURE__*/function () {
   return Parser;
 }();
 
-// 
+//      
 function parse(css, opts) {
   if (opts && opts.safe) {
     throw new Error('Option safe was removed. ' + 'Use parser: require("postcss-safe-parser")');
@@ -4271,7 +4276,7 @@ var AtRule = /*#__PURE__*/function (_Container) {
   return AtRule;
 }(Container);
 
-// 
+//      
 
 /**
  * Contains helpers for safely splitting lists of CSS values,
@@ -4464,7 +4469,7 @@ var Rule = /*#__PURE__*/function (_Container) {
   return Rule;
 }(Container);
 
-// 
+//      
 
 /**
  * Represents a plugin’s warning. It can be created using {@link Node#warn}.
@@ -5147,7 +5152,7 @@ var LazyResult = /*#__PURE__*/function () {
   return LazyResult;
 }();
 
-// 
+//      
 /**
  * @callback builder
  * @param {string} part          - part of generated CSS connected to this node
@@ -5738,7 +5743,7 @@ var SafeParser = /*#__PURE__*/function (_Parser) {
   return SafeParser;
 }(Parser);
 
-// 
+//      
 function safeParse(css, opts) {
   var input = new Input(css, opts);
   var parser = new SafeParser(input);
@@ -5747,7 +5752,7 @@ function safeParse(css, opts) {
   return parser.root;
 }
 
-// 
+//      
 var generated = {};
 /*
  InlineStyle takes arbitrary CSS and generates a flat object
@@ -5862,7 +5867,7 @@ function mixinDeep(target) {
   return target;
 }
 
-// 
+//      
 var determineTheme = (function (props, providedTheme, defaultProps) {
   if (defaultProps === void 0) {
     defaultProps = EMPTY_OBJECT;
@@ -5871,12 +5876,12 @@ var determineTheme = (function (props, providedTheme, defaultProps) {
   return props.theme !== defaultProps.theme && props.theme || providedTheme || defaultProps.theme;
 });
 
-// 
+//      
 function isTag(target) {
   return typeof target === 'string' && (process.env.NODE_ENV !== 'production' ? target.charAt(0) === target.charAt(0).toLowerCase() : true);
 }
 
-// 
+//      
 function generateDisplayName(target) {
   return isTag(target) ? "styled." + target : "Styled(" + getComponentName(target) + ")";
 }
@@ -5959,9 +5964,10 @@ var StyledNativeComponent = /*#__PURE__*/function (_Component) {
           forwardedComponent = _this2$props.forwardedComponent,
           forwardedAs = _this2$props.forwardedAs,
           forwardedRef = _this2$props.forwardedRef,
+          testID = _this2$props.testID,
           _this2$props$style = _this2$props.style,
           style = _this2$props$style === void 0 ? [] : _this2$props$style,
-          props = _objectWithoutPropertiesLoose(_this2$props, ["$as", "as", "forwardedComponent", "forwardedAs", "forwardedRef", "style"]);
+          props = _objectWithoutPropertiesLoose(_this2$props, ["$as", "as", "forwardedComponent", "forwardedAs", "forwardedRef", "testID", "style"]);
 
       var defaultProps = forwardedComponent.defaultProps,
           target = forwardedComponent.target,
@@ -5985,7 +5991,10 @@ var StyledNativeComponent = /*#__PURE__*/function (_Component) {
         }
       }
 
-      propsForElement.style = [generatedStyles].concat(style);
+      propsForElement.style = typeof style === 'function' ? function (state) {
+        return [generatedStyles].concat(style(state));
+      } : [generatedStyles].concat(style);
+      propsForElement.testID = testID || propsForElement.testID;
       if (forwardedRef) propsForElement.ref = forwardedRef;
       if (forwardedAs) propsForElement.as = forwardedAs;
       return React.createElement(elementToBeRendered, propsForElement);
@@ -6067,9 +6076,9 @@ var _StyledNativeComponent = (function (InlineStyle) {
     if (isTargetStyledComp && target.shouldForwardProp) {
       if (shouldForwardProp) {
         // compose nested shouldForwardProp calls
-        shouldForwardProp = function shouldForwardProp(prop, filterFn) {
+        shouldForwardProp = function shouldForwardProp(prop, filterFn, elementToBeCreated) {
           return (// $FlowFixMe
-            target.shouldForwardProp(prop, filterFn) && options.shouldForwardProp(prop, filterFn)
+            target.shouldForwardProp(prop, filterFn, elementToBeCreated) && options.shouldForwardProp(prop, filterFn, elementToBeCreated)
           );
         };
       } else {
@@ -6140,7 +6149,7 @@ var _StyledNativeComponent = (function (InlineStyle) {
   return createStyledNativeComponent;
 });
 
-// 
+//      
 var interleave = (function (strings, interpolations) {
   var result = [strings[0]];
 
@@ -6151,7 +6160,21 @@ var interleave = (function (strings, interpolations) {
   return result;
 });
 
-// 
+//      
+/**
+ * Used when flattening object styles to determine if we should
+ * expand an array of styles.
+ */
+
+var addTag = function addTag(arg) {
+  if (Array.isArray(arg)) {
+    // eslint-disable-next-line no-param-reassign
+    arg.isCss = true;
+  }
+
+  return arg;
+};
+
 function css(styles) {
   for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     interpolations[_key - 1] = arguments[_key];
@@ -6159,16 +6182,16 @@ function css(styles) {
 
   if (isFunction(styles) || isPlainObject(styles)) {
     // $FlowFixMe
-    return flatten(interleave(EMPTY_ARRAY, [styles].concat(interpolations)));
+    return addTag(flatten(interleave(EMPTY_ARRAY, [styles].concat(interpolations))));
   }
 
-  if (interpolations.length === 0 && styles.length === 1 && typeof styles[0] === "string") {
+  if (interpolations.length === 0 && styles.length === 1 && typeof styles[0] === 'string') {
     // $FlowFixMe
     return styles;
   } // $FlowFixMe
 
 
-  return flatten(interleave(styles, interpolations));
+  return addTag(flatten(interleave(styles, interpolations)));
 }
 
 function constructWithOptions(componentConstructor, tag, options) {
@@ -6233,13 +6256,13 @@ var withTheme = (function (Component) {
   return WithTheme;
 });
 
-// 
+//      
 
 var useTheme = function useTheme() {
   return React.useContext(ThemeContext);
 };
 
-// 
+//      
 
 var InlineStyle = _InlineStyle(reactPrimitives.StyleSheet);