styled-components 5.2.1 → 5.3.11

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

@@ -8,7 +8,7 @@ import unitless from '@emotion/unitless';
 import supportsColor from 'supports-color';
 import hoist from 'hoist-non-react-statics';
 
-// 
+//      
 
 /* eslint-disable no-bitwise */
 var AD_REPLACER_R = /(a)(d)/gi;
@@ -36,7 +36,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
@@ -57,34 +57,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]' && !typeOf(x);
 });
 
-// 
+//      
 function isStyledComponent(target) {
   return target && typeof target.styledComponentId === 'string';
 }
@@ -144,16 +144,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({});
 
@@ -177,7 +177,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
@@ -214,7 +214,7 @@ function throwStyledComponentsError(code) {
   }
 }
 
-// 
+//      
 /** Create a GroupedTag with an underlying Tag implementation */
 
 var makeGroupedTag = function makeGroupedTag(tag) {
@@ -308,7 +308,7 @@ var DefaultGroupedTag = /*#__PURE__*/function () {
   return DefaultGroupedTag;
 }();
 
-// 
+//      
 var MAX_SMI = 1 << 31 - 1;
 var groupIDRegister = new Map();
 var reverseRegister = new Map();
@@ -336,11 +336,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) {
@@ -353,7 +357,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 = '';
 
@@ -386,7 +390,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++) {
@@ -430,14 +434,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 */
 
@@ -495,7 +499,7 @@ var getSheet = function getSheet(tag) {
   return undefined;
 };
 
-// 
+//      
 /** Create a CSSStyleSheet-like tag depending on the environment */
 
 var makeTag = function makeTag(_ref) {
@@ -647,9 +651,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);
     }
@@ -836,7 +841,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;
     }
@@ -894,7 +899,7 @@ function createStylisInstance(_temp) {
   return stringifyRules;
 }
 
-// 
+//      
 var StyleSheetContext = React.createContext();
 var StyleSheetConsumer = StyleSheetContext.Consumer;
 var StylisContext = React.createContext();
@@ -902,7 +907,7 @@ var StylisConsumer = StylisContext.Consumer;
 var masterSheet = new StyleSheet();
 var masterStylis = createStylisInstance();
 
-// 
+//      
 
 var Keyframes = /*#__PURE__*/function () {
   function Keyframes(name, rules) {
@@ -942,7 +947,7 @@ var Keyframes = /*#__PURE__*/function () {
   return Keyframes;
 }();
 
-// 
+//      
 
 /**
  * inlined version of
@@ -977,7 +982,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
@@ -986,14 +991,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.
  */
@@ -1008,10 +1013,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]) + ";");
     }
@@ -1068,7 +1073,7 @@ function flatten(chunk, executionContext, styleSheet, stylisInstance) {
   return isPlainObject(chunk) ? objToCssArray(chunk) : chunk.toString();
 }
 
-// 
+//      
 var printed = {};
 function warnOnce(message) {
   if (printed[message]) return;
@@ -1076,7 +1081,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);
@@ -1347,7 +1352,7 @@ function tokenize(input, options) {
   return tokens;
 }
 
-// 
+//      
 var HIGHLIGHT_THEME = {
   brackets: [36, 39],
   // cyan
@@ -1625,7 +1630,7 @@ var CssSyntaxError = /*#__PURE__*/function () {
   return CssSyntaxError;
 }();
 
-// 
+//      
 
 /* eslint-disable valid-jsdoc */
 var defaultRaw = {
@@ -1971,7 +1976,7 @@ var Stringifier = /*#__PURE__*/function () {
   return Stringifier;
 }();
 
-// 
+//      
 function stringify(node, builder) {
   var str = new Stringifier(builder);
   str.stringify(node);
@@ -2782,7 +2787,7 @@ var Comment = /*#__PURE__*/function (_Node) {
   return Comment;
 }(Node);
 
-// 
+//      
 
 var Parser = /*#__PURE__*/function () {
   function Parser(input) {
@@ -3308,7 +3313,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")');
@@ -4264,7 +4269,7 @@ var AtRule = /*#__PURE__*/function (_Container) {
   return AtRule;
 }(Container);
 
-// 
+//      
 
 /**
  * Contains helpers for safely splitting lists of CSS values,
@@ -4457,7 +4462,7 @@ var Rule = /*#__PURE__*/function (_Container) {
   return Rule;
 }(Container);
 
-// 
+//      
 
 /**
  * Represents a plugin’s warning. It can be created using {@link Node#warn}.
@@ -5140,7 +5145,7 @@ var LazyResult = /*#__PURE__*/function () {
   return LazyResult;
 }();
 
-// 
+//      
 /**
  * @callback builder
  * @param {string} part          - part of generated CSS connected to this node
@@ -5731,7 +5736,7 @@ var SafeParser = /*#__PURE__*/function (_Parser) {
   return SafeParser;
 }(Parser);
 
-// 
+//      
 function safeParse(css, opts) {
   var input = new Input(css, opts);
   var parser = new SafeParser(input);
@@ -5740,7 +5745,7 @@ function safeParse(css, opts) {
   return parser.root;
 }
 
-// 
+//      
 var generated = {};
 /*
  InlineStyle takes arbitrary CSS and generates a flat object
@@ -5855,7 +5860,7 @@ function mixinDeep(target) {
   return target;
 }
 
-// 
+//      
 var determineTheme = (function (props, providedTheme, defaultProps) {
   if (defaultProps === void 0) {
     defaultProps = EMPTY_OBJECT;
@@ -5864,12 +5869,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) + ")";
 }
@@ -5952,9 +5957,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,
@@ -5978,7 +5984,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 createElement(elementToBeRendered, propsForElement);
@@ -6060,9 +6069,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 {
@@ -6133,7 +6142,7 @@ var _StyledNativeComponent = (function (InlineStyle) {
   return createStyledNativeComponent;
 });
 
-// 
+//      
 var interleave = (function (strings, interpolations) {
   var result = [strings[0]];
 
@@ -6144,7 +6153,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];
@@ -6152,16 +6175,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) {
@@ -6226,13 +6249,13 @@ var withTheme = (function (Component) {
   return WithTheme;
 });
 
-// 
+//      
 
 var useTheme = function useTheme() {
   return useContext(ThemeContext);
 };
 
-// 
+//      
 
 var InlineStyle = _InlineStyle(reactPrimitives.StyleSheet);