{"version":3,"file":"styled-components.browser.cjs.js","sources":["../src/constants.js","../src/sheet/Rehydration.js","../src/sheet/Tag.js","../src/sheet/Sheet.js","../src/utils/isStaticRules.js","../src/models/Keyframes.js","../src/models/StyledComponent.js","../src/models/GlobalStyle.js","../src/models/ServerStyleSheet.js"],"sourcesContent":["// @flow\n\ndeclare var SC_DISABLE_SPEEDY: ?boolean;\ndeclare var __VERSION__: string;\n\nexport const SC_ATTR: string =\n (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR)) ||\n 'data-styled';\n\nexport const SC_ATTR_ACTIVE = 'active';\nexport const SC_ATTR_VERSION = 'data-styled-version';\nexport const SC_VERSION = __VERSION__;\nexport const SPLITTER = '/*!sc*/\\n';\n\nexport const IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;\n\nexport const DISABLE_SPEEDY =\n Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'\n ? SC_DISABLE_SPEEDY\n : (typeof process !== 'undefined' && typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' && process.env.REACT_APP_SC_DISABLE_SPEEDY !== ''\n ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false' ? false : process.env.REACT_APP_SC_DISABLE_SPEEDY\n : (typeof process !== 'undefined' && typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' && process.env.SC_DISABLE_SPEEDY !== ''\n ? process.env.SC_DISABLE_SPEEDY === 'false' ? false : process.env.SC_DISABLE_SPEEDY\n : process.env.NODE_ENV !== 'production'\n )\n ));\n\n// Shared empty execution context when generating static styles\nexport const STATIC_EXECUTION_CONTEXT = {};\n","// @flow\n\nimport { SPLITTER, SC_ATTR, SC_ATTR_ACTIVE, SC_ATTR_VERSION, SC_VERSION } from '../constants';\nimport { getIdForGroup, setGroupForId } from './GroupIDAllocator';\nimport type { Sheet } from './types';\n\nconst SELECTOR = `style[${SC_ATTR}][${SC_ATTR_VERSION}=\"${SC_VERSION}\"]`;\nconst MARKER_RE = new RegExp(`^${SC_ATTR}\\\\.g(\\\\d+)\\\\[id=\"([\\\\w\\\\d-]+)\"\\\\].*?\"([^\"]*)`);\n\nexport const outputSheet = (sheet: Sheet) => {\n const tag = sheet.getTag();\n const { length } = tag;\n\n let css = '';\n for (let group = 0; group < length; group++) {\n const id = getIdForGroup(group);\n if (id === undefined) continue;\n\n const names = sheet.names.get(id);\n const rules = tag.getGroup(group);\n if (!names || !rules || !names.size) continue;\n\n const selector = `${SC_ATTR}.g${group}[id=\"${id}\"]`;\n\n let content = '';\n if (names !== undefined) {\n names.forEach(name => {\n if (name.length > 0) {\n content += `${name},`;\n }\n });\n }\n\n // NOTE: It's easier to collect rules and have the marker\n // after the actual rules to simplify the rehydration\n css += `${rules}${selector}{content:\"${content}\"}${SPLITTER}`;\n }\n\n return css;\n};\n\nconst rehydrateNamesFromContent = (sheet: Sheet, id: string, content: string) => {\n const names = content.split(',');\n let name;\n\n for (let i = 0, l = names.length; i < l; i++) {\n // eslint-disable-next-line\n if ((name = names[i])) {\n sheet.registerName(id, name);\n }\n }\n};\n\nconst rehydrateSheetFromTag = (sheet: Sheet, style: HTMLStyleElement) => {\n const parts = (style.innerHTML || '').split(SPLITTER);\n const rules: string[] = [];\n\n for (let i = 0, l = parts.length; i < l; i++) {\n const part = parts[i].trim();\n if (!part) continue;\n\n const marker = part.match(MARKER_RE);\n\n if (marker) {\n const group = parseInt(marker[1], 10) | 0;\n const id = marker[2];\n\n if (group !== 0) {\n // Rehydrate componentId to group index mapping\n setGroupForId(id, group);\n // Rehydrate names and rules\n // looks like: data-styled.g11[id=\"idA\"]{content:\"nameA,\"}\n rehydrateNamesFromContent(sheet, id, marker[3]);\n sheet.getTag().insertRules(group, rules);\n }\n\n rules.length = 0;\n } else {\n rules.push(part);\n }\n }\n};\n\nexport const rehydrateSheet = (sheet: Sheet) => {\n const nodes = document.querySelectorAll(SELECTOR);\n\n for (let i = 0, l = nodes.length; i < l; i++) {\n const node = ((nodes[i]: any): HTMLStyleElement);\n if (node && node.getAttribute(SC_ATTR) !== SC_ATTR_ACTIVE) {\n rehydrateSheetFromTag(sheet, node);\n\n if (node.parentNode) {\n node.parentNode.removeChild(node);\n }\n }\n }\n};\n","// @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;\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>;\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 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(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(\n componentStyle: ComponentStyle,\n isStatic: boolean,\n resolvedAttrs: T,\n warnTooManyClasses?: $Call\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,\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\n ? shouldForwardProp(key, validAttr, elementToBeCreated)\n : isTargetTag\n ? validAttr(key)\n : 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,\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, elementToBeCreated) =>\n ((((target: any): IStyledComponent).shouldForwardProp: any): ShouldForwardProp)(\n prop,\n filterFn,\n elementToBeCreated\n ) &&\n ((options.shouldForwardProp: any): ShouldForwardProp)(prop, filterFn, elementToBeCreated);\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,\n { [key: $Keys]: true }\n >(WrappedStyledComponent, ((target: any): $PropertyType), {\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","// @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 if (!css) return '';\n\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 ``;\n };\n\n collectStyles(children: any) {\n if (this.sealed) {\n return throwStyledError(2);\n }\n\n return {children};\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 [