npm - styled-components - Versions diffs - 4.3.1 → 4.4.1 - Mend

styled-components 4.3.1 → 4.4.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 (26) hide show

package/README.md +28 -4
package/dist/styled-components-macro.cjs.js +3 -2
package/dist/styled-components-macro.cjs.js.map +1 -1
package/dist/styled-components-macro.esm.js +3 -2
package/dist/styled-components-macro.esm.js.map +1 -1
package/dist/styled-components.browser.cjs.js +27 -24
package/dist/styled-components.browser.cjs.js.map +1 -1
package/dist/styled-components.browser.esm.js +27 -24
package/dist/styled-components.browser.esm.js.map +1 -1
package/dist/styled-components.cjs.js +27 -24
package/dist/styled-components.cjs.js.map +1 -1
package/dist/styled-components.esm.js +27 -24
package/dist/styled-components.esm.js.map +1 -1
package/dist/styled-components.js +28 -25
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 +27 -19
package/native/dist/styled-components.native.cjs.js.map +1 -1
package/native/dist/styled-components.native.esm.js +48 -39
package/native/dist/styled-components.native.esm.js.map +1 -1
package/package.json +3 -2
package/primitives/dist/styled-components-primitives.cjs.js +20 -15
package/primitives/dist/styled-components-primitives.cjs.js.map +1 -1
package/primitives/dist/styled-components-primitives.esm.js +20 -15
package/primitives/dist/styled-components-primitives.esm.js.map +1 -1

package/dist/styled-components.esm.js CHANGED Viewed

@@ -164,7 +164,7 @@ var ERRORS = process.env.NODE_ENV !== 'production' ? {
   "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 (see https://www.styled-components.com/docs/api#css), which ensures the styles are injected correctly.\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"
 } : {};
@@ -401,9 +401,9 @@ var sheetForTag = function sheetForTag(tag) {
   if (tag.sheet) return tag.sheet;
   /* Firefox quirk requires us to step through all stylesheets to find one owned by the given tag */
-  var size = document.styleSheets.length;
+  var size = tag.ownerDocument.styleSheets.length;
   for (var i = 0; i < size; i += 1) {
-    var sheet = document.styleSheets[i];
+    var sheet = tag.ownerDocument.styleSheets[i];
     // $FlowFixMe
     if (sheet.ownerNode === tag) return sheet;
   }
@@ -457,9 +457,12 @@ var addUpUntilIndex = function addUpUntilIndex(sizes, index) {
 /* create a new style tag after lastEl */
 var makeStyleTag = function makeStyleTag(target, tagEl, insertBefore) {
-  var el = document.createElement('style');
+  var targetDocument = document;
+  if (target) targetDocument = target.ownerDocument;else if (tagEl) targetDocument = tagEl.ownerDocument;
+  var el = targetDocument.createElement('style');
   el.setAttribute(SC_ATTR, '');
-  el.setAttribute(SC_VERSION_ATTR, "4.3.1");
+  el.setAttribute(SC_VERSION_ATTR, "4.4.1");
   var nonce = getNonce();
   if (nonce) {
@@ -467,7 +470,7 @@ var makeStyleTag = function makeStyleTag(target, tagEl, insertBefore) {
   }
   /* Work around insertRule quirk in EdgeHTML */
-  el.appendChild(document.createTextNode(''));
+  el.appendChild(targetDocument.createTextNode(''));
   if (target && !tagEl) {
     /* Append to target when no previous element was passed */
@@ -488,7 +491,7 @@ var makeStyleTag = function makeStyleTag(target, tagEl, insertBefore) {
 var wrapAsHtmlTag = function wrapAsHtmlTag(css, names) {
   return function (additionalAttrs) {
     var nonce = getNonce();
-    var attrs = [nonce && 'nonce="' + nonce + '"', SC_ATTR + '="' + stringifyNames(names) + '"', SC_VERSION_ATTR + '="' + "4.3.1" + '"', additionalAttrs];
+    var attrs = [nonce && 'nonce="' + nonce + '"', SC_ATTR + '="' + stringifyNames(names) + '"', SC_VERSION_ATTR + '="' + "4.4.1" + '"', additionalAttrs];
     var htmlAttr = attrs.filter(Boolean).join(' ');
     return '<style ' + htmlAttr + '>' + css() + '</style>';
@@ -500,7 +503,7 @@ var wrapAsElement = function wrapAsElement(css, names) {
   return function () {
     var _props;
-    var props = (_props = {}, _props[SC_ATTR] = stringifyNames(names), _props[SC_VERSION_ATTR] = "4.3.1", _props);
+    var props = (_props = {}, _props[SC_ATTR] = stringifyNames(names), _props[SC_VERSION_ATTR] = "4.4.1", _props);
     var nonce = getNonce();
     if (nonce) {
@@ -575,6 +578,8 @@ var makeSpeedyTag = function makeSpeedyTag(el, getImportRuleTag) {
   var removeRules = function removeRules(id) {
     var marker = markers[id];
     if (marker === undefined) return;
+    // $FlowFixMe
+    if (el.isConnected === false) return;
     var size = sizes[marker];
     var sheet = sheetForTag(el);
@@ -630,8 +635,8 @@ var makeSpeedyTag = function makeSpeedyTag(el, getImportRuleTag) {
   };
 };
-var makeTextNode = function makeTextNode(id) {
-  return document.createTextNode(makeTextMarker(id));
+var makeTextNode = function makeTextNode(targetDocument, id) {
+  return targetDocument.createTextNode(makeTextMarker(id));
 };
 var makeBrowserTag = function makeBrowserTag(el, getImportRuleTag) {
@@ -649,7 +654,7 @@ var makeBrowserTag = function makeBrowserTag(el, getImportRuleTag) {
       return prev;
     }
-    markers[id] = makeTextNode(id);
+    markers[id] = makeTextNode(el.ownerDocument, id);
     el.appendChild(markers[id]);
     names[id] = Object.create(null);
@@ -687,7 +692,7 @@ var makeBrowserTag = function makeBrowserTag(el, getImportRuleTag) {
     if (marker === undefined) return;
     /* create new empty text node and replace the current one */
-    var newMarker = makeTextNode(id);
+    var newMarker = makeTextNode(el.ownerDocument, id);
     el.replaceChild(newMarker, marker);
     markers[id] = newMarker;
     resetIdNames(names, id);
@@ -907,7 +912,7 @@ var StyleSheet = function () {
     var isStreamed = false;
     /* retrieve all of our SSR style elements from the DOM */
-    var nodes = document.querySelectorAll('style[' + SC_ATTR + '][' + SC_VERSION_ATTR + '="' + "4.3.1" + '"]');
+    var nodes = document.querySelectorAll('style[' + SC_ATTR + '][' + SC_VERSION_ATTR + '="' + "4.4.1" + '"]');
     var nodesSize = nodes.length;
@@ -1443,8 +1448,6 @@ function isStaticRules(rules, attrs) {
 //
-var isHMREnabled = process.env.NODE_ENV !== 'production' && typeof module !== 'undefined' && module.hot;
 /* combines hashStr (murmurhash) and nameGenerator for convenience */
 var hasher = function hasher(str) {
   return generateAlphabeticName(murmurhash(str));
@@ -1460,7 +1463,7 @@ var ComponentStyle = function () {
     classCallCheck(this, ComponentStyle);
     this.rules = rules;
-    this.isStatic = !isHMREnabled && isStaticRules(rules, attrs);
+    this.isStatic = process.env.NODE_ENV === 'production' && isStaticRules(rules, attrs);
     this.componentId = componentId;
     if (!StyleSheet.master.hasId(componentId)) {
@@ -1469,10 +1472,10 @@ var ComponentStyle = function () {
   }
   /*
-     * Flattens a rule set into valid CSS
-     * Hashes it, wraps the whole chunk in a .hash1234 {}
-     * Returns the hash to be injected on render()
-     * */
+   * Flattens a rule set into valid CSS
+   * Hashes it, wraps the whole chunk in a .hash1234 {}
+   * Returns the hash to be injected on render()
+   * */
   ComponentStyle.prototype.generateAndInjectStyles = function generateAndInjectStyles(executionContext, styleSheet) {
@@ -1515,7 +1518,7 @@ var createWarnTooManyClasses = (function (displayName) {
       if (Object.keys(generatedClasses).length >= LIMIT) {
         // Unable to find latestRule in test environment.
         /* eslint-disable no-console, prefer-template */
-        console.warn('Over ' + LIMIT + ' classes were generated for component ' + displayName + '. \n' + 'Consider using the attrs method, together with a style object for frequently changed styles.\n' + 'Example:\n' + '  const Component = styled.div.attrs({\n' + '    style: ({ background }) => ({\n' + '      background,\n' + '    }),\n' + '  })`width: 100%;`\n\n' + '  <Component />');
+        console.warn('Over ' + LIMIT + ' classes were generated for component ' + displayName + '. \n' + 'Consider using the attrs method, together with a style object for frequently changed styles.\n' + 'Example:\n' + '  const Component = styled.div.attrs(props => ({\n' + '    style: {\n' + '      background: props.background,\n' + '    },\n' + '  }))`width: 100%;`\n\n' + '  <Component />');
         warningSeen = true;
         generatedClasses = {};
       }
@@ -1715,7 +1718,7 @@ var ThemeProvider = function (_Component) {
     return React.createElement(
       ThemeContext.Provider,
       { value: context },
-      React.Children.only(this.props.children)
+      this.props.children
     );
   };
@@ -2015,7 +2018,7 @@ var StyledComponent = function (_Component) {
     var isTargetTag = isTag(elementToBeCreated);
     var propsForElement = {};
-    var computedProps = _extends({}, this.attrs, this.props);
+    var computedProps = _extends({}, this.props, this.attrs);
     var key = void 0;
     // eslint-disable-next-line guard-for-in
@@ -2036,7 +2039,7 @@ var StyledComponent = function (_Component) {
       propsForElement.style = _extends({}, this.attrs.style, this.props.style);
     }
-    propsForElement.className = Array.prototype.concat(foldedComponentIds, this.props.className, styledComponentId, this.attrs.className, generatedClassName).filter(Boolean).join(' ');
+    propsForElement.className = Array.prototype.concat(foldedComponentIds, styledComponentId, generatedClassName !== styledComponentId ? generatedClassName : null, this.props.className, this.attrs.className).filter(Boolean).join(' ');
     return createElement(elementToBeCreated, propsForElement);
   };

package/dist/styled-components.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styled-components.esm.js","sources":["../src/models/StyleTags.js","../src/models/ThemeProvider.js","../src/models/StyleSheetManager.js","../src/models/StyledComponent.js","../src/models/GlobalStyle.js"],"sourcesContent":["// @flow\n/* eslint-disable flowtype/object-type-delimiter /\n/ eslint-disable react/prop-types /\n\nimport React, { type Element } from 'react';\nimport { IS_BROWSER, DISABLE_SPEEDY, SC_ATTR, SC_VERSION_ATTR } from '../constants';\nimport StyledError from '../utils/error';\nimport { type ExtractedComp } from '../utils/extractCompsFromCSS';\nimport { splitByRules } from '../utils/stringifyRules';\nimport getNonce from '../utils/nonce';\n\nimport {\n type Names,\n addNameForId,\n resetIdNames,\n hasNameForId,\n stringifyNames,\n cloneNames,\n} from '../utils/styleNames';\n\nimport { sheetForTag, safeInsertRule, deleteRules } from '../utils/insertRuleHelpers';\n\ndeclare var __VERSION__: string;\n\nexport interface Tag<T> {\n // $FlowFixMe: Doesn't seem to accept any combination w/ HTMLStyleElement for some reason\n styleTag: HTMLStyleElement \| null;\n / lists all ids of the tag /\n getIds(): string[];\n / checks whether `name` is already injected for `id` /\n hasNameForId(id: string, name: string): boolean;\n / inserts a marker to ensure the id's correct position in the sheet /\n insertMarker(id: string): T;\n / inserts rules according to the ids markers /\n insertRules(id: string, cssRules: string[], name: ?string): void;\n / removes all rules belonging to the id, keeping the marker around /\n removeRules(id: string): void;\n css(): string;\n toHTML(additionalAttrs: ?string): string;\n toElement(): Element<>;\n clone(): Tag<T>;\n /* used in server side rendering to indicate that the rules in the tag have been flushed to HTML /\n sealed: boolean;\n}\n\n/ this marker separates component styles and is important for rehydration /\nconst makeTextMarker = id => `\\n/ sc-component-id: ${id} /\\n`;\n\n/ add up all numbers in array up until and including the index /\nconst addUpUntilIndex = (sizes: number[], index: number): number => {\n let totalUpToIndex = 0;\n for (let i = 0; i <= index; i += 1) {\n totalUpToIndex += sizes[i];\n }\n\n return totalUpToIndex;\n};\n\n/ create a new style tag after lastEl /\nconst makeStyleTag = (target: ?HTMLElement, tagEl: ?Node, insertBefore: ?boolean) => {\n const el = document.createElement('style');\n el.setAttribute(SC_ATTR, '');\n el.setAttribute(SC_VERSION_ATTR, __VERSION__);\n\n const nonce = getNonce();\n if (nonce) {\n el.setAttribute('nonce', nonce);\n }\n\n / Work around insertRule quirk in EdgeHTML /\n el.appendChild(document.createTextNode(''));\n\n if (target && !tagEl) {\n / Append to target when no previous element was passed /\n target.appendChild(el);\n } else {\n if (!tagEl \|\| !target \|\| !tagEl.parentNode) {\n throw new StyledError(6);\n }\n\n / Insert new style tag after the previous one /\n tagEl.parentNode.insertBefore(el, insertBefore ? tagEl : tagEl.nextSibling);\n }\n\n return el;\n};\n\n/ takes a css factory function and outputs an html styled tag factory /\nconst wrapAsHtmlTag = (css: () => string, names: Names) => (additionalAttrs: ?string): string => {\n const nonce = getNonce();\n const attrs = [\n nonce && `nonce=\"${nonce}\"`,\n `${SC_ATTR}=\"${stringifyNames(names)}\"`,\n `${SC_VERSION_ATTR}=\"${__VERSION__}\"`,\n additionalAttrs,\n ];\n\n const htmlAttr = attrs.filter(Boolean).join(' ');\n return `<style ${htmlAttr}>${css()}</style>`;\n};\n\n/ takes a css factory function and outputs an element factory /\nconst wrapAsElement = (css: () => string, names: Names) => () => {\n const props = {\n [SC_ATTR]: stringifyNames(names),\n [SC_VERSION_ATTR]: __VERSION__,\n };\n\n const nonce = getNonce();\n if (nonce) {\n // $FlowFixMe\n props.nonce = nonce;\n }\n\n // eslint-disable-next-line react/no-danger\n return <style {...props} dangerouslySetInnerHTML={{ __html: css() }} />;\n};\n\nconst getIdsFromMarkersFactory = (markers: Object) => (): string[] => Object.keys(markers);\n\n/ speedy tags utilise insertRule /\nconst makeSpeedyTag = (el: HTMLStyleElement, getImportRuleTag: ?() => Tag<any>): Tag<number> => {\n const names: Names = (Object.create(null): Object);\n const markers = Object.create(null);\n const sizes: number[] = [];\n\n const extractImport = getImportRuleTag !== undefined;\n / indicates whether getImportRuleTag was called /\n let usedImportRuleTag = false;\n\n const insertMarker = id => {\n const prev = markers[id];\n if (prev !== undefined) {\n return prev;\n }\n\n markers[id] = sizes.length;\n sizes.push(0);\n resetIdNames(names, id);\n\n return markers[id];\n };\n\n const insertRules = (id, cssRules, name) => {\n const marker = insertMarker(id);\n const sheet = sheetForTag(el);\n const insertIndex = addUpUntilIndex(sizes, marker);\n\n let injectedRules = 0;\n const importRules = [];\n const cssRulesSize = cssRules.length;\n\n for (let i = 0; i < cssRulesSize; i += 1) {\n const cssRule = cssRules[i];\n let mayHaveImport = extractImport; / @import rules are reordered to appear first /\n if (mayHaveImport && cssRule.indexOf('@import') !== -1) {\n importRules.push(cssRule);\n } else if (safeInsertRule(sheet, cssRule, insertIndex + injectedRules)) {\n mayHaveImport = false;\n injectedRules += 1;\n }\n }\n\n if (extractImport && importRules.length > 0) {\n usedImportRuleTag = true;\n // $FlowFixMe\n getImportRuleTag().insertRules(`${id}-import`, importRules);\n }\n\n sizes[marker] += injectedRules; / add up no of injected rules /\n addNameForId(names, id, name);\n };\n\n const removeRules = id => {\n const marker = markers[id];\n if (marker === undefined) return;\n\n const size = sizes[marker];\n const sheet = sheetForTag(el);\n const removalIndex = addUpUntilIndex(sizes, marker) - 1;\n deleteRules(sheet, removalIndex, size);\n sizes[marker] = 0;\n resetIdNames(names, id);\n\n if (extractImport && usedImportRuleTag) {\n // $FlowFixMe\n getImportRuleTag().removeRules(`${id}-import`);\n }\n };\n\n const css = () => {\n const { cssRules } = sheetForTag(el);\n let str = '';\n\n // eslint-disable-next-line guard-for-in\n for (const id in markers) {\n str += makeTextMarker(id);\n const marker = markers[id];\n const end = addUpUntilIndex(sizes, marker);\n const size = sizes[marker];\n for (let i = end - size; i < end; i += 1) {\n const rule = cssRules[i];\n if (rule !== undefined) {\n str += rule.cssText;\n }\n }\n }\n\n return str;\n };\n\n return {\n clone() {\n throw new StyledError(5);\n },\n css,\n getIds: getIdsFromMarkersFactory(markers),\n hasNameForId: hasNameForId(names),\n insertMarker,\n insertRules,\n removeRules,\n sealed: false,\n styleTag: el,\n toElement: wrapAsElement(css, names),\n toHTML: wrapAsHtmlTag(css, names),\n };\n};\n\nconst makeTextNode = id => document.createTextNode(makeTextMarker(id));\n\nconst makeBrowserTag = (el: HTMLStyleElement, getImportRuleTag: ?() => Tag<any>): Tag<Text> => {\n const names = (Object.create(null): Object);\n const markers = Object.create(null);\n\n const extractImport = getImportRuleTag !== undefined;\n\n / indicates whether getImportRuleTag was called /\n let usedImportRuleTag = false;\n\n const insertMarker = id => {\n const prev = markers[id];\n if (prev !== undefined) {\n return prev;\n }\n\n markers[id] = makeTextNode(id);\n el.appendChild(markers[id]);\n names[id] = Object.create(null);\n\n return markers[id];\n };\n\n const insertRules = (id, cssRules, name) => {\n const marker = insertMarker(id);\n const importRules = [];\n const cssRulesSize = cssRules.length;\n\n for (let i = 0; i < cssRulesSize; i += 1) {\n const rule = cssRules[i];\n let mayHaveImport = extractImport;\n if (mayHaveImport && rule.indexOf('@import') !== -1) {\n importRules.push(rule);\n } else {\n mayHaveImport = false;\n const separator = i === cssRulesSize - 1 ? '' : ' ';\n marker.appendData(`${rule}${separator}`);\n }\n }\n\n addNameForId(names, id, name);\n\n if (extractImport && importRules.length > 0) {\n usedImportRuleTag = true;\n // $FlowFixMe\n getImportRuleTag().insertRules(`${id}-import`, importRules);\n }\n };\n\n const removeRules = id => {\n const marker = markers[id];\n if (marker === undefined) return;\n\n / create new empty text node and replace the current one /\n const newMarker = makeTextNode(id);\n el.replaceChild(newMarker, marker);\n markers[id] = newMarker;\n resetIdNames(names, id);\n\n if (extractImport && usedImportRuleTag) {\n // $FlowFixMe\n getImportRuleTag().removeRules(`${id}-import`);\n }\n };\n\n const css = () => {\n let str = '';\n\n // eslint-disable-next-line guard-for-in\n for (const id in markers) {\n str += markers[id].data;\n }\n\n return str;\n };\n\n return {\n clone() {\n throw new StyledError(5);\n },\n css,\n getIds: getIdsFromMarkersFactory(markers),\n hasNameForId: hasNameForId(names),\n insertMarker,\n insertRules,\n removeRules,\n sealed: false,\n styleTag: el,\n toElement: wrapAsElement(css, names),\n toHTML: wrapAsHtmlTag(css, names),\n };\n};\n\nconst makeServerTag = (namesArg, markersArg): Tag<[string]> => {\n const names = namesArg === undefined ? (Object.create(null): Object) : namesArg;\n const markers = markersArg === undefined ? Object.create(null) : markersArg;\n\n const insertMarker = id => {\n const prev = markers[id];\n if (prev !== undefined) {\n return prev;\n }\n\n return (markers[id] = ['']);\n };\n\n const insertRules = (id, cssRules, name) => {\n const marker = insertMarker(id);\n marker[0] += cssRules.join(' ');\n addNameForId(names, id, name);\n };\n\n const removeRules = id => {\n const marker = markers[id];\n if (marker === undefined) return;\n marker[0] = '';\n resetIdNames(names, id);\n };\n\n const css = () => {\n let str = '';\n // eslint-disable-next-line guard-for-in\n for (const id in markers) {\n const cssForId = markers[id][0];\n if (cssForId) {\n str += makeTextMarker(id) + cssForId;\n }\n }\n return str;\n };\n\n const clone = () => {\n const namesClone = cloneNames(names);\n const markersClone = Object.create(null);\n\n // eslint-disable-next-line guard-for-in\n for (const id in markers) {\n markersClone[id] = [markers[id][0]];\n }\n\n return makeServerTag(namesClone, markersClone);\n };\n\n const tag = {\n clone,\n css,\n getIds: getIdsFromMarkersFactory(markers),\n hasNameForId: hasNameForId(names),\n insertMarker,\n insertRules,\n removeRules,\n sealed: false,\n styleTag: null,\n toElement: wrapAsElement(css, names),\n toHTML: wrapAsHtmlTag(css, names),\n };\n\n return tag;\n};\n\nexport const makeTag = (\n target: ?HTMLElement,\n tagEl: ?HTMLStyleElement,\n forceServer?: boolean,\n insertBefore?: boolean,\n getImportRuleTag?: () => Tag<any>\n): Tag<any> => {\n if (IS_BROWSER && !forceServer) {\n const el = makeStyleTag(target, tagEl, insertBefore);\n\n if (DISABLE_SPEEDY) {\n return makeBrowserTag(el, getImportRuleTag);\n } else {\n return makeSpeedyTag(el, getImportRuleTag);\n }\n }\n\n return makeServerTag();\n};\n\nexport const rehydrate = (\n tag: Tag<any>,\n els: HTMLStyleElement[],\n extracted: ExtractedComp[]\n): void => {\n / add all extracted components to the new tag /\n for (let i = 0, len = extracted.length; i < len; i += 1) {\n const { componentId, cssFromDOM } = extracted[i];\n const cssRules = splitByRules(cssFromDOM);\n tag.insertRules(componentId, cssRules);\n }\n\n / remove old HTMLStyleElements, since they have been rehydrated /\n for (let i = 0, len = els.length; i < len; i += 1) {\n const el = els[i];\n if (el.parentNode) {\n el.parentNode.removeChild(el);\n }\n }\n};\n","// @flow\nimport React, { createContext, Component, type Element } from 'react';\nimport memoize from 'memoize-one';\nimport StyledError from '../utils/error';\nimport isFunction from '../utils/isFunction';\n\nexport type Theme = { [key: string]: mixed };\n\ntype Props = {\n children?: Element<any>,\n theme: Theme \| ((outerTheme: Theme) => void),\n};\n\nexport const ThemeContext = createContext();\n\nexport const ThemeConsumer = ThemeContext.Consumer;\n\n/\n Provide a theme to an entire react component tree via context\n /\nexport default class ThemeProvider extends Component<Props> {\n getContext: (theme: Theme \| ((outerTheme: Theme) => void), outerTheme?: Theme) => Theme;\n\n renderInner: Function;\n\n constructor(props: Props) {\n super(props);\n this.getContext = memoize(this.getContext.bind(this));\n this.renderInner = this.renderInner.bind(this);\n }\n\n render() {\n if (!this.props.children) return null;\n\n return <ThemeContext.Consumer>{this.renderInner}</ThemeContext.Consumer>;\n }\n\n renderInner(outerTheme?: Theme) {\n const context = this.getContext(this.props.theme, outerTheme);\n\n return (\n <ThemeContext.Provider value={context}>\n {React.Children.only(this.props.children)}\n </ThemeContext.Provider>\n );\n }\n\n /\n Get the theme from the props, supporting both (outerTheme) => {}\n * as well as object notation\n /\n getTheme(theme: (outerTheme: ?Theme) => void, outerTheme: ?Theme) {\n if (isFunction(theme)) {\n const mergedTheme = theme(outerTheme);\n\n if (\n process.env.NODE_ENV !== 'production' &&\n (mergedTheme === null \|\| Array.isArray(mergedTheme) \|\| typeof mergedTheme !== 'object')\n ) {\n throw new StyledError(7);\n }\n\n return mergedTheme;\n }\n\n if (theme === null \|\| Array.isArray(theme) \|\| typeof theme !== 'object') {\n throw new StyledError(8);\n }\n\n return { ...outerTheme, ...theme };\n }\n\n getContext(theme: (outerTheme: ?Theme) => void, outerTheme?: Theme) {\n return this.getTheme(theme, outerTheme);\n }\n}\n","// @flow\nimport React, { createContext, Component, type Element } from 'react';\nimport PropTypes from 'prop-types';\nimport memoize from 'memoize-one';\nimport StyleSheet from './StyleSheet';\nimport ServerStyleSheet from './ServerStyleSheet';\nimport StyledError from '../utils/error';\n\ntype Props = {\n children?: Element<any>,\n sheet?: StyleSheet,\n target?: HTMLElement,\n};\n\nexport const StyleSheetContext = createContext();\nexport const StyleSheetConsumer = StyleSheetContext.Consumer;\n\nexport default class StyleSheetManager extends Component<Props> {\n static propTypes = {\n sheet: PropTypes.oneOfType([\n PropTypes.instanceOf(StyleSheet),\n PropTypes.instanceOf(ServerStyleSheet),\n ]),\n\n target: PropTypes.shape({\n appendChild: PropTypes.func.isRequired,\n }),\n };\n\n getContext: (sheet: ?StyleSheet, target: ?HTMLElement) => StyleSheet;\n\n constructor(props: Props) {\n super(props);\n this.getContext = memoize(this.getContext);\n }\n\n getContext(sheet: ?StyleSheet, target: ?HTMLElement) {\n if (sheet) {\n return sheet;\n } else if (target) {\n return new StyleSheet(target);\n } else {\n throw new StyledError(4);\n }\n }\n\n render() {\n const { children, sheet, target } = this.props;\n\n return (\n <StyleSheetContext.Provider value={this.getContext(sheet, target)}>\n {process.env.NODE_ENV !== 'production' ? React.Children.only(children) : children}\n </StyleSheetContext.Provider>\n );\n }\n}\n","// @flow\nimport validAttr from '@emotion/is-prop-valid';\nimport merge from 'merge-anything';\nimport React, { createElement, Component } from 'react';\nimport ComponentStyle from './ComponentStyle';\nimport createWarnTooManyClasses from '../utils/createWarnTooManyClasses';\nimport determineTheme from '../utils/determineTheme';\nimport escape from '../utils/escape';\nimport generateDisplayName from '../utils/generateDisplayName';\nimport getComponentName from '../utils/getComponentName';\nimport hoist from '../utils/hoist';\nimport isFunction from '../utils/isFunction';\nimport isTag from '../utils/isTag';\nimport isDerivedReactComponent from '../utils/isDerivedReactComponent';\nimport isStyledComponent from '../utils/isStyledComponent';\nimport once from '../utils/once';\nimport StyleSheet from './StyleSheet';\nimport { ThemeConsumer, type Theme } from './ThemeProvider';\nimport { StyleSheetConsumer } from './StyleSheetManager';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from '../utils/empties';\n\nimport type { Attrs, RuleSet, Target } from '../types';\n\nconst identifiers = {};\n\n/ We depend on components having unique IDs /\nfunction generateId(_ComponentStyle: Function, _displayName: string, parentComponentId: string) {\n const displayName = typeof _displayName !== 'string' ? 'sc' : escape(_displayName);\n\n /\n This ensures uniqueness if two components happen to share\n * the same displayName.\n /\n const nr = (identifiers[displayName] \|\| 0) + 1;\n identifiers[displayName] = nr;\n\n const componentId = `${displayName}-${_ComponentStyle.generateName(displayName + nr)}`;\n\n return parentComponentId ? `${parentComponentId}-${componentId}` : componentId;\n}\n\n// $FlowFixMe\nclass StyledComponent extends Component<> {\n renderOuter: Function;\n\n renderInner: Function;\n\n styleSheet: ?StyleSheet;\n\n warnInnerRef: Function;\n\n warnAttrsFnObjectKeyDeprecated: Function;\n\n warnNonStyledComponentAttrsObjectKey: Function;\n\n attrs = {};\n\n constructor() {\n super();\n this.renderOuter = this.renderOuter.bind(this);\n this.renderInner = this.renderInner.bind(this);\n\n if (process.env.NODE_ENV !== 'production') {\n this.warnInnerRef = once(displayName =>\n // eslint-disable-next-line no-console\n console.warn(\n `The \"innerRef\" API has been removed in styled-components v4 in favor of React 16 ref forwarding, use \"ref\" instead like a typical component. \"innerRef\" was detected on component \"${displayName}\".`\n )\n );\n\n this.warnAttrsFnObjectKeyDeprecated = once(\n (key, displayName): void =>\n // eslint-disable-next-line no-console\n console.warn(\n `Functions as object-form attrs({}) keys are now deprecated and will be removed in a future version of styled-components. Switch to the new attrs(props => ({})) syntax instead for easier and more powerful composition. The attrs key in question is \"${key}\" on component \"${displayName}\".`,\n `\\n ${new Error().stack}`\n )\n );\n\n this.warnNonStyledComponentAttrsObjectKey = once(\n (key, displayName): void =>\n // eslint-disable-next-line no-console\n console.warn(\n `It looks like you've used a non styled-component as the value for the \"${key}\" prop in an object-form attrs constructor of \"${displayName}\".\\n` +\n 'You should use the new function-form attrs constructor which avoids this issue: attrs(props => ({ yourStuff }))\\n' +\n \"To continue using the deprecated object syntax, you'll need to wrap your component prop in a function to make it available inside the styled component (you'll still get the deprecation warning though.)\\n\" +\n `For example, { ${key}: () => InnerComponent } instead of { ${key}: InnerComponent }`\n )\n );\n }\n }\n\n render() {\n return <StyleSheetConsumer>{this.renderOuter}</StyleSheetConsumer>;\n }\n\n renderOuter(styleSheet?: StyleSheet = StyleSheet.master) {\n this.styleSheet = styleSheet;\n\n // No need to subscribe a static component to theme changes, it won't change anything\n if (this.props.forwardedComponent.componentStyle.isStatic) return this.renderInner();\n\n return <ThemeConsumer>{this.renderInner}</ThemeConsumer>;\n }\n\n renderInner(theme?: Theme) {\n const {\n componentStyle,\n defaultProps,\n displayName,\n foldedComponentIds,\n styledComponentId,\n target,\n } = this.props.forwardedComponent;\n\n let generatedClassName;\n if (componentStyle.isStatic) {\n generatedClassName = this.generateAndInjectStyles(EMPTY_OBJECT, this.props);\n } else {\n generatedClassName = this.generateAndInjectStyles(\n determineTheme(this.props, theme, defaultProps) \|\| EMPTY_OBJECT,\n this.props\n );\n }\n\n const elementToBeCreated = this.props.as \|\| this.attrs.as \|\| target;\n const isTargetTag = isTag(elementToBeCreated);\n\n const propsForElement = {};\n const computedProps = { ...this.attrs, ...this.props };\n\n let key;\n // eslint-disable-next-line guard-for-in\n for (key in computedProps) {\n if (process.env.NODE_ENV !== 'production' && key === 'innerRef' && isTargetTag) {\n this.warnInnerRef(displayName);\n }\n\n if (key === 'forwardedComponent' \|\| key === 'as') {\n continue;\n } else if (key === 'forwardedRef') propsForElement.ref = computedProps[key];\n else if (key === 'forwardedAs') propsForElement.as = computedProps[key];\n else if (!isTargetTag \|\| validAttr(key)) {\n // Don't pass through non HTML tags through to HTML elements\n propsForElement[key] = computedProps[key];\n }\n }\n\n if (this.props.style && this.attrs.style) {\n propsForElement.style = { ...this.attrs.style, ...this.props.style };\n }\n\n propsForElement.className = Array.prototype\n .concat(\n foldedComponentIds,\n this.props.className,\n styledComponentId,\n this.attrs.className,\n generatedClassName\n )\n .filter(Boolean)\n .join(' ');\n\n return createElement(elementToBeCreated, propsForElement);\n }\n\n buildExecutionContext(theme: ?Object, props: Object, attrs: Attrs) {\n const context = { ...props, theme };\n\n if (!attrs.length) return context;\n\n this.attrs = {};\n\n attrs.forEach(attrDef => {\n let resolvedAttrDef = attrDef;\n let attrDefWasFn = false;\n let attr;\n let key;\n\n if (isFunction(resolvedAttrDef)) {\n // $FlowFixMe\n resolvedAttrDef = resolvedAttrDef(context);\n attrDefWasFn = true;\n }\n\n /* eslint-disable guard-for-in /\n // $FlowFixMe\n for (key in resolvedAttrDef) {\n attr = resolvedAttrDef[key];\n\n if (!attrDefWasFn) {\n if (isFunction(attr) && !isDerivedReactComponent(attr) && !isStyledComponent(attr)) {\n if (process.env.NODE_ENV !== 'production') {\n this.warnAttrsFnObjectKeyDeprecated(key, props.forwardedComponent.displayName);\n }\n\n attr = attr(context);\n\n if (process.env.NODE_ENV !== 'production' && React.isValidElement(attr)) {\n this.warnNonStyledComponentAttrsObjectKey(key, props.forwardedComponent.displayName);\n }\n }\n }\n\n this.attrs[key] = attr;\n context[key] = attr;\n }\n / eslint-enable /\n });\n\n return context;\n }\n\n generateAndInjectStyles(theme: any, props: any) {\n const { attrs, componentStyle, warnTooManyClasses } = props.forwardedComponent;\n\n // statically styled-components don't need to build an execution context object,\n // and shouldn't be increasing the number of class names\n if (componentStyle.isStatic && !attrs.length) {\n return componentStyle.generateAndInjectStyles(EMPTY_OBJECT, this.styleSheet);\n }\n\n const className = componentStyle.generateAndInjectStyles(\n this.buildExecutionContext(theme, props, attrs),\n this.styleSheet\n );\n\n if (process.env.NODE_ENV !== 'production' && warnTooManyClasses) warnTooManyClasses(className);\n\n return className;\n }\n}\n\nexport default function createStyledComponent(target: Target, options: Object, rules: RuleSet) {\n const isTargetStyledComp = isStyledComponent(target);\n const isClass = !isTag(target);\n\n const {\n displayName = generateDisplayName(target),\n componentId = generateId(ComponentStyle, options.displayName, options.parentComponentId),\n ParentComponent = StyledComponent,\n attrs = EMPTY_ARRAY,\n } = options;\n\n const styledComponentId =\n options.displayName && options.componentId\n ? `${escape(options.displayName)}-${options.componentId}`\n : options.componentId \|\| componentId;\n\n // fold the underlying StyledComponent attrs up (implicit extend)\n const finalAttrs =\n // $FlowFixMe\n isTargetStyledComp && target.attrs\n ? Array.prototype.concat(target.attrs, attrs).filter(Boolean)\n : attrs;\n\n const componentStyle = new ComponentStyle(\n isTargetStyledComp\n ? // fold the underlying StyledComponent rules up (implicit extend)\n // $FlowFixMe\n target.componentStyle.rules.concat(rules)\n : rules,\n finalAttrs,\n styledComponentId\n );\n\n /\n forwardRef creates a new interim component, which we'll take advantage of\n * instead of extending ParentComponent to create _another_ interim class\n */\n let WrappedStyledComponent;\n const forwardRef = (props, ref) => (\n <ParentComponent {...props} forwardedComponent={WrappedStyledComponent} forwardedRef={ref} />\n );\n forwardRef.displayName = displayName;\n WrappedStyledComponent = React.forwardRef(forwardRef);\n WrappedStyledComponent.displayName = displayName;\n\n // $FlowFixMe\n WrappedStyledComponent.attrs = finalAttrs;\n // $FlowFixMe\n WrappedStyledComponent.componentStyle = componentStyle;\n\n // $FlowFixMe\n WrappedStyledComponent.foldedComponentIds = isTargetStyledComp\n ? // $FlowFixMe\n Array.prototype.concat(target.foldedComponentIds, target.styledComponentId)\n : EMPTY_ARRAY;\n\n // $FlowFixMe\n WrappedStyledComponent.styledComponentId = styledComponentId;\n\n // fold the underlying StyledComponent target up since we folded the styles\n // $FlowFixMe\n WrappedStyledComponent.target = isTargetStyledComp ? target.target : target;\n\n // $FlowFixMe\n WrappedStyledComponent.withComponent = function withComponent(tag: Target) {\n const { componentId: previousComponentId, ...optionsToCopy } = options;\n\n const newComponentId =\n previousComponentId &&\n `${previousComponentId}-${isTag(tag) ? tag : escape(getComponentName(tag))}`;\n\n const newOptions = {\n ...optionsToCopy,\n attrs: finalAttrs,\n componentId: newComponentId,\n ParentComponent,\n };\n\n return createStyledComponent(tag, newOptions, rules);\n };\n\n // $FlowFixMe\n Object.defineProperty(WrappedStyledComponent, 'defaultProps', {\n get() {\n return this._foldedDefaultProps;\n },\n\n set(obj) {\n // $FlowFixMe\n this._foldedDefaultProps = isTargetStyledComp ? merge(target.defaultProps, obj) : obj;\n },\n });\n\n if (process.env.NODE_ENV !== 'production') {\n // $FlowFixMe\n WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(displayName);\n }\n\n // $FlowFixMe\n WrappedStyledComponent.toString = () => `.${WrappedStyledComponent.styledComponentId}`;\n\n if (isClass) {\n hoist(WrappedStyledComponent, target, {\n // all SC-specific things should not be hoisted\n attrs: true,\n componentStyle: true,\n displayName: true,\n foldedComponentIds: true,\n styledComponentId: true,\n target: true,\n withComponent: true,\n });\n }\n\n return WrappedStyledComponent;\n}\n","// @flow\nimport { EMPTY_ARRAY } from '../utils/empties';\nimport flatten from '../utils/flatten';\nimport isStaticRules from '../utils/isStaticRules';\nimport stringifyRules from '../utils/stringifyRules';\nimport StyleSheet from './StyleSheet';\n\nimport type { RuleSet } from '../types';\n\nexport default class GlobalStyle {\n componentId: string;\n\n isStatic: boolean;\n\n rules: RuleSet;\n\n constructor(rules: RuleSet, componentId: string) {\n this.rules = rules;\n this.componentId = componentId;\n this.isStatic = isStaticRules(rules, EMPTY_ARRAY);\n\n if (!StyleSheet.master.hasId(componentId)) {\n StyleSheet.master.deferredInject(componentId, []);\n }\n }\n\n createStyles(executionContext: Object, styleSheet: StyleSheet) {\n const flatCSS = flatten(this.rules, executionContext, styleSheet);\n const css = stringifyRules(flatCSS, '');\n\n styleSheet.inject(this.componentId, css);\n }\n\n removeStyles(styleSheet: StyleSheet) {\n const { componentId } = this;\n if (styleSheet.hasId(componentId)) {\n styleSheet.remove(componentId);\n }\n }\n\n // TODO: overwrite in-place instead of remove+create?\n renderStyles(executionContext: Object, styleSheet: StyleSheet) {\n this.removeStyles(styleSheet);\n this.createStyles(executionContext, styleSheet);\n }\n}\n"],"names":["__VERSION__","i"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CC;;CAAA;;;;;;;;;;;;;;;;mCAgBgDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iEA2DO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wDAoSnD;;WAEMC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACjZT;;;;;;;;;;;8BAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCCQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCCyI2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BC1J3B,aAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"styled-components.esm.js","sources":["../src/models/StyleTags.js","../src/models/ThemeProvider.js","../src/models/StyleSheetManager.js","../src/models/StyledComponent.js","../src/models/GlobalStyle.js"],"sourcesContent":["// @flow\n/* eslint-disable flowtype/object-type-delimiter /\n/ eslint-disable react/prop-types /\n\nimport React, { type Element } from 'react';\nimport { IS_BROWSER, DISABLE_SPEEDY, SC_ATTR, SC_VERSION_ATTR } from '../constants';\nimport StyledError from '../utils/error';\nimport { type ExtractedComp } from '../utils/extractCompsFromCSS';\nimport { splitByRules } from '../utils/stringifyRules';\nimport getNonce from '../utils/nonce';\n\nimport {\n type Names,\n addNameForId,\n resetIdNames,\n hasNameForId,\n stringifyNames,\n cloneNames,\n} from '../utils/styleNames';\n\nimport { sheetForTag, safeInsertRule, deleteRules } from '../utils/insertRuleHelpers';\n\ndeclare var __VERSION__: string;\n\nexport interface Tag<T> {\n // $FlowFixMe: Doesn't seem to accept any combination w/ HTMLStyleElement for some reason\n styleTag: HTMLStyleElement \| null;\n / lists all ids of the tag /\n getIds(): string[];\n / checks whether `name` is already injected for `id` /\n hasNameForId(id: string, name: string): boolean;\n / inserts a marker to ensure the id's correct position in the sheet /\n insertMarker(id: string): T;\n / inserts rules according to the ids markers /\n insertRules(id: string, cssRules: string[], name: ?string): void;\n / removes all rules belonging to the id, keeping the marker around /\n removeRules(id: string): void;\n css(): string;\n toHTML(additionalAttrs: ?string): string;\n toElement(): Element<>;\n clone(): Tag<T>;\n /* used in server side rendering to indicate that the rules in the tag have been flushed to HTML /\n sealed: boolean;\n}\n\n/ this marker separates component styles and is important for rehydration /\nconst makeTextMarker = id => `\\n/ sc-component-id: ${id} /\\n`;\n\n/ add up all numbers in array up until and including the index /\nconst addUpUntilIndex = (sizes: number[], index: number): number => {\n let totalUpToIndex = 0;\n for (let i = 0; i <= index; i += 1) {\n totalUpToIndex += sizes[i];\n }\n\n return totalUpToIndex;\n};\n\n/ create a new style tag after lastEl /\nconst makeStyleTag = (target: ?HTMLElement, tagEl: ?Node, insertBefore: ?boolean) => {\n let targetDocument = document;\n if(target) targetDocument = target.ownerDocument;\n else if(tagEl) targetDocument = tagEl.ownerDocument;\n\n const el = targetDocument.createElement('style');\n el.setAttribute(SC_ATTR, '');\n el.setAttribute(SC_VERSION_ATTR, __VERSION__);\n\n const nonce = getNonce();\n if (nonce) {\n el.setAttribute('nonce', nonce);\n }\n\n / Work around insertRule quirk in EdgeHTML /\n el.appendChild(targetDocument.createTextNode(''));\n\n if (target && !tagEl) {\n / Append to target when no previous element was passed /\n target.appendChild(el);\n } else {\n if (!tagEl \|\| !target \|\| !tagEl.parentNode) {\n throw new StyledError(6);\n }\n\n / Insert new style tag after the previous one /\n tagEl.parentNode.insertBefore(el, insertBefore ? tagEl : tagEl.nextSibling);\n }\n\n return el;\n};\n\n/ takes a css factory function and outputs an html styled tag factory /\nconst wrapAsHtmlTag = (css: () => string, names: Names) => (additionalAttrs: ?string): string => {\n const nonce = getNonce();\n const attrs = [\n nonce && `nonce=\"${nonce}\"`,\n `${SC_ATTR}=\"${stringifyNames(names)}\"`,\n `${SC_VERSION_ATTR}=\"${__VERSION__}\"`,\n additionalAttrs,\n ];\n\n const htmlAttr = attrs.filter(Boolean).join(' ');\n return `<style ${htmlAttr}>${css()}</style>`;\n};\n\n/ takes a css factory function and outputs an element factory /\nconst wrapAsElement = (css: () => string, names: Names) => () => {\n const props = {\n [SC_ATTR]: stringifyNames(names),\n [SC_VERSION_ATTR]: __VERSION__,\n };\n\n const nonce = getNonce();\n if (nonce) {\n // $FlowFixMe\n props.nonce = nonce;\n }\n\n // eslint-disable-next-line react/no-danger\n return <style {...props} dangerouslySetInnerHTML={{ __html: css() }} />;\n};\n\nconst getIdsFromMarkersFactory = (markers: Object) => (): string[] => Object.keys(markers);\n\n/ speedy tags utilise insertRule /\nconst makeSpeedyTag = (el: HTMLStyleElement, getImportRuleTag: ?() => Tag<any>): Tag<number> => {\n const names: Names = (Object.create(null): Object);\n const markers = Object.create(null);\n const sizes: number[] = [];\n\n const extractImport = getImportRuleTag !== undefined;\n / indicates whether getImportRuleTag was called /\n let usedImportRuleTag = false;\n\n const insertMarker = id => {\n const prev = markers[id];\n if (prev !== undefined) {\n return prev;\n }\n\n markers[id] = sizes.length;\n sizes.push(0);\n resetIdNames(names, id);\n\n return markers[id];\n };\n\n const insertRules = (id, cssRules, name) => {\n const marker = insertMarker(id);\n const sheet = sheetForTag(el);\n const insertIndex = addUpUntilIndex(sizes, marker);\n\n let injectedRules = 0;\n const importRules = [];\n const cssRulesSize = cssRules.length;\n\n for (let i = 0; i < cssRulesSize; i += 1) {\n const cssRule = cssRules[i];\n let mayHaveImport = extractImport; / @import rules are reordered to appear first /\n if (mayHaveImport && cssRule.indexOf('@import') !== -1) {\n importRules.push(cssRule);\n } else if (safeInsertRule(sheet, cssRule, insertIndex + injectedRules)) {\n mayHaveImport = false;\n injectedRules += 1;\n }\n }\n\n if (extractImport && importRules.length > 0) {\n usedImportRuleTag = true;\n // $FlowFixMe\n getImportRuleTag().insertRules(`${id}-import`, importRules);\n }\n\n sizes[marker] += injectedRules; / add up no of injected rules /\n addNameForId(names, id, name);\n };\n\n const removeRules = id => {\n const marker = markers[id];\n if (marker === undefined) return;\n // $FlowFixMe\n if (el.isConnected === false) return;\n\n const size = sizes[marker];\n const sheet = sheetForTag(el);\n const removalIndex = addUpUntilIndex(sizes, marker) - 1;\n deleteRules(sheet, removalIndex, size);\n sizes[marker] = 0;\n resetIdNames(names, id);\n\n if (extractImport && usedImportRuleTag) {\n // $FlowFixMe\n getImportRuleTag().removeRules(`${id}-import`);\n }\n };\n\n const css = () => {\n const { cssRules } = sheetForTag(el);\n let str = '';\n\n // eslint-disable-next-line guard-for-in\n for (const id in markers) {\n str += makeTextMarker(id);\n const marker = markers[id];\n const end = addUpUntilIndex(sizes, marker);\n const size = sizes[marker];\n for (let i = end - size; i < end; i += 1) {\n const rule = cssRules[i];\n if (rule !== undefined) {\n str += rule.cssText;\n }\n }\n }\n\n return str;\n };\n\n return {\n clone() {\n throw new StyledError(5);\n },\n css,\n getIds: getIdsFromMarkersFactory(markers),\n hasNameForId: hasNameForId(names),\n insertMarker,\n insertRules,\n removeRules,\n sealed: false,\n styleTag: el,\n toElement: wrapAsElement(css, names),\n toHTML: wrapAsHtmlTag(css, names),\n };\n};\n\nconst makeTextNode = (targetDocument, id) => targetDocument.createTextNode(makeTextMarker(id));\n\nconst makeBrowserTag = (el: HTMLStyleElement, getImportRuleTag: ?() => Tag<any>): Tag<Text> => {\n const names = (Object.create(null): Object);\n const markers = Object.create(null);\n\n const extractImport = getImportRuleTag !== undefined;\n\n / indicates whether getImportRuleTag was called /\n let usedImportRuleTag = false;\n\n const insertMarker = id => {\n const prev = markers[id];\n if (prev !== undefined) {\n return prev;\n }\n\n markers[id] = makeTextNode(el.ownerDocument, id);\n el.appendChild(markers[id]);\n names[id] = Object.create(null);\n\n return markers[id];\n };\n\n const insertRules = (id, cssRules, name) => {\n const marker = insertMarker(id);\n const importRules = [];\n const cssRulesSize = cssRules.length;\n\n for (let i = 0; i < cssRulesSize; i += 1) {\n const rule = cssRules[i];\n let mayHaveImport = extractImport;\n if (mayHaveImport && rule.indexOf('@import') !== -1) {\n importRules.push(rule);\n } else {\n mayHaveImport = false;\n const separator = i === cssRulesSize - 1 ? '' : ' ';\n marker.appendData(`${rule}${separator}`);\n }\n }\n\n addNameForId(names, id, name);\n\n if (extractImport && importRules.length > 0) {\n usedImportRuleTag = true;\n // $FlowFixMe\n getImportRuleTag().insertRules(`${id}-import`, importRules);\n }\n };\n\n const removeRules = id => {\n const marker = markers[id];\n if (marker === undefined) return;\n\n / create new empty text node and replace the current one /\n const newMarker = makeTextNode(el.ownerDocument, id);\n el.replaceChild(newMarker, marker);\n markers[id] = newMarker;\n resetIdNames(names, id);\n\n if (extractImport && usedImportRuleTag) {\n // $FlowFixMe\n getImportRuleTag().removeRules(`${id}-import`);\n }\n };\n\n const css = () => {\n let str = '';\n\n // eslint-disable-next-line guard-for-in\n for (const id in markers) {\n str += markers[id].data;\n }\n\n return str;\n };\n\n return {\n clone() {\n throw new StyledError(5);\n },\n css,\n getIds: getIdsFromMarkersFactory(markers),\n hasNameForId: hasNameForId(names),\n insertMarker,\n insertRules,\n removeRules,\n sealed: false,\n styleTag: el,\n toElement: wrapAsElement(css, names),\n toHTML: wrapAsHtmlTag(css, names),\n };\n};\n\nconst makeServerTag = (namesArg, markersArg): Tag<[string]> => {\n const names = namesArg === undefined ? (Object.create(null): Object) : namesArg;\n const markers = markersArg === undefined ? Object.create(null) : markersArg;\n\n const insertMarker = id => {\n const prev = markers[id];\n if (prev !== undefined) {\n return prev;\n }\n\n return (markers[id] = ['']);\n };\n\n const insertRules = (id, cssRules, name) => {\n const marker = insertMarker(id);\n marker[0] += cssRules.join(' ');\n addNameForId(names, id, name);\n };\n\n const removeRules = id => {\n const marker = markers[id];\n if (marker === undefined) return;\n marker[0] = '';\n resetIdNames(names, id);\n };\n\n const css = () => {\n let str = '';\n // eslint-disable-next-line guard-for-in\n for (const id in markers) {\n const cssForId = markers[id][0];\n if (cssForId) {\n str += makeTextMarker(id) + cssForId;\n }\n }\n return str;\n };\n\n const clone = () => {\n const namesClone = cloneNames(names);\n const markersClone = Object.create(null);\n\n // eslint-disable-next-line guard-for-in\n for (const id in markers) {\n markersClone[id] = [markers[id][0]];\n }\n\n return makeServerTag(namesClone, markersClone);\n };\n\n const tag = {\n clone,\n css,\n getIds: getIdsFromMarkersFactory(markers),\n hasNameForId: hasNameForId(names),\n insertMarker,\n insertRules,\n removeRules,\n sealed: false,\n styleTag: null,\n toElement: wrapAsElement(css, names),\n toHTML: wrapAsHtmlTag(css, names),\n };\n\n return tag;\n};\n\nexport const makeTag = (\n target: ?HTMLElement,\n tagEl: ?HTMLStyleElement,\n forceServer?: boolean,\n insertBefore?: boolean,\n getImportRuleTag?: () => Tag<any>\n): Tag<any> => {\n if (IS_BROWSER && !forceServer) {\n const el = makeStyleTag(target, tagEl, insertBefore);\n\n if (DISABLE_SPEEDY) {\n return makeBrowserTag(el, getImportRuleTag);\n } else {\n return makeSpeedyTag(el, getImportRuleTag);\n }\n }\n\n return makeServerTag();\n};\n\nexport const rehydrate = (\n tag: Tag<any>,\n els: HTMLStyleElement[],\n extracted: ExtractedComp[]\n): void => {\n / add all extracted components to the new tag /\n for (let i = 0, len = extracted.length; i < len; i += 1) {\n const { componentId, cssFromDOM } = extracted[i];\n const cssRules = splitByRules(cssFromDOM);\n tag.insertRules(componentId, cssRules);\n }\n\n / remove old HTMLStyleElements, since they have been rehydrated /\n for (let i = 0, len = els.length; i < len; i += 1) {\n const el = els[i];\n if (el.parentNode) {\n el.parentNode.removeChild(el);\n }\n }\n};\n","// @flow\nimport React, { createContext, Component, type Element } from 'react';\nimport memoize from 'memoize-one';\nimport StyledError from '../utils/error';\nimport isFunction from '../utils/isFunction';\n\nexport type Theme = { [key: string]: mixed };\n\ntype Props = {\n children?: Element<any>,\n theme: Theme \| ((outerTheme: Theme) => void),\n};\n\nexport const ThemeContext = createContext();\n\nexport const ThemeConsumer = ThemeContext.Consumer;\n\n/\n Provide a theme to an entire react component tree via context\n /\nexport default class ThemeProvider extends Component<Props> {\n getContext: (theme: Theme \| ((outerTheme: Theme) => void), outerTheme?: Theme) => Theme;\n\n renderInner: Function;\n\n constructor(props: Props) {\n super(props);\n this.getContext = memoize(this.getContext.bind(this));\n this.renderInner = this.renderInner.bind(this);\n }\n\n render() {\n if (!this.props.children) return null;\n\n return <ThemeContext.Consumer>{this.renderInner}</ThemeContext.Consumer>;\n }\n\n renderInner(outerTheme?: Theme) {\n const context = this.getContext(this.props.theme, outerTheme);\n\n return (\n <ThemeContext.Provider value={context}>\n {this.props.children}\n </ThemeContext.Provider>\n );\n }\n\n /\n Get the theme from the props, supporting both (outerTheme) => {}\n * as well as object notation\n /\n getTheme(theme: (outerTheme: ?Theme) => void, outerTheme: ?Theme) {\n if (isFunction(theme)) {\n const mergedTheme = theme(outerTheme);\n\n if (\n process.env.NODE_ENV !== 'production' &&\n (mergedTheme === null \|\| Array.isArray(mergedTheme) \|\| typeof mergedTheme !== 'object')\n ) {\n throw new StyledError(7);\n }\n\n return mergedTheme;\n }\n\n if (theme === null \|\| Array.isArray(theme) \|\| typeof theme !== 'object') {\n throw new StyledError(8);\n }\n\n return { ...outerTheme, ...theme };\n }\n\n getContext(theme: (outerTheme: ?Theme) => void, outerTheme?: Theme) {\n return this.getTheme(theme, outerTheme);\n }\n}\n","// @flow\nimport React, { createContext, Component, type Element } from 'react';\nimport PropTypes from 'prop-types';\nimport memoize from 'memoize-one';\nimport StyleSheet from './StyleSheet';\nimport ServerStyleSheet from './ServerStyleSheet';\nimport StyledError from '../utils/error';\n\ntype Props = {\n children?: Element<any>,\n sheet?: StyleSheet,\n target?: HTMLElement,\n};\n\nexport const StyleSheetContext = createContext();\nexport const StyleSheetConsumer = StyleSheetContext.Consumer;\n\nexport default class StyleSheetManager extends Component<Props> {\n static propTypes = {\n sheet: PropTypes.oneOfType([\n PropTypes.instanceOf(StyleSheet),\n PropTypes.instanceOf(ServerStyleSheet),\n ]),\n\n target: PropTypes.shape({\n appendChild: PropTypes.func.isRequired,\n }),\n };\n\n getContext: (sheet: ?StyleSheet, target: ?HTMLElement) => StyleSheet;\n\n constructor(props: Props) {\n super(props);\n this.getContext = memoize(this.getContext);\n }\n\n getContext(sheet: ?StyleSheet, target: ?HTMLElement) {\n if (sheet) {\n return sheet;\n } else if (target) {\n return new StyleSheet(target);\n } else {\n throw new StyledError(4);\n }\n }\n\n render() {\n const { children, sheet, target } = this.props;\n\n return (\n <StyleSheetContext.Provider value={this.getContext(sheet, target)}>\n {process.env.NODE_ENV !== 'production' ? React.Children.only(children) : children}\n </StyleSheetContext.Provider>\n );\n }\n}\n","// @flow\nimport validAttr from '@emotion/is-prop-valid';\nimport merge from 'merge-anything';\nimport React, { createElement, Component } from 'react';\nimport ComponentStyle from './ComponentStyle';\nimport createWarnTooManyClasses from '../utils/createWarnTooManyClasses';\nimport determineTheme from '../utils/determineTheme';\nimport escape from '../utils/escape';\nimport generateDisplayName from '../utils/generateDisplayName';\nimport getComponentName from '../utils/getComponentName';\nimport hoist from '../utils/hoist';\nimport isFunction from '../utils/isFunction';\nimport isTag from '../utils/isTag';\nimport isDerivedReactComponent from '../utils/isDerivedReactComponent';\nimport isStyledComponent from '../utils/isStyledComponent';\nimport once from '../utils/once';\nimport StyleSheet from './StyleSheet';\nimport { ThemeConsumer, type Theme } from './ThemeProvider';\nimport { StyleSheetConsumer } from './StyleSheetManager';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from '../utils/empties';\n\nimport type { Attrs, RuleSet, Target } from '../types';\n\nconst identifiers = {};\n\n/ We depend on components having unique IDs /\nfunction generateId(_ComponentStyle: Function, _displayName: string, parentComponentId: string) {\n const displayName = typeof _displayName !== 'string' ? 'sc' : escape(_displayName);\n\n /\n This ensures uniqueness if two components happen to share\n * the same displayName.\n /\n const nr = (identifiers[displayName] \|\| 0) + 1;\n identifiers[displayName] = nr;\n\n const componentId = `${displayName}-${_ComponentStyle.generateName(displayName + nr)}`;\n\n return parentComponentId ? `${parentComponentId}-${componentId}` : componentId;\n}\n\n// $FlowFixMe\nclass StyledComponent extends Component<> {\n renderOuter: Function;\n\n renderInner: Function;\n\n styleSheet: ?StyleSheet;\n\n warnInnerRef: Function;\n\n warnAttrsFnObjectKeyDeprecated: Function;\n\n warnNonStyledComponentAttrsObjectKey: Function;\n\n attrs = {};\n\n constructor() {\n super();\n this.renderOuter = this.renderOuter.bind(this);\n this.renderInner = this.renderInner.bind(this);\n\n if (process.env.NODE_ENV !== 'production') {\n this.warnInnerRef = once(displayName =>\n // eslint-disable-next-line no-console\n console.warn(\n `The \"innerRef\" API has been removed in styled-components v4 in favor of React 16 ref forwarding, use \"ref\" instead like a typical component. \"innerRef\" was detected on component \"${displayName}\".`\n )\n );\n\n this.warnAttrsFnObjectKeyDeprecated = once(\n (key, displayName): void =>\n // eslint-disable-next-line no-console\n console.warn(\n `Functions as object-form attrs({}) keys are now deprecated and will be removed in a future version of styled-components. Switch to the new attrs(props => ({})) syntax instead for easier and more powerful composition. The attrs key in question is \"${key}\" on component \"${displayName}\".`,\n `\\n ${new Error().stack}`\n )\n );\n\n this.warnNonStyledComponentAttrsObjectKey = once(\n (key, displayName): void =>\n // eslint-disable-next-line no-console\n console.warn(\n `It looks like you've used a non styled-component as the value for the \"${key}\" prop in an object-form attrs constructor of \"${displayName}\".\\n` +\n 'You should use the new function-form attrs constructor which avoids this issue: attrs(props => ({ yourStuff }))\\n' +\n \"To continue using the deprecated object syntax, you'll need to wrap your component prop in a function to make it available inside the styled component (you'll still get the deprecation warning though.)\\n\" +\n `For example, { ${key}: () => InnerComponent } instead of { ${key}: InnerComponent }`\n )\n );\n }\n }\n\n render() {\n return <StyleSheetConsumer>{this.renderOuter}</StyleSheetConsumer>;\n }\n\n renderOuter(styleSheet?: StyleSheet = StyleSheet.master) {\n this.styleSheet = styleSheet;\n\n // No need to subscribe a static component to theme changes, it won't change anything\n if (this.props.forwardedComponent.componentStyle.isStatic) return this.renderInner();\n\n return <ThemeConsumer>{this.renderInner}</ThemeConsumer>;\n }\n\n renderInner(theme?: Theme) {\n const {\n componentStyle,\n defaultProps,\n displayName,\n foldedComponentIds,\n styledComponentId,\n target,\n } = this.props.forwardedComponent;\n\n let generatedClassName;\n if (componentStyle.isStatic) {\n generatedClassName = this.generateAndInjectStyles(EMPTY_OBJECT, this.props);\n } else {\n generatedClassName = this.generateAndInjectStyles(\n determineTheme(this.props, theme, defaultProps) \|\| EMPTY_OBJECT,\n this.props\n );\n }\n\n const elementToBeCreated = this.props.as \|\| this.attrs.as \|\| target;\n const isTargetTag = isTag(elementToBeCreated);\n\n const propsForElement = {};\n const computedProps = { ...this.props, ...this.attrs };\n\n let key;\n // eslint-disable-next-line guard-for-in\n for (key in computedProps) {\n if (process.env.NODE_ENV !== 'production' && key === 'innerRef' && isTargetTag) {\n this.warnInnerRef(displayName);\n }\n\n if (key === 'forwardedComponent' \|\| key === 'as') {\n continue;\n } else if (key === 'forwardedRef') propsForElement.ref = computedProps[key];\n else if (key === 'forwardedAs') propsForElement.as = computedProps[key];\n else if (!isTargetTag \|\| validAttr(key)) {\n // Don't pass through non HTML tags through to HTML elements\n propsForElement[key] = computedProps[key];\n }\n }\n\n if (this.props.style && this.attrs.style) {\n propsForElement.style = { ...this.attrs.style, ...this.props.style };\n }\n\n propsForElement.className = Array.prototype\n .concat(\n foldedComponentIds,\n styledComponentId,\n generatedClassName !== styledComponentId ? generatedClassName : null,\n this.props.className,\n this.attrs.className\n )\n .filter(Boolean)\n .join(' ');\n\n return createElement(elementToBeCreated, propsForElement);\n }\n\n buildExecutionContext(theme: ?Object, props: Object, attrs: Attrs) {\n const context = { ...props, theme };\n\n if (!attrs.length) return context;\n\n this.attrs = {};\n\n attrs.forEach(attrDef => {\n let resolvedAttrDef = attrDef;\n let attrDefWasFn = false;\n let attr;\n let key;\n\n if (isFunction(resolvedAttrDef)) {\n // $FlowFixMe\n resolvedAttrDef = resolvedAttrDef(context);\n attrDefWasFn = true;\n }\n\n /* eslint-disable guard-for-in /\n // $FlowFixMe\n for (key in resolvedAttrDef) {\n attr = resolvedAttrDef[key];\n\n if (!attrDefWasFn) {\n if (isFunction(attr) && !isDerivedReactComponent(attr) && !isStyledComponent(attr)) {\n if (process.env.NODE_ENV !== 'production') {\n this.warnAttrsFnObjectKeyDeprecated(key, props.forwardedComponent.displayName);\n }\n\n attr = attr(context);\n\n if (process.env.NODE_ENV !== 'production' && React.isValidElement(attr)) {\n this.warnNonStyledComponentAttrsObjectKey(key, props.forwardedComponent.displayName);\n }\n }\n }\n\n this.attrs[key] = attr;\n context[key] = attr;\n }\n / eslint-enable /\n });\n\n return context;\n }\n\n generateAndInjectStyles(theme: any, props: any) {\n const { attrs, componentStyle, warnTooManyClasses } = props.forwardedComponent;\n\n // statically styled-components don't need to build an execution context object,\n // and shouldn't be increasing the number of class names\n if (componentStyle.isStatic && !attrs.length) {\n return componentStyle.generateAndInjectStyles(EMPTY_OBJECT, this.styleSheet);\n }\n\n const className = componentStyle.generateAndInjectStyles(\n this.buildExecutionContext(theme, props, attrs),\n this.styleSheet\n );\n\n if (process.env.NODE_ENV !== 'production' && warnTooManyClasses) warnTooManyClasses(className);\n\n return className;\n }\n}\n\nexport default function createStyledComponent(target: Target, options: Object, rules: RuleSet) {\n const isTargetStyledComp = isStyledComponent(target);\n const isClass = !isTag(target);\n\n const {\n displayName = generateDisplayName(target),\n componentId = generateId(ComponentStyle, options.displayName, options.parentComponentId),\n ParentComponent = StyledComponent,\n attrs = EMPTY_ARRAY,\n } = options;\n\n const styledComponentId =\n options.displayName && options.componentId\n ? `${escape(options.displayName)}-${options.componentId}`\n : options.componentId \|\| componentId;\n\n // fold the underlying StyledComponent attrs up (implicit extend)\n const finalAttrs =\n // $FlowFixMe\n isTargetStyledComp && target.attrs\n ? Array.prototype.concat(target.attrs, attrs).filter(Boolean)\n : attrs;\n\n const componentStyle = new ComponentStyle(\n isTargetStyledComp\n ? // fold the underlying StyledComponent rules up (implicit extend)\n // $FlowFixMe\n target.componentStyle.rules.concat(rules)\n : rules,\n finalAttrs,\n styledComponentId\n );\n\n /\n forwardRef creates a new interim component, which we'll take advantage of\n * instead of extending ParentComponent to create _another_ interim class\n */\n let WrappedStyledComponent;\n const forwardRef = (props, ref) => (\n <ParentComponent {...props} forwardedComponent={WrappedStyledComponent} forwardedRef={ref} />\n );\n forwardRef.displayName = displayName;\n WrappedStyledComponent = React.forwardRef(forwardRef);\n WrappedStyledComponent.displayName = displayName;\n\n // $FlowFixMe\n WrappedStyledComponent.attrs = finalAttrs;\n // $FlowFixMe\n WrappedStyledComponent.componentStyle = componentStyle;\n\n // $FlowFixMe\n WrappedStyledComponent.foldedComponentIds = isTargetStyledComp\n ? // $FlowFixMe\n Array.prototype.concat(target.foldedComponentIds, target.styledComponentId)\n : EMPTY_ARRAY;\n\n // $FlowFixMe\n WrappedStyledComponent.styledComponentId = styledComponentId;\n\n // fold the underlying StyledComponent target up since we folded the styles\n // $FlowFixMe\n WrappedStyledComponent.target = isTargetStyledComp ? target.target : target;\n\n // $FlowFixMe\n WrappedStyledComponent.withComponent = function withComponent(tag: Target) {\n const { componentId: previousComponentId, ...optionsToCopy } = options;\n\n const newComponentId =\n previousComponentId &&\n `${previousComponentId}-${isTag(tag) ? tag : escape(getComponentName(tag))}`;\n\n const newOptions = {\n ...optionsToCopy,\n attrs: finalAttrs,\n componentId: newComponentId,\n ParentComponent,\n };\n\n return createStyledComponent(tag, newOptions, rules);\n };\n\n // $FlowFixMe\n Object.defineProperty(WrappedStyledComponent, 'defaultProps', {\n get() {\n return this._foldedDefaultProps;\n },\n\n set(obj) {\n // $FlowFixMe\n this._foldedDefaultProps = isTargetStyledComp ? merge(target.defaultProps, obj) : obj;\n },\n });\n\n if (process.env.NODE_ENV !== 'production') {\n // $FlowFixMe\n WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(displayName);\n }\n\n // $FlowFixMe\n WrappedStyledComponent.toString = () => `.${WrappedStyledComponent.styledComponentId}`;\n\n if (isClass) {\n hoist(WrappedStyledComponent, target, {\n // all SC-specific things should not be hoisted\n attrs: true,\n componentStyle: true,\n displayName: true,\n foldedComponentIds: true,\n styledComponentId: true,\n target: true,\n withComponent: true,\n });\n }\n\n return WrappedStyledComponent;\n}\n","// @flow\nimport { EMPTY_ARRAY } from '../utils/empties';\nimport flatten from '../utils/flatten';\nimport isStaticRules from '../utils/isStaticRules';\nimport stringifyRules from '../utils/stringifyRules';\nimport StyleSheet from './StyleSheet';\n\nimport type { RuleSet } from '../types';\n\nexport default class GlobalStyle {\n componentId: string;\n\n isStatic: boolean;\n\n rules: RuleSet;\n\n constructor(rules: RuleSet, componentId: string) {\n this.rules = rules;\n this.componentId = componentId;\n this.isStatic = isStaticRules(rules, EMPTY_ARRAY);\n\n if (!StyleSheet.master.hasId(componentId)) {\n StyleSheet.master.deferredInject(componentId, []);\n }\n }\n\n createStyles(executionContext: Object, styleSheet: StyleSheet) {\n const flatCSS = flatten(this.rules, executionContext, styleSheet);\n const css = stringifyRules(flatCSS, '');\n\n styleSheet.inject(this.componentId, css);\n }\n\n removeStyles(styleSheet: StyleSheet) {\n const { componentId } = this;\n if (styleSheet.hasId(componentId)) {\n styleSheet.remove(componentId);\n }\n }\n\n // TODO: overwrite in-place instead of remove+create?\n renderStyles(executionContext: Object, styleSheet: StyleSheet) {\n this.removeStyles(styleSheet);\n this.createStyles(executionContext, styleSheet);\n }\n}\n"],"names":["i"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CC;;CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iEA+EuD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wDAsSnD;;WAEMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACvZT;;;;;;;;;;;8BAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCCQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCCyI2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BC1J3B,aAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/styled-components.js CHANGED Viewed

@@ -467,7 +467,7 @@
     "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 (see https://www.styled-components.com/docs/api#css), which ensures the styles are injected correctly.\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"
   };
@@ -756,9 +756,9 @@
     if (tag.sheet) return tag.sheet;
     /* Firefox quirk requires us to step through all stylesheets to find one owned by the given tag */
-    var size = document.styleSheets.length;
+    var size = tag.ownerDocument.styleSheets.length;
     for (var i = 0; i < size; i += 1) {
-      var sheet = document.styleSheets[i];
+      var sheet = tag.ownerDocument.styleSheets[i];
       // $FlowFixMe
       if (sheet.ownerNode === tag) return sheet;
     }
@@ -812,9 +812,12 @@
   /* create a new style tag after lastEl */
   var makeStyleTag = function makeStyleTag(target, tagEl, insertBefore) {
-    var el = document.createElement('style');
+    var targetDocument = document;
+    if (target) targetDocument = target.ownerDocument;else if (tagEl) targetDocument = tagEl.ownerDocument;
+    var el = targetDocument.createElement('style');
     el.setAttribute(SC_ATTR, '');
-    el.setAttribute(SC_VERSION_ATTR, "4.3.1");
+    el.setAttribute(SC_VERSION_ATTR, "4.4.1");
     var nonce = getNonce();
     if (nonce) {
@@ -822,7 +825,7 @@
     }
     /* Work around insertRule quirk in EdgeHTML */
-    el.appendChild(document.createTextNode(''));
+    el.appendChild(targetDocument.createTextNode(''));
     if (target && !tagEl) {
       /* Append to target when no previous element was passed */
@@ -843,7 +846,7 @@
   var wrapAsHtmlTag = function wrapAsHtmlTag(css, names) {
     return function (additionalAttrs) {
       var nonce = getNonce();
-      var attrs = [nonce && 'nonce="' + nonce + '"', SC_ATTR + '="' + stringifyNames(names) + '"', SC_VERSION_ATTR + '="' + "4.3.1" + '"', additionalAttrs];
+      var attrs = [nonce && 'nonce="' + nonce + '"', SC_ATTR + '="' + stringifyNames(names) + '"', SC_VERSION_ATTR + '="' + "4.4.1" + '"', additionalAttrs];
       var htmlAttr = attrs.filter(Boolean).join(' ');
       return '<style ' + htmlAttr + '>' + css() + '</style>';
@@ -855,7 +858,7 @@
     return function () {
       var _props;
-      var props = (_props = {}, _props[SC_ATTR] = stringifyNames(names), _props[SC_VERSION_ATTR] = "4.3.1", _props);
+      var props = (_props = {}, _props[SC_ATTR] = stringifyNames(names), _props[SC_VERSION_ATTR] = "4.4.1", _props);
       var nonce = getNonce();
       if (nonce) {
@@ -930,6 +933,8 @@
     var removeRules = function removeRules(id) {
       var marker = markers[id];
       if (marker === undefined) return;
+      // $FlowFixMe
+      if (el.isConnected === false) return;
       var size = sizes[marker];
       var sheet = sheetForTag(el);
@@ -985,8 +990,8 @@
     };
   };
-  var makeTextNode = function makeTextNode(id) {
-    return document.createTextNode(makeTextMarker(id));
+  var makeTextNode = function makeTextNode(targetDocument, id) {
+    return targetDocument.createTextNode(makeTextMarker(id));
   };
   var makeBrowserTag = function makeBrowserTag(el, getImportRuleTag) {
@@ -1004,7 +1009,7 @@
         return prev;
       }
-      markers[id] = makeTextNode(id);
+      markers[id] = makeTextNode(el.ownerDocument, id);
       el.appendChild(markers[id]);
       names[id] = Object.create(null);
@@ -1042,7 +1047,7 @@
       if (marker === undefined) return;
       /* create new empty text node and replace the current one */
-      var newMarker = makeTextNode(id);
+      var newMarker = makeTextNode(el.ownerDocument, id);
       el.replaceChild(newMarker, marker);
       markers[id] = newMarker;
       resetIdNames(names, id);
@@ -1262,7 +1267,7 @@
       var isStreamed = false;
       /* retrieve all of our SSR style elements from the DOM */
-      var nodes = document.querySelectorAll('style[' + SC_ATTR + '][' + SC_VERSION_ATTR + '="' + "4.3.1" + '"]');
+      var nodes = document.querySelectorAll('style[' + SC_ATTR + '][' + SC_VERSION_ATTR + '="' + "4.4.1" + '"]');
       var nodesSize = nodes.length;
@@ -2819,7 +2824,7 @@
       return React__default.createElement(
         ThemeContext.Provider,
         { value: context },
-        React__default.Children.only(this.props.children)
+        this.props.children
       );
     };
@@ -3237,7 +3242,7 @@
     };
   }
-  var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|default|defer|dir|disabled|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|itemProp|itemScope|itemType|itemID|itemRef|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
+  var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|itemProp|itemScope|itemType|itemID|itemRef|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
   var index$1 = memoize(function (prop) {
     return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
@@ -3356,8 +3361,6 @@
   //
-  var isHMREnabled = typeof module !== 'undefined' && module.hot;
   /* combines hashStr (murmurhash) and nameGenerator for convenience */
   var hasher = function hasher(str) {
     return generateAlphabeticName(murmurhash(str));
@@ -3373,7 +3376,7 @@
       classCallCheck(this, ComponentStyle);
       this.rules = rules;
-      this.isStatic = !isHMREnabled && isStaticRules(rules, attrs);
+      this.isStatic = "development" === 'production' && isStaticRules(rules, attrs);
       this.componentId = componentId;
       if (!StyleSheet.master.hasId(componentId)) {
@@ -3382,10 +3385,10 @@
     }
     /*
-       * Flattens a rule set into valid CSS
-       * Hashes it, wraps the whole chunk in a .hash1234 {}
-       * Returns the hash to be injected on render()
-       * */
+     * Flattens a rule set into valid CSS
+     * Hashes it, wraps the whole chunk in a .hash1234 {}
+     * Returns the hash to be injected on render()
+     * */
     ComponentStyle.prototype.generateAndInjectStyles = function generateAndInjectStyles(executionContext, styleSheet) {
@@ -3428,7 +3431,7 @@
         if (Object.keys(generatedClasses).length >= LIMIT) {
           // Unable to find latestRule in test environment.
           /* eslint-disable no-console, prefer-template */
-          console.warn('Over ' + LIMIT + ' classes were generated for component ' + displayName + '. \n' + 'Consider using the attrs method, together with a style object for frequently changed styles.\n' + 'Example:\n' + '  const Component = styled.div.attrs({\n' + '    style: ({ background }) => ({\n' + '      background,\n' + '    }),\n' + '  })`width: 100%;`\n\n' + '  <Component />');
+          console.warn('Over ' + LIMIT + ' classes were generated for component ' + displayName + '. \n' + 'Consider using the attrs method, together with a style object for frequently changed styles.\n' + 'Example:\n' + '  const Component = styled.div.attrs(props => ({\n' + '    style: {\n' + '      background: props.background,\n' + '    },\n' + '  }))`width: 100%;`\n\n' + '  <Component />');
           warningSeen = true;
           generatedClasses = {};
         }
@@ -3588,7 +3591,7 @@
       var isTargetTag = isTag(elementToBeCreated);
       var propsForElement = {};
-      var computedProps = _extends({}, this.attrs, this.props);
+      var computedProps = _extends({}, this.props, this.attrs);
       var key = void 0;
       // eslint-disable-next-line guard-for-in
@@ -3609,7 +3612,7 @@
         propsForElement.style = _extends({}, this.attrs.style, this.props.style);
       }
-      propsForElement.className = Array.prototype.concat(foldedComponentIds, this.props.className, styledComponentId, this.attrs.className, generatedClassName).filter(Boolean).join(' ');
+      propsForElement.className = Array.prototype.concat(foldedComponentIds, styledComponentId, generatedClassName !== styledComponentId ? generatedClassName : null, this.props.className, this.attrs.className).filter(Boolean).join(' ');
       return React.createElement(elementToBeCreated, propsForElement);
     };