styled-components 3.3.3-3 → 3.3.3

package/CHANGELOG.md

@@ -6,8 +6,20 @@ _The format is based on [Keep a Changelog](http://keepachangelog.com/) and this
 
 ## Unreleased
 
+* placeholder, remove me
+
+## [v3.3.3] - 2018-06-20
+
 * Fixed a regression when extending a `styled(StyledComponent)` introduced in 3.3.0, by @probablyup (see #1819)
 
+* Adjust how displayName is generated when not using Babel to properly preserve a displayName passed via `withConfig`, by @probablyup (see #1755)
+
+* [TS] Fix props being removed when indexed types are passed to WithOptionalTheme, by @devrelm (see #1806)
+
+* [TS] Allow TypeScript 2.9.1 to accept tagged template type argument, by @Igorbek (see #1798)
+
+* Add ref documentation for React.createRef(), by @julmot (see #1792)
+
 ## [v3.3.2] - 2018-06-04
 
 * Allow non-plain objects as `ThemeProvider` themes, by @phyllisstein (see #1780)
@@ -494,7 +506,9 @@ _v3.3.1 was skipped due to a bad deploy._
 
 * Fixed compatibility with other react-broadcast-based systems (like `react-router` v4)
 
-[unreleased]: https://github.com/styled-components/styled-components/compare/v3.3.0...master
+[unreleased]: https://github.com/styled-components/styled-components/compare/v3.3.3...master
+[v3.3.3]: https://github.com/styled-components/styled-components/compare/v3.3.2...v3.3.3
+[v3.3.2]: https://github.com/styled-components/styled-components/compare/v3.3.0...v3.3.2
 [v3.3.0]: https://github.com/styled-components/styled-components/compare/v3.2.6...v3.3.0
 [v3.2.6]: https://github.com/styled-components/styled-components/compare/v3.2.5...v3.2.6
 [v3.2.5]: https://github.com/styled-components/styled-components/compare/v3.2.3...v3.2.5

package/dist/styled-components-no-parser.browser.cjs.js

@@ -1662,20 +1662,14 @@ var _StyledComponent = (function (ComponentStyle, constructWithOptions) {
   var generateId = function generateId(_displayName, parentComponentId) {
     var displayName = typeof _displayName !== 'string' ? 'sc' : escape(_displayName);
 
-    var componentId = void 0;
-
     /**
-     * only fall back to hashing the component injection order if
-     * a proper displayName isn't provided by the babel plugin
+     * This ensures uniqueness if two components happen to share
+     * the same displayName.
      */
-    if (!_displayName) {
-      var nr = (identifiers[displayName] || 0) + 1;
-      identifiers[displayName] = nr;
+    var nr = (identifiers[displayName] || 0) + 1;
+    identifiers[displayName] = nr;
 
-      componentId = displayName + '-' + ComponentStyle.generateName(displayName + nr);
-    } else {
-      componentId = displayName + '-' + ComponentStyle.generateName(displayName);
-    }
+    var componentId = displayName + '-' + ComponentStyle.generateName(displayName + nr);
 
     return parentComponentId !== undefined ? parentComponentId + '-' + componentId : componentId;
   };
@@ -1863,7 +1857,7 @@ var _StyledComponent = (function (ComponentStyle, constructWithOptions) {
         attrs = options.attrs;
 
 
-    var styledComponentId = options.displayName && options.componentId ? escape(options.displayName) + '-' + options.componentId : componentId;
+    var styledComponentId = options.displayName && options.componentId ? escape(options.displayName) + '-' + options.componentId : options.componentId || componentId;
 
     var componentStyle = new ComponentStyle(extendingRules === undefined ? rules : extendingRules.concat(rules), attrs, styledComponentId);
 

package/dist/styled-components-no-parser.browser.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled-components-no-parser.browser.cjs.js","sources":["../src/models/StyleTags.js","../src/models/StyleSheetManager.js","../src/models/ThemeProvider.js","../src/models/StyledComponent.js","../src/models/ComponentStyle.js","../src/constructors/styled.js","../src/constructors/keyframes.js","../src/constructors/injectGlobal.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 } from '../constants'\nimport { type ExtractedComp } from '../utils/extractCompsFromCSS'\nimport { splitByRules } from '../utils/stringifyRules'\nimport getNonce from '../utils/nonce'\nimport once from '../utils/once'\n\nimport {\n  type Names,\n  addNameForId,\n  resetIdNames,\n  hasNameForId,\n  stringifyNames,\n  cloneNames,\n} from '../utils/styleNames'\n\nimport {\n  sheetForTag,\n  safeInsertRule,\n  deleteRules,\n} from '../utils/insertRuleHelpers'\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}\n\n/* this error is used for makeStyleTag */\nconst parentNodeUnmountedErr =\n  process.env.NODE_ENV !== 'production'\n    ? `\nTrying to insert a new style tag, but the given Node is unmounted!\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`.trim()\n    : ''\n\n/* this error is used for tags */\nconst throwCloneTagErr = () => {\n  throw new Error(\n    process.env.NODE_ENV !== 'production'\n      ? `\nThe clone method cannot be used on the client!\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n`.trim()\n      : ''\n  )\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 = (\n  target: ?HTMLElement,\n  tagEl: ?Node,\n  insertBefore: ?boolean\n) => {\n  const el = document.createElement('style')\n  el.setAttribute(SC_ATTR, '')\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 Error(parentNodeUnmountedErr)\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) => (\n  additionalAttrs: ?string\n): string => {\n  const nonce = getNonce()\n  const attrs = [\n    nonce && `nonce=\"${nonce}\"`,\n    `${SC_ATTR}=\"${stringifyNames(names)}\"`,\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  }\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[] =>\n  Object.keys(markers)\n\n/* speedy tags utilise insertRule */\nconst makeSpeedyTag = (\n  el: HTMLStyleElement,\n  getImportRuleTag: ?() => Tag<any>\n): 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 whther 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)\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    styleTag: el,\n    getIds: getIdsFromMarkersFactory(markers),\n    hasNameForId: hasNameForId(names),\n    insertMarker,\n    insertRules,\n    removeRules,\n    css,\n    toHTML: wrapAsHtmlTag(css, names),\n    toElement: wrapAsElement(css, names),\n    clone: throwCloneTagErr,\n  }\n}\n\nconst makeBrowserTag = (\n  el: HTMLStyleElement,\n  getImportRuleTag: ?() => Tag<any>\n): Tag<Text> => {\n  const names = (Object.create(null): Object)\n  const markers = Object.create(null)\n\n  const extractImport = getImportRuleTag !== undefined\n  const makeTextNode = id => document.createTextNode(makeTextMarker(id))\n\n  /* indicates whther 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    // eslint-disable-next-line guard-for-in\n    for (const id in markers) {\n      str += markers[id].data\n    }\n    return str\n  }\n\n  return {\n    styleTag: el,\n    getIds: getIdsFromMarkersFactory(markers),\n    hasNameForId: hasNameForId(names),\n    insertMarker,\n    insertRules,\n    removeRules,\n    css,\n    toHTML: wrapAsHtmlTag(css, names),\n    toElement: wrapAsElement(css, names),\n    clone: throwCloneTagErr,\n  }\n}\n\nconst makeServerTagInternal = (namesArg, markersArg): Tag<[string]> => {\n  const names =\n    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 makeServerTagInternal(namesClone, markersClone)\n  }\n\n  const tag = {\n    styleTag: null,\n    getIds: getIdsFromMarkersFactory(markers),\n    hasNameForId: hasNameForId(names),\n    insertMarker,\n    insertRules,\n    removeRules,\n    css,\n    toHTML: wrapAsHtmlTag(css, names),\n    toElement: wrapAsElement(css, names),\n    clone,\n  }\n\n  return tag\n}\n\nconst makeServerTag = (): Tag<[string]> => makeServerTagInternal()\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    if (DISABLE_SPEEDY) {\n      return makeBrowserTag(el, getImportRuleTag)\n    } else {\n      return makeSpeedyTag(el, getImportRuleTag)\n    }\n  }\n\n  return makeServerTag()\n}\n\n/* wraps a given tag so that rehydration is performed once when necessary */\nexport const makeRehydrationTag = (\n  tag: Tag<any>,\n  els: HTMLStyleElement[],\n  extracted: ExtractedComp[],\n  names: string[],\n  immediateRehydration: boolean\n): Tag<any> => {\n  /* rehydration function that adds all rules to the new tag */\n  const rehydrate = once(() => {\n    /* add all extracted components to the new tag */\n    for (let i = 0; i < extracted.length; 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; i < els.length; i += 1) {\n      const el = els[i]\n      if (el.parentNode) {\n        el.parentNode.removeChild(el)\n      }\n    }\n  })\n\n  if (immediateRehydration) rehydrate()\n\n  return {\n    ...tag,\n    /* add rehydration hook to insertion methods */\n    insertMarker: id => {\n      rehydrate()\n      return tag.insertMarker(id)\n    },\n    insertRules: (id, cssRules, name) => {\n      rehydrate()\n      return tag.insertRules(id, cssRules, name)\n    },\n  }\n}\n","// @flow\nimport React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport StyleSheet from './StyleSheet'\nimport ServerStyleSheet from './ServerStyleSheet'\nimport { CONTEXT_KEY } from '../constants'\n\n/* this error is used for makeStyleTag */\nconst targetPropErr =\n  process.env.NODE_ENV !== 'production'\n    ? `\nThe StyleSheetManager expects a valid target or sheet prop!\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`.trim()\n    : ''\n\ntype Props = {\n  sheet?: StyleSheet | null,\n  target?: HTMLElement | null,\n}\n\nclass StyleSheetManager extends Component<Props, void> {\n  sheetInstance: StyleSheet\n\n  getChildContext() {\n    return { [CONTEXT_KEY]: this.sheetInstance }\n  }\n\n  componentWillMount() {\n    if (this.props.sheet) {\n      this.sheetInstance = this.props.sheet\n    } else if (this.props.target) {\n      this.sheetInstance = new StyleSheet(this.props.target)\n    } else {\n      throw new Error(targetPropErr)\n    }\n  }\n\n  render() {\n    /* eslint-disable react/prop-types */\n    // Flow v0.43.1 will report an error accessing the `children` property,\n    // but v0.47.0 will not. It is necessary to use a type cast instead of\n    // a \"fixme\" comment to satisfy both Flow versions.\n    return React.Children.only((this.props: any).children)\n  }\n}\n\nStyleSheetManager.childContextTypes = {\n  [CONTEXT_KEY]: PropTypes.oneOfType([\n    PropTypes.instanceOf(StyleSheet),\n    PropTypes.instanceOf(ServerStyleSheet),\n  ]).isRequired,\n}\n\nStyleSheetManager.propTypes = {\n  sheet: PropTypes.oneOfType([\n    PropTypes.instanceOf(StyleSheet),\n    PropTypes.instanceOf(ServerStyleSheet),\n  ]),\n  target: PropTypes.shape({\n    appendChild: PropTypes.func.isRequired,\n  }),\n}\n\nexport default StyleSheetManager\n","// @flow\nimport React, { Component, type Element } from 'react'\nimport PropTypes from 'prop-types'\nimport createBroadcast from '../utils/create-broadcast'\nimport type { Broadcast } from '../utils/create-broadcast'\nimport once from '../utils/once'\n\n// NOTE: DO NOT CHANGE, changing this is a semver major change!\nexport const CHANNEL = '__styled-components__'\nexport const CHANNEL_NEXT = `${CHANNEL}next__`\n\nexport const CONTEXT_CHANNEL_SHAPE = PropTypes.shape({\n  getTheme: PropTypes.func,\n  subscribe: PropTypes.func,\n  unsubscribe: PropTypes.func,\n})\n\nexport type Theme = { [key: string]: mixed }\ntype ThemeProviderProps = {|\n  children?: Element<any>,\n  theme: Theme | ((outerTheme: Theme) => void),\n|}\n\nlet warnChannelDeprecated\nif (process.env.NODE_ENV !== 'production') {\n  warnChannelDeprecated = once(() => {\n    // eslint-disable-next-line no-console\n    console.error(\n      `Warning: Usage of \\`context.${CHANNEL}\\` as a function is deprecated. It will be replaced with the object on \\`.context.${CHANNEL_NEXT}\\` in a future version.`\n    )\n  })\n}\n\nconst isFunction = test => typeof test === 'function'\n\n/**\n * Provide a theme to an entire react component tree via context and event listeners (have to do\n * both context and event emitter as pure components block context updates)\n */\nclass ThemeProvider extends Component<ThemeProviderProps, void> {\n  getTheme: (theme?: Theme | ((outerTheme: Theme) => void)) => Theme\n  outerTheme: Theme\n  unsubscribeToOuterId: string\n  props: ThemeProviderProps\n  broadcast: Broadcast\n  unsubscribeToOuterId: number = -1\n\n  constructor() {\n    super()\n    this.getTheme = this.getTheme.bind(this)\n  }\n\n  componentWillMount() {\n    // If there is a ThemeProvider wrapper anywhere around this theme provider, merge this theme\n    // with the outer theme\n    const outerContext = this.context[CHANNEL_NEXT]\n    if (outerContext !== undefined) {\n      this.unsubscribeToOuterId = outerContext.subscribe(theme => {\n        this.outerTheme = theme\n\n        if (this.broadcast !== undefined) {\n          this.publish(this.props.theme)\n        }\n      })\n    }\n\n    this.broadcast = createBroadcast(this.getTheme())\n  }\n\n  getChildContext() {\n    return {\n      ...this.context,\n      [CHANNEL_NEXT]: {\n        getTheme: this.getTheme,\n        subscribe: this.broadcast.subscribe,\n        unsubscribe: this.broadcast.unsubscribe,\n      },\n      [CHANNEL]: subscriber => {\n        if (process.env.NODE_ENV !== 'production') {\n          warnChannelDeprecated()\n        }\n\n        // Patch the old `subscribe` provide via `CHANNEL` for older clients.\n        const unsubscribeId = this.broadcast.subscribe(subscriber)\n        return () => this.broadcast.unsubscribe(unsubscribeId)\n      },\n    }\n  }\n\n  componentWillReceiveProps(nextProps: ThemeProviderProps) {\n    if (this.props.theme !== nextProps.theme) {\n      this.publish(nextProps.theme)\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.unsubscribeToOuterId !== -1) {\n      this.context[CHANNEL_NEXT].unsubscribe(this.unsubscribeToOuterId)\n    }\n  }\n\n  // Get the theme from the props, supporting both (outerTheme) => {} as well as object notation\n  getTheme(passedTheme: (outerTheme: Theme) => void | Theme) {\n    const theme = passedTheme || this.props.theme\n    if (isFunction(theme)) {\n      const mergedTheme = theme(this.outerTheme)\n      if (\n        process.env.NODE_ENV !== 'production' &&\n        (mergedTheme === null ||\n          Array.isArray(mergedTheme) ||\n          typeof mergedTheme !== 'object')\n      ) {\n        throw new Error(\n          process.env.NODE_ENV !== 'production'\n            ? '[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!'\n            : ''\n        )\n      }\n      return mergedTheme\n    }\n    if (theme === null || Array.isArray(theme) || typeof theme !== 'object') {\n      throw new Error(\n        process.env.NODE_ENV !== 'production'\n          ? '[ThemeProvider] Please make your theme prop an object'\n          : ''\n      )\n    }\n    return { ...this.outerTheme, ...(theme: Object) }\n  }\n\n  publish(theme: Theme | ((outerTheme: Theme) => void)) {\n    this.broadcast.publish(this.getTheme(theme))\n  }\n\n  render() {\n    if (!this.props.children) {\n      return null\n    }\n    return React.Children.only(this.props.children)\n  }\n}\n\nThemeProvider.childContextTypes = {\n  [CHANNEL]: PropTypes.func, // legacy\n  [CHANNEL_NEXT]: CONTEXT_CHANNEL_SHAPE,\n}\nThemeProvider.contextTypes = {\n  [CHANNEL_NEXT]: CONTEXT_CHANNEL_SHAPE,\n}\n\nexport default ThemeProvider\n","// @flow\n\nimport hoist from 'hoist-non-react-statics'\nimport PropTypes from 'prop-types'\nimport { Component, createElement } from 'react'\nimport { CONTEXT_KEY } from '../constants'\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 isStyledComponent from '../utils/isStyledComponent'\nimport isTag from '../utils/isTag'\nimport validAttr from '../utils/validAttr'\nimport hasInInheritanceChain from '../utils/hasInInheritanceChain'\nimport ServerStyleSheet from './ServerStyleSheet'\nimport StyleSheet from './StyleSheet'\nimport { CHANNEL, CHANNEL_NEXT, CONTEXT_CHANNEL_SHAPE } from './ThemeProvider'\n\nimport type { Theme } from './ThemeProvider'\nimport type { RuleSet, Target } from '../types'\n\n// HACK for generating all static styles without needing to allocate\n// an empty execution context every single time...\nconst STATIC_EXECUTION_CONTEXT = {}\n\ntype BaseState = {\n  theme?: ?Theme,\n  generatedClassName?: string,\n}\n\nexport default (ComponentStyle: Function, constructWithOptions: Function) => {\n  const identifiers = {}\n\n  /* We depend on components having unique IDs */\n  const generateId = (_displayName: string, parentComponentId: string) => {\n    const displayName =\n      typeof _displayName !== 'string' ? 'sc' : escape(_displayName)\n\n    let componentId\n\n    /**\n     * only fall back to hashing the component injection order if\n     * a proper displayName isn't provided by the babel plugin\n     */\n    if (!_displayName) {\n      const nr = (identifiers[displayName] || 0) + 1\n      identifiers[displayName] = nr\n\n      componentId = `${displayName}-${ComponentStyle.generateName(\n        displayName + nr\n      )}`\n    } else {\n      componentId = `${displayName}-${ComponentStyle.generateName(displayName)}`\n    }\n\n    return parentComponentId !== undefined\n      ? `${parentComponentId}-${componentId}`\n      : componentId\n  }\n\n  // $FlowFixMe\n  class BaseStyledComponent extends Component<*, BaseState> {\n    static target: Target\n    static styledComponentId: string\n    static attrs: Object\n    static componentStyle: Object\n    static defaultProps: Object\n    static warnTooManyClasses: Function\n\n    attrs = {}\n    state = {\n      theme: null,\n      generatedClassName: '',\n    }\n    unsubscribeId: number = -1\n\n    unsubscribeFromContext() {\n      if (this.unsubscribeId !== -1) {\n        this.context[CHANNEL_NEXT].unsubscribe(this.unsubscribeId)\n      }\n    }\n\n    buildExecutionContext(theme: any, props: any) {\n      const { attrs } = this.constructor\n      const context = { ...props, theme }\n      if (attrs === undefined) {\n        return context\n      }\n\n      this.attrs = Object.keys(attrs).reduce((acc, key) => {\n        const attr = attrs[key]\n        // eslint-disable-next-line no-param-reassign\n        acc[key] =\n          typeof attr === 'function' && !hasInInheritanceChain(attr, Component)\n            ? attr(context)\n            : attr\n        return acc\n      }, {})\n\n      return { ...context, ...this.attrs }\n    }\n\n    generateAndInjectStyles(theme: any, props: any) {\n      const { attrs, componentStyle, warnTooManyClasses } = this.constructor\n      const styleSheet = this.context[CONTEXT_KEY] || StyleSheet.master\n\n      // staticaly 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 === undefined) {\n        return componentStyle.generateAndInjectStyles(\n          STATIC_EXECUTION_CONTEXT,\n          styleSheet\n        )\n      } else {\n        const executionContext = this.buildExecutionContext(theme, props)\n        const className = componentStyle.generateAndInjectStyles(\n          executionContext,\n          styleSheet\n        )\n\n        if (\n          process.env.NODE_ENV !== 'production' &&\n          warnTooManyClasses !== undefined\n        ) {\n          warnTooManyClasses(className)\n        }\n\n        return className\n      }\n    }\n\n    componentWillMount() {\n      const { componentStyle } = this.constructor\n      const styledContext = this.context[CHANNEL_NEXT]\n\n      // If this is a staticaly-styled component, we don't need to the theme\n      // to generate or build styles.\n      if (componentStyle.isStatic) {\n        const generatedClassName = this.generateAndInjectStyles(\n          STATIC_EXECUTION_CONTEXT,\n          this.props\n        )\n        this.setState({ generatedClassName })\n        // If there is a theme in the context, subscribe to the event emitter. This\n        // is necessary due to pure components blocking context updates, this circumvents\n        // that by updating when an event is emitted\n      } else if (styledContext !== undefined) {\n        const { subscribe } = styledContext\n        this.unsubscribeId = subscribe(nextTheme => {\n          // This will be called once immediately\n          const theme = determineTheme(\n            this.props,\n            nextTheme,\n            this.constructor.defaultProps\n          )\n          const generatedClassName = this.generateAndInjectStyles(\n            theme,\n            this.props\n          )\n\n          this.setState({ theme, generatedClassName })\n        })\n      } else {\n        // eslint-disable-next-line react/prop-types\n        const theme = this.props.theme || {}\n        const generatedClassName = this.generateAndInjectStyles(\n          theme,\n          this.props\n        )\n        this.setState({ theme, generatedClassName })\n      }\n    }\n\n    componentWillReceiveProps(nextProps: {\n      theme?: Theme,\n      [key: string]: any,\n    }) {\n      // If this is a statically-styled component, we don't need to listen to\n      // props changes to update styles\n      const { componentStyle } = this.constructor\n      if (componentStyle.isStatic) {\n        return\n      }\n\n      this.setState(prevState => {\n        const theme = determineTheme(\n          nextProps,\n          prevState.theme,\n          this.constructor.defaultProps\n        )\n        const generatedClassName = this.generateAndInjectStyles(\n          theme,\n          nextProps\n        )\n\n        return { theme, generatedClassName }\n      })\n    }\n\n    componentWillUnmount() {\n      this.unsubscribeFromContext()\n    }\n\n    render() {\n      // eslint-disable-next-line react/prop-types\n      const { innerRef } = this.props\n      const { generatedClassName } = this.state\n      const { styledComponentId, target } = this.constructor\n\n      const isTargetTag = isTag(target)\n\n      const className = [\n        // eslint-disable-next-line react/prop-types\n        this.props.className,\n        styledComponentId,\n        this.attrs.className,\n        generatedClassName,\n      ]\n        .filter(Boolean)\n        .join(' ')\n\n      const baseProps: any = {\n        ...this.attrs,\n        className,\n      }\n\n      if (isStyledComponent(target)) {\n        baseProps.innerRef = innerRef\n      } else {\n        baseProps.ref = innerRef\n      }\n\n      const propsForElement = Object.keys(this.props).reduce(\n        (acc, propName) => {\n          // Don't pass through non HTML tags through to HTML elements\n          // always omit innerRef\n          if (\n            propName !== 'innerRef' &&\n            propName !== 'className' &&\n            (!isTargetTag || validAttr(propName))\n          ) {\n            // eslint-disable-next-line no-param-reassign\n            acc[propName] = this.props[propName]\n          }\n\n          return acc\n        },\n        baseProps\n      )\n\n      return createElement(target, propsForElement)\n    }\n  }\n\n  const createStyledComponent = (\n    target: Target,\n    options: Object,\n    rules: RuleSet\n  ) => {\n    const {\n      isClass = !isTag(target),\n      displayName = generateDisplayName(target),\n      componentId = generateId(options.displayName, options.parentComponentId),\n      ParentComponent = BaseStyledComponent,\n      rules: extendingRules,\n      attrs,\n    } = options\n\n    const styledComponentId =\n      options.displayName && options.componentId\n        ? `${escape(options.displayName)}-${options.componentId}`\n        : componentId\n\n    const componentStyle = new ComponentStyle(\n      extendingRules === undefined ? rules : extendingRules.concat(rules),\n      attrs,\n      styledComponentId\n    )\n\n    class StyledComponent extends ParentComponent {\n      static attrs = attrs\n      static componentStyle = componentStyle\n      static displayName = displayName\n      static styledComponentId = styledComponentId\n      static target = target\n\n      static contextTypes = {\n        [CHANNEL]: PropTypes.func,\n        [CHANNEL_NEXT]: CONTEXT_CHANNEL_SHAPE,\n        [CONTEXT_KEY]: PropTypes.oneOfType([\n          PropTypes.instanceOf(StyleSheet),\n          PropTypes.instanceOf(ServerStyleSheet),\n        ]),\n      }\n\n      static withComponent(tag: Target) {\n        const { componentId: previousComponentId, ...optionsToCopy } = options\n\n        const newComponentId =\n          previousComponentId &&\n          `${previousComponentId}-${\n            isTag(tag) ? tag : escape(getComponentName(tag))\n          }`\n\n        const newOptions = {\n          ...optionsToCopy,\n          componentId: newComponentId,\n          ParentComponent: StyledComponent,\n        }\n\n        return createStyledComponent(tag, newOptions, rules)\n      }\n\n      static get extend() {\n        const {\n          rules: rulesFromOptions,\n          componentId: parentComponentId,\n          ...optionsToCopy\n        } = options\n\n        const newRules =\n          rulesFromOptions === undefined\n            ? rules\n            : rulesFromOptions.concat(rules)\n\n        const newOptions = {\n          ...optionsToCopy,\n          rules: newRules,\n          parentComponentId,\n          ParentComponent: StyledComponent,\n        }\n\n        return constructWithOptions(createStyledComponent, target, newOptions)\n      }\n    }\n\n    if (process.env.NODE_ENV !== 'production') {\n      StyledComponent.warnTooManyClasses = createWarnTooManyClasses(displayName)\n    }\n\n    if (isClass) {\n      hoist(StyledComponent, target, {\n        // all SC-specific things should not be hoisted\n        attrs: true,\n        componentStyle: true,\n        displayName: true,\n        extend: true,\n        styledComponentId: true,\n        target: true,\n        warnTooManyClasses: true,\n        withComponent: true,\n      })\n    }\n\n    return StyledComponent\n  }\n\n  return createStyledComponent\n}\n","// @flow\nimport hashStr from '../vendor/glamor/hash'\n\nimport type { RuleSet, NameGenerator, Flattener, Stringifier } from '../types'\nimport StyleSheet from './StyleSheet'\nimport { IS_BROWSER } from '../constants'\nimport isStyledComponent from '../utils/isStyledComponent'\n\nconst areStylesCacheable = IS_BROWSER\n\nconst isStaticRules = (rules: RuleSet, attrs?: Object): boolean => {\n  for (let i = 0; i < rules.length; i += 1) {\n    const rule = rules[i]\n\n    // recursive case\n    if (Array.isArray(rule) && !isStaticRules(rule)) {\n      return false\n    } else if (typeof rule === 'function' && !isStyledComponent(rule)) {\n      // functions are allowed to be static if they're just being\n      // used to get the classname of a nested styled component\n      return false\n    }\n  }\n\n  if (attrs !== undefined) {\n    // eslint-disable-next-line guard-for-in, no-restricted-syntax\n    for (const key in attrs) {\n      const value = attrs[key]\n      if (typeof value === 'function') {\n        return false\n      }\n    }\n  }\n\n  return true\n}\n\nconst isHMREnabled =\n  typeof module !== 'undefined' &&\n  module.hot &&\n  process.env.NODE_ENV !== 'production'\n\n/*\n ComponentStyle is all the CSS-specific stuff, not\n the React-specific stuff.\n */\nexport default (\n  nameGenerator: NameGenerator,\n  flatten: Flattener,\n  stringifyRules: Stringifier\n) => {\n  /* combines hashStr (murmurhash) and nameGenerator for convenience */\n  const generateRuleHash = (str: string) => nameGenerator(hashStr(str))\n\n  class ComponentStyle {\n    rules: RuleSet\n    componentId: string\n    isStatic: boolean\n    lastClassName: ?string\n\n    constructor(rules: RuleSet, attrs?: Object, componentId: string) {\n      this.rules = rules\n      this.isStatic = !isHMREnabled && isStaticRules(rules, attrs)\n      this.componentId = componentId\n\n      if (!StyleSheet.master.hasId(componentId)) {\n        const placeholder =\n          process.env.NODE_ENV !== 'production' ? [`.${componentId} {}`] : []\n\n        StyleSheet.master.deferredInject(componentId, placeholder)\n      }\n    }\n\n    /*\n     * Flattens a rule set into valid CSS\n     * Hashes it, wraps the whole chunk in a .hash1234 {}\n     * Returns the hash to be injected on render()\n     * */\n    generateAndInjectStyles(executionContext: Object, styleSheet: StyleSheet) {\n      const { isStatic, componentId, lastClassName } = this\n      if (\n        areStylesCacheable &&\n        isStatic &&\n        lastClassName !== undefined &&\n        styleSheet.hasNameForId(componentId, ((lastClassName: any): string))\n      ) {\n        return lastClassName\n      }\n\n      const flatCSS = flatten(this.rules, executionContext)\n      const name = generateRuleHash(this.componentId + flatCSS.join(''))\n\n      if (!styleSheet.hasNameForId(componentId, name)) {\n        const css = stringifyRules(flatCSS, `.${name}`)\n        styleSheet.inject(this.componentId, css, name)\n      }\n\n      this.lastClassName = name\n      return name\n    }\n\n    static generateName(str: string): string {\n      return generateRuleHash(str)\n    }\n  }\n\n  return ComponentStyle\n}\n","// @flow\nimport type { Target } from '../types'\nimport domElements from '../utils/domElements'\n\nexport default (styledComponent: Function, constructWithOptions: Function) => {\n  const styled = (tag: Target) => constructWithOptions(styledComponent, tag)\n\n  // Shorthands for all valid HTML Elements\n  domElements.forEach(domElement => {\n    styled[domElement] = styled(domElement)\n  })\n\n  return styled\n}\n","// @flow\nimport hashStr from '../vendor/glamor/hash'\nimport type { Interpolation, NameGenerator, Stringifier } from '../types'\nimport StyleSheet from '../models/StyleSheet'\n\nconst replaceWhitespace = (str: string): string => str.replace(/\\s|\\\\n/g, '')\n\ntype KeyframesFn = (\n  strings: Array<string>,\n  ...interpolations: Array<Interpolation>\n) => string\n\nexport default (\n  nameGenerator: NameGenerator,\n  stringifyRules: Stringifier,\n  css: Function\n): KeyframesFn => (...arr): string => {\n  const styleSheet = StyleSheet.master\n  const rules = css(...arr)\n  const name = nameGenerator(hashStr(replaceWhitespace(JSON.stringify(rules))))\n  const id = `sc-keyframes-${name}`\n\n  if (!styleSheet.hasNameForId(id, name)) {\n    styleSheet.inject(id, stringifyRules(rules, name, '@keyframes'), name)\n  }\n\n  return name\n}\n","// @flow\nimport hashStr from '../vendor/glamor/hash'\nimport StyleSheet from '../models/StyleSheet'\nimport type { Interpolation, Stringifier } from '../types'\n\ntype InjectGlobalFn = (\n  strings: Array<string>,\n  ...interpolations: Array<Interpolation>\n) => void\n\nexport default (stringifyRules: Stringifier, css: Function) => {\n  const injectGlobal: InjectGlobalFn = (...args) => {\n    const styleSheet = StyleSheet.master\n    const rules = css(...args)\n    const hash = hashStr(JSON.stringify(rules))\n    const id = `sc-global-${hash}`\n\n    if (!styleSheet.hasId(id)) {\n      styleSheet.inject(id, stringifyRules(rules))\n    }\n  }\n\n  return injectGlobal\n}\n"],"names":["i","getChildContext","componentWillMount","unsubscribeId","unsubscribeFromContext","length"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA;;;;;;;;;;;;;;;;8BA+C8BA,QAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BClDtDC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACNF,kCAAA;AACA,yCAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA0BEC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACxBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eA8CIC;;;kCAEAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BC1DwBC,QAA0BL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCA6ClD,OAAA,aAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACtDJ;;;;;;;;;;;;;;;;;;ACMA;;;;;;;;;;;;;CAAA;;;ACFA;;;;;;;;;;;;;CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled-components-no-parser.browser.cjs.js","sources":["../src/models/StyleTags.js","../src/models/StyleSheetManager.js","../src/models/ThemeProvider.js","../src/models/StyledComponent.js","../src/models/ComponentStyle.js","../src/constructors/styled.js","../src/constructors/keyframes.js","../src/constructors/injectGlobal.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 } from '../constants'\nimport { type ExtractedComp } from '../utils/extractCompsFromCSS'\nimport { splitByRules } from '../utils/stringifyRules'\nimport getNonce from '../utils/nonce'\nimport once from '../utils/once'\n\nimport {\n  type Names,\n  addNameForId,\n  resetIdNames,\n  hasNameForId,\n  stringifyNames,\n  cloneNames,\n} from '../utils/styleNames'\n\nimport {\n  sheetForTag,\n  safeInsertRule,\n  deleteRules,\n} from '../utils/insertRuleHelpers'\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}\n\n/* this error is used for makeStyleTag */\nconst parentNodeUnmountedErr =\n  process.env.NODE_ENV !== 'production'\n    ? `\nTrying to insert a new style tag, but the given Node is unmounted!\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`.trim()\n    : ''\n\n/* this error is used for tags */\nconst throwCloneTagErr = () => {\n  throw new Error(\n    process.env.NODE_ENV !== 'production'\n      ? `\nThe clone method cannot be used on the client!\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n`.trim()\n      : ''\n  )\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 = (\n  target: ?HTMLElement,\n  tagEl: ?Node,\n  insertBefore: ?boolean\n) => {\n  const el = document.createElement('style')\n  el.setAttribute(SC_ATTR, '')\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 Error(parentNodeUnmountedErr)\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) => (\n  additionalAttrs: ?string\n): string => {\n  const nonce = getNonce()\n  const attrs = [\n    nonce && `nonce=\"${nonce}\"`,\n    `${SC_ATTR}=\"${stringifyNames(names)}\"`,\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  }\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[] =>\n  Object.keys(markers)\n\n/* speedy tags utilise insertRule */\nconst makeSpeedyTag = (\n  el: HTMLStyleElement,\n  getImportRuleTag: ?() => Tag<any>\n): 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 whther 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)\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    styleTag: el,\n    getIds: getIdsFromMarkersFactory(markers),\n    hasNameForId: hasNameForId(names),\n    insertMarker,\n    insertRules,\n    removeRules,\n    css,\n    toHTML: wrapAsHtmlTag(css, names),\n    toElement: wrapAsElement(css, names),\n    clone: throwCloneTagErr,\n  }\n}\n\nconst makeBrowserTag = (\n  el: HTMLStyleElement,\n  getImportRuleTag: ?() => Tag<any>\n): Tag<Text> => {\n  const names = (Object.create(null): Object)\n  const markers = Object.create(null)\n\n  const extractImport = getImportRuleTag !== undefined\n  const makeTextNode = id => document.createTextNode(makeTextMarker(id))\n\n  /* indicates whther 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    // eslint-disable-next-line guard-for-in\n    for (const id in markers) {\n      str += markers[id].data\n    }\n    return str\n  }\n\n  return {\n    styleTag: el,\n    getIds: getIdsFromMarkersFactory(markers),\n    hasNameForId: hasNameForId(names),\n    insertMarker,\n    insertRules,\n    removeRules,\n    css,\n    toHTML: wrapAsHtmlTag(css, names),\n    toElement: wrapAsElement(css, names),\n    clone: throwCloneTagErr,\n  }\n}\n\nconst makeServerTagInternal = (namesArg, markersArg): Tag<[string]> => {\n  const names =\n    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 makeServerTagInternal(namesClone, markersClone)\n  }\n\n  const tag = {\n    styleTag: null,\n    getIds: getIdsFromMarkersFactory(markers),\n    hasNameForId: hasNameForId(names),\n    insertMarker,\n    insertRules,\n    removeRules,\n    css,\n    toHTML: wrapAsHtmlTag(css, names),\n    toElement: wrapAsElement(css, names),\n    clone,\n  }\n\n  return tag\n}\n\nconst makeServerTag = (): Tag<[string]> => makeServerTagInternal()\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    if (DISABLE_SPEEDY) {\n      return makeBrowserTag(el, getImportRuleTag)\n    } else {\n      return makeSpeedyTag(el, getImportRuleTag)\n    }\n  }\n\n  return makeServerTag()\n}\n\n/* wraps a given tag so that rehydration is performed once when necessary */\nexport const makeRehydrationTag = (\n  tag: Tag<any>,\n  els: HTMLStyleElement[],\n  extracted: ExtractedComp[],\n  names: string[],\n  immediateRehydration: boolean\n): Tag<any> => {\n  /* rehydration function that adds all rules to the new tag */\n  const rehydrate = once(() => {\n    /* add all extracted components to the new tag */\n    for (let i = 0; i < extracted.length; 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; i < els.length; i += 1) {\n      const el = els[i]\n      if (el.parentNode) {\n        el.parentNode.removeChild(el)\n      }\n    }\n  })\n\n  if (immediateRehydration) rehydrate()\n\n  return {\n    ...tag,\n    /* add rehydration hook to insertion methods */\n    insertMarker: id => {\n      rehydrate()\n      return tag.insertMarker(id)\n    },\n    insertRules: (id, cssRules, name) => {\n      rehydrate()\n      return tag.insertRules(id, cssRules, name)\n    },\n  }\n}\n","// @flow\nimport React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport StyleSheet from './StyleSheet'\nimport ServerStyleSheet from './ServerStyleSheet'\nimport { CONTEXT_KEY } from '../constants'\n\n/* this error is used for makeStyleTag */\nconst targetPropErr =\n  process.env.NODE_ENV !== 'production'\n    ? `\nThe StyleSheetManager expects a valid target or sheet prop!\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`.trim()\n    : ''\n\ntype Props = {\n  sheet?: StyleSheet | null,\n  target?: HTMLElement | null,\n}\n\nclass StyleSheetManager extends Component<Props, void> {\n  sheetInstance: StyleSheet\n\n  getChildContext() {\n    return { [CONTEXT_KEY]: this.sheetInstance }\n  }\n\n  componentWillMount() {\n    if (this.props.sheet) {\n      this.sheetInstance = this.props.sheet\n    } else if (this.props.target) {\n      this.sheetInstance = new StyleSheet(this.props.target)\n    } else {\n      throw new Error(targetPropErr)\n    }\n  }\n\n  render() {\n    /* eslint-disable react/prop-types */\n    // Flow v0.43.1 will report an error accessing the `children` property,\n    // but v0.47.0 will not. It is necessary to use a type cast instead of\n    // a \"fixme\" comment to satisfy both Flow versions.\n    return React.Children.only((this.props: any).children)\n  }\n}\n\nStyleSheetManager.childContextTypes = {\n  [CONTEXT_KEY]: PropTypes.oneOfType([\n    PropTypes.instanceOf(StyleSheet),\n    PropTypes.instanceOf(ServerStyleSheet),\n  ]).isRequired,\n}\n\nStyleSheetManager.propTypes = {\n  sheet: PropTypes.oneOfType([\n    PropTypes.instanceOf(StyleSheet),\n    PropTypes.instanceOf(ServerStyleSheet),\n  ]),\n  target: PropTypes.shape({\n    appendChild: PropTypes.func.isRequired,\n  }),\n}\n\nexport default StyleSheetManager\n","// @flow\nimport React, { Component, type Element } from 'react'\nimport PropTypes from 'prop-types'\nimport createBroadcast from '../utils/create-broadcast'\nimport type { Broadcast } from '../utils/create-broadcast'\nimport once from '../utils/once'\n\n// NOTE: DO NOT CHANGE, changing this is a semver major change!\nexport const CHANNEL = '__styled-components__'\nexport const CHANNEL_NEXT = `${CHANNEL}next__`\n\nexport const CONTEXT_CHANNEL_SHAPE = PropTypes.shape({\n  getTheme: PropTypes.func,\n  subscribe: PropTypes.func,\n  unsubscribe: PropTypes.func,\n})\n\nexport type Theme = { [key: string]: mixed }\ntype ThemeProviderProps = {|\n  children?: Element<any>,\n  theme: Theme | ((outerTheme: Theme) => void),\n|}\n\nlet warnChannelDeprecated\nif (process.env.NODE_ENV !== 'production') {\n  warnChannelDeprecated = once(() => {\n    // eslint-disable-next-line no-console\n    console.error(\n      `Warning: Usage of \\`context.${CHANNEL}\\` as a function is deprecated. It will be replaced with the object on \\`.context.${CHANNEL_NEXT}\\` in a future version.`\n    )\n  })\n}\n\nconst isFunction = test => typeof test === 'function'\n\n/**\n * Provide a theme to an entire react component tree via context and event listeners (have to do\n * both context and event emitter as pure components block context updates)\n */\nclass ThemeProvider extends Component<ThemeProviderProps, void> {\n  getTheme: (theme?: Theme | ((outerTheme: Theme) => void)) => Theme\n  outerTheme: Theme\n  unsubscribeToOuterId: string\n  props: ThemeProviderProps\n  broadcast: Broadcast\n  unsubscribeToOuterId: number = -1\n\n  constructor() {\n    super()\n    this.getTheme = this.getTheme.bind(this)\n  }\n\n  componentWillMount() {\n    // If there is a ThemeProvider wrapper anywhere around this theme provider, merge this theme\n    // with the outer theme\n    const outerContext = this.context[CHANNEL_NEXT]\n    if (outerContext !== undefined) {\n      this.unsubscribeToOuterId = outerContext.subscribe(theme => {\n        this.outerTheme = theme\n\n        if (this.broadcast !== undefined) {\n          this.publish(this.props.theme)\n        }\n      })\n    }\n\n    this.broadcast = createBroadcast(this.getTheme())\n  }\n\n  getChildContext() {\n    return {\n      ...this.context,\n      [CHANNEL_NEXT]: {\n        getTheme: this.getTheme,\n        subscribe: this.broadcast.subscribe,\n        unsubscribe: this.broadcast.unsubscribe,\n      },\n      [CHANNEL]: subscriber => {\n        if (process.env.NODE_ENV !== 'production') {\n          warnChannelDeprecated()\n        }\n\n        // Patch the old `subscribe` provide via `CHANNEL` for older clients.\n        const unsubscribeId = this.broadcast.subscribe(subscriber)\n        return () => this.broadcast.unsubscribe(unsubscribeId)\n      },\n    }\n  }\n\n  componentWillReceiveProps(nextProps: ThemeProviderProps) {\n    if (this.props.theme !== nextProps.theme) {\n      this.publish(nextProps.theme)\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.unsubscribeToOuterId !== -1) {\n      this.context[CHANNEL_NEXT].unsubscribe(this.unsubscribeToOuterId)\n    }\n  }\n\n  // Get the theme from the props, supporting both (outerTheme) => {} as well as object notation\n  getTheme(passedTheme: (outerTheme: Theme) => void | Theme) {\n    const theme = passedTheme || this.props.theme\n    if (isFunction(theme)) {\n      const mergedTheme = theme(this.outerTheme)\n      if (\n        process.env.NODE_ENV !== 'production' &&\n        (mergedTheme === null ||\n          Array.isArray(mergedTheme) ||\n          typeof mergedTheme !== 'object')\n      ) {\n        throw new Error(\n          process.env.NODE_ENV !== 'production'\n            ? '[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!'\n            : ''\n        )\n      }\n      return mergedTheme\n    }\n    if (theme === null || Array.isArray(theme) || typeof theme !== 'object') {\n      throw new Error(\n        process.env.NODE_ENV !== 'production'\n          ? '[ThemeProvider] Please make your theme prop an object'\n          : ''\n      )\n    }\n    return { ...this.outerTheme, ...(theme: Object) }\n  }\n\n  publish(theme: Theme | ((outerTheme: Theme) => void)) {\n    this.broadcast.publish(this.getTheme(theme))\n  }\n\n  render() {\n    if (!this.props.children) {\n      return null\n    }\n    return React.Children.only(this.props.children)\n  }\n}\n\nThemeProvider.childContextTypes = {\n  [CHANNEL]: PropTypes.func, // legacy\n  [CHANNEL_NEXT]: CONTEXT_CHANNEL_SHAPE,\n}\nThemeProvider.contextTypes = {\n  [CHANNEL_NEXT]: CONTEXT_CHANNEL_SHAPE,\n}\n\nexport default ThemeProvider\n","// @flow\n\nimport hoist from 'hoist-non-react-statics'\nimport PropTypes from 'prop-types'\nimport { Component, createElement } from 'react'\nimport { CONTEXT_KEY } from '../constants'\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 isStyledComponent from '../utils/isStyledComponent'\nimport isTag from '../utils/isTag'\nimport validAttr from '../utils/validAttr'\nimport hasInInheritanceChain from '../utils/hasInInheritanceChain'\nimport ServerStyleSheet from './ServerStyleSheet'\nimport StyleSheet from './StyleSheet'\nimport { CHANNEL, CHANNEL_NEXT, CONTEXT_CHANNEL_SHAPE } from './ThemeProvider'\n\nimport type { Theme } from './ThemeProvider'\nimport type { RuleSet, Target } from '../types'\n\n// HACK for generating all static styles without needing to allocate\n// an empty execution context every single time...\nconst STATIC_EXECUTION_CONTEXT = {}\n\ntype BaseState = {\n  theme?: ?Theme,\n  generatedClassName?: string,\n}\n\nexport default (ComponentStyle: Function, constructWithOptions: Function) => {\n  const identifiers = {}\n\n  /* We depend on components having unique IDs */\n  const generateId = (_displayName: string, parentComponentId: string) => {\n    const displayName =\n      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(\n      displayName + nr\n    )}`\n\n    return parentComponentId !== undefined\n      ? `${parentComponentId}-${componentId}`\n      : componentId\n  }\n\n  // $FlowFixMe\n  class BaseStyledComponent extends Component<*, BaseState> {\n    static target: Target\n    static styledComponentId: string\n    static attrs: Object\n    static componentStyle: Object\n    static defaultProps: Object\n    static warnTooManyClasses: Function\n\n    attrs = {}\n    state = {\n      theme: null,\n      generatedClassName: '',\n    }\n    unsubscribeId: number = -1\n\n    unsubscribeFromContext() {\n      if (this.unsubscribeId !== -1) {\n        this.context[CHANNEL_NEXT].unsubscribe(this.unsubscribeId)\n      }\n    }\n\n    buildExecutionContext(theme: any, props: any) {\n      const { attrs } = this.constructor\n      const context = { ...props, theme }\n      if (attrs === undefined) {\n        return context\n      }\n\n      this.attrs = Object.keys(attrs).reduce((acc, key) => {\n        const attr = attrs[key]\n        // eslint-disable-next-line no-param-reassign\n        acc[key] =\n          typeof attr === 'function' && !hasInInheritanceChain(attr, Component)\n            ? attr(context)\n            : attr\n        return acc\n      }, {})\n\n      return { ...context, ...this.attrs }\n    }\n\n    generateAndInjectStyles(theme: any, props: any) {\n      const { attrs, componentStyle, warnTooManyClasses } = this.constructor\n      const styleSheet = this.context[CONTEXT_KEY] || StyleSheet.master\n\n      // staticaly 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 === undefined) {\n        return componentStyle.generateAndInjectStyles(\n          STATIC_EXECUTION_CONTEXT,\n          styleSheet\n        )\n      } else {\n        const executionContext = this.buildExecutionContext(theme, props)\n        const className = componentStyle.generateAndInjectStyles(\n          executionContext,\n          styleSheet\n        )\n\n        if (\n          process.env.NODE_ENV !== 'production' &&\n          warnTooManyClasses !== undefined\n        ) {\n          warnTooManyClasses(className)\n        }\n\n        return className\n      }\n    }\n\n    componentWillMount() {\n      const { componentStyle } = this.constructor\n      const styledContext = this.context[CHANNEL_NEXT]\n\n      // If this is a staticaly-styled component, we don't need to the theme\n      // to generate or build styles.\n      if (componentStyle.isStatic) {\n        const generatedClassName = this.generateAndInjectStyles(\n          STATIC_EXECUTION_CONTEXT,\n          this.props\n        )\n        this.setState({ generatedClassName })\n        // If there is a theme in the context, subscribe to the event emitter. This\n        // is necessary due to pure components blocking context updates, this circumvents\n        // that by updating when an event is emitted\n      } else if (styledContext !== undefined) {\n        const { subscribe } = styledContext\n        this.unsubscribeId = subscribe(nextTheme => {\n          // This will be called once immediately\n          const theme = determineTheme(\n            this.props,\n            nextTheme,\n            this.constructor.defaultProps\n          )\n          const generatedClassName = this.generateAndInjectStyles(\n            theme,\n            this.props\n          )\n\n          this.setState({ theme, generatedClassName })\n        })\n      } else {\n        // eslint-disable-next-line react/prop-types\n        const theme = this.props.theme || {}\n        const generatedClassName = this.generateAndInjectStyles(\n          theme,\n          this.props\n        )\n        this.setState({ theme, generatedClassName })\n      }\n    }\n\n    componentWillReceiveProps(nextProps: {\n      theme?: Theme,\n      [key: string]: any,\n    }) {\n      // If this is a statically-styled component, we don't need to listen to\n      // props changes to update styles\n      const { componentStyle } = this.constructor\n      if (componentStyle.isStatic) {\n        return\n      }\n\n      this.setState(prevState => {\n        const theme = determineTheme(\n          nextProps,\n          prevState.theme,\n          this.constructor.defaultProps\n        )\n        const generatedClassName = this.generateAndInjectStyles(\n          theme,\n          nextProps\n        )\n\n        return { theme, generatedClassName }\n      })\n    }\n\n    componentWillUnmount() {\n      this.unsubscribeFromContext()\n    }\n\n    render() {\n      // eslint-disable-next-line react/prop-types\n      const { innerRef } = this.props\n      const { generatedClassName } = this.state\n      const { styledComponentId, target } = this.constructor\n\n      const isTargetTag = isTag(target)\n\n      const className = [\n        // eslint-disable-next-line react/prop-types\n        this.props.className,\n        styledComponentId,\n        this.attrs.className,\n        generatedClassName,\n      ]\n        .filter(Boolean)\n        .join(' ')\n\n      const baseProps: any = {\n        ...this.attrs,\n        className,\n      }\n\n      if (isStyledComponent(target)) {\n        baseProps.innerRef = innerRef\n      } else {\n        baseProps.ref = innerRef\n      }\n\n      const propsForElement = Object.keys(this.props).reduce(\n        (acc, propName) => {\n          // Don't pass through non HTML tags through to HTML elements\n          // always omit innerRef\n          if (\n            propName !== 'innerRef' &&\n            propName !== 'className' &&\n            (!isTargetTag || validAttr(propName))\n          ) {\n            // eslint-disable-next-line no-param-reassign\n            acc[propName] = this.props[propName]\n          }\n\n          return acc\n        },\n        baseProps\n      )\n\n      return createElement(target, propsForElement)\n    }\n  }\n\n  const createStyledComponent = (\n    target: Target,\n    options: Object,\n    rules: RuleSet\n  ) => {\n    const {\n      isClass = !isTag(target),\n      displayName = generateDisplayName(target),\n      componentId = generateId(options.displayName, options.parentComponentId),\n      ParentComponent = BaseStyledComponent,\n      rules: extendingRules,\n      attrs,\n    } = options\n\n    const styledComponentId =\n      options.displayName && options.componentId\n        ? `${escape(options.displayName)}-${options.componentId}`\n        : options.componentId || componentId\n\n    const componentStyle = new ComponentStyle(\n      extendingRules === undefined ? rules : extendingRules.concat(rules),\n      attrs,\n      styledComponentId\n    )\n\n    class StyledComponent extends ParentComponent {\n      static attrs = attrs\n      static componentStyle = componentStyle\n      static displayName = displayName\n      static styledComponentId = styledComponentId\n      static target = target\n\n      static contextTypes = {\n        [CHANNEL]: PropTypes.func,\n        [CHANNEL_NEXT]: CONTEXT_CHANNEL_SHAPE,\n        [CONTEXT_KEY]: PropTypes.oneOfType([\n          PropTypes.instanceOf(StyleSheet),\n          PropTypes.instanceOf(ServerStyleSheet),\n        ]),\n      }\n\n      static withComponent(tag: Target) {\n        const { componentId: previousComponentId, ...optionsToCopy } = options\n\n        const newComponentId =\n          previousComponentId &&\n          `${previousComponentId}-${\n            isTag(tag) ? tag : escape(getComponentName(tag))\n          }`\n\n        const newOptions = {\n          ...optionsToCopy,\n          componentId: newComponentId,\n          ParentComponent: StyledComponent,\n        }\n\n        return createStyledComponent(tag, newOptions, rules)\n      }\n\n      static get extend() {\n        const {\n          rules: rulesFromOptions,\n          componentId: parentComponentId,\n          ...optionsToCopy\n        } = options\n\n        const newRules =\n          rulesFromOptions === undefined\n            ? rules\n            : rulesFromOptions.concat(rules)\n\n        const newOptions = {\n          ...optionsToCopy,\n          rules: newRules,\n          parentComponentId,\n          ParentComponent: StyledComponent,\n        }\n\n        return constructWithOptions(createStyledComponent, target, newOptions)\n      }\n    }\n\n    if (process.env.NODE_ENV !== 'production') {\n      StyledComponent.warnTooManyClasses = createWarnTooManyClasses(displayName)\n    }\n\n    if (isClass) {\n      hoist(StyledComponent, target, {\n        // all SC-specific things should not be hoisted\n        attrs: true,\n        componentStyle: true,\n        displayName: true,\n        extend: true,\n        styledComponentId: true,\n        target: true,\n        warnTooManyClasses: true,\n        withComponent: true,\n      })\n    }\n\n    return StyledComponent\n  }\n\n  return createStyledComponent\n}\n","// @flow\nimport hashStr from '../vendor/glamor/hash'\n\nimport type { RuleSet, NameGenerator, Flattener, Stringifier } from '../types'\nimport StyleSheet from './StyleSheet'\nimport { IS_BROWSER } from '../constants'\nimport isStyledComponent from '../utils/isStyledComponent'\n\nconst areStylesCacheable = IS_BROWSER\n\nconst isStaticRules = (rules: RuleSet, attrs?: Object): boolean => {\n  for (let i = 0; i < rules.length; i += 1) {\n    const rule = rules[i]\n\n    // recursive case\n    if (Array.isArray(rule) && !isStaticRules(rule)) {\n      return false\n    } else if (typeof rule === 'function' && !isStyledComponent(rule)) {\n      // functions are allowed to be static if they're just being\n      // used to get the classname of a nested styled component\n      return false\n    }\n  }\n\n  if (attrs !== undefined) {\n    // eslint-disable-next-line guard-for-in, no-restricted-syntax\n    for (const key in attrs) {\n      const value = attrs[key]\n      if (typeof value === 'function') {\n        return false\n      }\n    }\n  }\n\n  return true\n}\n\nconst isHMREnabled =\n  typeof module !== 'undefined' &&\n  module.hot &&\n  process.env.NODE_ENV !== 'production'\n\n/*\n ComponentStyle is all the CSS-specific stuff, not\n the React-specific stuff.\n */\nexport default (\n  nameGenerator: NameGenerator,\n  flatten: Flattener,\n  stringifyRules: Stringifier\n) => {\n  /* combines hashStr (murmurhash) and nameGenerator for convenience */\n  const generateRuleHash = (str: string) => nameGenerator(hashStr(str))\n\n  class ComponentStyle {\n    rules: RuleSet\n    componentId: string\n    isStatic: boolean\n    lastClassName: ?string\n\n    constructor(rules: RuleSet, attrs?: Object, componentId: string) {\n      this.rules = rules\n      this.isStatic = !isHMREnabled && isStaticRules(rules, attrs)\n      this.componentId = componentId\n\n      if (!StyleSheet.master.hasId(componentId)) {\n        const placeholder =\n          process.env.NODE_ENV !== 'production' ? [`.${componentId} {}`] : []\n\n        StyleSheet.master.deferredInject(componentId, placeholder)\n      }\n    }\n\n    /*\n     * Flattens a rule set into valid CSS\n     * Hashes it, wraps the whole chunk in a .hash1234 {}\n     * Returns the hash to be injected on render()\n     * */\n    generateAndInjectStyles(executionContext: Object, styleSheet: StyleSheet) {\n      const { isStatic, componentId, lastClassName } = this\n      if (\n        areStylesCacheable &&\n        isStatic &&\n        lastClassName !== undefined &&\n        styleSheet.hasNameForId(componentId, ((lastClassName: any): string))\n      ) {\n        return lastClassName\n      }\n\n      const flatCSS = flatten(this.rules, executionContext)\n      const name = generateRuleHash(this.componentId + flatCSS.join(''))\n\n      if (!styleSheet.hasNameForId(componentId, name)) {\n        const css = stringifyRules(flatCSS, `.${name}`)\n        styleSheet.inject(this.componentId, css, name)\n      }\n\n      this.lastClassName = name\n      return name\n    }\n\n    static generateName(str: string): string {\n      return generateRuleHash(str)\n    }\n  }\n\n  return ComponentStyle\n}\n","// @flow\nimport type { Target } from '../types'\nimport domElements from '../utils/domElements'\n\nexport default (styledComponent: Function, constructWithOptions: Function) => {\n  const styled = (tag: Target) => constructWithOptions(styledComponent, tag)\n\n  // Shorthands for all valid HTML Elements\n  domElements.forEach(domElement => {\n    styled[domElement] = styled(domElement)\n  })\n\n  return styled\n}\n","// @flow\nimport hashStr from '../vendor/glamor/hash'\nimport type { Interpolation, NameGenerator, Stringifier } from '../types'\nimport StyleSheet from '../models/StyleSheet'\n\nconst replaceWhitespace = (str: string): string => str.replace(/\\s|\\\\n/g, '')\n\ntype KeyframesFn = (\n  strings: Array<string>,\n  ...interpolations: Array<Interpolation>\n) => string\n\nexport default (\n  nameGenerator: NameGenerator,\n  stringifyRules: Stringifier,\n  css: Function\n): KeyframesFn => (...arr): string => {\n  const styleSheet = StyleSheet.master\n  const rules = css(...arr)\n  const name = nameGenerator(hashStr(replaceWhitespace(JSON.stringify(rules))))\n  const id = `sc-keyframes-${name}`\n\n  if (!styleSheet.hasNameForId(id, name)) {\n    styleSheet.inject(id, stringifyRules(rules, name, '@keyframes'), name)\n  }\n\n  return name\n}\n","// @flow\nimport hashStr from '../vendor/glamor/hash'\nimport StyleSheet from '../models/StyleSheet'\nimport type { Interpolation, Stringifier } from '../types'\n\ntype InjectGlobalFn = (\n  strings: Array<string>,\n  ...interpolations: Array<Interpolation>\n) => void\n\nexport default (stringifyRules: Stringifier, css: Function) => {\n  const injectGlobal: InjectGlobalFn = (...args) => {\n    const styleSheet = StyleSheet.master\n    const rules = css(...args)\n    const hash = hashStr(JSON.stringify(rules))\n    const id = `sc-global-${hash}`\n\n    if (!styleSheet.hasId(id)) {\n      styleSheet.inject(id, stringifyRules(rules))\n    }\n  }\n\n  return injectGlobal\n}\n"],"names":["i","getChildContext","componentWillMount","unsubscribeId","unsubscribeFromContext","length"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA;;;;;;;;;;;;;;;;8BA+C8BA,QAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BClDtDC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACNF,kCAAA;AACA,yCAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA0BEC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACxBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAwCIC;;;kCAEAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BCpDwBC,QAA0BL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCA6ClD,OAAA,aAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACtDJ;;;;;;;;;;;;;;;;;;ACMA;;;;;;;;;;;;;CAAA;;;ACFA;;;;;;;;;;;;;CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/styled-components-no-parser.browser.es.js

@@ -1655,20 +1655,14 @@ var _StyledComponent = (function (ComponentStyle, constructWithOptions) {
   var generateId = function generateId(_displayName, parentComponentId) {
     var displayName = typeof _displayName !== 'string' ? 'sc' : escape(_displayName);
 
-    var componentId = void 0;
-
     /**
-     * only fall back to hashing the component injection order if
-     * a proper displayName isn't provided by the babel plugin
+     * This ensures uniqueness if two components happen to share
+     * the same displayName.
      */
-    if (!_displayName) {
-      var nr = (identifiers[displayName] || 0) + 1;
-      identifiers[displayName] = nr;
+    var nr = (identifiers[displayName] || 0) + 1;
+    identifiers[displayName] = nr;
 
-      componentId = displayName + '-' + ComponentStyle.generateName(displayName + nr);
-    } else {
-      componentId = displayName + '-' + ComponentStyle.generateName(displayName);
-    }
+    var componentId = displayName + '-' + ComponentStyle.generateName(displayName + nr);
 
     return parentComponentId !== undefined ? parentComponentId + '-' + componentId : componentId;
   };
@@ -1856,7 +1850,7 @@ var _StyledComponent = (function (ComponentStyle, constructWithOptions) {
         attrs = options.attrs;
 
 
-    var styledComponentId = options.displayName && options.componentId ? escape(options.displayName) + '-' + options.componentId : componentId;
+    var styledComponentId = options.displayName && options.componentId ? escape(options.displayName) + '-' + options.componentId : options.componentId || componentId;
 
     var componentStyle = new ComponentStyle(extendingRules === undefined ? rules : extendingRules.concat(rules), attrs, styledComponentId);
 

package/dist/styled-components-no-parser.browser.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled-components-no-parser.browser.es.js","sources":["../src/models/StyleTags.js","../src/models/StyleSheetManager.js","../src/models/ThemeProvider.js","../src/models/StyledComponent.js","../src/models/ComponentStyle.js","../src/constructors/styled.js","../src/constructors/keyframes.js","../src/constructors/injectGlobal.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 } from '../constants'\nimport { type ExtractedComp } from '../utils/extractCompsFromCSS'\nimport { splitByRules } from '../utils/stringifyRules'\nimport getNonce from '../utils/nonce'\nimport once from '../utils/once'\n\nimport {\n  type Names,\n  addNameForId,\n  resetIdNames,\n  hasNameForId,\n  stringifyNames,\n  cloneNames,\n} from '../utils/styleNames'\n\nimport {\n  sheetForTag,\n  safeInsertRule,\n  deleteRules,\n} from '../utils/insertRuleHelpers'\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}\n\n/* this error is used for makeStyleTag */\nconst parentNodeUnmountedErr =\n  process.env.NODE_ENV !== 'production'\n    ? `\nTrying to insert a new style tag, but the given Node is unmounted!\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`.trim()\n    : ''\n\n/* this error is used for tags */\nconst throwCloneTagErr = () => {\n  throw new Error(\n    process.env.NODE_ENV !== 'production'\n      ? `\nThe clone method cannot be used on the client!\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n`.trim()\n      : ''\n  )\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 = (\n  target: ?HTMLElement,\n  tagEl: ?Node,\n  insertBefore: ?boolean\n) => {\n  const el = document.createElement('style')\n  el.setAttribute(SC_ATTR, '')\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 Error(parentNodeUnmountedErr)\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) => (\n  additionalAttrs: ?string\n): string => {\n  const nonce = getNonce()\n  const attrs = [\n    nonce && `nonce=\"${nonce}\"`,\n    `${SC_ATTR}=\"${stringifyNames(names)}\"`,\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  }\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[] =>\n  Object.keys(markers)\n\n/* speedy tags utilise insertRule */\nconst makeSpeedyTag = (\n  el: HTMLStyleElement,\n  getImportRuleTag: ?() => Tag<any>\n): 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 whther 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)\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    styleTag: el,\n    getIds: getIdsFromMarkersFactory(markers),\n    hasNameForId: hasNameForId(names),\n    insertMarker,\n    insertRules,\n    removeRules,\n    css,\n    toHTML: wrapAsHtmlTag(css, names),\n    toElement: wrapAsElement(css, names),\n    clone: throwCloneTagErr,\n  }\n}\n\nconst makeBrowserTag = (\n  el: HTMLStyleElement,\n  getImportRuleTag: ?() => Tag<any>\n): Tag<Text> => {\n  const names = (Object.create(null): Object)\n  const markers = Object.create(null)\n\n  const extractImport = getImportRuleTag !== undefined\n  const makeTextNode = id => document.createTextNode(makeTextMarker(id))\n\n  /* indicates whther 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    // eslint-disable-next-line guard-for-in\n    for (const id in markers) {\n      str += markers[id].data\n    }\n    return str\n  }\n\n  return {\n    styleTag: el,\n    getIds: getIdsFromMarkersFactory(markers),\n    hasNameForId: hasNameForId(names),\n    insertMarker,\n    insertRules,\n    removeRules,\n    css,\n    toHTML: wrapAsHtmlTag(css, names),\n    toElement: wrapAsElement(css, names),\n    clone: throwCloneTagErr,\n  }\n}\n\nconst makeServerTagInternal = (namesArg, markersArg): Tag<[string]> => {\n  const names =\n    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 makeServerTagInternal(namesClone, markersClone)\n  }\n\n  const tag = {\n    styleTag: null,\n    getIds: getIdsFromMarkersFactory(markers),\n    hasNameForId: hasNameForId(names),\n    insertMarker,\n    insertRules,\n    removeRules,\n    css,\n    toHTML: wrapAsHtmlTag(css, names),\n    toElement: wrapAsElement(css, names),\n    clone,\n  }\n\n  return tag\n}\n\nconst makeServerTag = (): Tag<[string]> => makeServerTagInternal()\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    if (DISABLE_SPEEDY) {\n      return makeBrowserTag(el, getImportRuleTag)\n    } else {\n      return makeSpeedyTag(el, getImportRuleTag)\n    }\n  }\n\n  return makeServerTag()\n}\n\n/* wraps a given tag so that rehydration is performed once when necessary */\nexport const makeRehydrationTag = (\n  tag: Tag<any>,\n  els: HTMLStyleElement[],\n  extracted: ExtractedComp[],\n  names: string[],\n  immediateRehydration: boolean\n): Tag<any> => {\n  /* rehydration function that adds all rules to the new tag */\n  const rehydrate = once(() => {\n    /* add all extracted components to the new tag */\n    for (let i = 0; i < extracted.length; 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; i < els.length; i += 1) {\n      const el = els[i]\n      if (el.parentNode) {\n        el.parentNode.removeChild(el)\n      }\n    }\n  })\n\n  if (immediateRehydration) rehydrate()\n\n  return {\n    ...tag,\n    /* add rehydration hook to insertion methods */\n    insertMarker: id => {\n      rehydrate()\n      return tag.insertMarker(id)\n    },\n    insertRules: (id, cssRules, name) => {\n      rehydrate()\n      return tag.insertRules(id, cssRules, name)\n    },\n  }\n}\n","// @flow\nimport React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport StyleSheet from './StyleSheet'\nimport ServerStyleSheet from './ServerStyleSheet'\nimport { CONTEXT_KEY } from '../constants'\n\n/* this error is used for makeStyleTag */\nconst targetPropErr =\n  process.env.NODE_ENV !== 'production'\n    ? `\nThe StyleSheetManager expects a valid target or sheet prop!\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`.trim()\n    : ''\n\ntype Props = {\n  sheet?: StyleSheet | null,\n  target?: HTMLElement | null,\n}\n\nclass StyleSheetManager extends Component<Props, void> {\n  sheetInstance: StyleSheet\n\n  getChildContext() {\n    return { [CONTEXT_KEY]: this.sheetInstance }\n  }\n\n  componentWillMount() {\n    if (this.props.sheet) {\n      this.sheetInstance = this.props.sheet\n    } else if (this.props.target) {\n      this.sheetInstance = new StyleSheet(this.props.target)\n    } else {\n      throw new Error(targetPropErr)\n    }\n  }\n\n  render() {\n    /* eslint-disable react/prop-types */\n    // Flow v0.43.1 will report an error accessing the `children` property,\n    // but v0.47.0 will not. It is necessary to use a type cast instead of\n    // a \"fixme\" comment to satisfy both Flow versions.\n    return React.Children.only((this.props: any).children)\n  }\n}\n\nStyleSheetManager.childContextTypes = {\n  [CONTEXT_KEY]: PropTypes.oneOfType([\n    PropTypes.instanceOf(StyleSheet),\n    PropTypes.instanceOf(ServerStyleSheet),\n  ]).isRequired,\n}\n\nStyleSheetManager.propTypes = {\n  sheet: PropTypes.oneOfType([\n    PropTypes.instanceOf(StyleSheet),\n    PropTypes.instanceOf(ServerStyleSheet),\n  ]),\n  target: PropTypes.shape({\n    appendChild: PropTypes.func.isRequired,\n  }),\n}\n\nexport default StyleSheetManager\n","// @flow\nimport React, { Component, type Element } from 'react'\nimport PropTypes from 'prop-types'\nimport createBroadcast from '../utils/create-broadcast'\nimport type { Broadcast } from '../utils/create-broadcast'\nimport once from '../utils/once'\n\n// NOTE: DO NOT CHANGE, changing this is a semver major change!\nexport const CHANNEL = '__styled-components__'\nexport const CHANNEL_NEXT = `${CHANNEL}next__`\n\nexport const CONTEXT_CHANNEL_SHAPE = PropTypes.shape({\n  getTheme: PropTypes.func,\n  subscribe: PropTypes.func,\n  unsubscribe: PropTypes.func,\n})\n\nexport type Theme = { [key: string]: mixed }\ntype ThemeProviderProps = {|\n  children?: Element<any>,\n  theme: Theme | ((outerTheme: Theme) => void),\n|}\n\nlet warnChannelDeprecated\nif (process.env.NODE_ENV !== 'production') {\n  warnChannelDeprecated = once(() => {\n    // eslint-disable-next-line no-console\n    console.error(\n      `Warning: Usage of \\`context.${CHANNEL}\\` as a function is deprecated. It will be replaced with the object on \\`.context.${CHANNEL_NEXT}\\` in a future version.`\n    )\n  })\n}\n\nconst isFunction = test => typeof test === 'function'\n\n/**\n * Provide a theme to an entire react component tree via context and event listeners (have to do\n * both context and event emitter as pure components block context updates)\n */\nclass ThemeProvider extends Component<ThemeProviderProps, void> {\n  getTheme: (theme?: Theme | ((outerTheme: Theme) => void)) => Theme\n  outerTheme: Theme\n  unsubscribeToOuterId: string\n  props: ThemeProviderProps\n  broadcast: Broadcast\n  unsubscribeToOuterId: number = -1\n\n  constructor() {\n    super()\n    this.getTheme = this.getTheme.bind(this)\n  }\n\n  componentWillMount() {\n    // If there is a ThemeProvider wrapper anywhere around this theme provider, merge this theme\n    // with the outer theme\n    const outerContext = this.context[CHANNEL_NEXT]\n    if (outerContext !== undefined) {\n      this.unsubscribeToOuterId = outerContext.subscribe(theme => {\n        this.outerTheme = theme\n\n        if (this.broadcast !== undefined) {\n          this.publish(this.props.theme)\n        }\n      })\n    }\n\n    this.broadcast = createBroadcast(this.getTheme())\n  }\n\n  getChildContext() {\n    return {\n      ...this.context,\n      [CHANNEL_NEXT]: {\n        getTheme: this.getTheme,\n        subscribe: this.broadcast.subscribe,\n        unsubscribe: this.broadcast.unsubscribe,\n      },\n      [CHANNEL]: subscriber => {\n        if (process.env.NODE_ENV !== 'production') {\n          warnChannelDeprecated()\n        }\n\n        // Patch the old `subscribe` provide via `CHANNEL` for older clients.\n        const unsubscribeId = this.broadcast.subscribe(subscriber)\n        return () => this.broadcast.unsubscribe(unsubscribeId)\n      },\n    }\n  }\n\n  componentWillReceiveProps(nextProps: ThemeProviderProps) {\n    if (this.props.theme !== nextProps.theme) {\n      this.publish(nextProps.theme)\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.unsubscribeToOuterId !== -1) {\n      this.context[CHANNEL_NEXT].unsubscribe(this.unsubscribeToOuterId)\n    }\n  }\n\n  // Get the theme from the props, supporting both (outerTheme) => {} as well as object notation\n  getTheme(passedTheme: (outerTheme: Theme) => void | Theme) {\n    const theme = passedTheme || this.props.theme\n    if (isFunction(theme)) {\n      const mergedTheme = theme(this.outerTheme)\n      if (\n        process.env.NODE_ENV !== 'production' &&\n        (mergedTheme === null ||\n          Array.isArray(mergedTheme) ||\n          typeof mergedTheme !== 'object')\n      ) {\n        throw new Error(\n          process.env.NODE_ENV !== 'production'\n            ? '[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!'\n            : ''\n        )\n      }\n      return mergedTheme\n    }\n    if (theme === null || Array.isArray(theme) || typeof theme !== 'object') {\n      throw new Error(\n        process.env.NODE_ENV !== 'production'\n          ? '[ThemeProvider] Please make your theme prop an object'\n          : ''\n      )\n    }\n    return { ...this.outerTheme, ...(theme: Object) }\n  }\n\n  publish(theme: Theme | ((outerTheme: Theme) => void)) {\n    this.broadcast.publish(this.getTheme(theme))\n  }\n\n  render() {\n    if (!this.props.children) {\n      return null\n    }\n    return React.Children.only(this.props.children)\n  }\n}\n\nThemeProvider.childContextTypes = {\n  [CHANNEL]: PropTypes.func, // legacy\n  [CHANNEL_NEXT]: CONTEXT_CHANNEL_SHAPE,\n}\nThemeProvider.contextTypes = {\n  [CHANNEL_NEXT]: CONTEXT_CHANNEL_SHAPE,\n}\n\nexport default ThemeProvider\n","// @flow\n\nimport hoist from 'hoist-non-react-statics'\nimport PropTypes from 'prop-types'\nimport { Component, createElement } from 'react'\nimport { CONTEXT_KEY } from '../constants'\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 isStyledComponent from '../utils/isStyledComponent'\nimport isTag from '../utils/isTag'\nimport validAttr from '../utils/validAttr'\nimport hasInInheritanceChain from '../utils/hasInInheritanceChain'\nimport ServerStyleSheet from './ServerStyleSheet'\nimport StyleSheet from './StyleSheet'\nimport { CHANNEL, CHANNEL_NEXT, CONTEXT_CHANNEL_SHAPE } from './ThemeProvider'\n\nimport type { Theme } from './ThemeProvider'\nimport type { RuleSet, Target } from '../types'\n\n// HACK for generating all static styles without needing to allocate\n// an empty execution context every single time...\nconst STATIC_EXECUTION_CONTEXT = {}\n\ntype BaseState = {\n  theme?: ?Theme,\n  generatedClassName?: string,\n}\n\nexport default (ComponentStyle: Function, constructWithOptions: Function) => {\n  const identifiers = {}\n\n  /* We depend on components having unique IDs */\n  const generateId = (_displayName: string, parentComponentId: string) => {\n    const displayName =\n      typeof _displayName !== 'string' ? 'sc' : escape(_displayName)\n\n    let componentId\n\n    /**\n     * only fall back to hashing the component injection order if\n     * a proper displayName isn't provided by the babel plugin\n     */\n    if (!_displayName) {\n      const nr = (identifiers[displayName] || 0) + 1\n      identifiers[displayName] = nr\n\n      componentId = `${displayName}-${ComponentStyle.generateName(\n        displayName + nr\n      )}`\n    } else {\n      componentId = `${displayName}-${ComponentStyle.generateName(displayName)}`\n    }\n\n    return parentComponentId !== undefined\n      ? `${parentComponentId}-${componentId}`\n      : componentId\n  }\n\n  // $FlowFixMe\n  class BaseStyledComponent extends Component<*, BaseState> {\n    static target: Target\n    static styledComponentId: string\n    static attrs: Object\n    static componentStyle: Object\n    static defaultProps: Object\n    static warnTooManyClasses: Function\n\n    attrs = {}\n    state = {\n      theme: null,\n      generatedClassName: '',\n    }\n    unsubscribeId: number = -1\n\n    unsubscribeFromContext() {\n      if (this.unsubscribeId !== -1) {\n        this.context[CHANNEL_NEXT].unsubscribe(this.unsubscribeId)\n      }\n    }\n\n    buildExecutionContext(theme: any, props: any) {\n      const { attrs } = this.constructor\n      const context = { ...props, theme }\n      if (attrs === undefined) {\n        return context\n      }\n\n      this.attrs = Object.keys(attrs).reduce((acc, key) => {\n        const attr = attrs[key]\n        // eslint-disable-next-line no-param-reassign\n        acc[key] =\n          typeof attr === 'function' && !hasInInheritanceChain(attr, Component)\n            ? attr(context)\n            : attr\n        return acc\n      }, {})\n\n      return { ...context, ...this.attrs }\n    }\n\n    generateAndInjectStyles(theme: any, props: any) {\n      const { attrs, componentStyle, warnTooManyClasses } = this.constructor\n      const styleSheet = this.context[CONTEXT_KEY] || StyleSheet.master\n\n      // staticaly 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 === undefined) {\n        return componentStyle.generateAndInjectStyles(\n          STATIC_EXECUTION_CONTEXT,\n          styleSheet\n        )\n      } else {\n        const executionContext = this.buildExecutionContext(theme, props)\n        const className = componentStyle.generateAndInjectStyles(\n          executionContext,\n          styleSheet\n        )\n\n        if (\n          process.env.NODE_ENV !== 'production' &&\n          warnTooManyClasses !== undefined\n        ) {\n          warnTooManyClasses(className)\n        }\n\n        return className\n      }\n    }\n\n    componentWillMount() {\n      const { componentStyle } = this.constructor\n      const styledContext = this.context[CHANNEL_NEXT]\n\n      // If this is a staticaly-styled component, we don't need to the theme\n      // to generate or build styles.\n      if (componentStyle.isStatic) {\n        const generatedClassName = this.generateAndInjectStyles(\n          STATIC_EXECUTION_CONTEXT,\n          this.props\n        )\n        this.setState({ generatedClassName })\n        // If there is a theme in the context, subscribe to the event emitter. This\n        // is necessary due to pure components blocking context updates, this circumvents\n        // that by updating when an event is emitted\n      } else if (styledContext !== undefined) {\n        const { subscribe } = styledContext\n        this.unsubscribeId = subscribe(nextTheme => {\n          // This will be called once immediately\n          const theme = determineTheme(\n            this.props,\n            nextTheme,\n            this.constructor.defaultProps\n          )\n          const generatedClassName = this.generateAndInjectStyles(\n            theme,\n            this.props\n          )\n\n          this.setState({ theme, generatedClassName })\n        })\n      } else {\n        // eslint-disable-next-line react/prop-types\n        const theme = this.props.theme || {}\n        const generatedClassName = this.generateAndInjectStyles(\n          theme,\n          this.props\n        )\n        this.setState({ theme, generatedClassName })\n      }\n    }\n\n    componentWillReceiveProps(nextProps: {\n      theme?: Theme,\n      [key: string]: any,\n    }) {\n      // If this is a statically-styled component, we don't need to listen to\n      // props changes to update styles\n      const { componentStyle } = this.constructor\n      if (componentStyle.isStatic) {\n        return\n      }\n\n      this.setState(prevState => {\n        const theme = determineTheme(\n          nextProps,\n          prevState.theme,\n          this.constructor.defaultProps\n        )\n        const generatedClassName = this.generateAndInjectStyles(\n          theme,\n          nextProps\n        )\n\n        return { theme, generatedClassName }\n      })\n    }\n\n    componentWillUnmount() {\n      this.unsubscribeFromContext()\n    }\n\n    render() {\n      // eslint-disable-next-line react/prop-types\n      const { innerRef } = this.props\n      const { generatedClassName } = this.state\n      const { styledComponentId, target } = this.constructor\n\n      const isTargetTag = isTag(target)\n\n      const className = [\n        // eslint-disable-next-line react/prop-types\n        this.props.className,\n        styledComponentId,\n        this.attrs.className,\n        generatedClassName,\n      ]\n        .filter(Boolean)\n        .join(' ')\n\n      const baseProps: any = {\n        ...this.attrs,\n        className,\n      }\n\n      if (isStyledComponent(target)) {\n        baseProps.innerRef = innerRef\n      } else {\n        baseProps.ref = innerRef\n      }\n\n      const propsForElement = Object.keys(this.props).reduce(\n        (acc, propName) => {\n          // Don't pass through non HTML tags through to HTML elements\n          // always omit innerRef\n          if (\n            propName !== 'innerRef' &&\n            propName !== 'className' &&\n            (!isTargetTag || validAttr(propName))\n          ) {\n            // eslint-disable-next-line no-param-reassign\n            acc[propName] = this.props[propName]\n          }\n\n          return acc\n        },\n        baseProps\n      )\n\n      return createElement(target, propsForElement)\n    }\n  }\n\n  const createStyledComponent = (\n    target: Target,\n    options: Object,\n    rules: RuleSet\n  ) => {\n    const {\n      isClass = !isTag(target),\n      displayName = generateDisplayName(target),\n      componentId = generateId(options.displayName, options.parentComponentId),\n      ParentComponent = BaseStyledComponent,\n      rules: extendingRules,\n      attrs,\n    } = options\n\n    const styledComponentId =\n      options.displayName && options.componentId\n        ? `${escape(options.displayName)}-${options.componentId}`\n        : componentId\n\n    const componentStyle = new ComponentStyle(\n      extendingRules === undefined ? rules : extendingRules.concat(rules),\n      attrs,\n      styledComponentId\n    )\n\n    class StyledComponent extends ParentComponent {\n      static attrs = attrs\n      static componentStyle = componentStyle\n      static displayName = displayName\n      static styledComponentId = styledComponentId\n      static target = target\n\n      static contextTypes = {\n        [CHANNEL]: PropTypes.func,\n        [CHANNEL_NEXT]: CONTEXT_CHANNEL_SHAPE,\n        [CONTEXT_KEY]: PropTypes.oneOfType([\n          PropTypes.instanceOf(StyleSheet),\n          PropTypes.instanceOf(ServerStyleSheet),\n        ]),\n      }\n\n      static withComponent(tag: Target) {\n        const { componentId: previousComponentId, ...optionsToCopy } = options\n\n        const newComponentId =\n          previousComponentId &&\n          `${previousComponentId}-${\n            isTag(tag) ? tag : escape(getComponentName(tag))\n          }`\n\n        const newOptions = {\n          ...optionsToCopy,\n          componentId: newComponentId,\n          ParentComponent: StyledComponent,\n        }\n\n        return createStyledComponent(tag, newOptions, rules)\n      }\n\n      static get extend() {\n        const {\n          rules: rulesFromOptions,\n          componentId: parentComponentId,\n          ...optionsToCopy\n        } = options\n\n        const newRules =\n          rulesFromOptions === undefined\n            ? rules\n            : rulesFromOptions.concat(rules)\n\n        const newOptions = {\n          ...optionsToCopy,\n          rules: newRules,\n          parentComponentId,\n          ParentComponent: StyledComponent,\n        }\n\n        return constructWithOptions(createStyledComponent, target, newOptions)\n      }\n    }\n\n    if (process.env.NODE_ENV !== 'production') {\n      StyledComponent.warnTooManyClasses = createWarnTooManyClasses(displayName)\n    }\n\n    if (isClass) {\n      hoist(StyledComponent, target, {\n        // all SC-specific things should not be hoisted\n        attrs: true,\n        componentStyle: true,\n        displayName: true,\n        extend: true,\n        styledComponentId: true,\n        target: true,\n        warnTooManyClasses: true,\n        withComponent: true,\n      })\n    }\n\n    return StyledComponent\n  }\n\n  return createStyledComponent\n}\n","// @flow\nimport hashStr from '../vendor/glamor/hash'\n\nimport type { RuleSet, NameGenerator, Flattener, Stringifier } from '../types'\nimport StyleSheet from './StyleSheet'\nimport { IS_BROWSER } from '../constants'\nimport isStyledComponent from '../utils/isStyledComponent'\n\nconst areStylesCacheable = IS_BROWSER\n\nconst isStaticRules = (rules: RuleSet, attrs?: Object): boolean => {\n  for (let i = 0; i < rules.length; i += 1) {\n    const rule = rules[i]\n\n    // recursive case\n    if (Array.isArray(rule) && !isStaticRules(rule)) {\n      return false\n    } else if (typeof rule === 'function' && !isStyledComponent(rule)) {\n      // functions are allowed to be static if they're just being\n      // used to get the classname of a nested styled component\n      return false\n    }\n  }\n\n  if (attrs !== undefined) {\n    // eslint-disable-next-line guard-for-in, no-restricted-syntax\n    for (const key in attrs) {\n      const value = attrs[key]\n      if (typeof value === 'function') {\n        return false\n      }\n    }\n  }\n\n  return true\n}\n\nconst isHMREnabled =\n  typeof module !== 'undefined' &&\n  module.hot &&\n  process.env.NODE_ENV !== 'production'\n\n/*\n ComponentStyle is all the CSS-specific stuff, not\n the React-specific stuff.\n */\nexport default (\n  nameGenerator: NameGenerator,\n  flatten: Flattener,\n  stringifyRules: Stringifier\n) => {\n  /* combines hashStr (murmurhash) and nameGenerator for convenience */\n  const generateRuleHash = (str: string) => nameGenerator(hashStr(str))\n\n  class ComponentStyle {\n    rules: RuleSet\n    componentId: string\n    isStatic: boolean\n    lastClassName: ?string\n\n    constructor(rules: RuleSet, attrs?: Object, componentId: string) {\n      this.rules = rules\n      this.isStatic = !isHMREnabled && isStaticRules(rules, attrs)\n      this.componentId = componentId\n\n      if (!StyleSheet.master.hasId(componentId)) {\n        const placeholder =\n          process.env.NODE_ENV !== 'production' ? [`.${componentId} {}`] : []\n\n        StyleSheet.master.deferredInject(componentId, placeholder)\n      }\n    }\n\n    /*\n     * Flattens a rule set into valid CSS\n     * Hashes it, wraps the whole chunk in a .hash1234 {}\n     * Returns the hash to be injected on render()\n     * */\n    generateAndInjectStyles(executionContext: Object, styleSheet: StyleSheet) {\n      const { isStatic, componentId, lastClassName } = this\n      if (\n        areStylesCacheable &&\n        isStatic &&\n        lastClassName !== undefined &&\n        styleSheet.hasNameForId(componentId, ((lastClassName: any): string))\n      ) {\n        return lastClassName\n      }\n\n      const flatCSS = flatten(this.rules, executionContext)\n      const name = generateRuleHash(this.componentId + flatCSS.join(''))\n\n      if (!styleSheet.hasNameForId(componentId, name)) {\n        const css = stringifyRules(flatCSS, `.${name}`)\n        styleSheet.inject(this.componentId, css, name)\n      }\n\n      this.lastClassName = name\n      return name\n    }\n\n    static generateName(str: string): string {\n      return generateRuleHash(str)\n    }\n  }\n\n  return ComponentStyle\n}\n","// @flow\nimport type { Target } from '../types'\nimport domElements from '../utils/domElements'\n\nexport default (styledComponent: Function, constructWithOptions: Function) => {\n  const styled = (tag: Target) => constructWithOptions(styledComponent, tag)\n\n  // Shorthands for all valid HTML Elements\n  domElements.forEach(domElement => {\n    styled[domElement] = styled(domElement)\n  })\n\n  return styled\n}\n","// @flow\nimport hashStr from '../vendor/glamor/hash'\nimport type { Interpolation, NameGenerator, Stringifier } from '../types'\nimport StyleSheet from '../models/StyleSheet'\n\nconst replaceWhitespace = (str: string): string => str.replace(/\\s|\\\\n/g, '')\n\ntype KeyframesFn = (\n  strings: Array<string>,\n  ...interpolations: Array<Interpolation>\n) => string\n\nexport default (\n  nameGenerator: NameGenerator,\n  stringifyRules: Stringifier,\n  css: Function\n): KeyframesFn => (...arr): string => {\n  const styleSheet = StyleSheet.master\n  const rules = css(...arr)\n  const name = nameGenerator(hashStr(replaceWhitespace(JSON.stringify(rules))))\n  const id = `sc-keyframes-${name}`\n\n  if (!styleSheet.hasNameForId(id, name)) {\n    styleSheet.inject(id, stringifyRules(rules, name, '@keyframes'), name)\n  }\n\n  return name\n}\n","// @flow\nimport hashStr from '../vendor/glamor/hash'\nimport StyleSheet from '../models/StyleSheet'\nimport type { Interpolation, Stringifier } from '../types'\n\ntype InjectGlobalFn = (\n  strings: Array<string>,\n  ...interpolations: Array<Interpolation>\n) => void\n\nexport default (stringifyRules: Stringifier, css: Function) => {\n  const injectGlobal: InjectGlobalFn = (...args) => {\n    const styleSheet = StyleSheet.master\n    const rules = css(...args)\n    const hash = hashStr(JSON.stringify(rules))\n    const id = `sc-global-${hash}`\n\n    if (!styleSheet.hasId(id)) {\n      styleSheet.inject(id, stringifyRules(rules))\n    }\n  }\n\n  return injectGlobal\n}\n"],"names":["i","getChildContext","componentWillMount","unsubscribeId","unsubscribeFromContext","length"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA;;;;;;;;;;;;;;;;8BA+C8BA,QAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BClDtDC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACNF,kCAAA;AACA,yCAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA0BEC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACxBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eA8CIC;;;kCAEAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BC1DwBC,QAA0BL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCA6ClD,OAAA,aAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACtDJ;;;;;;;;;;;;;;;;;;ACMA;;;;;;;;;;;;;CAAA;;;ACFA;;;;;;;;;;;;;CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled-components-no-parser.browser.es.js","sources":["../src/models/StyleTags.js","../src/models/StyleSheetManager.js","../src/models/ThemeProvider.js","../src/models/StyledComponent.js","../src/models/ComponentStyle.js","../src/constructors/styled.js","../src/constructors/keyframes.js","../src/constructors/injectGlobal.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 } from '../constants'\nimport { type ExtractedComp } from '../utils/extractCompsFromCSS'\nimport { splitByRules } from '../utils/stringifyRules'\nimport getNonce from '../utils/nonce'\nimport once from '../utils/once'\n\nimport {\n  type Names,\n  addNameForId,\n  resetIdNames,\n  hasNameForId,\n  stringifyNames,\n  cloneNames,\n} from '../utils/styleNames'\n\nimport {\n  sheetForTag,\n  safeInsertRule,\n  deleteRules,\n} from '../utils/insertRuleHelpers'\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}\n\n/* this error is used for makeStyleTag */\nconst parentNodeUnmountedErr =\n  process.env.NODE_ENV !== 'production'\n    ? `\nTrying to insert a new style tag, but the given Node is unmounted!\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`.trim()\n    : ''\n\n/* this error is used for tags */\nconst throwCloneTagErr = () => {\n  throw new Error(\n    process.env.NODE_ENV !== 'production'\n      ? `\nThe clone method cannot be used on the client!\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n`.trim()\n      : ''\n  )\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 = (\n  target: ?HTMLElement,\n  tagEl: ?Node,\n  insertBefore: ?boolean\n) => {\n  const el = document.createElement('style')\n  el.setAttribute(SC_ATTR, '')\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 Error(parentNodeUnmountedErr)\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) => (\n  additionalAttrs: ?string\n): string => {\n  const nonce = getNonce()\n  const attrs = [\n    nonce && `nonce=\"${nonce}\"`,\n    `${SC_ATTR}=\"${stringifyNames(names)}\"`,\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  }\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[] =>\n  Object.keys(markers)\n\n/* speedy tags utilise insertRule */\nconst makeSpeedyTag = (\n  el: HTMLStyleElement,\n  getImportRuleTag: ?() => Tag<any>\n): 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 whther 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)\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    styleTag: el,\n    getIds: getIdsFromMarkersFactory(markers),\n    hasNameForId: hasNameForId(names),\n    insertMarker,\n    insertRules,\n    removeRules,\n    css,\n    toHTML: wrapAsHtmlTag(css, names),\n    toElement: wrapAsElement(css, names),\n    clone: throwCloneTagErr,\n  }\n}\n\nconst makeBrowserTag = (\n  el: HTMLStyleElement,\n  getImportRuleTag: ?() => Tag<any>\n): Tag<Text> => {\n  const names = (Object.create(null): Object)\n  const markers = Object.create(null)\n\n  const extractImport = getImportRuleTag !== undefined\n  const makeTextNode = id => document.createTextNode(makeTextMarker(id))\n\n  /* indicates whther 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    // eslint-disable-next-line guard-for-in\n    for (const id in markers) {\n      str += markers[id].data\n    }\n    return str\n  }\n\n  return {\n    styleTag: el,\n    getIds: getIdsFromMarkersFactory(markers),\n    hasNameForId: hasNameForId(names),\n    insertMarker,\n    insertRules,\n    removeRules,\n    css,\n    toHTML: wrapAsHtmlTag(css, names),\n    toElement: wrapAsElement(css, names),\n    clone: throwCloneTagErr,\n  }\n}\n\nconst makeServerTagInternal = (namesArg, markersArg): Tag<[string]> => {\n  const names =\n    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 makeServerTagInternal(namesClone, markersClone)\n  }\n\n  const tag = {\n    styleTag: null,\n    getIds: getIdsFromMarkersFactory(markers),\n    hasNameForId: hasNameForId(names),\n    insertMarker,\n    insertRules,\n    removeRules,\n    css,\n    toHTML: wrapAsHtmlTag(css, names),\n    toElement: wrapAsElement(css, names),\n    clone,\n  }\n\n  return tag\n}\n\nconst makeServerTag = (): Tag<[string]> => makeServerTagInternal()\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    if (DISABLE_SPEEDY) {\n      return makeBrowserTag(el, getImportRuleTag)\n    } else {\n      return makeSpeedyTag(el, getImportRuleTag)\n    }\n  }\n\n  return makeServerTag()\n}\n\n/* wraps a given tag so that rehydration is performed once when necessary */\nexport const makeRehydrationTag = (\n  tag: Tag<any>,\n  els: HTMLStyleElement[],\n  extracted: ExtractedComp[],\n  names: string[],\n  immediateRehydration: boolean\n): Tag<any> => {\n  /* rehydration function that adds all rules to the new tag */\n  const rehydrate = once(() => {\n    /* add all extracted components to the new tag */\n    for (let i = 0; i < extracted.length; 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; i < els.length; i += 1) {\n      const el = els[i]\n      if (el.parentNode) {\n        el.parentNode.removeChild(el)\n      }\n    }\n  })\n\n  if (immediateRehydration) rehydrate()\n\n  return {\n    ...tag,\n    /* add rehydration hook to insertion methods */\n    insertMarker: id => {\n      rehydrate()\n      return tag.insertMarker(id)\n    },\n    insertRules: (id, cssRules, name) => {\n      rehydrate()\n      return tag.insertRules(id, cssRules, name)\n    },\n  }\n}\n","// @flow\nimport React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport StyleSheet from './StyleSheet'\nimport ServerStyleSheet from './ServerStyleSheet'\nimport { CONTEXT_KEY } from '../constants'\n\n/* this error is used for makeStyleTag */\nconst targetPropErr =\n  process.env.NODE_ENV !== 'production'\n    ? `\nThe StyleSheetManager expects a valid target or sheet prop!\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`.trim()\n    : ''\n\ntype Props = {\n  sheet?: StyleSheet | null,\n  target?: HTMLElement | null,\n}\n\nclass StyleSheetManager extends Component<Props, void> {\n  sheetInstance: StyleSheet\n\n  getChildContext() {\n    return { [CONTEXT_KEY]: this.sheetInstance }\n  }\n\n  componentWillMount() {\n    if (this.props.sheet) {\n      this.sheetInstance = this.props.sheet\n    } else if (this.props.target) {\n      this.sheetInstance = new StyleSheet(this.props.target)\n    } else {\n      throw new Error(targetPropErr)\n    }\n  }\n\n  render() {\n    /* eslint-disable react/prop-types */\n    // Flow v0.43.1 will report an error accessing the `children` property,\n    // but v0.47.0 will not. It is necessary to use a type cast instead of\n    // a \"fixme\" comment to satisfy both Flow versions.\n    return React.Children.only((this.props: any).children)\n  }\n}\n\nStyleSheetManager.childContextTypes = {\n  [CONTEXT_KEY]: PropTypes.oneOfType([\n    PropTypes.instanceOf(StyleSheet),\n    PropTypes.instanceOf(ServerStyleSheet),\n  ]).isRequired,\n}\n\nStyleSheetManager.propTypes = {\n  sheet: PropTypes.oneOfType([\n    PropTypes.instanceOf(StyleSheet),\n    PropTypes.instanceOf(ServerStyleSheet),\n  ]),\n  target: PropTypes.shape({\n    appendChild: PropTypes.func.isRequired,\n  }),\n}\n\nexport default StyleSheetManager\n","// @flow\nimport React, { Component, type Element } from 'react'\nimport PropTypes from 'prop-types'\nimport createBroadcast from '../utils/create-broadcast'\nimport type { Broadcast } from '../utils/create-broadcast'\nimport once from '../utils/once'\n\n// NOTE: DO NOT CHANGE, changing this is a semver major change!\nexport const CHANNEL = '__styled-components__'\nexport const CHANNEL_NEXT = `${CHANNEL}next__`\n\nexport const CONTEXT_CHANNEL_SHAPE = PropTypes.shape({\n  getTheme: PropTypes.func,\n  subscribe: PropTypes.func,\n  unsubscribe: PropTypes.func,\n})\n\nexport type Theme = { [key: string]: mixed }\ntype ThemeProviderProps = {|\n  children?: Element<any>,\n  theme: Theme | ((outerTheme: Theme) => void),\n|}\n\nlet warnChannelDeprecated\nif (process.env.NODE_ENV !== 'production') {\n  warnChannelDeprecated = once(() => {\n    // eslint-disable-next-line no-console\n    console.error(\n      `Warning: Usage of \\`context.${CHANNEL}\\` as a function is deprecated. It will be replaced with the object on \\`.context.${CHANNEL_NEXT}\\` in a future version.`\n    )\n  })\n}\n\nconst isFunction = test => typeof test === 'function'\n\n/**\n * Provide a theme to an entire react component tree via context and event listeners (have to do\n * both context and event emitter as pure components block context updates)\n */\nclass ThemeProvider extends Component<ThemeProviderProps, void> {\n  getTheme: (theme?: Theme | ((outerTheme: Theme) => void)) => Theme\n  outerTheme: Theme\n  unsubscribeToOuterId: string\n  props: ThemeProviderProps\n  broadcast: Broadcast\n  unsubscribeToOuterId: number = -1\n\n  constructor() {\n    super()\n    this.getTheme = this.getTheme.bind(this)\n  }\n\n  componentWillMount() {\n    // If there is a ThemeProvider wrapper anywhere around this theme provider, merge this theme\n    // with the outer theme\n    const outerContext = this.context[CHANNEL_NEXT]\n    if (outerContext !== undefined) {\n      this.unsubscribeToOuterId = outerContext.subscribe(theme => {\n        this.outerTheme = theme\n\n        if (this.broadcast !== undefined) {\n          this.publish(this.props.theme)\n        }\n      })\n    }\n\n    this.broadcast = createBroadcast(this.getTheme())\n  }\n\n  getChildContext() {\n    return {\n      ...this.context,\n      [CHANNEL_NEXT]: {\n        getTheme: this.getTheme,\n        subscribe: this.broadcast.subscribe,\n        unsubscribe: this.broadcast.unsubscribe,\n      },\n      [CHANNEL]: subscriber => {\n        if (process.env.NODE_ENV !== 'production') {\n          warnChannelDeprecated()\n        }\n\n        // Patch the old `subscribe` provide via `CHANNEL` for older clients.\n        const unsubscribeId = this.broadcast.subscribe(subscriber)\n        return () => this.broadcast.unsubscribe(unsubscribeId)\n      },\n    }\n  }\n\n  componentWillReceiveProps(nextProps: ThemeProviderProps) {\n    if (this.props.theme !== nextProps.theme) {\n      this.publish(nextProps.theme)\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.unsubscribeToOuterId !== -1) {\n      this.context[CHANNEL_NEXT].unsubscribe(this.unsubscribeToOuterId)\n    }\n  }\n\n  // Get the theme from the props, supporting both (outerTheme) => {} as well as object notation\n  getTheme(passedTheme: (outerTheme: Theme) => void | Theme) {\n    const theme = passedTheme || this.props.theme\n    if (isFunction(theme)) {\n      const mergedTheme = theme(this.outerTheme)\n      if (\n        process.env.NODE_ENV !== 'production' &&\n        (mergedTheme === null ||\n          Array.isArray(mergedTheme) ||\n          typeof mergedTheme !== 'object')\n      ) {\n        throw new Error(\n          process.env.NODE_ENV !== 'production'\n            ? '[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!'\n            : ''\n        )\n      }\n      return mergedTheme\n    }\n    if (theme === null || Array.isArray(theme) || typeof theme !== 'object') {\n      throw new Error(\n        process.env.NODE_ENV !== 'production'\n          ? '[ThemeProvider] Please make your theme prop an object'\n          : ''\n      )\n    }\n    return { ...this.outerTheme, ...(theme: Object) }\n  }\n\n  publish(theme: Theme | ((outerTheme: Theme) => void)) {\n    this.broadcast.publish(this.getTheme(theme))\n  }\n\n  render() {\n    if (!this.props.children) {\n      return null\n    }\n    return React.Children.only(this.props.children)\n  }\n}\n\nThemeProvider.childContextTypes = {\n  [CHANNEL]: PropTypes.func, // legacy\n  [CHANNEL_NEXT]: CONTEXT_CHANNEL_SHAPE,\n}\nThemeProvider.contextTypes = {\n  [CHANNEL_NEXT]: CONTEXT_CHANNEL_SHAPE,\n}\n\nexport default ThemeProvider\n","// @flow\n\nimport hoist from 'hoist-non-react-statics'\nimport PropTypes from 'prop-types'\nimport { Component, createElement } from 'react'\nimport { CONTEXT_KEY } from '../constants'\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 isStyledComponent from '../utils/isStyledComponent'\nimport isTag from '../utils/isTag'\nimport validAttr from '../utils/validAttr'\nimport hasInInheritanceChain from '../utils/hasInInheritanceChain'\nimport ServerStyleSheet from './ServerStyleSheet'\nimport StyleSheet from './StyleSheet'\nimport { CHANNEL, CHANNEL_NEXT, CONTEXT_CHANNEL_SHAPE } from './ThemeProvider'\n\nimport type { Theme } from './ThemeProvider'\nimport type { RuleSet, Target } from '../types'\n\n// HACK for generating all static styles without needing to allocate\n// an empty execution context every single time...\nconst STATIC_EXECUTION_CONTEXT = {}\n\ntype BaseState = {\n  theme?: ?Theme,\n  generatedClassName?: string,\n}\n\nexport default (ComponentStyle: Function, constructWithOptions: Function) => {\n  const identifiers = {}\n\n  /* We depend on components having unique IDs */\n  const generateId = (_displayName: string, parentComponentId: string) => {\n    const displayName =\n      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(\n      displayName + nr\n    )}`\n\n    return parentComponentId !== undefined\n      ? `${parentComponentId}-${componentId}`\n      : componentId\n  }\n\n  // $FlowFixMe\n  class BaseStyledComponent extends Component<*, BaseState> {\n    static target: Target\n    static styledComponentId: string\n    static attrs: Object\n    static componentStyle: Object\n    static defaultProps: Object\n    static warnTooManyClasses: Function\n\n    attrs = {}\n    state = {\n      theme: null,\n      generatedClassName: '',\n    }\n    unsubscribeId: number = -1\n\n    unsubscribeFromContext() {\n      if (this.unsubscribeId !== -1) {\n        this.context[CHANNEL_NEXT].unsubscribe(this.unsubscribeId)\n      }\n    }\n\n    buildExecutionContext(theme: any, props: any) {\n      const { attrs } = this.constructor\n      const context = { ...props, theme }\n      if (attrs === undefined) {\n        return context\n      }\n\n      this.attrs = Object.keys(attrs).reduce((acc, key) => {\n        const attr = attrs[key]\n        // eslint-disable-next-line no-param-reassign\n        acc[key] =\n          typeof attr === 'function' && !hasInInheritanceChain(attr, Component)\n            ? attr(context)\n            : attr\n        return acc\n      }, {})\n\n      return { ...context, ...this.attrs }\n    }\n\n    generateAndInjectStyles(theme: any, props: any) {\n      const { attrs, componentStyle, warnTooManyClasses } = this.constructor\n      const styleSheet = this.context[CONTEXT_KEY] || StyleSheet.master\n\n      // staticaly 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 === undefined) {\n        return componentStyle.generateAndInjectStyles(\n          STATIC_EXECUTION_CONTEXT,\n          styleSheet\n        )\n      } else {\n        const executionContext = this.buildExecutionContext(theme, props)\n        const className = componentStyle.generateAndInjectStyles(\n          executionContext,\n          styleSheet\n        )\n\n        if (\n          process.env.NODE_ENV !== 'production' &&\n          warnTooManyClasses !== undefined\n        ) {\n          warnTooManyClasses(className)\n        }\n\n        return className\n      }\n    }\n\n    componentWillMount() {\n      const { componentStyle } = this.constructor\n      const styledContext = this.context[CHANNEL_NEXT]\n\n      // If this is a staticaly-styled component, we don't need to the theme\n      // to generate or build styles.\n      if (componentStyle.isStatic) {\n        const generatedClassName = this.generateAndInjectStyles(\n          STATIC_EXECUTION_CONTEXT,\n          this.props\n        )\n        this.setState({ generatedClassName })\n        // If there is a theme in the context, subscribe to the event emitter. This\n        // is necessary due to pure components blocking context updates, this circumvents\n        // that by updating when an event is emitted\n      } else if (styledContext !== undefined) {\n        const { subscribe } = styledContext\n        this.unsubscribeId = subscribe(nextTheme => {\n          // This will be called once immediately\n          const theme = determineTheme(\n            this.props,\n            nextTheme,\n            this.constructor.defaultProps\n          )\n          const generatedClassName = this.generateAndInjectStyles(\n            theme,\n            this.props\n          )\n\n          this.setState({ theme, generatedClassName })\n        })\n      } else {\n        // eslint-disable-next-line react/prop-types\n        const theme = this.props.theme || {}\n        const generatedClassName = this.generateAndInjectStyles(\n          theme,\n          this.props\n        )\n        this.setState({ theme, generatedClassName })\n      }\n    }\n\n    componentWillReceiveProps(nextProps: {\n      theme?: Theme,\n      [key: string]: any,\n    }) {\n      // If this is a statically-styled component, we don't need to listen to\n      // props changes to update styles\n      const { componentStyle } = this.constructor\n      if (componentStyle.isStatic) {\n        return\n      }\n\n      this.setState(prevState => {\n        const theme = determineTheme(\n          nextProps,\n          prevState.theme,\n          this.constructor.defaultProps\n        )\n        const generatedClassName = this.generateAndInjectStyles(\n          theme,\n          nextProps\n        )\n\n        return { theme, generatedClassName }\n      })\n    }\n\n    componentWillUnmount() {\n      this.unsubscribeFromContext()\n    }\n\n    render() {\n      // eslint-disable-next-line react/prop-types\n      const { innerRef } = this.props\n      const { generatedClassName } = this.state\n      const { styledComponentId, target } = this.constructor\n\n      const isTargetTag = isTag(target)\n\n      const className = [\n        // eslint-disable-next-line react/prop-types\n        this.props.className,\n        styledComponentId,\n        this.attrs.className,\n        generatedClassName,\n      ]\n        .filter(Boolean)\n        .join(' ')\n\n      const baseProps: any = {\n        ...this.attrs,\n        className,\n      }\n\n      if (isStyledComponent(target)) {\n        baseProps.innerRef = innerRef\n      } else {\n        baseProps.ref = innerRef\n      }\n\n      const propsForElement = Object.keys(this.props).reduce(\n        (acc, propName) => {\n          // Don't pass through non HTML tags through to HTML elements\n          // always omit innerRef\n          if (\n            propName !== 'innerRef' &&\n            propName !== 'className' &&\n            (!isTargetTag || validAttr(propName))\n          ) {\n            // eslint-disable-next-line no-param-reassign\n            acc[propName] = this.props[propName]\n          }\n\n          return acc\n        },\n        baseProps\n      )\n\n      return createElement(target, propsForElement)\n    }\n  }\n\n  const createStyledComponent = (\n    target: Target,\n    options: Object,\n    rules: RuleSet\n  ) => {\n    const {\n      isClass = !isTag(target),\n      displayName = generateDisplayName(target),\n      componentId = generateId(options.displayName, options.parentComponentId),\n      ParentComponent = BaseStyledComponent,\n      rules: extendingRules,\n      attrs,\n    } = options\n\n    const styledComponentId =\n      options.displayName && options.componentId\n        ? `${escape(options.displayName)}-${options.componentId}`\n        : options.componentId || componentId\n\n    const componentStyle = new ComponentStyle(\n      extendingRules === undefined ? rules : extendingRules.concat(rules),\n      attrs,\n      styledComponentId\n    )\n\n    class StyledComponent extends ParentComponent {\n      static attrs = attrs\n      static componentStyle = componentStyle\n      static displayName = displayName\n      static styledComponentId = styledComponentId\n      static target = target\n\n      static contextTypes = {\n        [CHANNEL]: PropTypes.func,\n        [CHANNEL_NEXT]: CONTEXT_CHANNEL_SHAPE,\n        [CONTEXT_KEY]: PropTypes.oneOfType([\n          PropTypes.instanceOf(StyleSheet),\n          PropTypes.instanceOf(ServerStyleSheet),\n        ]),\n      }\n\n      static withComponent(tag: Target) {\n        const { componentId: previousComponentId, ...optionsToCopy } = options\n\n        const newComponentId =\n          previousComponentId &&\n          `${previousComponentId}-${\n            isTag(tag) ? tag : escape(getComponentName(tag))\n          }`\n\n        const newOptions = {\n          ...optionsToCopy,\n          componentId: newComponentId,\n          ParentComponent: StyledComponent,\n        }\n\n        return createStyledComponent(tag, newOptions, rules)\n      }\n\n      static get extend() {\n        const {\n          rules: rulesFromOptions,\n          componentId: parentComponentId,\n          ...optionsToCopy\n        } = options\n\n        const newRules =\n          rulesFromOptions === undefined\n            ? rules\n            : rulesFromOptions.concat(rules)\n\n        const newOptions = {\n          ...optionsToCopy,\n          rules: newRules,\n          parentComponentId,\n          ParentComponent: StyledComponent,\n        }\n\n        return constructWithOptions(createStyledComponent, target, newOptions)\n      }\n    }\n\n    if (process.env.NODE_ENV !== 'production') {\n      StyledComponent.warnTooManyClasses = createWarnTooManyClasses(displayName)\n    }\n\n    if (isClass) {\n      hoist(StyledComponent, target, {\n        // all SC-specific things should not be hoisted\n        attrs: true,\n        componentStyle: true,\n        displayName: true,\n        extend: true,\n        styledComponentId: true,\n        target: true,\n        warnTooManyClasses: true,\n        withComponent: true,\n      })\n    }\n\n    return StyledComponent\n  }\n\n  return createStyledComponent\n}\n","// @flow\nimport hashStr from '../vendor/glamor/hash'\n\nimport type { RuleSet, NameGenerator, Flattener, Stringifier } from '../types'\nimport StyleSheet from './StyleSheet'\nimport { IS_BROWSER } from '../constants'\nimport isStyledComponent from '../utils/isStyledComponent'\n\nconst areStylesCacheable = IS_BROWSER\n\nconst isStaticRules = (rules: RuleSet, attrs?: Object): boolean => {\n  for (let i = 0; i < rules.length; i += 1) {\n    const rule = rules[i]\n\n    // recursive case\n    if (Array.isArray(rule) && !isStaticRules(rule)) {\n      return false\n    } else if (typeof rule === 'function' && !isStyledComponent(rule)) {\n      // functions are allowed to be static if they're just being\n      // used to get the classname of a nested styled component\n      return false\n    }\n  }\n\n  if (attrs !== undefined) {\n    // eslint-disable-next-line guard-for-in, no-restricted-syntax\n    for (const key in attrs) {\n      const value = attrs[key]\n      if (typeof value === 'function') {\n        return false\n      }\n    }\n  }\n\n  return true\n}\n\nconst isHMREnabled =\n  typeof module !== 'undefined' &&\n  module.hot &&\n  process.env.NODE_ENV !== 'production'\n\n/*\n ComponentStyle is all the CSS-specific stuff, not\n the React-specific stuff.\n */\nexport default (\n  nameGenerator: NameGenerator,\n  flatten: Flattener,\n  stringifyRules: Stringifier\n) => {\n  /* combines hashStr (murmurhash) and nameGenerator for convenience */\n  const generateRuleHash = (str: string) => nameGenerator(hashStr(str))\n\n  class ComponentStyle {\n    rules: RuleSet\n    componentId: string\n    isStatic: boolean\n    lastClassName: ?string\n\n    constructor(rules: RuleSet, attrs?: Object, componentId: string) {\n      this.rules = rules\n      this.isStatic = !isHMREnabled && isStaticRules(rules, attrs)\n      this.componentId = componentId\n\n      if (!StyleSheet.master.hasId(componentId)) {\n        const placeholder =\n          process.env.NODE_ENV !== 'production' ? [`.${componentId} {}`] : []\n\n        StyleSheet.master.deferredInject(componentId, placeholder)\n      }\n    }\n\n    /*\n     * Flattens a rule set into valid CSS\n     * Hashes it, wraps the whole chunk in a .hash1234 {}\n     * Returns the hash to be injected on render()\n     * */\n    generateAndInjectStyles(executionContext: Object, styleSheet: StyleSheet) {\n      const { isStatic, componentId, lastClassName } = this\n      if (\n        areStylesCacheable &&\n        isStatic &&\n        lastClassName !== undefined &&\n        styleSheet.hasNameForId(componentId, ((lastClassName: any): string))\n      ) {\n        return lastClassName\n      }\n\n      const flatCSS = flatten(this.rules, executionContext)\n      const name = generateRuleHash(this.componentId + flatCSS.join(''))\n\n      if (!styleSheet.hasNameForId(componentId, name)) {\n        const css = stringifyRules(flatCSS, `.${name}`)\n        styleSheet.inject(this.componentId, css, name)\n      }\n\n      this.lastClassName = name\n      return name\n    }\n\n    static generateName(str: string): string {\n      return generateRuleHash(str)\n    }\n  }\n\n  return ComponentStyle\n}\n","// @flow\nimport type { Target } from '../types'\nimport domElements from '../utils/domElements'\n\nexport default (styledComponent: Function, constructWithOptions: Function) => {\n  const styled = (tag: Target) => constructWithOptions(styledComponent, tag)\n\n  // Shorthands for all valid HTML Elements\n  domElements.forEach(domElement => {\n    styled[domElement] = styled(domElement)\n  })\n\n  return styled\n}\n","// @flow\nimport hashStr from '../vendor/glamor/hash'\nimport type { Interpolation, NameGenerator, Stringifier } from '../types'\nimport StyleSheet from '../models/StyleSheet'\n\nconst replaceWhitespace = (str: string): string => str.replace(/\\s|\\\\n/g, '')\n\ntype KeyframesFn = (\n  strings: Array<string>,\n  ...interpolations: Array<Interpolation>\n) => string\n\nexport default (\n  nameGenerator: NameGenerator,\n  stringifyRules: Stringifier,\n  css: Function\n): KeyframesFn => (...arr): string => {\n  const styleSheet = StyleSheet.master\n  const rules = css(...arr)\n  const name = nameGenerator(hashStr(replaceWhitespace(JSON.stringify(rules))))\n  const id = `sc-keyframes-${name}`\n\n  if (!styleSheet.hasNameForId(id, name)) {\n    styleSheet.inject(id, stringifyRules(rules, name, '@keyframes'), name)\n  }\n\n  return name\n}\n","// @flow\nimport hashStr from '../vendor/glamor/hash'\nimport StyleSheet from '../models/StyleSheet'\nimport type { Interpolation, Stringifier } from '../types'\n\ntype InjectGlobalFn = (\n  strings: Array<string>,\n  ...interpolations: Array<Interpolation>\n) => void\n\nexport default (stringifyRules: Stringifier, css: Function) => {\n  const injectGlobal: InjectGlobalFn = (...args) => {\n    const styleSheet = StyleSheet.master\n    const rules = css(...args)\n    const hash = hashStr(JSON.stringify(rules))\n    const id = `sc-global-${hash}`\n\n    if (!styleSheet.hasId(id)) {\n      styleSheet.inject(id, stringifyRules(rules))\n    }\n  }\n\n  return injectGlobal\n}\n"],"names":["i","getChildContext","componentWillMount","unsubscribeId","unsubscribeFromContext","length"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA;;;;;;;;;;;;;;;;8BA+C8BA,QAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BClDtDC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACNF,kCAAA;AACA,yCAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA0BEC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACxBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAwCIC;;;kCAEAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BCpDwBC,QAA0BL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCA6ClD,OAAA,aAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACtDJ;;;;;;;;;;;;;;;;;;ACMA;;;;;;;;;;;;;CAAA;;;ACFA;;;;;;;;;;;;;CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/styled-components-no-parser.cjs.js

@@ -1727,20 +1727,14 @@ var _StyledComponent = (function (ComponentStyle, constructWithOptions) {
   var generateId = function generateId(_displayName, parentComponentId) {
     var displayName = typeof _displayName !== 'string' ? 'sc' : escape(_displayName);
 
-    var componentId = void 0;
-
     /**
-     * only fall back to hashing the component injection order if
-     * a proper displayName isn't provided by the babel plugin
+     * This ensures uniqueness if two components happen to share
+     * the same displayName.
      */
-    if (!_displayName) {
-      var nr = (identifiers[displayName] || 0) + 1;
-      identifiers[displayName] = nr;
+    var nr = (identifiers[displayName] || 0) + 1;
+    identifiers[displayName] = nr;
 
-      componentId = displayName + '-' + ComponentStyle.generateName(displayName + nr);
-    } else {
-      componentId = displayName + '-' + ComponentStyle.generateName(displayName);
-    }
+    var componentId = displayName + '-' + ComponentStyle.generateName(displayName + nr);
 
     return parentComponentId !== undefined ? parentComponentId + '-' + componentId : componentId;
   };
@@ -1928,7 +1922,7 @@ var _StyledComponent = (function (ComponentStyle, constructWithOptions) {
         attrs = options.attrs;
 
 
-    var styledComponentId = options.displayName && options.componentId ? escape(options.displayName) + '-' + options.componentId : componentId;
+    var styledComponentId = options.displayName && options.componentId ? escape(options.displayName) + '-' + options.componentId : options.componentId || componentId;
 
     var componentStyle = new ComponentStyle(extendingRules === undefined ? rules : extendingRules.concat(rules), attrs, styledComponentId);