styled-components 5.2.2 → 5.2.3

package/dist/styled-components.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled-components.min.js","sources":["../src/sheet/Tag.js","../src/sheet/Sheet.js","../src/utils/isStaticRules.js","../src/models/Keyframes.js","../src/models/GlobalStyle.js","../src/models/ServerStyleSheet.js","../src/models/StyledComponent.js"],"sourcesContent":["// @flow\n/* eslint-disable no-use-before-define */\n\nimport { makeStyleTag, getSheet } from './dom';\nimport type { SheetOptions, Tag } from './types';\n\n/** Create a CSSStyleSheet-like tag depending on the environment */\nexport const makeTag = ({ isServer, useCSSOMInjection, target }: SheetOptions): Tag => {\n  if (isServer) {\n    return new VirtualTag(target);\n  } else if (useCSSOMInjection) {\n    return new CSSOMTag(target);\n  } else {\n    return new TextTag(target);\n  }\n};\n\nexport class CSSOMTag implements Tag {\n  element: HTMLStyleElement;\n\n  sheet: CSSStyleSheet;\n\n  length: number;\n\n  constructor(target?: HTMLElement) {\n    const element = (this.element = makeStyleTag(target));\n\n    // Avoid Edge bug where empty style elements don't create sheets\n    element.appendChild(document.createTextNode(''));\n\n    this.sheet = getSheet(element);\n    this.length = 0;\n  }\n\n  insertRule(index: number, rule: string): boolean {\n    try {\n      this.sheet.insertRule(rule, index);\n      this.length++;\n      return true;\n    } catch (_error) {\n      return false;\n    }\n  }\n\n  deleteRule(index: number): void {\n    this.sheet.deleteRule(index);\n    this.length--;\n  }\n\n  getRule(index: number): string {\n    const rule = this.sheet.cssRules[index];\n    // Avoid IE11 quirk where cssText is inaccessible on some invalid rules\n    if (rule !== undefined && typeof rule.cssText === 'string') {\n      return rule.cssText;\n    } else {\n      return '';\n    }\n  }\n}\n\n/** A Tag that emulates the CSSStyleSheet API but uses text nodes */\nexport class TextTag implements Tag {\n  element: HTMLStyleElement;\n\n  nodes: NodeList<Node>;\n\n  length: number;\n\n  constructor(target?: HTMLElement) {\n    const element = (this.element = makeStyleTag(target));\n    this.nodes = element.childNodes;\n    this.length = 0;\n  }\n\n  insertRule(index: number, rule: string): boolean {\n    if (index <= this.length && index >= 0) {\n      const node = document.createTextNode(rule);\n      const refNode = this.nodes[index];\n      this.element.insertBefore(node, refNode || null);\n      this.length++;\n      return true;\n    } else {\n      return false;\n    }\n  }\n\n  deleteRule(index: number): void {\n    this.element.removeChild(this.nodes[index]);\n    this.length--;\n  }\n\n  getRule(index: number): string {\n    if (index < this.length) {\n      return this.nodes[index].textContent;\n    } else {\n      return '';\n    }\n  }\n}\n\n/** A completely virtual (server-side) Tag that doesn't manipulate the DOM */\nexport class VirtualTag implements Tag {\n  rules: string[];\n\n  length: number;\n\n  constructor(_target?: HTMLElement) {\n    this.rules = [];\n    this.length = 0;\n  }\n\n  insertRule(index: number, rule: string): boolean {\n    if (index <= this.length) {\n      this.rules.splice(index, 0, rule);\n      this.length++;\n      return true;\n    } else {\n      return false;\n    }\n  }\n\n  deleteRule(index: number): void {\n    this.rules.splice(index, 1);\n    this.length--;\n  }\n\n  getRule(index: number): string {\n    if (index < this.length) {\n      return this.rules[index];\n    } else {\n      return '';\n    }\n  }\n}\n","// @flow\nimport { DISABLE_SPEEDY, IS_BROWSER } from '../constants';\nimport { EMPTY_OBJECT } from '../utils/empties';\nimport { makeGroupedTag } from './GroupedTag';\nimport { getGroupForId } from './GroupIDAllocator';\nimport { outputSheet, rehydrateSheet } from './Rehydration';\nimport { makeTag } from './Tag';\nimport type { GroupedTag, Sheet, SheetOptions } from './types';\n\nlet SHOULD_REHYDRATE = IS_BROWSER;\n\ntype SheetConstructorArgs = {\n  isServer?: boolean,\n  useCSSOMInjection?: boolean,\n  target?: HTMLElement,\n};\n\ntype GlobalStylesAllocationMap = { [key: string]: number };\ntype NamesAllocationMap = Map<string, Set<string>>;\n\nconst defaultOptions: SheetOptions = {\n  isServer: !IS_BROWSER,\n  useCSSOMInjection: !DISABLE_SPEEDY,\n};\n\n/** Contains the main stylesheet logic for stringification and caching */\nexport default class StyleSheet implements Sheet {\n  gs: GlobalStylesAllocationMap;\n\n  names: NamesAllocationMap;\n\n  options: SheetOptions;\n\n  tag: void | GroupedTag;\n\n  /** Register a group ID to give it an index */\n  static registerId(id: string): number {\n    return getGroupForId(id);\n  }\n\n  constructor(\n    options: SheetConstructorArgs = EMPTY_OBJECT,\n    globalStyles?: GlobalStylesAllocationMap = {},\n    names?: NamesAllocationMap\n  ) {\n    this.options = {\n      ...defaultOptions,\n      ...options,\n    };\n\n    this.gs = globalStyles;\n    this.names = new Map(names);\n\n    // We rehydrate only once and use the sheet that is created first\n    if (!this.options.isServer && IS_BROWSER && SHOULD_REHYDRATE) {\n      SHOULD_REHYDRATE = false;\n      rehydrateSheet(this);\n    }\n  }\n\n  reconstructWithOptions(options: SheetConstructorArgs, withNames?: boolean = true) {\n    return new StyleSheet(\n      { ...this.options, ...options },\n      this.gs,\n      (withNames && this.names) || undefined\n    );\n  }\n\n  allocateGSInstance(id: string) {\n    return (this.gs[id] = (this.gs[id] || 0) + 1);\n  }\n\n  /** Lazily initialises a GroupedTag for when it's actually needed */\n  getTag(): GroupedTag {\n    return this.tag || (this.tag = makeGroupedTag(makeTag(this.options)));\n  }\n\n  /** Check whether a name is known for caching */\n  hasNameForId(id: string, name: string): boolean {\n    return this.names.has(id) && (this.names.get(id): any).has(name);\n  }\n\n  /** Mark a group's name as known for caching */\n  registerName(id: string, name: string) {\n    getGroupForId(id);\n\n    if (!this.names.has(id)) {\n      const groupNames = new Set();\n      groupNames.add(name);\n      this.names.set(id, groupNames);\n    } else {\n      (this.names.get(id): any).add(name);\n    }\n  }\n\n  /** Insert new rules which also marks the name as known */\n  insertRules(id: string, name: string, rules: string[]) {\n    this.registerName(id, name);\n    this.getTag().insertRules(getGroupForId(id), rules);\n  }\n\n  /** Clears all cached names for a given group ID */\n  clearNames(id: string) {\n    if (this.names.has(id)) {\n      (this.names.get(id): any).clear();\n    }\n  }\n\n  /** Clears all rules for a given group ID */\n  clearRules(id: string) {\n    this.getTag().clearGroup(getGroupForId(id));\n    this.clearNames(id);\n  }\n\n  /** Clears the entire tag which deletes all rules but not its names */\n  clearTag() {\n    // NOTE: This does not clear the names, since it's only used during SSR\n    // so that we can continuously output only new rules\n    this.tag = undefined;\n  }\n\n  /** Outputs the current sheet as a CSS string with markers for SSR */\n  toString(): string {\n    return outputSheet(this);\n  }\n}\n","// @flow\nimport isFunction from './isFunction';\nimport isStyledComponent from './isStyledComponent';\nimport type { RuleSet } from '../types';\n\nexport default function isStaticRules(rules: RuleSet): boolean {\n  for (let i = 0; i < rules.length; i += 1) {\n    const rule = rules[i];\n\n    if (isFunction(rule) && !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  return true;\n}\n","// @flow\nimport StyleSheet from '../sheet';\nimport { type Stringifier } from '../types';\nimport throwStyledError from '../utils/error';\nimport { masterStylis } from './StyleSheetManager';\n\nexport default class Keyframes {\n  id: string;\n\n  name: string;\n\n  rules: string;\n\n  constructor(name: string, rules: string) {\n    this.name = name;\n    this.id = `sc-keyframes-${name}`;\n    this.rules = rules;\n  }\n\n  inject = (styleSheet: StyleSheet, stylisInstance: Stringifier = masterStylis) => {\n    const resolvedName = this.name + stylisInstance.hash;\n\n    if (!styleSheet.hasNameForId(this.id, resolvedName)) {\n      styleSheet.insertRules(\n        this.id,\n        resolvedName,\n        stylisInstance(this.rules, resolvedName, '@keyframes')\n      );\n    }\n  };\n\n  toString = () => {\n    return throwStyledError(12, String(this.name));\n  };\n\n  getName(stylisInstance: Stringifier = masterStylis) {\n    return this.name + stylisInstance.hash;\n  }\n}\n","// @flow\nimport StyleSheet from '../sheet';\nimport type { RuleSet, Stringifier } from '../types';\nimport flatten from '../utils/flatten';\nimport isStaticRules from '../utils/isStaticRules';\n\nexport default class GlobalStyle {\n  componentId: string;\n\n  isStatic: boolean;\n\n  rules: RuleSet;\n\n  constructor(rules: RuleSet, componentId: string) {\n    this.rules = rules;\n    this.componentId = componentId;\n    this.isStatic = isStaticRules(rules);\n\n    // pre-register the first instance to ensure global styles\n    // load before component ones\n    StyleSheet.registerId(this.componentId + 1);\n  }\n\n  createStyles(\n    instance: number,\n    executionContext: Object,\n    styleSheet: StyleSheet,\n    stylis: Stringifier\n  ) {\n    const flatCSS = flatten(this.rules, executionContext, styleSheet, stylis);\n    const css = stylis(flatCSS.join(''), '');\n    const id = this.componentId + instance;\n\n    // NOTE: We use the id as a name as well, since these rules never change\n    styleSheet.insertRules(id, id, css);\n  }\n\n  removeStyles(instance: number, styleSheet: StyleSheet) {\n    styleSheet.clearRules(this.componentId + instance);\n  }\n\n  renderStyles(\n    instance: number,\n    executionContext: Object,\n    styleSheet: StyleSheet,\n    stylis: Stringifier\n  ) {\n    if (instance > 2) StyleSheet.registerId(this.componentId + instance);\n\n    // NOTE: Remove old styles, then inject the new ones\n    this.removeStyles(instance, styleSheet);\n    this.createStyles(instance, executionContext, styleSheet, stylis);\n  }\n}\n","// @flow\n/* eslint-disable no-underscore-dangle */\nimport React from 'react';\nimport { IS_BROWSER, SC_ATTR, SC_ATTR_VERSION, SC_VERSION } from '../constants';\nimport throwStyledError from '../utils/error';\nimport getNonce from '../utils/nonce';\nimport StyleSheet from '../sheet';\nimport StyleSheetManager from './StyleSheetManager';\n\ndeclare var __SERVER__: boolean;\n\nconst CLOSING_TAG_R = /^\\s*<\\/[a-z]/i;\n\nexport default class ServerStyleSheet {\n  isStreaming: boolean;\n\n  instance: StyleSheet;\n\n  sealed: boolean;\n\n  constructor() {\n    this.instance = new StyleSheet({ isServer: true });\n    this.sealed = false;\n  }\n\n  _emitSheetCSS = (): string => {\n    const css = this.instance.toString();\n    const nonce = getNonce();\n    const attrs = [nonce && `nonce=\"${nonce}\"`, `${SC_ATTR}=\"true\"`, `${SC_ATTR_VERSION}=\"${SC_VERSION}\"`];\n    const htmlAttr = attrs.filter(Boolean).join(' ');\n\n    return `<style ${htmlAttr}>${css}</style>`;\n  };\n\n  collectStyles(children: any) {\n    if (this.sealed) {\n      return throwStyledError(2);\n    }\n\n    return <StyleSheetManager sheet={this.instance}>{children}</StyleSheetManager>;\n  }\n\n  getStyleTags = (): string => {\n    if (this.sealed) {\n      return throwStyledError(2);\n    }\n\n    return this._emitSheetCSS();\n  };\n\n  getStyleElement = () => {\n    if (this.sealed) {\n      return throwStyledError(2);\n    }\n\n    const props = {\n      [SC_ATTR]: '',\n      [SC_ATTR_VERSION]: SC_VERSION,\n      dangerouslySetInnerHTML: {\n        __html: this.instance.toString(),\n      },\n    };\n\n    const nonce = getNonce();\n    if (nonce) {\n      (props: any).nonce = nonce;\n    }\n\n    // v4 returned an array for this fn, so we'll do the same for v5 for backward compat\n    return [<style {...props} key=\"sc-0-0\" />];\n  };\n\n  // eslint-disable-next-line consistent-return\n  interleaveWithNodeStream(input: any) {\n    if (!__SERVER__ || IS_BROWSER) {\n      return throwStyledError(3);\n    } else if (this.sealed) {\n      return throwStyledError(2);\n    }\n\n    if (__SERVER__) {\n      this.seal();\n\n      // eslint-disable-next-line global-require\n      const { Readable, Transform } = require('stream');\n\n      const readableStream: Readable = input;\n      const { instance: sheet, _emitSheetCSS } = this;\n\n      const transformer = new Transform({\n        transform: function appendStyleChunks(chunk, /* encoding */ _, callback) {\n          // Get the chunk and retrieve the sheet's CSS as an HTML chunk,\n          // then reset its rules so we get only new ones for the next chunk\n          const renderedHtml = chunk.toString();\n          const html = _emitSheetCSS();\n\n          sheet.clearTag();\n\n          // prepend style html to chunk, unless the start of the chunk is a\n          // closing tag in which case append right after that\n          if (CLOSING_TAG_R.test(renderedHtml)) {\n            const endOfClosingTag = renderedHtml.indexOf('>') + 1;\n            const before = renderedHtml.slice(0, endOfClosingTag);\n            const after = renderedHtml.slice(endOfClosingTag);\n\n            this.push(before + html + after);\n          } else {\n            this.push(html + renderedHtml);\n          }\n\n          callback();\n        },\n      });\n\n      readableStream.on('error', err => {\n        // forward the error to the transform stream\n        transformer.emit('error', err);\n      });\n\n      return readableStream.pipe(transformer);\n    }\n  }\n\n  seal = () => {\n    this.sealed = true;\n  };\n}\n","// @flow\nimport validAttr from '@emotion/is-prop-valid';\nimport hoist from 'hoist-non-react-statics';\nimport React, { createElement, type Ref, useContext, useDebugValue } from 'react';\nimport { SC_VERSION } from '../constants';\nimport type {\n  Attrs,\n  IStyledComponent,\n  IStyledStatics,\n  RuleSet,\n  ShouldForwardProp,\n  Target,\n} from '../types';\nimport { checkDynamicCreation } from '../utils/checkDynamicCreation';\nimport createWarnTooManyClasses from '../utils/createWarnTooManyClasses';\nimport determineTheme from '../utils/determineTheme';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from '../utils/empties';\nimport escape from '../utils/escape';\nimport generateComponentId from '../utils/generateComponentId';\nimport generateDisplayName from '../utils/generateDisplayName';\nimport getComponentName from '../utils/getComponentName';\nimport isFunction from '../utils/isFunction';\nimport isStyledComponent from '../utils/isStyledComponent';\nimport isTag from '../utils/isTag';\nimport joinStrings from '../utils/joinStrings';\nimport merge from '../utils/mixinDeep';\nimport ComponentStyle from './ComponentStyle';\nimport { useStyleSheet, useStylis } from './StyleSheetManager';\nimport { ThemeContext } from './ThemeProvider';\n\nconst identifiers = {};\n\n/* We depend on components having unique IDs */\nfunction generateId(displayName?: string, parentComponentId?: string) {\n  const name = typeof displayName !== 'string' ? 'sc' : escape(displayName);\n  // Ensure that no displayName can lead to duplicate componentIds\n  identifiers[name] = (identifiers[name] || 0) + 1;\n\n  const componentId = `${name}-${generateComponentId(\n    // SC_VERSION gives us isolation between multiple runtimes on the page at once\n    // this is improved further with use of the babel plugin \"namespace\" feature\n    SC_VERSION + name + identifiers[name]\n  )}`;\n\n  return parentComponentId ? `${parentComponentId}-${componentId}` : componentId;\n}\n\nfunction useResolvedAttrs<Config>(theme: any = EMPTY_OBJECT, props: Config, attrs: Attrs) {\n  // NOTE: can't memoize this\n  // returns [context, resolvedAttrs]\n  // where resolvedAttrs is only the things injected by the attrs themselves\n  const context = { ...props, theme };\n  const resolvedAttrs = {};\n\n  attrs.forEach(attrDef => {\n    let resolvedAttrDef = attrDef;\n    let key;\n\n    if (isFunction(resolvedAttrDef)) {\n      resolvedAttrDef = resolvedAttrDef(context);\n    }\n\n    /* eslint-disable guard-for-in */\n    for (key in resolvedAttrDef) {\n      context[key] = resolvedAttrs[key] =\n        key === 'className'\n          ? joinStrings(resolvedAttrs[key], resolvedAttrDef[key])\n          : resolvedAttrDef[key];\n    }\n    /* eslint-enable guard-for-in */\n  });\n\n  return [context, resolvedAttrs];\n}\n\nfunction useInjectedStyle<T>(\n  componentStyle: ComponentStyle,\n  isStatic: boolean,\n  resolvedAttrs: T,\n  warnTooManyClasses?: $Call<typeof createWarnTooManyClasses, string, string>\n) {\n  const styleSheet = useStyleSheet();\n  const stylis = useStylis();\n\n  const className = isStatic\n    ? componentStyle.generateAndInjectStyles(EMPTY_OBJECT, styleSheet, stylis)\n    : componentStyle.generateAndInjectStyles(resolvedAttrs, styleSheet, stylis);\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  if (process.env.NODE_ENV !== 'production') useDebugValue(className);\n\n  if (process.env.NODE_ENV !== 'production' && !isStatic && warnTooManyClasses) {\n    warnTooManyClasses(className);\n  }\n\n  return className;\n}\n\nfunction useStyledComponentImpl(\n  forwardedComponent: IStyledComponent,\n  props: Object,\n  forwardedRef: Ref<any>,\n  isStatic: boolean\n) {\n  const {\n    attrs: componentAttrs,\n    componentStyle,\n    defaultProps,\n    foldedComponentIds,\n    shouldForwardProp,\n    styledComponentId,\n    target,\n  } = forwardedComponent;\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  if (process.env.NODE_ENV !== 'production') useDebugValue(styledComponentId);\n\n  // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,\n  // but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it\n  // should be an immutable value, but behave for now.\n  const theme = determineTheme(props, useContext(ThemeContext), defaultProps);\n\n  const [context, attrs] = useResolvedAttrs(theme || EMPTY_OBJECT, props, componentAttrs);\n\n  const generatedClassName = useInjectedStyle(\n    componentStyle,\n    isStatic,\n    context,\n    process.env.NODE_ENV !== 'production' ? forwardedComponent.warnTooManyClasses : undefined\n  );\n\n  const refToForward = forwardedRef;\n\n  const elementToBeCreated: Target = attrs.$as || props.$as || attrs.as || props.as || target;\n\n  const isTargetTag = isTag(elementToBeCreated);\n  const computedProps = attrs !== props ? { ...props, ...attrs } : props;\n  const propsForElement = {};\n\n  // eslint-disable-next-line guard-for-in\n  for (const key in computedProps) {\n    if (key[0] === '$' || key === 'as') continue;\n    else if (key === 'forwardedAs') {\n      propsForElement.as = computedProps[key];\n    } else if (\n      shouldForwardProp ? shouldForwardProp(key, validAttr) : isTargetTag ? validAttr(key) : true\n    ) {\n      // Don't pass through non HTML tags through to HTML elements\n      propsForElement[key] = computedProps[key];\n    }\n  }\n\n  if (props.style && attrs.style !== props.style) {\n    propsForElement.style = { ...props.style, ...attrs.style };\n  }\n\n  propsForElement.className = Array.prototype\n    .concat(\n      foldedComponentIds,\n      styledComponentId,\n      generatedClassName !== styledComponentId ? generatedClassName : null,\n      props.className,\n      attrs.className\n    )\n    .filter(Boolean)\n    .join(' ');\n\n  propsForElement.ref = refToForward;\n\n  return createElement(elementToBeCreated, propsForElement);\n}\n\nexport default function createStyledComponent(\n  target: $PropertyType<IStyledComponent, 'target'>,\n  options: {\n    attrs?: Attrs,\n    componentId: string,\n    displayName?: string,\n    parentComponentId?: string,\n    shouldForwardProp?: ShouldForwardProp,\n  },\n  rules: RuleSet\n) {\n  const isTargetStyledComp = isStyledComponent(target);\n  const isCompositeComponent = !isTag(target);\n\n  const {\n    attrs = EMPTY_ARRAY,\n    componentId = generateId(options.displayName, options.parentComponentId),\n    displayName = generateDisplayName(target),\n  } = options;\n\n  const styledComponentId =\n    options.displayName && options.componentId\n      ? `${escape(options.displayName)}-${options.componentId}`\n      : options.componentId || componentId;\n\n  // fold the underlying StyledComponent attrs up (implicit extend)\n  const finalAttrs =\n    isTargetStyledComp && ((target: any): IStyledComponent).attrs\n      ? Array.prototype.concat(((target: any): IStyledComponent).attrs, attrs).filter(Boolean)\n      : attrs;\n\n  // eslint-disable-next-line prefer-destructuring\n  let shouldForwardProp = options.shouldForwardProp;\n\n  if (isTargetStyledComp && target.shouldForwardProp) {\n    if (options.shouldForwardProp) {\n      // compose nested shouldForwardProp calls\n      shouldForwardProp = (prop, filterFn) =>\n        ((((target: any): IStyledComponent).shouldForwardProp: any): ShouldForwardProp)(\n          prop,\n          filterFn\n        ) && ((options.shouldForwardProp: any): ShouldForwardProp)(prop, filterFn);\n    } else {\n      // eslint-disable-next-line prefer-destructuring\n      shouldForwardProp = ((target: any): IStyledComponent).shouldForwardProp;\n    }\n  }\n\n  const componentStyle = new ComponentStyle(\n    rules,\n    styledComponentId,\n    isTargetStyledComp ? ((target: Object).componentStyle: ComponentStyle) : undefined\n  );\n\n  // statically styled-components don't need to build an execution context object,\n  // and shouldn't be increasing the number of class names\n  const isStatic = componentStyle.isStatic && attrs.length === 0;\n\n  /**\n   * forwardRef creates a new interim component, which we'll take advantage of\n   * instead of extending ParentComponent to create _another_ interim class\n   */\n  let WrappedStyledComponent: IStyledComponent;\n\n  const forwardRef = (props, ref) =>\n    // eslint-disable-next-line\n    useStyledComponentImpl(WrappedStyledComponent, props, ref, isStatic);\n\n  forwardRef.displayName = displayName;\n\n  WrappedStyledComponent = ((React.forwardRef(forwardRef): any): IStyledComponent);\n  WrappedStyledComponent.attrs = finalAttrs;\n  WrappedStyledComponent.componentStyle = componentStyle;\n  WrappedStyledComponent.displayName = displayName;\n  WrappedStyledComponent.shouldForwardProp = shouldForwardProp;\n\n  // this static is used to preserve the cascade of static classes for component selector\n  // purposes; this is especially important with usage of the css prop\n  WrappedStyledComponent.foldedComponentIds = isTargetStyledComp\n    ? Array.prototype.concat(\n        ((target: any): IStyledComponent).foldedComponentIds,\n        ((target: any): IStyledComponent).styledComponentId\n      )\n    : EMPTY_ARRAY;\n\n  WrappedStyledComponent.styledComponentId = styledComponentId;\n\n  // fold the underlying StyledComponent target up since we folded the styles\n  WrappedStyledComponent.target = isTargetStyledComp\n    ? ((target: any): IStyledComponent).target\n    : target;\n\n  WrappedStyledComponent.withComponent = function withComponent(tag: Target) {\n    const { componentId: previousComponentId, ...optionsToCopy } = options;\n\n    const newComponentId =\n      previousComponentId &&\n      `${previousComponentId}-${isTag(tag) ? tag : escape(getComponentName(tag))}`;\n\n    const newOptions = {\n      ...optionsToCopy,\n      attrs: finalAttrs,\n      componentId: newComponentId,\n    };\n\n    return createStyledComponent(tag, newOptions, rules);\n  };\n\n  Object.defineProperty(WrappedStyledComponent, 'defaultProps', {\n    get() {\n      return this._foldedDefaultProps;\n    },\n\n    set(obj) {\n      this._foldedDefaultProps = isTargetStyledComp\n        ? merge({}, ((target: any): IStyledComponent).defaultProps, obj)\n        : obj;\n    },\n  });\n\n  if (process.env.NODE_ENV !== 'production') {\n    checkDynamicCreation(displayName, styledComponentId);\n\n    WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(\n      displayName,\n      styledComponentId\n    );\n  }\n\n  WrappedStyledComponent.toString = () => `.${WrappedStyledComponent.styledComponentId}`;\n\n  if (isCompositeComponent) {\n    hoist<\n      IStyledStatics,\n      $PropertyType<IStyledComponent, 'target'>,\n      { [key: $Keys<IStyledStatics>]: true }\n    >(WrappedStyledComponent, ((target: any): $PropertyType<IStyledComponent, 'target'>), {\n      // all SC-specific things should not be hoisted\n      attrs: true,\n      componentStyle: true,\n      displayName: true,\n      foldedComponentIds: true,\n      shouldForwardProp: true,\n      styledComponentId: true,\n      target: true,\n      withComponent: true,\n    });\n  }\n\n  return WrappedStyledComponent;\n}\n"],"names":["nodes","insertRule","names","id","flatten","React","options"],"mappings":"uqJAsF0BA,gHAgBxBC,WAAA,yWC3DQC,yxBAmC8BC,iOAkBVA,6xBC3FuB,oxWCcHA,4nECM9BC,kCAEVD,s3BCsCEE,owSCuMuDC,qJAAAA"}
+{"version":3,"file":"styled-components.min.js","sources":["../src/sheet/Tag.js","../src/sheet/Sheet.js","../src/utils/isStaticRules.js","../src/models/Keyframes.js","../src/models/GlobalStyle.js","../src/models/ServerStyleSheet.js","../src/models/StyledComponent.js"],"sourcesContent":["// @flow\n/* eslint-disable no-use-before-define */\n\nimport { makeStyleTag, getSheet } from './dom';\nimport type { SheetOptions, Tag } from './types';\n\n/** Create a CSSStyleSheet-like tag depending on the environment */\nexport const makeTag = ({ isServer, useCSSOMInjection, target }: SheetOptions): Tag => {\n  if (isServer) {\n    return new VirtualTag(target);\n  } else if (useCSSOMInjection) {\n    return new CSSOMTag(target);\n  } else {\n    return new TextTag(target);\n  }\n};\n\nexport class CSSOMTag implements Tag {\n  element: HTMLStyleElement;\n\n  sheet: CSSStyleSheet;\n\n  length: number;\n\n  constructor(target?: HTMLElement) {\n    const element = (this.element = makeStyleTag(target));\n\n    // Avoid Edge bug where empty style elements don't create sheets\n    element.appendChild(document.createTextNode(''));\n\n    this.sheet = getSheet(element);\n    this.length = 0;\n  }\n\n  insertRule(index: number, rule: string): boolean {\n    try {\n      this.sheet.insertRule(rule, index);\n      this.length++;\n      return true;\n    } catch (_error) {\n      return false;\n    }\n  }\n\n  deleteRule(index: number): void {\n    this.sheet.deleteRule(index);\n    this.length--;\n  }\n\n  getRule(index: number): string {\n    const rule = this.sheet.cssRules[index];\n    // Avoid IE11 quirk where cssText is inaccessible on some invalid rules\n    if (rule !== undefined && typeof rule.cssText === 'string') {\n      return rule.cssText;\n    } else {\n      return '';\n    }\n  }\n}\n\n/** A Tag that emulates the CSSStyleSheet API but uses text nodes */\nexport class TextTag implements Tag {\n  element: HTMLStyleElement;\n\n  nodes: NodeList<Node>;\n\n  length: number;\n\n  constructor(target?: HTMLElement) {\n    const element = (this.element = makeStyleTag(target));\n    this.nodes = element.childNodes;\n    this.length = 0;\n  }\n\n  insertRule(index: number, rule: string): boolean {\n    if (index <= this.length && index >= 0) {\n      const node = document.createTextNode(rule);\n      const refNode = this.nodes[index];\n      this.element.insertBefore(node, refNode || null);\n      this.length++;\n      return true;\n    } else {\n      return false;\n    }\n  }\n\n  deleteRule(index: number): void {\n    this.element.removeChild(this.nodes[index]);\n    this.length--;\n  }\n\n  getRule(index: number): string {\n    if (index < this.length) {\n      return this.nodes[index].textContent;\n    } else {\n      return '';\n    }\n  }\n}\n\n/** A completely virtual (server-side) Tag that doesn't manipulate the DOM */\nexport class VirtualTag implements Tag {\n  rules: string[];\n\n  length: number;\n\n  constructor(_target?: HTMLElement) {\n    this.rules = [];\n    this.length = 0;\n  }\n\n  insertRule(index: number, rule: string): boolean {\n    if (index <= this.length) {\n      this.rules.splice(index, 0, rule);\n      this.length++;\n      return true;\n    } else {\n      return false;\n    }\n  }\n\n  deleteRule(index: number): void {\n    this.rules.splice(index, 1);\n    this.length--;\n  }\n\n  getRule(index: number): string {\n    if (index < this.length) {\n      return this.rules[index];\n    } else {\n      return '';\n    }\n  }\n}\n","// @flow\nimport { DISABLE_SPEEDY, IS_BROWSER } from '../constants';\nimport { EMPTY_OBJECT } from '../utils/empties';\nimport { makeGroupedTag } from './GroupedTag';\nimport { getGroupForId } from './GroupIDAllocator';\nimport { outputSheet, rehydrateSheet } from './Rehydration';\nimport { makeTag } from './Tag';\nimport type { GroupedTag, Sheet, SheetOptions } from './types';\n\nlet SHOULD_REHYDRATE = IS_BROWSER;\n\ntype SheetConstructorArgs = {\n  isServer?: boolean,\n  useCSSOMInjection?: boolean,\n  target?: HTMLElement,\n};\n\ntype GlobalStylesAllocationMap = { [key: string]: number };\ntype NamesAllocationMap = Map<string, Set<string>>;\n\nconst defaultOptions: SheetOptions = {\n  isServer: !IS_BROWSER,\n  useCSSOMInjection: !DISABLE_SPEEDY,\n};\n\n/** Contains the main stylesheet logic for stringification and caching */\nexport default class StyleSheet implements Sheet {\n  gs: GlobalStylesAllocationMap;\n\n  names: NamesAllocationMap;\n\n  options: SheetOptions;\n\n  tag: void | GroupedTag;\n\n  /** Register a group ID to give it an index */\n  static registerId(id: string): number {\n    return getGroupForId(id);\n  }\n\n  constructor(\n    options: SheetConstructorArgs = EMPTY_OBJECT,\n    globalStyles?: GlobalStylesAllocationMap = {},\n    names?: NamesAllocationMap\n  ) {\n    this.options = {\n      ...defaultOptions,\n      ...options,\n    };\n\n    this.gs = globalStyles;\n    this.names = new Map(names);\n\n    // We rehydrate only once and use the sheet that is created first\n    if (!this.options.isServer && IS_BROWSER && SHOULD_REHYDRATE) {\n      SHOULD_REHYDRATE = false;\n      rehydrateSheet(this);\n    }\n  }\n\n  reconstructWithOptions(options: SheetConstructorArgs, withNames?: boolean = true) {\n    return new StyleSheet(\n      { ...this.options, ...options },\n      this.gs,\n      (withNames && this.names) || undefined\n    );\n  }\n\n  allocateGSInstance(id: string) {\n    return (this.gs[id] = (this.gs[id] || 0) + 1);\n  }\n\n  /** Lazily initialises a GroupedTag for when it's actually needed */\n  getTag(): GroupedTag {\n    return this.tag || (this.tag = makeGroupedTag(makeTag(this.options)));\n  }\n\n  /** Check whether a name is known for caching */\n  hasNameForId(id: string, name: string): boolean {\n    return this.names.has(id) && (this.names.get(id): any).has(name);\n  }\n\n  /** Mark a group's name as known for caching */\n  registerName(id: string, name: string) {\n    getGroupForId(id);\n\n    if (!this.names.has(id)) {\n      const groupNames = new Set();\n      groupNames.add(name);\n      this.names.set(id, groupNames);\n    } else {\n      (this.names.get(id): any).add(name);\n    }\n  }\n\n  /** Insert new rules which also marks the name as known */\n  insertRules(id: string, name: string, rules: string[]) {\n    this.registerName(id, name);\n    this.getTag().insertRules(getGroupForId(id), rules);\n  }\n\n  /** Clears all cached names for a given group ID */\n  clearNames(id: string) {\n    if (this.names.has(id)) {\n      (this.names.get(id): any).clear();\n    }\n  }\n\n  /** Clears all rules for a given group ID */\n  clearRules(id: string) {\n    this.getTag().clearGroup(getGroupForId(id));\n    this.clearNames(id);\n  }\n\n  /** Clears the entire tag which deletes all rules but not its names */\n  clearTag() {\n    // NOTE: This does not clear the names, since it's only used during SSR\n    // so that we can continuously output only new rules\n    this.tag = undefined;\n  }\n\n  /** Outputs the current sheet as a CSS string with markers for SSR */\n  toString(): string {\n    return outputSheet(this);\n  }\n}\n","// @flow\nimport isFunction from './isFunction';\nimport isStyledComponent from './isStyledComponent';\nimport type { RuleSet } from '../types';\n\nexport default function isStaticRules(rules: RuleSet): boolean {\n  for (let i = 0; i < rules.length; i += 1) {\n    const rule = rules[i];\n\n    if (isFunction(rule) && !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  return true;\n}\n","// @flow\nimport StyleSheet from '../sheet';\nimport { type Stringifier } from '../types';\nimport throwStyledError from '../utils/error';\nimport { masterStylis } from './StyleSheetManager';\n\nexport default class Keyframes {\n  id: string;\n\n  name: string;\n\n  rules: string;\n\n  constructor(name: string, rules: string) {\n    this.name = name;\n    this.id = `sc-keyframes-${name}`;\n    this.rules = rules;\n  }\n\n  inject = (styleSheet: StyleSheet, stylisInstance: Stringifier = masterStylis) => {\n    const resolvedName = this.name + stylisInstance.hash;\n\n    if (!styleSheet.hasNameForId(this.id, resolvedName)) {\n      styleSheet.insertRules(\n        this.id,\n        resolvedName,\n        stylisInstance(this.rules, resolvedName, '@keyframes')\n      );\n    }\n  };\n\n  toString = () => {\n    return throwStyledError(12, String(this.name));\n  };\n\n  getName(stylisInstance: Stringifier = masterStylis) {\n    return this.name + stylisInstance.hash;\n  }\n}\n","// @flow\nimport StyleSheet from '../sheet';\nimport type { RuleSet, Stringifier } from '../types';\nimport flatten from '../utils/flatten';\nimport isStaticRules from '../utils/isStaticRules';\n\nexport default class GlobalStyle {\n  componentId: string;\n\n  isStatic: boolean;\n\n  rules: RuleSet;\n\n  constructor(rules: RuleSet, componentId: string) {\n    this.rules = rules;\n    this.componentId = componentId;\n    this.isStatic = isStaticRules(rules);\n\n    // pre-register the first instance to ensure global styles\n    // load before component ones\n    StyleSheet.registerId(this.componentId + 1);\n  }\n\n  createStyles(\n    instance: number,\n    executionContext: Object,\n    styleSheet: StyleSheet,\n    stylis: Stringifier\n  ) {\n    const flatCSS = flatten(this.rules, executionContext, styleSheet, stylis);\n    const css = stylis(flatCSS.join(''), '');\n    const id = this.componentId + instance;\n\n    // NOTE: We use the id as a name as well, since these rules never change\n    styleSheet.insertRules(id, id, css);\n  }\n\n  removeStyles(instance: number, styleSheet: StyleSheet) {\n    styleSheet.clearRules(this.componentId + instance);\n  }\n\n  renderStyles(\n    instance: number,\n    executionContext: Object,\n    styleSheet: StyleSheet,\n    stylis: Stringifier\n  ) {\n    if (instance > 2) StyleSheet.registerId(this.componentId + instance);\n\n    // NOTE: Remove old styles, then inject the new ones\n    this.removeStyles(instance, styleSheet);\n    this.createStyles(instance, executionContext, styleSheet, stylis);\n  }\n}\n","// @flow\n/* eslint-disable no-underscore-dangle */\nimport React from 'react';\nimport { IS_BROWSER, SC_ATTR, SC_ATTR_VERSION, SC_VERSION } from '../constants';\nimport throwStyledError from '../utils/error';\nimport getNonce from '../utils/nonce';\nimport StyleSheet from '../sheet';\nimport StyleSheetManager from './StyleSheetManager';\n\ndeclare var __SERVER__: boolean;\n\nconst CLOSING_TAG_R = /^\\s*<\\/[a-z]/i;\n\nexport default class ServerStyleSheet {\n  isStreaming: boolean;\n\n  instance: StyleSheet;\n\n  sealed: boolean;\n\n  constructor() {\n    this.instance = new StyleSheet({ isServer: true });\n    this.sealed = false;\n  }\n\n  _emitSheetCSS = (): string => {\n    const css = this.instance.toString();\n    const nonce = getNonce();\n    const attrs = [nonce && `nonce=\"${nonce}\"`, `${SC_ATTR}=\"true\"`, `${SC_ATTR_VERSION}=\"${SC_VERSION}\"`];\n    const htmlAttr = attrs.filter(Boolean).join(' ');\n\n    return `<style ${htmlAttr}>${css}</style>`;\n  };\n\n  collectStyles(children: any) {\n    if (this.sealed) {\n      return throwStyledError(2);\n    }\n\n    return <StyleSheetManager sheet={this.instance}>{children}</StyleSheetManager>;\n  }\n\n  getStyleTags = (): string => {\n    if (this.sealed) {\n      return throwStyledError(2);\n    }\n\n    return this._emitSheetCSS();\n  };\n\n  getStyleElement = () => {\n    if (this.sealed) {\n      return throwStyledError(2);\n    }\n\n    const props = {\n      [SC_ATTR]: '',\n      [SC_ATTR_VERSION]: SC_VERSION,\n      dangerouslySetInnerHTML: {\n        __html: this.instance.toString(),\n      },\n    };\n\n    const nonce = getNonce();\n    if (nonce) {\n      (props: any).nonce = nonce;\n    }\n\n    // v4 returned an array for this fn, so we'll do the same for v5 for backward compat\n    return [<style {...props} key=\"sc-0-0\" />];\n  };\n\n  // eslint-disable-next-line consistent-return\n  interleaveWithNodeStream(input: any) {\n    if (!__SERVER__ || IS_BROWSER) {\n      return throwStyledError(3);\n    } else if (this.sealed) {\n      return throwStyledError(2);\n    }\n\n    if (__SERVER__) {\n      this.seal();\n\n      // eslint-disable-next-line global-require\n      const { Readable, Transform } = require('stream');\n\n      const readableStream: Readable = input;\n      const { instance: sheet, _emitSheetCSS } = this;\n\n      const transformer = new Transform({\n        transform: function appendStyleChunks(chunk, /* encoding */ _, callback) {\n          // Get the chunk and retrieve the sheet's CSS as an HTML chunk,\n          // then reset its rules so we get only new ones for the next chunk\n          const renderedHtml = chunk.toString();\n          const html = _emitSheetCSS();\n\n          sheet.clearTag();\n\n          // prepend style html to chunk, unless the start of the chunk is a\n          // closing tag in which case append right after that\n          if (CLOSING_TAG_R.test(renderedHtml)) {\n            const endOfClosingTag = renderedHtml.indexOf('>') + 1;\n            const before = renderedHtml.slice(0, endOfClosingTag);\n            const after = renderedHtml.slice(endOfClosingTag);\n\n            this.push(before + html + after);\n          } else {\n            this.push(html + renderedHtml);\n          }\n\n          callback();\n        },\n      });\n\n      readableStream.on('error', err => {\n        // forward the error to the transform stream\n        transformer.emit('error', err);\n      });\n\n      return readableStream.pipe(transformer);\n    }\n  }\n\n  seal = () => {\n    this.sealed = true;\n  };\n}\n","// @flow\nimport validAttr from '@emotion/is-prop-valid';\nimport hoist from 'hoist-non-react-statics';\nimport React, { createElement, type Ref, useContext, useDebugValue } from 'react';\nimport { SC_VERSION } from '../constants';\nimport type {\n  Attrs,\n  IStyledComponent,\n  IStyledStatics,\n  RuleSet,\n  ShouldForwardProp,\n  Target,\n} from '../types';\nimport { checkDynamicCreation } from '../utils/checkDynamicCreation';\nimport createWarnTooManyClasses from '../utils/createWarnTooManyClasses';\nimport determineTheme from '../utils/determineTheme';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from '../utils/empties';\nimport escape from '../utils/escape';\nimport generateComponentId from '../utils/generateComponentId';\nimport generateDisplayName from '../utils/generateDisplayName';\nimport getComponentName from '../utils/getComponentName';\nimport isFunction from '../utils/isFunction';\nimport isStyledComponent from '../utils/isStyledComponent';\nimport isTag from '../utils/isTag';\nimport joinStrings from '../utils/joinStrings';\nimport merge from '../utils/mixinDeep';\nimport ComponentStyle from './ComponentStyle';\nimport { useStyleSheet, useStylis } from './StyleSheetManager';\nimport { ThemeContext } from './ThemeProvider';\n\nconst identifiers = {};\n\n/* We depend on components having unique IDs */\nfunction generateId(displayName?: string, parentComponentId?: string) {\n  const name = typeof displayName !== 'string' ? 'sc' : escape(displayName);\n  // Ensure that no displayName can lead to duplicate componentIds\n  identifiers[name] = (identifiers[name] || 0) + 1;\n\n  const componentId = `${name}-${generateComponentId(\n    // SC_VERSION gives us isolation between multiple runtimes on the page at once\n    // this is improved further with use of the babel plugin \"namespace\" feature\n    SC_VERSION + name + identifiers[name]\n  )}`;\n\n  return parentComponentId ? `${parentComponentId}-${componentId}` : componentId;\n}\n\nfunction useResolvedAttrs<Config>(theme: any = EMPTY_OBJECT, props: Config, attrs: Attrs) {\n  // NOTE: can't memoize this\n  // returns [context, resolvedAttrs]\n  // where resolvedAttrs is only the things injected by the attrs themselves\n  const context = { ...props, theme };\n  const resolvedAttrs = {};\n\n  attrs.forEach(attrDef => {\n    let resolvedAttrDef = attrDef;\n    let key;\n\n    if (isFunction(resolvedAttrDef)) {\n      resolvedAttrDef = resolvedAttrDef(context);\n    }\n\n    /* eslint-disable guard-for-in */\n    for (key in resolvedAttrDef) {\n      context[key] = resolvedAttrs[key] =\n        key === 'className'\n          ? joinStrings(resolvedAttrs[key], resolvedAttrDef[key])\n          : resolvedAttrDef[key];\n    }\n    /* eslint-enable guard-for-in */\n  });\n\n  return [context, resolvedAttrs];\n}\n\nfunction useInjectedStyle<T>(\n  componentStyle: ComponentStyle,\n  isStatic: boolean,\n  resolvedAttrs: T,\n  warnTooManyClasses?: $Call<typeof createWarnTooManyClasses, string, string>\n) {\n  const styleSheet = useStyleSheet();\n  const stylis = useStylis();\n\n  const className = isStatic\n    ? componentStyle.generateAndInjectStyles(EMPTY_OBJECT, styleSheet, stylis)\n    : componentStyle.generateAndInjectStyles(resolvedAttrs, styleSheet, stylis);\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  if (process.env.NODE_ENV !== 'production') useDebugValue(className);\n\n  if (process.env.NODE_ENV !== 'production' && !isStatic && warnTooManyClasses) {\n    warnTooManyClasses(className);\n  }\n\n  return className;\n}\n\nfunction useStyledComponentImpl(\n  forwardedComponent: IStyledComponent,\n  props: Object,\n  forwardedRef: Ref<any>,\n  isStatic: boolean\n) {\n  const {\n    attrs: componentAttrs,\n    componentStyle,\n    defaultProps,\n    foldedComponentIds,\n    shouldForwardProp,\n    styledComponentId,\n    target,\n  } = forwardedComponent;\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  if (process.env.NODE_ENV !== 'production') useDebugValue(styledComponentId);\n\n  // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,\n  // but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it\n  // should be an immutable value, but behave for now.\n  const theme = determineTheme(props, useContext(ThemeContext), defaultProps);\n\n  const [context, attrs] = useResolvedAttrs(theme || EMPTY_OBJECT, props, componentAttrs);\n\n  const generatedClassName = useInjectedStyle(\n    componentStyle,\n    isStatic,\n    context,\n    process.env.NODE_ENV !== 'production' ? forwardedComponent.warnTooManyClasses : undefined\n  );\n\n  const refToForward = forwardedRef;\n\n  const elementToBeCreated: Target = attrs.$as || props.$as || attrs.as || props.as || target;\n\n  const isTargetTag = isTag(elementToBeCreated);\n  const computedProps = attrs !== props ? { ...props, ...attrs } : props;\n  const propsForElement = {};\n\n  // eslint-disable-next-line guard-for-in\n  for (const key in computedProps) {\n    if (key[0] === '$' || key === 'as') continue;\n    else if (key === 'forwardedAs') {\n      propsForElement.as = computedProps[key];\n    } else if (\n      shouldForwardProp ? shouldForwardProp(key, validAttr) : isTargetTag ? validAttr(key) : true\n    ) {\n      // Don't pass through non HTML tags through to HTML elements\n      propsForElement[key] = computedProps[key];\n    }\n  }\n\n  if (props.style && attrs.style !== props.style) {\n    propsForElement.style = { ...props.style, ...attrs.style };\n  }\n\n  propsForElement.className = Array.prototype\n    .concat(\n      foldedComponentIds,\n      styledComponentId,\n      generatedClassName !== styledComponentId ? generatedClassName : null,\n      props.className,\n      attrs.className\n    )\n    .filter(Boolean)\n    .join(' ');\n\n  propsForElement.ref = refToForward;\n\n  return createElement(elementToBeCreated, propsForElement);\n}\n\nexport default function createStyledComponent(\n  target: $PropertyType<IStyledComponent, 'target'>,\n  options: {\n    attrs?: Attrs,\n    componentId: string,\n    displayName?: string,\n    parentComponentId?: string,\n    shouldForwardProp?: ShouldForwardProp,\n  },\n  rules: RuleSet\n) {\n  const isTargetStyledComp = isStyledComponent(target);\n  const isCompositeComponent = !isTag(target);\n\n  const {\n    attrs = EMPTY_ARRAY,\n    componentId = generateId(options.displayName, options.parentComponentId),\n    displayName = generateDisplayName(target),\n  } = options;\n\n  const styledComponentId =\n    options.displayName && options.componentId\n      ? `${escape(options.displayName)}-${options.componentId}`\n      : options.componentId || componentId;\n\n  // fold the underlying StyledComponent attrs up (implicit extend)\n  const finalAttrs =\n    isTargetStyledComp && ((target: any): IStyledComponent).attrs\n      ? Array.prototype.concat(((target: any): IStyledComponent).attrs, attrs).filter(Boolean)\n      : attrs;\n\n  // eslint-disable-next-line prefer-destructuring\n  let shouldForwardProp = options.shouldForwardProp;\n\n  if (isTargetStyledComp && target.shouldForwardProp) {\n    if (options.shouldForwardProp) {\n      // compose nested shouldForwardProp calls\n      shouldForwardProp = (prop, filterFn) =>\n        ((((target: any): IStyledComponent).shouldForwardProp: any): ShouldForwardProp)(\n          prop,\n          filterFn\n        ) && ((options.shouldForwardProp: any): ShouldForwardProp)(prop, filterFn);\n    } else {\n      // eslint-disable-next-line prefer-destructuring\n      shouldForwardProp = ((target: any): IStyledComponent).shouldForwardProp;\n    }\n  }\n\n  const componentStyle = new ComponentStyle(\n    rules,\n    styledComponentId,\n    isTargetStyledComp ? ((target: Object).componentStyle: ComponentStyle) : undefined\n  );\n\n  // statically styled-components don't need to build an execution context object,\n  // and shouldn't be increasing the number of class names\n  const isStatic = componentStyle.isStatic && attrs.length === 0;\n\n  /**\n   * forwardRef creates a new interim component, which we'll take advantage of\n   * instead of extending ParentComponent to create _another_ interim class\n   */\n  let WrappedStyledComponent: IStyledComponent;\n\n  const forwardRef = (props, ref) =>\n    // eslint-disable-next-line\n    useStyledComponentImpl(WrappedStyledComponent, props, ref, isStatic);\n\n  forwardRef.displayName = displayName;\n\n  WrappedStyledComponent = ((React.forwardRef(forwardRef): any): IStyledComponent);\n  WrappedStyledComponent.attrs = finalAttrs;\n  WrappedStyledComponent.componentStyle = componentStyle;\n  WrappedStyledComponent.displayName = displayName;\n  WrappedStyledComponent.shouldForwardProp = shouldForwardProp;\n\n  // this static is used to preserve the cascade of static classes for component selector\n  // purposes; this is especially important with usage of the css prop\n  WrappedStyledComponent.foldedComponentIds = isTargetStyledComp\n    ? Array.prototype.concat(\n        ((target: any): IStyledComponent).foldedComponentIds,\n        ((target: any): IStyledComponent).styledComponentId\n      )\n    : EMPTY_ARRAY;\n\n  WrappedStyledComponent.styledComponentId = styledComponentId;\n\n  // fold the underlying StyledComponent target up since we folded the styles\n  WrappedStyledComponent.target = isTargetStyledComp\n    ? ((target: any): IStyledComponent).target\n    : target;\n\n  WrappedStyledComponent.withComponent = function withComponent(tag: Target) {\n    const { componentId: previousComponentId, ...optionsToCopy } = options;\n\n    const newComponentId =\n      previousComponentId &&\n      `${previousComponentId}-${isTag(tag) ? tag : escape(getComponentName(tag))}`;\n\n    const newOptions = {\n      ...optionsToCopy,\n      attrs: finalAttrs,\n      componentId: newComponentId,\n    };\n\n    return createStyledComponent(tag, newOptions, rules);\n  };\n\n  Object.defineProperty(WrappedStyledComponent, 'defaultProps', {\n    get() {\n      return this._foldedDefaultProps;\n    },\n\n    set(obj) {\n      this._foldedDefaultProps = isTargetStyledComp\n        ? merge({}, ((target: any): IStyledComponent).defaultProps, obj)\n        : obj;\n    },\n  });\n\n  if (process.env.NODE_ENV !== 'production') {\n    checkDynamicCreation(displayName, styledComponentId);\n\n    WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(\n      displayName,\n      styledComponentId\n    );\n  }\n\n  WrappedStyledComponent.toString = () => `.${WrappedStyledComponent.styledComponentId}`;\n\n  if (isCompositeComponent) {\n    hoist<\n      IStyledStatics,\n      $PropertyType<IStyledComponent, 'target'>,\n      { [key: $Keys<IStyledStatics>]: true }\n    >(WrappedStyledComponent, ((target: any): $PropertyType<IStyledComponent, 'target'>), {\n      // all SC-specific things should not be hoisted\n      attrs: true,\n      componentStyle: true,\n      displayName: true,\n      foldedComponentIds: true,\n      shouldForwardProp: true,\n      styledComponentId: true,\n      target: true,\n      withComponent: true,\n    });\n  }\n\n  return WrappedStyledComponent;\n}\n"],"names":["nodes","insertRule","names","id","flatten","React","options"],"mappings":"ksJAsF0BA,gHAgBxBC,WAAA,yWC3DQC,yxBAmC8BC,iOAkBVA,6xBC3FuB,oxWCcHA,4nECM9BC,kCAEVD,s3BCsCEE,owSCuMuDC,qJAAAA"}

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

@@ -154,7 +154,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 var SC_ATTR = typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || 'data-styled';
 var SC_ATTR_ACTIVE = 'active';
 var SC_ATTR_VERSION = 'data-styled-version';
-var SC_VERSION = "5.2.2";
+var SC_VERSION = "5.2.3";
 var SPLITTER = '/*!sc*/\n';
 var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
 var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean' ? SC_DISABLE_SPEEDY : typeof process !== 'undefined' && typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' && process.env.REACT_APP_SC_DISABLE_SPEEDY !== '' ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false' ? false : process.env.REACT_APP_SC_DISABLE_SPEEDY : typeof process !== 'undefined' && typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' && process.env.SC_DISABLE_SPEEDY !== '' ? process.env.SC_DISABLE_SPEEDY === 'false' ? false : process.env.SC_DISABLE_SPEEDY : process.env.NODE_ENV !== 'production'); // Shared empty execution context when generating static styles
@@ -440,7 +440,7 @@ var rehydrateSheet = function rehydrateSheet(sheet) {
 
 /* eslint-disable camelcase, no-undef */
 var getNonce = function getNonce() {
-  return typeof window.__webpack_nonce__ !== 'undefined' ? window.__webpack_nonce__ : null;
+  return typeof window !== 'undefined' ? typeof window.__webpack_nonce__ !== 'undefined' ? window.__webpack_nonce__ : null : null;
 };
 
 // 

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

@@ -147,7 +147,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 var SC_ATTR = typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || 'data-styled';
 var SC_ATTR_ACTIVE = 'active';
 var SC_ATTR_VERSION = 'data-styled-version';
-var SC_VERSION = "5.2.2";
+var SC_VERSION = "5.2.3";
 var SPLITTER = '/*!sc*/\n';
 var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
 var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean' ? SC_DISABLE_SPEEDY : typeof process !== 'undefined' && typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' && process.env.REACT_APP_SC_DISABLE_SPEEDY !== '' ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false' ? false : process.env.REACT_APP_SC_DISABLE_SPEEDY : typeof process !== 'undefined' && typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' && process.env.SC_DISABLE_SPEEDY !== '' ? process.env.SC_DISABLE_SPEEDY === 'false' ? false : process.env.SC_DISABLE_SPEEDY : process.env.NODE_ENV !== 'production'); // Shared empty execution context when generating static styles
@@ -433,7 +433,7 @@ var rehydrateSheet = function rehydrateSheet(sheet) {
 
 /* eslint-disable camelcase, no-undef */
 var getNonce = function getNonce() {
-  return typeof window.__webpack_nonce__ !== 'undefined' ? window.__webpack_nonce__ : null;
+  return typeof window !== 'undefined' ? typeof window.__webpack_nonce__ !== 'undefined' ? window.__webpack_nonce__ : null : null;
 };
 
 // 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-components",
-  "version": "5.2.2",
+  "version": "5.2.3",
   "description": "Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress",
   "main": "dist/styled-components.cjs.js",
   "jsnext:main": "dist/styled-components.esm.js",

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

@@ -155,7 +155,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 var SC_ATTR = typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || 'data-styled';
 var SC_ATTR_ACTIVE = 'active';
 var SC_ATTR_VERSION = 'data-styled-version';
-var SC_VERSION = "5.2.2";
+var SC_VERSION = "5.2.3";
 var SPLITTER = '/*!sc*/\n';
 var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
 var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean' ? SC_DISABLE_SPEEDY : typeof process !== 'undefined' && typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' && process.env.REACT_APP_SC_DISABLE_SPEEDY !== '' ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false' ? false : process.env.REACT_APP_SC_DISABLE_SPEEDY : typeof process !== 'undefined' && typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' && process.env.SC_DISABLE_SPEEDY !== '' ? process.env.SC_DISABLE_SPEEDY === 'false' ? false : process.env.SC_DISABLE_SPEEDY : process.env.NODE_ENV !== 'production'); // Shared empty execution context when generating static styles
@@ -441,7 +441,7 @@ var rehydrateSheet = function rehydrateSheet(sheet) {
 
 /* eslint-disable camelcase, no-undef */
 var getNonce = function getNonce() {
-  return typeof window.__webpack_nonce__ !== 'undefined' ? window.__webpack_nonce__ : null;
+  return typeof window !== 'undefined' ? typeof window.__webpack_nonce__ !== 'undefined' ? window.__webpack_nonce__ : null : null;
 };
 
 // 

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

@@ -148,7 +148,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 var SC_ATTR = typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || 'data-styled';
 var SC_ATTR_ACTIVE = 'active';
 var SC_ATTR_VERSION = 'data-styled-version';
-var SC_VERSION = "5.2.2";
+var SC_VERSION = "5.2.3";
 var SPLITTER = '/*!sc*/\n';
 var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
 var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean' ? SC_DISABLE_SPEEDY : typeof process !== 'undefined' && typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' && process.env.REACT_APP_SC_DISABLE_SPEEDY !== '' ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false' ? false : process.env.REACT_APP_SC_DISABLE_SPEEDY : typeof process !== 'undefined' && typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' && process.env.SC_DISABLE_SPEEDY !== '' ? process.env.SC_DISABLE_SPEEDY === 'false' ? false : process.env.SC_DISABLE_SPEEDY : process.env.NODE_ENV !== 'production'); // Shared empty execution context when generating static styles
@@ -434,7 +434,7 @@ var rehydrateSheet = function rehydrateSheet(sheet) {
 
 /* eslint-disable camelcase, no-undef */
 var getNonce = function getNonce() {
-  return typeof window.__webpack_nonce__ !== 'undefined' ? window.__webpack_nonce__ : null;
+  return typeof window !== 'undefined' ? typeof window.__webpack_nonce__ !== 'undefined' ? window.__webpack_nonce__ : null : null;
 };
 
 // 

package/README.md

@@ -1,181 +0,0 @@
-<div align="center">
-  <a href="https://www.styled-components.com">
-    <img alt="styled-components" src="https://raw.githubusercontent.com/styled-components/brand/master/styled-components.png" height="150px" />
-  </a>
-</div>
-
-<br />
-
-<div align="center">
-  <strong>Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅</strong>
-  <br />
-  <br />
-  <a href="https://www.npmjs.com/package/styled-components"><img src="https://www.styled-components.com/proxy/downloads.svg" alt="downloads: 600k/month"></a>
-  <a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/styled-components/backers/badge.svg" /></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/styled-components/sponsors/badge.svg" /></a> <a href="https://spectrum.chat/styled-components"><img src="https://withspectrum.github.io/badge/badge.svg" alt="Join the community on Spectrum"></a>
-  <a href="https://bundlephobia.com/result?p=styled-components" title="styled-components latest minified+gzip size"><img src="https://badgen.net/bundlephobia/minzip/styled-components" alt="gzip size"></a>
-  <a href="#alternative-installation-methods"><img src="https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg" alt="module formats: umd, cjs, esm"></a>
-  <a href="https://codecov.io/gh/styled-components/styled-components"><img src="https://codecov.io/gh/styled-components/styled-components/coverage.svg?branch=master" alt="Code Coverage"></a>
-</div>
-
-<br />
-<br />
-
-Utilising [tagged template literals](https://www.styled-components.com/docs/advanced#tagged-template-literals) (a recent addition to JavaScript) and the [power of CSS](https://www.styled-components.com/docs/api#supported-css), `styled-components` allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!
-
-```jsx
-const Button = styled.button`
-  color: grey;
-`;
-```
-
-Alternatively, you may use [style objects](https://www.styled-components.com/docs/advanced#style-objects). This allows for easy porting of CSS from inline styles, while still supporting the more advanced styled-components capabilities like component selectors and media queries.
-
-```jsx
-const Button = styled.button({
-  color: 'grey',
-});
-```
-
-Equivalent to:
-
-```jsx
-const Button = styled.button`
-  color: grey;
-`;
-```
-
-`styled-components` is compatible with both React (for web) and React Native – meaning it's the perfect choice even for truly universal apps! See the [documentation about React Native](https://www.styled-components.com/docs/basics#react-native) for more information.
-
-_Supported by [Front End Center](https://frontend.center). Thank you for making this possible!_
-
-## Upgrading from v4
-
-1. `npm install styled-components@^5.0.0 react@^16.8 react-dom@^16.8 react-is@^16.8`
-1. ??
-1. Profit!
-
-> If you use jest-styled-components, make sure you update that too.
-
-## [Docs](https://www.styled-components.com/docs)
-
-**See the documentation at [styled-components.com/docs](https://www.styled-components.com/docs)** for more information about using `styled-components`!
-
-Quicklinks to some of the most-visited pages:
-
-- [**Getting started**](https://www.styled-components.com/docs/basics)
-- [API Reference](https://styled-components.com/docs/api)
-- [Theming](https://www.styled-components.com/docs/advanced#theming)
-- [Server-side rendering](https://www.styled-components.com/docs/advanced#server-side-rendering)
-- [Tagged Template Literals explained](https://www.styled-components.com/docs/advanced#tagged-template-literals)
-
-## Example
-
-<!-- prettier-ignore -->
-```JSX
-import React from 'react';
-
-import styled from 'styled-components';
-
-// Create a <Title> react component that renders an <h1> which is
-// centered, palevioletred and sized at 1.5em
-const Title = styled.h1`
-  font-size: 1.5em;
-  text-align: center;
-  color: palevioletred;
-`;
-
-// Create a <Wrapper> react component that renders a <section> with
-// some padding and a papayawhip background
-const Wrapper = styled.section`
-  padding: 4em;
-  background: papayawhip;
-`;
-
-// Use them like any other React component – except they're styled!
-<Wrapper>
-  <Title>Hello World, this is my first styled component!</Title>
-</Wrapper>
-```
-
-This is what you'll see in your browser:
-
-<div align="center">
-  <a href="https://styled-components.com">
-    <img alt="Screenshot of the above code ran in a browser" src="http://i.imgur.com/wUJpcjY.jpg" />
-  </a>
-</div>
-
-## Babel Macro
-
-If you're using tooling that has babel-plugin-macros set up, you can switch to the `styled-components/macro` import path instead to gain the effects of the babel plugin without further setup.
-
-```js
-import styled from 'styled-components/macro';
-
-// A static className will be generated for Title (important for SSR)
-const Title = styled.h1`
-  font-size: 1.5em;
-  text-align: center;
-  color: palevioletred;
-`;
-```
-
-If you wish to provide configuration options to the babel plugin similar to how you would in a `.babelrc`, [see this guide](https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/author.md#config-experimental). The config name is `"styledComponents"`.
-
-## Built with `styled-components`
-
-A lot of hard work goes into community libraries, projects, and guides. A lot of them make it easier to get started or help you with your next project! There’s also a whole lot of interesting apps and sites that people have built using styled-components.
-
-Make sure to head over to [awesome-styled-components](https://github.com/styled-components/awesome-styled-components) to see them all! And please contribute and add your own work to the list so others can find it.
-
-## Contributing
-
-If you want to contribute to `styled-components` please see our [contributing and community guidelines](./CONTRIBUTING.md), they'll help you get set up locally and explain the whole process.
-
-Please also note that all repositories under the `styled-components` organization follow our [Code of Conduct](./CODE_OF_CONDUCT.md), make sure to review and follow it.
-
-## Badge
-
-Let everyone know you're using _styled-components_ → [![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)
-
-```md
-[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)
-```
-
-## Contributors
-
-This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
-<a href="https://github.com/styled-components/styled-components/graphs/contributors"><img src="https://opencollective.com/styled-components/contributors.svg?width=890" /></a>
-
-## Backers
-
-Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/styled-components#backer)]
-
-<a href="https://opencollective.com/styled-components#backers" target="_blank"><img src="https://opencollective.com/styled-components/backers.svg?width=890"></a>
-
-## Sponsors
-
-Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/styled-components#sponsor)]
-
-<a href="https://opencollective.com/styled-components/sponsor/0/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/0/avatar.svg"></a>
-<a href="https://opencollective.com/styled-components/sponsor/1/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/1/avatar.svg"></a>
-<a href="https://opencollective.com/styled-components/sponsor/2/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/2/avatar.svg"></a>
-<a href="https://opencollective.com/styled-components/sponsor/3/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/3/avatar.svg"></a>
-<a href="https://opencollective.com/styled-components/sponsor/4/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/4/avatar.svg"></a>
-<a href="https://opencollective.com/styled-components/sponsor/5/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/5/avatar.svg"></a>
-<a href="https://opencollective.com/styled-components/sponsor/6/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/6/avatar.svg"></a>
-<a href="https://opencollective.com/styled-components/sponsor/7/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/7/avatar.svg"></a>
-<a href="https://opencollective.com/styled-components/sponsor/8/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/8/avatar.svg"></a>
-<a href="https://opencollective.com/styled-components/sponsor/9/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/9/avatar.svg"></a>
-
-## License
-
-Licensed under the MIT License, Copyright © 2016-present Glen Maddern and Maximilian Stoiber.
-
-See [LICENSE](./LICENSE) for more information.
-
-## Acknowledgements
-
-This project builds on a long line of earlier work by clever folks all around the world. We'd like to thank Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson & Andrey Sitnik who contributed ideas, code or inspiration.
-
-Special thanks to [@okonet](https://github.com/okonet) for the fantastic logo.