{"version":3,"file":"styled-components.browser.cjs.js","sources":["../src/constants.js","../src/sheet/Tag.js","../src/sheet/GroupedTag.js","../src/sheet/GroupIDAllocator.js","../src/sheet/Sheet.js","../src/utils/isStaticRules.js","../src/models/ComponentStyle.js","../src/models/StyledComponent.js","../src/models/GlobalStyle.js","../src/constructors/createGlobalStyle.js","../src/models/ServerStyleSheet.js"],"sourcesContent":["// @flow\n\ndeclare var SC_DISABLE_SPEEDY: ?boolean;\ndeclare var __VERSION__: string;\n\nexport const SC_ATTR =\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__;\n\nexport const IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;\n\nexport const DISABLE_SPEEDY =\n (typeof SC_DISABLE_SPEEDY === 'boolean' && SC_DISABLE_SPEEDY) ||\n (typeof process !== 'undefined' &&\n (process.env.REACT_APP_SC_DISABLE_SPEEDY || process.env.SC_DISABLE_SPEEDY)) ||\n process.env.NODE_ENV !== 'production';\n\n// Shared empty execution context when generating static styles\nexport const STATIC_EXECUTION_CONTEXT = {};\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\n/* eslint-disable no-use-before-define */\n\nimport type { GroupedTag, Tag } from './types';\n\n/** Create a GroupedTag with an underlying Tag implementation */\nexport const makeGroupedTag = (tag: Tag): GroupedTag => {\n return new DefaultGroupedTag(tag);\n};\n\nconst BASE_SIZE = 1 << 8;\n\nclass DefaultGroupedTag implements GroupedTag {\n groupSizes: Uint32Array;\n\n length: number;\n\n tag: Tag;\n\n constructor(tag: Tag) {\n this.groupSizes = new Uint32Array(BASE_SIZE);\n this.length = BASE_SIZE;\n this.tag = tag;\n }\n\n indexOfGroup(group: number): number {\n let index = 0;\n for (let i = 0; i < group; i++) {\n index += this.groupSizes[i];\n }\n\n return index;\n }\n\n insertRules(group: number, rules: string[]): void {\n if (group >= this.groupSizes.length) {\n const oldBuffer = this.groupSizes;\n const oldSize = oldBuffer.length;\n const newSize = BASE_SIZE << ((group / BASE_SIZE) | 0);\n\n this.groupSizes = new Uint32Array(newSize);\n this.groupSizes.set(oldBuffer);\n this.length = newSize;\n\n for (let i = oldSize; i < newSize; i++) {\n this.groupSizes[i] = 0;\n }\n }\n\n const startIndex = this.indexOfGroup(group + 1);\n for (let i = 0, l = rules.length; i < l; i++) {\n if (this.tag.insertRule(startIndex + i, rules[i])) {\n this.groupSizes[group]++;\n }\n }\n }\n\n clearGroup(group: number): void {\n if (group < this.length) {\n const length = this.groupSizes[group];\n const startIndex = this.indexOfGroup(group);\n const endIndex = startIndex + length;\n\n this.groupSizes[group] = 0;\n\n for (let i = startIndex; i < endIndex; i++) {\n this.tag.deleteRule(startIndex);\n }\n }\n }\n\n getGroup(group: number): string {\n let css = '';\n if (group >= this.length || this.groupSizes[group] === 0) {\n return css;\n }\n\n const length = this.groupSizes[group];\n const startIndex = this.indexOfGroup(group);\n const endIndex = startIndex + length;\n\n for (let i = startIndex; i < endIndex; i++) {\n css += `${this.tag.getRule(i)}\\n`;\n }\n\n return css;\n }\n}\n","// @flow\n\nlet groupIDRegister: Map = new Map();\nlet reverseRegister: Map = new Map();\nlet nextFreeGroup = 1;\n\nexport const resetGroupIds = () => {\n groupIDRegister = new Map();\n reverseRegister = new Map();\n nextFreeGroup = 1;\n};\n\nexport const getGroupForId = (id: string): number => {\n if (groupIDRegister.has(id)) {\n return (groupIDRegister.get(id): any);\n }\n\n const group = nextFreeGroup++;\n groupIDRegister.set(id, group);\n reverseRegister.set(group, id);\n return group;\n};\n\nexport const getIdForGroup = (group: number): void | string => {\n return reverseRegister.get(group);\n};\n\nexport const setGroupForId = (id: string, group: number) => {\n if (group >= nextFreeGroup) {\n nextFreeGroup = group + 1;\n }\n\n groupIDRegister.set(id, group);\n reverseRegister.set(group, id);\n};\n","// @flow\nimport { DISABLE_SPEEDY, IS_BROWSER } from '../constants';\nimport createStylisInstance from '../utils/stylis';\nimport type { GroupedTag, Sheet, SheetOptions } from './types';\nimport { makeTag } from './Tag';\nimport { makeGroupedTag } from './GroupedTag';\nimport { getGroupForId } from './GroupIDAllocator';\nimport { outputSheet, rehydrateSheet } from './Rehydration';\n\nlet SHOULD_REHYDRATE = IS_BROWSER;\n\ntype SheetConstructorArgs = {\n isServer?: boolean,\n useCSSOMInjection?: boolean,\n target?: HTMLElement,\n};\n\nconst defaultOptions = {\n isServer: !IS_BROWSER,\n stringifier: createStylisInstance(),\n useCSSOMInjection: !DISABLE_SPEEDY,\n};\n\n/** Contains the main stylesheet logic for stringification and caching */\nexport default class StyleSheet implements Sheet {\n names: Map>;\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(options: SheetConstructorArgs = defaultOptions) {\n this.options = {\n ...defaultOptions,\n ...options,\n };\n\n this.names = new Map();\n\n // We rehydrate only once and use the sheet that is\n // 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) {\n return new StyleSheet({ ...this.options, ...options });\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\n\nimport flatten from '../utils/flatten';\nimport { hash, phash } from '../utils/hasher';\nimport generateName from '../utils/generateAlphabeticName';\nimport isStaticRules from '../utils/isStaticRules';\nimport StyleSheet from '../sheet';\n\nimport type { RuleSet } from '../types';\n\n/*\n ComponentStyle is all the CSS-specific stuff, not\n the React-specific stuff.\n */\nexport default class ComponentStyle {\n baseHash: number;\n\n componentId: string;\n\n isStatic: boolean;\n\n rules: RuleSet;\n\n staticRulesId: string;\n\n constructor(rules: RuleSet, componentId: string) {\n this.rules = rules;\n this.staticRulesId = '';\n this.isStatic = process.env.NODE_ENV === 'production' && isStaticRules(rules);\n this.componentId = componentId;\n this.baseHash = hash(componentId);\n\n // NOTE: This registers the componentId, which ensures a consistent order\n // for this component's styles compared to others\n StyleSheet.registerId(componentId);\n }\n\n /*\n * Flattens a rule set into valid CSS\n * Hashes it, wraps the whole chunk in a .hash1234 {}\n * Returns the hash to be injected on render()\n * */\n generateAndInjectStyles(executionContext: Object, styleSheet: StyleSheet) {\n const { componentId } = this;\n\n if (this.isStatic) {\n if (this.staticRulesId && styleSheet.hasNameForId(componentId, this.staticRulesId)) {\n return this.staticRulesId;\n }\n\n const cssStatic = flatten(this.rules, executionContext, styleSheet).join('');\n const name = generateName(phash(this.baseHash, cssStatic.length) >>> 0);\n\n if (!styleSheet.hasNameForId(componentId, name)) {\n const cssStaticFormatted = styleSheet.options.stringifier(\n cssStatic,\n `.${name}`,\n undefined,\n componentId\n );\n\n styleSheet.insertRules(componentId, name, cssStaticFormatted);\n }\n\n this.staticRulesId = name;\n\n return name;\n } else {\n const { length } = this.rules;\n\n let dynamicHash = this.baseHash;\n let i = 0;\n let css = '';\n\n for (i = 0; i < length; i++) {\n const partRule = this.rules[i];\n if (typeof partRule === 'string') {\n css += partRule;\n\n if (process.env.NODE_ENV !== 'production') dynamicHash = phash(dynamicHash, partRule + i);\n } else {\n const partChunk = flatten(partRule, executionContext, styleSheet);\n const partString = Array.isArray(partChunk) ? partChunk.join('') : partChunk;\n dynamicHash = phash(dynamicHash, partString + i);\n css += partString;\n }\n }\n\n const name = generateName(dynamicHash >>> 0);\n\n if (!styleSheet.hasNameForId(componentId, name)) {\n const cssFormatted = styleSheet.options.stringifier(\n css,\n `.${name}`,\n undefined,\n componentId\n );\n styleSheet.insertRules(componentId, name, cssFormatted);\n }\n\n return name;\n }\n }\n}\n","// @flow\nimport validAttr from '@emotion/is-prop-valid';\nimport merge from 'merge-anything';\nimport React, {\n createElement,\n useContext,\n useDebugValue,\n type AbstractComponent,\n type Ref,\n} from 'react';\nimport ComponentStyle from './ComponentStyle';\nimport createWarnTooManyClasses from '../utils/createWarnTooManyClasses';\nimport determineTheme from '../utils/determineTheme';\nimport escape from '../utils/escape';\nimport generateDisplayName from '../utils/generateDisplayName';\nimport getComponentName from '../utils/getComponentName';\nimport hoist from '../utils/hoist';\nimport isFunction from '../utils/isFunction';\nimport isTag from '../utils/isTag';\nimport isStyledComponent from '../utils/isStyledComponent';\nimport hasher from '../utils/hasher';\nimport { ThemeContext } from './ThemeProvider';\nimport { useStyleSheet } from './StyleSheetManager';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from '../utils/empties';\n\nimport type { Attrs, RuleSet, Target } from '../types';\n\n/* global $Call */\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}-${hasher(name + identifiers[name])}`;\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] = resolvedAttrDef[key];\n }\n /* eslint-enable guard-for-in */\n });\n\n return [context, resolvedAttrs];\n}\n\ninterface StyledComponentWrapperProperties {\n attrs: Attrs;\n componentStyle: ComponentStyle;\n foldedComponentIds: Array;\n target: Target;\n styledComponentId: string;\n warnTooManyClasses: $Call;\n}\n\ntype StyledComponentWrapper = AbstractComponent &\n StyledComponentWrapperProperties;\n\nfunction useInjectedStyle(\n componentStyle: ComponentStyle,\n hasAttrs: boolean,\n resolvedAttrs: T,\n warnTooManyClasses?: $Call\n) {\n const styleSheet = useStyleSheet();\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 && !hasAttrs;\n\n const className = isStatic\n ? componentStyle.generateAndInjectStyles(EMPTY_OBJECT, styleSheet)\n : componentStyle.generateAndInjectStyles(resolvedAttrs, styleSheet);\n\n 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: StyledComponentWrapper,\n props: Object,\n forwardedRef: Ref\n) {\n const {\n attrs: componentAttrs,\n componentStyle,\n // $FlowFixMe\n defaultProps,\n foldedComponentIds,\n styledComponentId,\n target,\n } = forwardedComponent;\n\n 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) || EMPTY_OBJECT;\n\n const [context, attrs] = useResolvedAttrs(theme, props, componentAttrs);\n\n const generatedClassName = useInjectedStyle(\n componentStyle,\n componentAttrs.length > 0,\n context,\n process.env.NODE_ENV !== 'production' ? forwardedComponent.warnTooManyClasses : undefined\n );\n\n const refToForward = forwardedRef;\n\n const elementToBeCreated: Target = props.as || attrs.as || target;\n\n const isTargetTag = isTag(elementToBeCreated);\n const computedProps = attrs !== props ? { ...attrs, ...props } : props;\n const shouldFilterProps = isTargetTag || 'as' in computedProps || 'forwardedAs' in computedProps;\n const propsForElement = shouldFilterProps ? {} : { ...computedProps };\n\n if (shouldFilterProps) {\n // eslint-disable-next-line guard-for-in\n for (const key in computedProps) {\n if (key === 'forwardedAs') {\n propsForElement.as = computedProps[key];\n } else if (key !== 'as' && key !== 'forwardedAs' && (!isTargetTag || validAttr(key))) {\n // Don't pass through non HTML tags through to HTML elements\n propsForElement[key] = computedProps[key];\n }\n }\n }\n\n if (props.style && attrs.style !== props.style) {\n propsForElement.style = { ...attrs.style, ...props.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: Target | StyledComponentWrapper<*, *>,\n options: Object,\n rules: RuleSet\n) {\n const isTargetStyledComp = isStyledComponent(target);\n const isCompositeComponent = !isTag(target);\n\n const {\n displayName = generateDisplayName(target),\n componentId = generateId(options.displayName, options.parentComponentId),\n attrs = EMPTY_ARRAY,\n } = options;\n\n const styledComponentId =\n options.displayName && options.componentId\n ? `${escape(options.displayName)}-${options.componentId}`\n : options.componentId || componentId;\n\n // fold the underlying StyledComponent attrs up (implicit extend)\n const finalAttrs =\n // $FlowFixMe\n isTargetStyledComp && target.attrs\n ? Array.prototype.concat(target.attrs, attrs).filter(Boolean)\n : attrs;\n\n const componentStyle = new ComponentStyle(\n isTargetStyledComp\n ? // fold the underlying StyledComponent rules up (implicit extend)\n // $FlowFixMe\n target.componentStyle.rules.concat(rules)\n : rules,\n styledComponentId\n );\n\n /**\n * forwardRef creates a new interim component, which we'll take advantage of\n * instead of extending ParentComponent to create _another_ interim class\n */\n let WrappedStyledComponent;\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const forwardRef = (props, ref) => useStyledComponentImpl(WrappedStyledComponent, props, ref);\n\n forwardRef.displayName = displayName;\n\n // $FlowFixMe this is a forced cast to merge it StyledComponentWrapperProperties\n WrappedStyledComponent = (React.forwardRef(forwardRef): StyledComponentWrapper<*, *>);\n\n WrappedStyledComponent.attrs = finalAttrs;\n WrappedStyledComponent.componentStyle = componentStyle;\n WrappedStyledComponent.displayName = displayName;\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 ? // $FlowFixMe\n Array.prototype.concat(target.foldedComponentIds, target.styledComponentId)\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 ? // $FlowFixMe\n target.target\n : target;\n\n // $FlowFixMe\n WrappedStyledComponent.withComponent = function withComponent(tag: Target) {\n const { componentId: previousComponentId, ...optionsToCopy } = options;\n\n const newComponentId =\n previousComponentId &&\n `${previousComponentId}-${isTag(tag) ? tag : escape(getComponentName(tag))}`;\n\n const newOptions = {\n ...optionsToCopy,\n attrs: finalAttrs,\n componentId: newComponentId,\n };\n\n return createStyledComponent(tag, newOptions, rules);\n };\n\n // $FlowFixMe\n Object.defineProperty(WrappedStyledComponent, 'defaultProps', {\n get() {\n return this._foldedDefaultProps;\n },\n\n set(obj) {\n // $FlowFixMe\n this._foldedDefaultProps = isTargetStyledComp ? merge(target.defaultProps, obj) : obj;\n },\n });\n\n if (process.env.NODE_ENV !== 'production') {\n WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(displayName);\n }\n\n // $FlowFixMe\n WrappedStyledComponent.toString = () => `.${WrappedStyledComponent.styledComponentId}`;\n\n if (isCompositeComponent) {\n hoist(WrappedStyledComponent, target, {\n // all SC-specific things should not be hoisted\n attrs: true,\n componentStyle: true,\n displayName: true,\n foldedComponentIds: true,\n self: true,\n styledComponentId: true,\n target: true,\n withComponent: true,\n });\n }\n\n return WrappedStyledComponent;\n}\n","// @flow\nimport flatten from '../utils/flatten';\nimport isStaticRules from '../utils/isStaticRules';\nimport StyleSheet from '../sheet';\n\nimport type { RuleSet } from '../types';\n\nexport default class GlobalStyle {\n componentId: string;\n\n isStatic: boolean;\n\n rules: RuleSet;\n\n constructor(rules: RuleSet, componentId: string) {\n this.rules = rules;\n this.componentId = componentId;\n this.isStatic = isStaticRules(rules);\n StyleSheet.registerId(componentId);\n }\n\n createStyles(executionContext: Object, styleSheet: StyleSheet) {\n const flatCSS = flatten(this.rules, executionContext, styleSheet);\n const css = styleSheet.options.stringifier(flatCSS.join(''), '');\n const id = this.componentId;\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(styleSheet: StyleSheet) {\n styleSheet.clearRules(this.componentId);\n }\n\n renderStyles(executionContext: Object, styleSheet: StyleSheet) {\n // NOTE: Remove old styles, then inject the new ones\n this.removeStyles(styleSheet);\n this.createStyles(executionContext, styleSheet);\n }\n}\n","// @flow\nimport React, { useContext, useEffect } from 'react';\nimport { IS_BROWSER, STATIC_EXECUTION_CONTEXT } from '../constants';\nimport GlobalStyle from '../models/GlobalStyle';\nimport { useStyleSheet } from '../models/StyleSheetManager';\nimport determineTheme from '../utils/determineTheme';\nimport { ThemeContext } from '../models/ThemeProvider';\nimport hasher from '../utils/hasher';\nimport css from './css';\n\nimport type { Interpolation } from '../types';\n\ntype GlobalStyleComponentPropsType = Object;\n\n// place our cache into shared context so it'll persist between HMRs\nif (IS_BROWSER) {\n window.scCGSHMRCache = {};\n}\n\nexport default function createGlobalStyle(\n strings: Array,\n ...interpolations: Array\n) {\n const rules = css(strings, ...interpolations);\n const styledComponentId = `sc-global-${hasher(JSON.stringify(rules))}`;\n const globalStyle = new GlobalStyle(rules, styledComponentId);\n\n function GlobalStyleComponent(props: GlobalStyleComponentPropsType) {\n const styleSheet = useStyleSheet();\n const theme = useContext(ThemeContext);\n\n if (process.env.NODE_ENV !== 'production' && React.Children.count(props.children)) {\n // eslint-disable-next-line no-console\n console.warn(\n `The global style component ${styledComponentId} was given child JSX. createGlobalStyle does not render children.`\n );\n }\n\n if (globalStyle.isStatic) {\n globalStyle.renderStyles(STATIC_EXECUTION_CONTEXT, styleSheet);\n } else {\n const context = {\n ...props,\n theme: determineTheme(props, theme, GlobalStyleComponent.defaultProps),\n };\n\n globalStyle.renderStyles(context, styleSheet);\n }\n\n useEffect(() => {\n if (IS_BROWSER) {\n window.scCGSHMRCache[styledComponentId] =\n (window.scCGSHMRCache[styledComponentId] || 0) + 1;\n\n return () => {\n if (window.scCGSHMRCache[styledComponentId]) {\n window.scCGSHMRCache[styledComponentId] -= 1;\n }\n /**\n * Depending on the order \"render\" is called this can cause the styles to be lost\n * until the next render pass of the remaining instance, which may\n * not be immediate.\n */\n if (window.scCGSHMRCache[styledComponentId] === 0) {\n globalStyle.removeStyles(styleSheet);\n }\n };\n }\n return undefined;\n }, []);\n\n return null;\n }\n\n return GlobalStyleComponent;\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, `${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 [