npm - styled-components - Versions diffs - 5.0.0 → 5.1.1 - Mend

styled-components 5.0.0 → 5.1.1

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 (22) hide show

package/dist/styled-components.browser.cjs.js +200 -144
package/dist/styled-components.browser.cjs.js.map +1 -1
package/dist/styled-components.browser.esm.js +202 -146
package/dist/styled-components.browser.esm.js.map +1 -1
package/dist/styled-components.cjs.js +201 -145
package/dist/styled-components.cjs.js.map +1 -1
package/dist/styled-components.esm.js +203 -147
package/dist/styled-components.esm.js.map +1 -1
package/dist/styled-components.js +218 -156
package/dist/styled-components.js.map +1 -1
package/dist/styled-components.min.js +1 -1
package/dist/styled-components.min.js.map +1 -1
package/native/dist/styled-components.native.cjs.js +186 -171
package/native/dist/styled-components.native.cjs.js.map +1 -1
package/native/dist/styled-components.native.esm.js +187 -173
package/native/dist/styled-components.native.esm.js.map +1 -1
package/package.json +14 -4
package/primitives/dist/styled-components-primitives.cjs.js +186 -171
package/primitives/dist/styled-components-primitives.cjs.js.map +1 -1
package/primitives/dist/styled-components-primitives.esm.js +187 -173
package/primitives/dist/styled-components-primitives.esm.js.map +1 -1
package/README.md +0 -180

package/dist/styled-components.browser.cjs.js CHANGED Viewed

@@ -59,7 +59,7 @@ var interleave = (function (strings, interpolations) {
 //
 var isPlainObject = (function (x) {
-  return typeof x === 'object' && x.constructor === Object;
+  return x !== null && typeof x === 'object' && (x.toString ? x.toString() : Object.prototype.toString.call(x)) === '[object Object]' && !reactIs.typeOf(x);
 });
 //
@@ -92,7 +92,8 @@ function isStyledComponent(target) {
 var SC_ATTR = typeof process !== '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.0.0";
+var SC_VERSION = "5.1.1";
+var SPLITTER = '/*!sc*/\n';
 var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
 var DISABLE_SPEEDY = typeof SC_DISABLE_SPEEDY === 'boolean' && SC_DISABLE_SPEEDY || typeof process !== 'undefined' && (process.env.REACT_APP_SC_DISABLE_SPEEDY || process.env.SC_DISABLE_SPEEDY) || process.env.NODE_ENV !== 'production'; // Shared empty execution context when generating static styles
@@ -105,6 +106,63 @@ var getNonce = function getNonce() {
   return typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
 };
+var errorMap = {
+  "1": "Cannot create styled-component for component: %s.\n\n",
+  "2": "Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",
+  "3": "Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",
+  "4": "The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",
+  "5": "The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",
+  "6": "Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",
+  "7": "ThemeProvider: Please return an object from your \"theme\" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n",
+  "8": "ThemeProvider: Please make your \"theme\" prop an object.\n\n",
+  "9": "Missing document `<head>`\n\n",
+  "10": "Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",
+  "11": "_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",
+  "12": "It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",
+  "13": "%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",
+  "14": "ThemeProvider: \"theme\" prop is required.\n\n",
+  "15": "A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",
+  "16": "Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",
+  "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
+ */
+function format() {
+  var a = arguments.length <= 0 ? undefined : arguments[0];
+  var b = [];
+  for (var c = 1, len = arguments.length; c < len; c += 1) {
+    b.push(c < 0 || arguments.length <= c ? undefined : arguments[c]);
+  }
+  b.forEach(function (d) {
+    a = a.replace(/%[a-z]/, d);
+  });
+  return a;
+}
+/**
+ * Create an error file out of errors.md for development and a simple web link to the full errors
+ * in production mode.
+ */
+function throwStyledComponentsError(code) {
+  for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    interpolations[_key - 1] = arguments[_key];
+  }
+  if (process.env.NODE_ENV === 'production') {
+    throw new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/utils/errors.md#" + code + " for more information." + (interpolations.length > 0 ? " Additional arguments: " + interpolations.join(', ') : ''));
+  } else {
+    throw new Error(format.apply(void 0, [ERRORS[code]].concat(interpolations)).trim());
+  }
+}
 //
 var ELEMENT_TYPE = 1;
 /* Node.ELEMENT_TYPE */
@@ -159,7 +217,8 @@ var getSheet = function getSheet(tag) {
     }
   }
-  throw new TypeError("CSSStyleSheet could not be found on HTMLStyleElement");
+  throwStyledComponentsError(17);
+  return undefined;
 };
 //
@@ -178,9 +237,7 @@ var makeTag = function makeTag(_ref) {
     return new TextTag(target);
   }
 };
-var CSSOMTag =
-/*#__PURE__*/
-function () {
+var CSSOMTag = /*#__PURE__*/function () {
   function CSSOMTag(target) {
     var element = this.element = makeStyleTag(target); // Avoid Edge bug where empty style elements don't create sheets
@@ -220,9 +277,7 @@ function () {
 }();
 /** A Tag that emulates the CSSStyleSheet API but uses text nodes */
-var TextTag =
-/*#__PURE__*/
-function () {
+var TextTag = /*#__PURE__*/function () {
   function TextTag(target) {
     var element = this.element = makeStyleTag(target);
     this.nodes = element.childNodes;
@@ -260,9 +315,7 @@ function () {
 }();
 /** A completely virtual (server-side) Tag that doesn't manipulate the DOM */
-var VirtualTag =
-/*#__PURE__*/
-function () {
+var VirtualTag = /*#__PURE__*/function () {
   function VirtualTag(_target) {
     this.rules = [];
     this.length = 0;
@@ -297,18 +350,14 @@ function () {
 }();
 //
-/* eslint-disable no-use-before-define */
 /** Create a GroupedTag with an underlying Tag implementation */
 var makeGroupedTag = function makeGroupedTag(tag) {
   return new DefaultGroupedTag(tag);
 };
-var BASE_SIZE = 1 << 8;
+var BASE_SIZE = 1 << 9;
-var DefaultGroupedTag =
-/*#__PURE__*/
-function () {
+var DefaultGroupedTag = /*#__PURE__*/function () {
   function DefaultGroupedTag(tag) {
     this.groupSizes = new Uint32Array(BASE_SIZE);
     this.length = BASE_SIZE;
@@ -331,7 +380,16 @@ function () {
     if (group >= this.groupSizes.length) {
       var oldBuffer = this.groupSizes;
       var oldSize = oldBuffer.length;
-      var newSize = BASE_SIZE << (group / BASE_SIZE | 0);
+      var newSize = oldSize;
+      while (group >= newSize) {
+        newSize <<= 1;
+        if (newSize < 0) {
+          throwStyledComponentsError(16, "" + group);
+        }
+      }
       this.groupSizes = new Uint32Array(newSize);
       this.groupSizes.set(oldBuffer);
       this.length = newSize;
@@ -376,7 +434,7 @@ function () {
     var endIndex = startIndex + length;
     for (var i = startIndex; i < endIndex; i++) {
-      css += this.tag.getRule(i) + "\n";
+      css += "" + this.tag.getRule(i) + SPLITTER;
     }
     return css;
@@ -386,6 +444,7 @@ function () {
 }();
 //
+var MAX_SMI = 1 << 31 - 1;
 var groupIDRegister = new Map();
 var reverseRegister = new Map();
 var nextFreeGroup = 1;
@@ -395,6 +454,11 @@ var getGroupForId = function getGroupForId(id) {
   }
   var group = nextFreeGroup++;
+  if (process.env.NODE_ENV !== 'production' && ((group | 0) < 0 || group > MAX_SMI)) {
+    throwStyledComponentsError(16, "" + group);
+  }
   groupIDRegister.set(id, group);
   reverseRegister.set(group, id);
   return group;
@@ -413,8 +477,7 @@ var setGroupForId = function setGroupForId(id, group) {
 //
 var SELECTOR = "style[" + SC_ATTR + "][" + SC_ATTR_VERSION + "=\"" + SC_VERSION + "\"]";
-var RULE_RE = /(?:\s*)?(.*?){((?:{[^}]*}|(?!{).*?)*)}/g;
-var MARKER_RE = new RegExp("^" + SC_ATTR + "\\.g(\\d+)\\[id=\"([\\w\\d-]+)\"\\]");
+var MARKER_RE = new RegExp("^" + SC_ATTR + "\\.g(\\d+)\\[id=\"([\\w\\d-]+)\"\\].*?\"([^\"]*)");
 var outputSheet = function outputSheet(sheet) {
   var tag = sheet.getTag();
   var length = tag.length;
@@ -439,7 +502,7 @@ var outputSheet = function outputSheet(sheet) {
     // after the actual rules to simplify the rehydration
-    css += "" + rules + selector + "{content:\"" + content + "\"}\n";
+    css += "" + rules + selector + "{content:\"" + content + "\"}" + SPLITTER;
   }
   return css;
@@ -458,13 +521,13 @@ var rehydrateNamesFromContent = function rehydrateNamesFromContent(sheet, id, co
 };
 var rehydrateSheetFromTag = function rehydrateSheetFromTag(sheet, style) {
-  var rawHTML = style.innerHTML;
+  var parts = style.innerHTML.split(SPLITTER);
   var rules = [];
-  var parts; // parts = [match, selector, content]
-  // eslint-disable-next-line no-cond-assign
-  while (parts = RULE_RE.exec(rawHTML)) {
-    var marker = parts[1].match(MARKER_RE);
+  for (var i = 0, l = parts.length; i < l; i++) {
+    var part = parts[i].trim();
+    if (!part) continue;
+    var marker = part.match(MARKER_RE);
     if (marker) {
       var group = parseInt(marker[1], 10) | 0;
@@ -475,13 +538,13 @@ var rehydrateSheetFromTag = function rehydrateSheetFromTag(sheet, style) {
         setGroupForId(id, group); // Rehydrate names and rules
         // looks like: data-styled.g11[id="idA"]{content:"nameA,"}
-        rehydrateNamesFromContent(sheet, id, parts[2].split('"')[1]);
+        rehydrateNamesFromContent(sheet, id, marker[3]);
         sheet.getTag().insertRules(group, rules);
       }
       rules.length = 0;
     } else {
-      rules.push(parts[0].trim());
+      rules.push(part);
     }
   }
 };
@@ -509,9 +572,7 @@ var defaultOptions = {
 };
 /** Contains the main stylesheet logic for stringification and caching */
-var StyleSheet =
-/*#__PURE__*/
-function () {
+var StyleSheet = /*#__PURE__*/function () {
   /** Register a group ID to give it an index */
   StyleSheet.registerId = function registerId(id) {
     return getGroupForId(id);
@@ -526,7 +587,7 @@ function () {
       globalStyles = {};
     }
-    this.options = _extends({}, defaultOptions, options);
+    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
@@ -539,7 +600,7 @@ function () {
   var _proto = StyleSheet.prototype;
   _proto.reconstructWithOptions = function reconstructWithOptions(options) {
-    return new StyleSheet(_extends({}, this.options, options), this.gs, this.names);
+    return new StyleSheet(_extends({}, this.options, {}, options), this.gs, this.names);
   };
   _proto.allocateGSInstance = function allocateGSInstance(id) {
@@ -611,82 +672,25 @@ function () {
   return StyleSheet;
 }();
-//
-var errorMap = {
-  "1": "Cannot create styled-component for component: %s.\n\n",
-  "2": "Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",
-  "3": "Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",
-  "4": "The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",
-  "5": "The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",
-  "6": "Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",
-  "7": "ThemeProvider: Please return an object from your \"theme\" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n",
-  "8": "ThemeProvider: Please make your \"theme\" prop an object.\n\n",
-  "9": "Missing document `<head>`\n\n",
-  "10": "Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",
-  "11": "_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",
-  "12": "It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",
-  "13": "%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",
-  "14": "ThemeProvider: \"theme\" prop is required.\n\n",
-  "15": "A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n"
-};
-//
-var ERRORS = process.env.NODE_ENV !== 'production' ? errorMap : {};
-/**
- * super basic version of sprintf
- */
-function format() {
-  var a = arguments.length <= 0 ? undefined : arguments[0];
-  var b = [];
-  for (var c = 1, len = arguments.length; c < len; c += 1) {
-    b.push(c < 0 || arguments.length <= c ? undefined : arguments[c]);
-  }
-  b.forEach(function (d) {
-    a = a.replace(/%[a-z]/, d);
-  });
-  return a;
-}
-/**
- * Create an error file out of errors.md for development and a simple web link to the full errors
- * in production mode.
- */
-function throwStyledComponentsError(code) {
-  for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    interpolations[_key - 1] = arguments[_key];
-  }
-  if (process.env.NODE_ENV === 'production') {
-    throw new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/utils/errors.md#" + code + " for more information." + (interpolations.length > 0 ? " Additional arguments: " + interpolations.join(', ') : ''));
-  } else {
-    throw new Error(format.apply(void 0, [ERRORS[code]].concat(interpolations)).trim());
-  }
-}
 //
 /* eslint-disable */
-var SEED = 5381 | 0; // When we have separate strings it's useful to run a progressive
+var SEED = 5381; // When we have separate strings it's useful to run a progressive
 // version of djb2 where we pretend that we're still looping over
 // the same string
 var phash = function phash(h, x) {
-  h |= 0;
+  var i = x.length;
-  for (var i = 0, l = x.length | 0; i < l; i++) {
-    h = (h << 5) + h + x.charCodeAt(i);
+  while (i) {
+    h = h * 33 ^ x.charCodeAt(--i);
   }
   return h;
 }; // This is a djb2 hashing function
 var hash = function hash(x) {
-  return phash(SEED, x) >>> 0;
+  return phash(SEED, x);
 };
 /**
@@ -709,6 +713,8 @@ var hash = function hash(x) {
  * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR
  * IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
+/* eslint-disable */
 function insertRulePlugin (insertRule) {
   var delimiter = '/*|*/';
   var needle = delimiter + "}";
@@ -834,13 +840,13 @@ function createStylisInstance(_temp) {
     return stylis(prefix || !selector ? '' : selector, cssStr);
   }
-  stringifyRules.hash = plugins.reduce(function (acc, plugin) {
+  stringifyRules.hash = plugins.length ? plugins.reduce(function (acc, plugin) {
     if (!plugin.name) {
       throwStyledComponentsError(15);
     }
     return phash(acc, plugin.name);
-  }, SEED).toString();
+  }, SEED).toString() : '';
   return stringifyRules;
 }
@@ -894,18 +900,16 @@ function StyleSheetManager(props) {
   React.useEffect(function () {
     if (!shallowequal(plugins, props.stylisPlugins)) setPlugins(props.stylisPlugins);
   }, [props.stylisPlugins]);
-  return React__default.createElement(StyleSheetContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(StyleSheetContext.Provider, {
     value: styleSheet
-  }, React__default.createElement(StylisContext.Provider, {
+  }, /*#__PURE__*/React__default.createElement(StylisContext.Provider, {
     value: stylis
   }, process.env.NODE_ENV !== 'production' ? React__default.Children.only(props.children) : props.children));
 }
 //
-var Keyframes =
-/*#__PURE__*/
-function () {
+var Keyframes = /*#__PURE__*/function () {
   function Keyframes(name, stringifyArgs) {
     var _this = this;
@@ -1095,7 +1099,7 @@ function constructWithOptions(componentConstructor, tag, options) {
   templateFunction.withConfig = function (config) {
-    return constructWithOptions(componentConstructor, tag, _extends({}, options, config));
+    return constructWithOptions(componentConstructor, tag, _extends({}, options, {}, config));
   };
   /* Modify/inject new props at runtime */
@@ -1224,9 +1228,7 @@ function isStaticRules(rules) {
  the React-specific stuff.
  */
-var ComponentStyle =
-/*#__PURE__*/
-function () {
+var ComponentStyle = /*#__PURE__*/function () {
   function ComponentStyle(rules, componentId) {
     this.rules = rules;
     this.staticRulesId = '';
@@ -1319,6 +1321,36 @@ var createWarnTooManyClasses = (function (displayName, componentId) {
   };
 });
+//
+var invalidHookCallRe = /invalid hook call/i;
+var seen = new Set();
+var checkDynamicCreation = function checkDynamicCreation(displayName, componentId) {
+  if (process.env.NODE_ENV !== 'production') {
+    var parsedIdString = componentId ? " with the id of \"" + componentId + "\"" : '';
+    var message = "The component " + displayName + parsedIdString + " has been created dynamically.\n" + 'You may see this warning because you\'ve called styled inside another component.\n' + 'To resolve this only create new StyledComponents outside of any render method and function component.';
+    try {
+      // We purposefully call `useRef` outside of a component and expect it to throw
+      // If it doesn't, then we're inside another component.
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      React.useRef();
+      if (!seen.has(message)) {
+        // eslint-disable-next-line no-console
+        console.warn(message);
+        seen.add(message);
+      }
+    } catch (error) {
+      // The error here is expected, since we're expecting anything that uses `checkDynamicCreation` to
+      // be called outside of a React component.
+      if (invalidHookCallRe.test(error.message)) {
+        // This shouldn't happen, but resets `warningSeen` if we had this error happen intermittently
+        seen["delete"](message);
+      }
+    }
+  }
+};
 //
 var determineTheme = (function (props, providedTheme, defaultProps) {
   if (defaultProps === void 0) {
@@ -1329,7 +1361,9 @@ var determineTheme = (function (props, providedTheme, defaultProps) {
 });
 //
-var escapeRegex = /[[\].#*$><+~=|^:(),"'`-]+/g;
+// Source: https://www.w3.org/TR/cssom-1/#serialize-an-identifier
+// Control characters and non-letter first symbols are not supported
+var escapeRegex = /[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g;
 var dashesAtEnds = /(^-|-$)/g;
 /**
  * TODO: Explore using CSS.escape when it becomes more available
@@ -1355,7 +1389,7 @@ function generateDisplayName(target) {
 //
 var generateComponentId = (function (str) {
-  return generateAlphabeticName(hash(str));
+  return generateAlphabeticName(hash(str) >>> 0);
 });
 /**
@@ -1387,7 +1421,7 @@ function mergeTheme(theme, outerTheme) {
     return throwStyledComponentsError(8);
   }
-  return outerTheme ? _extends({}, outerTheme, theme) : theme;
+  return outerTheme ? _extends({}, outerTheme, {}, theme) : theme;
 }
 /**
  * Provide a theme to an entire react component tree via context
@@ -1404,7 +1438,7 @@ function ThemeProvider(props) {
     return null;
   }
-  return React__default.createElement(ThemeContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, {
     value: themeContext
   }, props.children);
 }
@@ -1475,6 +1509,7 @@ function useStyledComponentImpl(forwardedComponent, props, forwardedRef) {
       componentStyle = forwardedComponent.componentStyle,
       defaultProps = forwardedComponent.defaultProps,
       foldedComponentIds = forwardedComponent.foldedComponentIds,
+      shouldForwardProp = forwardedComponent.shouldForwardProp,
       styledComponentId = forwardedComponent.styledComponentId,
       target = forwardedComponent.target;
   React.useDebugValue(styledComponentId); // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,
@@ -1489,26 +1524,23 @@ function useStyledComponentImpl(forwardedComponent, props, forwardedRef) {
   var generatedClassName = useInjectedStyle(componentStyle, componentAttrs.length > 0, context, process.env.NODE_ENV !== 'production' ? forwardedComponent.warnTooManyClasses : undefined);
   var refToForward = forwardedRef;
-  var elementToBeCreated = attrs.as || props.as || target;
+  var elementToBeCreated = attrs.$as || props.$as || attrs.as || props.as || target;
   var isTargetTag = isTag(elementToBeCreated);
-  var computedProps = attrs !== props ? _extends({}, props, attrs) : props;
-  var shouldFilterProps = isTargetTag || 'as' in computedProps || 'forwardedAs' in computedProps;
-  var propsForElement = shouldFilterProps ? {} : _extends({}, computedProps);
-  if (shouldFilterProps) {
-    // eslint-disable-next-line guard-for-in
-    for (var key in computedProps) {
-      if (key === 'forwardedAs') {
-        propsForElement.as = computedProps[key];
-      } else if (key !== 'as' && key !== 'forwardedAs' && (!isTargetTag || validAttr(key))) {
-        // Don't pass through non HTML tags through to HTML elements
-        propsForElement[key] = computedProps[key];
-      }
+  var computedProps = attrs !== props ? _extends({}, props, {}, attrs) : props;
+  var propFilterFn = shouldForwardProp || isTargetTag && validAttr;
+  var propsForElement = {}; // eslint-disable-next-line guard-for-in
+  for (var key in computedProps) {
+    if (key[0] === '$' || key === 'as') continue;else if (key === 'forwardedAs') {
+      propsForElement.as = computedProps[key];
+    } else if (!propFilterFn || propFilterFn(key, validAttr)) {
+      // Don't pass through non HTML tags through to HTML elements
+      propsForElement[key] = computedProps[key];
     }
   }
   if (props.style && attrs.style !== props.style) {
-    propsForElement.style = _extends({}, props.style, attrs.style);
+    propsForElement.style = _extends({}, props.style, {}, attrs.style);
   }
   propsForElement.className = Array.prototype.concat(foldedComponentIds, styledComponentId, generatedClassName !== styledComponentId ? generatedClassName : null, props.className, attrs.className).filter(Boolean).join(' ');
@@ -1528,7 +1560,24 @@ function createStyledComponent(target, options, rules) {
   var styledComponentId = options.displayName && options.componentId ? escape(options.displayName) + "-" + options.componentId : options.componentId || componentId; // fold the underlying StyledComponent attrs up (implicit extend)
   var finalAttrs = // $FlowFixMe
-  isTargetStyledComp && target.attrs ? Array.prototype.concat(target.attrs, attrs).filter(Boolean) : attrs;
+  isTargetStyledComp && target.attrs ? Array.prototype.concat(target.attrs, attrs).filter(Boolean) : attrs; // eslint-disable-next-line prefer-destructuring
+  var shouldForwardProp = options.shouldForwardProp; // $FlowFixMe
+  if (isTargetStyledComp && target.shouldForwardProp) {
+    if (shouldForwardProp) {
+      // compose nested shouldForwardProp calls
+      shouldForwardProp = function shouldForwardProp(prop, filterFn) {
+        return (// $FlowFixMe
+          target.shouldForwardProp(prop, filterFn) && options.shouldForwardProp(prop, filterFn)
+        );
+      };
+    } else {
+      // eslint-disable-next-line prefer-destructuring
+      shouldForwardProp = target.shouldForwardProp;
+    }
+  }
   var componentStyle = new ComponentStyle(isTargetStyledComp ? // fold the underlying StyledComponent rules up (implicit extend)
   // $FlowFixMe
   target.componentStyle.rules.concat(rules) : rules, styledComponentId);
@@ -1548,7 +1597,8 @@ function createStyledComponent(target, options, rules) {
   WrappedStyledComponent = React__default.forwardRef(forwardRef);
   WrappedStyledComponent.attrs = finalAttrs;
   WrappedStyledComponent.componentStyle = componentStyle;
-  WrappedStyledComponent.displayName = displayName; // this static is used to preserve the cascade of static classes for component selector
+  WrappedStyledComponent.displayName = displayName;
+  WrappedStyledComponent.shouldForwardProp = shouldForwardProp; // this static is used to preserve the cascade of static classes for component selector
   // purposes; this is especially important with usage of the css prop
   WrappedStyledComponent.foldedComponentIds = isTargetStyledComp ? // $FlowFixMe
@@ -1584,6 +1634,7 @@ function createStyledComponent(target, options, rules) {
   });
   if (process.env.NODE_ENV !== 'production') {
+    checkDynamicCreation(displayName, styledComponentId);
     WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(displayName, styledComponentId);
   } // $FlowFixMe
@@ -1599,6 +1650,7 @@ function createStyledComponent(target, options, rules) {
       componentStyle: true,
       displayName: true,
       foldedComponentIds: true,
+      shouldForwardProp: true,
       self: true,
       styledComponentId: true,
       target: true,
@@ -1627,9 +1679,7 @@ domElements.forEach(function (domElement) {
 //
-var GlobalStyle =
-/*#__PURE__*/
-function () {
+var GlobalStyle = /*#__PURE__*/function () {
   function GlobalStyle(rules, componentId) {
     this.rules = rules;
     this.componentId = componentId;
@@ -1669,6 +1719,10 @@ function createGlobalStyle(strings) {
   var styledComponentId = "sc-global-" + generateComponentId(JSON.stringify(rules));
   var globalStyle = new GlobalStyle(rules, styledComponentId);
+  if (process.env.NODE_ENV !== 'production') {
+    checkDynamicCreation(styledComponentId);
+  }
   function GlobalStyleComponent(props) {
     var styleSheet = useStyleSheet();
     var stylis = useStylis();
@@ -1686,6 +1740,12 @@ function createGlobalStyle(strings) {
       console.warn("The global style component " + styledComponentId + " was given child JSX. createGlobalStyle does not render children.");
     }
+    if (process.env.NODE_ENV !== 'production' && rules.some(function (rule) {
+      return typeof rule === 'string' && rule.indexOf('@import') !== -1;
+    })) {
+      console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app.");
+    }
     if (globalStyle.isStatic) {
       globalStyle.renderStyles(instance, STATIC_EXECUTION_CONTEXT, styleSheet, stylis);
     } else {
@@ -1725,9 +1785,7 @@ function keyframes(strings) {
   return new Keyframes(name, [rules, name, '@keyframes']);
 }
-var ServerStyleSheet =
-/*#__PURE__*/
-function () {
+var ServerStyleSheet = /*#__PURE__*/function () {
   function ServerStyleSheet() {
     var _this = this;
@@ -1735,7 +1793,7 @@ function () {
       var css = _this.instance.toString();
       var nonce = getNonce();
-      var attrs = [nonce && "nonce=\"" + nonce + "\"", SC_ATTR, SC_ATTR_VERSION + "=\"" + SC_VERSION + "\""];
+      var attrs = [nonce && "nonce=\"" + nonce + "\"", SC_ATTR + "=\"true\"", SC_ATTR_VERSION + "=\"" + SC_VERSION + "\""];
       var htmlAttr = attrs.filter(Boolean).join(' ');
       return "<style " + htmlAttr + ">" + css + "</style>";
     };
@@ -1765,7 +1823,7 @@ function () {
       } // v4 returned an array for this fn, so we'll do the same for v5 for backward compat
-      return [React__default.createElement("style", _extends({}, props, {
+      return [/*#__PURE__*/React__default.createElement("style", _extends({}, props, {
         key: "sc-0-0"
       }))];
     };
@@ -1787,7 +1845,7 @@ function () {
       return throwStyledComponentsError(2);
     }
-    return React__default.createElement(StyleSheetManager, {
+    return /*#__PURE__*/React__default.createElement(StyleSheetManager, {
       sheet: this.instance
     }, children);
   };
@@ -1821,7 +1879,7 @@ var withTheme = (function (Component) {
       console.warn("[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class \"" + getComponentName(Component) + "\"");
     }
-    return React__default.createElement(Component, _extends({}, props, {
+    return /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
       theme: themeProp,
       ref: ref
     }));
@@ -1846,7 +1904,7 @@ var __PRIVATE__ = {
 //
 /* Define bundle version for export */
-var version = "5.0.0";
+var version = "5.1.1";
 /* Warning if you've imported this file on React Native */
 if (process.env.NODE_ENV !== 'production' && typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
@@ -1856,7 +1914,7 @@ if (process.env.NODE_ENV !== 'production' && typeof navigator !== 'undefined' &&
 /* Warning if there are several instances of styled-components */
-if (process.env.NODE_ENV !== 'production' && typeof window !== 'undefined') {
+if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test' && typeof window !== 'undefined') {
   window['__styled-components-init__'] = window['__styled-components-init__'] || 0;
   if (window['__styled-components-init__'] === 1) {
@@ -1867,8 +1925,6 @@ if (process.env.NODE_ENV !== 'production' && typeof window !== 'undefined') {
   window['__styled-components-init__'] += 1;
 }
-//
 exports.ServerStyleSheet = ServerStyleSheet;
 exports.StyleSheetConsumer = StyleSheetConsumer;
 exports.StyleSheetContext = StyleSheetContext;