styled-components 5.2.1 → 5.3.11

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

@@ -0,0 +1,34 @@
+/** CSSStyleSheet-like Tag abstraction for CSS rules */
+export interface Tag {
+    insertRule(index: number, rule: string): boolean;
+    deleteRule(index: number): void;
+    getRule(index: number): string;
+    length: number;
+}
+/** Group-aware Tag that sorts rules by indices */
+export interface GroupedTag {
+    clearGroup(group: number): void;
+    getGroup(group: number): string;
+    groupSizes: Uint32Array;
+    insertRules(group: number, rules: string | string[]): void;
+    length: number;
+    tag: Tag;
+}
+export type SheetOptions = {
+    isServer: boolean;
+    target?: HTMLElement;
+    useCSSOMInjection: boolean;
+};
+export interface Sheet {
+    allocateGSInstance(id: string): number;
+    clearNames(id: string): void;
+    clearRules(id: string): void;
+    clearTag(): void;
+    getTag(): GroupedTag;
+    hasNameForId(id: string, name: string): boolean;
+    insertRules(id: string, name: string, rules: string | string[]): void;
+    options: SheetOptions;
+    names: Map<string, Set<string>>;
+    registerName(id: string, name: string): void;
+    toString(): string;
+}

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

@@ -14,7 +14,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;
@@ -42,7 +42,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
@@ -63,34 +63,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';
 }
@@ -150,16 +150,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({});
 
@@ -183,7 +183,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
@@ -220,7 +220,7 @@ function throwStyledComponentsError(code) {
   }
 }
 
-// 
+//      
 /** Create a GroupedTag with an underlying Tag implementation */
 
 var makeGroupedTag = function makeGroupedTag(tag) {
@@ -314,7 +314,7 @@ var DefaultGroupedTag = /*#__PURE__*/function () {
   return DefaultGroupedTag;
 }();
 
-// 
+//      
 var MAX_SMI = 1 << 31 - 1;
 var groupIDRegister = new Map();
 var reverseRegister = new Map();
@@ -342,11 +342,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) {
@@ -359,7 +363,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 = '';
 
@@ -392,7 +396,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++) {
@@ -436,14 +440,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 */
 
@@ -501,7 +505,7 @@ var getSheet = function getSheet(tag) {
   return undefined;
 };
 
-// 
+//      
 /** Create a CSSStyleSheet-like tag depending on the environment */
 
 var makeTag = function makeTag(_ref) {
@@ -653,9 +657,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);
     }
@@ -842,7 +847,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;
     }
@@ -900,7 +905,7 @@ function createStylisInstance(_temp) {
   return stringifyRules;
 }
 
-// 
+//      
 var StyleSheetContext = React__default.createContext();
 var StyleSheetConsumer = StyleSheetContext.Consumer;
 var StylisContext = React__default.createContext();
@@ -908,7 +913,7 @@ var StylisConsumer = StylisContext.Consumer;
 var masterSheet = new StyleSheet();
 var masterStylis = createStylisInstance();
 
-// 
+//      
 
 var Keyframes = /*#__PURE__*/function () {
   function Keyframes(name, rules) {
@@ -948,7 +953,7 @@ var Keyframes = /*#__PURE__*/function () {
   return Keyframes;
 }();
 
-// 
+//      
 
 /**
  * inlined version of
@@ -983,7 +988,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
@@ -992,14 +997,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.
  */
@@ -1014,10 +1019,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]) + ";");
     }
@@ -1074,7 +1079,7 @@ function flatten(chunk, executionContext, styleSheet, stylisInstance) {
   return isPlainObject(chunk) ? objToCssArray(chunk) : chunk.toString();
 }
 
-// 
+//      
 var printed = {};
 function warnOnce(message) {
   if (printed[message]) return;
@@ -1082,7 +1087,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);
@@ -1353,7 +1358,7 @@ function tokenize(input, options) {
   return tokens;
 }
 
-// 
+//      
 var HIGHLIGHT_THEME = {
   brackets: [36, 39],
   // cyan
@@ -1631,7 +1636,7 @@ var CssSyntaxError = /*#__PURE__*/function () {
   return CssSyntaxError;
 }();
 
-// 
+//      
 
 /* eslint-disable valid-jsdoc */
 var defaultRaw = {
@@ -1977,7 +1982,7 @@ var Stringifier = /*#__PURE__*/function () {
   return Stringifier;
 }();
 
-// 
+//      
 function stringify(node, builder) {
   var str = new Stringifier(builder);
   str.stringify(node);
@@ -2788,7 +2793,7 @@ var Comment = /*#__PURE__*/function (_Node) {
   return Comment;
 }(Node);
 
-// 
+//      
 
 var Parser = /*#__PURE__*/function () {
   function Parser(input) {
@@ -3314,7 +3319,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")');
@@ -4270,7 +4275,7 @@ var AtRule = /*#__PURE__*/function (_Container) {
   return AtRule;
 }(Container);
 
-// 
+//      
 
 /**
  * Contains helpers for safely splitting lists of CSS values,
@@ -4463,7 +4468,7 @@ var Rule = /*#__PURE__*/function (_Container) {
   return Rule;
 }(Container);
 
-// 
+//      
 
 /**
  * Represents a plugin’s warning. It can be created using {@link Node#warn}.
@@ -5146,7 +5151,7 @@ var LazyResult = /*#__PURE__*/function () {
   return LazyResult;
 }();
 
-// 
+//      
 /**
  * @callback builder
  * @param {string} part          - part of generated CSS connected to this node
@@ -5737,7 +5742,7 @@ var SafeParser = /*#__PURE__*/function (_Parser) {
   return SafeParser;
 }(Parser);
 
-// 
+//      
 function safeParse(css, opts) {
   var input = new Input(css, opts);
   var parser = new SafeParser(input);
@@ -5746,7 +5751,7 @@ function safeParse(css, opts) {
   return parser.root;
 }
 
-// 
+//      
 var generated = {};
 /*
  InlineStyle takes arbitrary CSS and generates a flat object
@@ -5861,7 +5866,7 @@ function mixinDeep(target) {
   return target;
 }
 
-// 
+//      
 var determineTheme = (function (props, providedTheme, defaultProps) {
   if (defaultProps === void 0) {
     defaultProps = EMPTY_OBJECT;
@@ -5870,12 +5875,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) + ")";
 }
@@ -5958,9 +5963,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,
@@ -5984,7 +5990,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);
@@ -6066,9 +6075,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 {
@@ -6139,7 +6148,7 @@ var _StyledNativeComponent = (function (InlineStyle) {
   return createStyledNativeComponent;
 });
 
-// 
+//      
 var interleave = (function (strings, interpolations) {
   var result = [strings[0]];
 
@@ -6150,7 +6159,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];
@@ -6158,16 +6181,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) {
@@ -6232,13 +6255,13 @@ var withTheme = (function (Component) {
   return WithTheme;
 });
 
-// 
+//      
 
 var useTheme = function useTheme() {
   return React.useContext(ThemeContext);
 };
 
-// 
+//      
 
 var reactNative = require('react-native');