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

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress

{"version":3,"file":"styled-components.native.cjs.js","sources":["../../src/utils/generateAlphabeticName.js","../../src/utils/hash.js","../../src/utils/generateComponentId.js","../../src/utils/getComponentName.js","../../src/utils/isFunction.js","../../src/utils/isStatelessFunction.js","../../src/utils/isPlainObject.js","../../src/utils/isStyledComponent.js","../../src/constants.js","../../src/utils/empties.js","../../src/utils/errors.js","../../src/utils/error.js","../../src/sheet/GroupedTag.js","../../src/sheet/GroupIDAllocator.js","../../src/sheet/Rehydration.js","../../src/utils/nonce.js","../../src/sheet/dom.js","../../src/sheet/Tag.js","../../src/sheet/Sheet.js","../../src/utils/stylisPluginInsertRule.js","../../src/utils/stylis.js","../../src/models/StyleSheetManager.js","../../src/models/Keyframes.js","../../src/utils/hyphenateStyleName.js","../../src/utils/addUnitIfNeeded.js","../../src/utils/flatten.js","../../src/vendor/postcss/warn-once.js","../../src/vendor/postcss/tokenize.js","../../src/vendor/postcss/terminal-highlight.js","../../src/vendor/postcss/css-syntax-error.js","../../src/vendor/postcss/stringifier.js","../../src/vendor/postcss/stringify.js","../../src/vendor/postcss/node.js","../../src/vendor/postcss/declaration.js","../../src/vendor/postcss/comment.js","../../src/vendor/postcss/parser.js","../../src/vendor/postcss/parse.js","../../src/vendor/postcss/container.js","../../src/vendor/postcss/at-rule.js","../../src/vendor/postcss/list.js","../../src/vendor/postcss/rule.js","../../src/vendor/postcss/warning.js","../../src/vendor/postcss/result.js","../../src/vendor/postcss/lazy-result.js","../../src/vendor/postcss/processor.js","../../src/vendor/postcss/root.js","../../src/vendor/postcss/input.js","../../src/vendor/postcss-safe-parser/safe-parser.js","../../src/vendor/postcss-safe-parser/parse.js","../../src/models/InlineStyle.js","../../src/utils/mixinDeep.js","../../src/utils/determineTheme.js","../../src/utils/isTag.js","../../src/utils/generateDisplayName.js","../../src/models/ThemeProvider.js","../../src/models/StyledNativeComponent.js","../../src/utils/interleave.js","../../src/constructors/css.js","../../src/constructors/constructWithOptions.js","../../src/hoc/withTheme.js","../../src/hooks/useTheme.js","../../src/native/index.js"],"sourcesContent":["// @flow\n/* eslint-disable no-bitwise */\n\nconst AD_REPLACER_R = /(a)(d)/gi;\n\n/* This is the \"capacity\" of our alphabet i.e. 2x26 for all letters plus their capitalised\n * counterparts */\nconst charsLength = 52;\n\n/* start at 75 for 'a' until 'z' (25) and then start at 65 for capitalised letters */\nconst getAlphabeticChar = (code: number): string =>\n  String.fromCharCode(code + (code > 25 ? 39 : 97));\n\n/* input a number, usually a hash and convert it to base-52 */\nexport default function generateAlphabeticName(code: number): string {\n  let name = '';\n  let x;\n\n  /* get a char and divide by alphabet-length */\n  for (x = Math.abs(code); x > charsLength; x = (x / charsLength) | 0) {\n    name = getAlphabeticChar(x % charsLength) + name;\n  }\n\n  return (getAlphabeticChar(x % charsLength) + name).replace(AD_REPLACER_R, '$1-$2');\n}\n","// @flow\n/* eslint-disable */\n\nexport const SEED = 5381;\n\n// When we have separate strings it's useful to run a progressive\n// version of djb2 where we pretend that we're still looping over\n// the same string\nexport const phash = (h: number, x: string): number => {\n  let i = x.length;\n\n  while (i) {\n    h = (h * 33) ^ x.charCodeAt(--i);\n  }\n\n  return h;\n};\n\n// This is a djb2 hashing function\nexport const hash = (x: string): number => {\n  return phash(SEED, x);\n};\n","// @flow\n/* eslint-disable */\nimport generateAlphabeticName from './generateAlphabeticName';\nimport { hash } from './hash';\n\nexport default (str: string): string => {\n  return generateAlphabeticName(hash(str) >>> 0);\n};\n","// @flow\nimport type { IStyledComponent } from '../types';\n\nexport default function getComponentName(\n  target: $PropertyType<IStyledComponent, 'target'>\n): string {\n  return (\n    (process.env.NODE_ENV !== 'production' ? typeof target === 'string' && target : false) ||\n    // $FlowFixMe\n    target.displayName ||\n    // $FlowFixMe\n    target.name ||\n    'Component'\n  );\n}\n","// @flow\nexport default function isFunction(test: any): boolean %checks {\n  return typeof test === 'function';\n}\n","// @flow\nexport default function isStatelessFunction(test: any): boolean {\n  return (\n    typeof test === 'function'\n    && !(\n      test.prototype\n      && test.prototype.isReactComponent\n    )\n  );\n}\n","// @flow\nimport { typeOf } from 'react-is';\n\nexport default (x: any): boolean =>\n  x !== null &&\n  typeof x === 'object' &&\n  (x.toString ? x.toString() : Object.prototype.toString.call(x)) === '[object Object]' &&\n  !typeOf(x);\n","// @flow\nexport default function isStyledComponent(target: any): boolean %checks {\n  return target && typeof target.styledComponentId === 'string';\n}\n","// @flow\n\ndeclare var SC_DISABLE_SPEEDY: ?boolean;\ndeclare var __VERSION__: string;\n\nexport const SC_ATTR: string =\n  (typeof process !== 'undefined' &&\n    typeof process.env !== 'undefined' &&\n    (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 = Boolean(\n  typeof SC_DISABLE_SPEEDY === 'boolean'\n    ? SC_DISABLE_SPEEDY\n    : typeof process !== 'undefined' && typeof process.env !== 'undefined'\n    ? typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' &&\n      process.env.REACT_APP_SC_DISABLE_SPEEDY !== ''\n      ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false'\n        ? false\n        : process.env.REACT_APP_SC_DISABLE_SPEEDY\n      : typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' && process.env.SC_DISABLE_SPEEDY !== ''\n      ? process.env.SC_DISABLE_SPEEDY === 'false'\n        ? false\n        : process.env.SC_DISABLE_SPEEDY\n      : process.env.NODE_ENV !== 'production'\n    : false\n);\n\n// Shared empty execution context when generating static styles\nexport const STATIC_EXECUTION_CONTEXT = {};\n","// @flow\nexport const EMPTY_ARRAY = Object.freeze([]);\nexport const EMPTY_OBJECT = Object.freeze({});\n","export default {\"1\":\"Cannot create styled-component for component: %s.\\n\\n\",\"2\":\"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\\n\\n- Are you trying to reuse it across renders?\\n- Are you accidentally calling collectStyles twice?\\n\\n\",\"3\":\"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\\n\\n\",\"4\":\"The `StyleSheetManager` expects a valid target or sheet prop!\\n\\n- Does this error occur on the client and is your target falsy?\\n- Does this error occur on the server and is the sheet falsy?\\n\\n\",\"5\":\"The clone method cannot be used on the client!\\n\\n- Are you running in a client-like environment on the server?\\n- Are you trying to run SSR on the client?\\n\\n\",\"6\":\"Trying to insert a new style tag, but the given Node is unmounted!\\n\\n- Are you using a custom target that isn't mounted?\\n- Does your document not have a valid head element?\\n- Have you accidentally removed a style tag manually?\\n\\n\",\"7\":\"ThemeProvider: Please return an object from your \\\"theme\\\" prop function, e.g.\\n\\n```js\\ntheme={() => ({})}\\n```\\n\\n\",\"8\":\"ThemeProvider: Please make your \\\"theme\\\" prop an object.\\n\\n\",\"9\":\"Missing document `<head>`\\n\\n\",\"10\":\"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\\n\\n\",\"11\":\"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\\n\\n\",\"12\":\"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\\\`\\\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\\n\\n\",\"13\":\"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\\n\\n\",\"14\":\"ThemeProvider: \\\"theme\\\" prop is required.\\n\\n\",\"15\":\"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\\n\\n```js\\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\\n```\\n\\n\",\"16\":\"Reached the limit of how many styled components may be created at group %s.\\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\\nas for instance in your render method then you may be running into this limitation.\\n\\n\",\"17\":\"CSSStyleSheet could not be found on HTMLStyleElement.\\nHas styled-components' style tag been unmounted or altered by another script?\\n\"};","// @flow\nimport errorMap from './errors';\n\nconst ERRORS = process.env.NODE_ENV !== 'production' ? errorMap : {};\n\n/**\n * super basic version of sprintf\n */\nfunction format(...args) {\n  let a = args[0];\n  const b = [];\n\n  for (let c = 1, len = args.length; c < len; c += 1) {\n    b.push(args[c]);\n  }\n\n  b.forEach(d => {\n    a = a.replace(/%[a-z]/, d);\n  });\n\n  return a;\n}\n\n/**\n * Create an error file out of errors.md for development and a simple web link to the full errors\n * in production mode.\n */\nexport default function throwStyledComponentsError(\n  code: string | number,\n  ...interpolations: Array<any>\n) {\n  if (process.env.NODE_ENV === 'production') {\n    throw new Error(\n      `An error occurred. See https://git.io/JUIaE#${code} for more information.${\n        interpolations.length > 0 ? ` Args: ${interpolations.join(', ')}` : ''\n      }`\n    );\n  } else {\n    throw new Error(format(ERRORS[code], ...interpolations).trim());\n  }\n}\n","// @flow\n/* eslint-disable no-use-before-define */\n\nimport type { GroupedTag, Tag } from './types';\nimport { SPLITTER } from '../constants';\nimport throwStyledError from '../utils/error';\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 << 9;\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\n      let newSize = oldSize;\n      while (group >= newSize) {\n        newSize <<= 1;\n        if (newSize < 0) {\n          throwStyledError(16, `${group}`);\n        }\n      }\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    let ruleIndex = this.indexOfGroup(group + 1);\n    for (let i = 0, l = rules.length; i < l; i++) {\n      if (this.tag.insertRule(ruleIndex, rules[i])) {\n        this.groupSizes[group]++;\n        ruleIndex++;\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)}${SPLITTER}`;\n    }\n\n    return css;\n  }\n}\n","// @flow\n\nimport throwStyledError from '../utils/error';\n\nconst MAX_SMI = 1 << 31 - 1;\n\nlet groupIDRegister: Map<string, number> = new Map();\nlet reverseRegister: Map<number, string> = 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  while (reverseRegister.has(nextFreeGroup)) {\n    nextFreeGroup++;\n  }\n\n  const group = nextFreeGroup++;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    ((group | 0) < 0 || group > MAX_SMI)\n  ) {\n    throwStyledError(16, `${group}`);\n  }\n\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\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.textContent || '').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 camelcase, no-undef */\n\ndeclare var __webpack_nonce__: string;\n\nconst getNonce = () => {\n  return typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;\n};\n\nexport default getNonce;\n","// @flow\n\nimport { SC_ATTR, SC_ATTR_ACTIVE, SC_ATTR_VERSION, SC_VERSION } from '../constants';\nimport getNonce from '../utils/nonce';\nimport throwStyledError from '../utils/error';\n\nconst ELEMENT_TYPE = 1; /* Node.ELEMENT_TYPE */\n\n/** Find last style element if any inside target */\nconst findLastStyleTag = (target: HTMLElement): void | HTMLStyleElement => {\n  const { childNodes } = target;\n\n  for (let i = childNodes.length; i >= 0; i--) {\n    const child = ((childNodes[i]: any): ?HTMLElement);\n    if (child && child.nodeType === ELEMENT_TYPE && child.hasAttribute(SC_ATTR)) {\n      return ((child: any): HTMLStyleElement);\n    }\n  }\n\n  return undefined;\n};\n\n/** Create a style element inside `target` or <head> after the last */\nexport const makeStyleTag = (target?: HTMLElement): HTMLStyleElement => {\n  const head = ((document.head: any): HTMLElement);\n  const parent = target || head;\n  const style = document.createElement('style');\n  const prevStyle = findLastStyleTag(parent);\n  const nextSibling = prevStyle !== undefined ? prevStyle.nextSibling : null;\n\n  style.setAttribute(SC_ATTR, SC_ATTR_ACTIVE);\n  style.setAttribute(SC_ATTR_VERSION, SC_VERSION);\n\n  const nonce = getNonce();\n\n  if (nonce) style.setAttribute('nonce', nonce);\n\n  parent.insertBefore(style, nextSibling);\n\n  return style;\n};\n\n/** Get the CSSStyleSheet instance for a given style element */\nexport const getSheet = (tag: HTMLStyleElement): CSSStyleSheet => {\n  if (tag.sheet) {\n    return ((tag.sheet: any): CSSStyleSheet);\n  }\n\n  // Avoid Firefox quirk where the style element might not have a sheet property\n  const { styleSheets } = document;\n  for (let i = 0, l = styleSheets.length; i < l; i++) {\n    const sheet = styleSheets[i];\n    if (sheet.ownerNode === tag) {\n      return ((sheet: any): CSSStyleSheet);\n    }\n  }\n\n  throwStyledError(17);\n  return (undefined: any);\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<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  server: boolean;\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    this.server = !!options.isServer;\n\n    // We rehydrate only once and use the sheet that is created first\n    if (!this.server && 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","/**\n * MIT License\n *\n * Copyright (c) 2016 Sultan Tarimo\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy of\n * this software and associated documentation files (the \"Software\"),\n * to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or\n * sell copies of the Software and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS\n * OR IMPLIED INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR\n * IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n */\n/* eslint-disable */\n\nexport default function(insertRule) {\n  const delimiter = '/*|*/';\n  const needle = `${delimiter}}`;\n\n  function toSheet(block) {\n    if (block) {\n      try {\n        insertRule(`${block}}`);\n      } catch (e) {}\n    }\n  }\n\n  return function ruleSheet(\n    context,\n    content,\n    selectors,\n    parents,\n    line,\n    column,\n    length,\n    ns,\n    depth,\n    at\n  ) {\n    switch (context) {\n      // property\n      case 1:\n        // @import\n        if (depth === 0 && content.charCodeAt(0) === 64) return insertRule(`${content};`), '';\n        break;\n      // selector\n      case 2:\n        if (ns === 0) return content + delimiter;\n        break;\n      // at-rule\n      case 3:\n        switch (ns) {\n          // @font-face, @page\n          case 102:\n          case 112:\n            return insertRule(selectors[0] + content), '';\n          default:\n            return content + (at === 0 ? delimiter : '');\n        }\n      case -2:\n        content.split(needle).forEach(toSheet);\n    }\n  };\n}\n","import Stylis from '@emotion/stylis';\nimport { type Stringifier } from '../types';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from './empties';\nimport throwStyledError from './error';\nimport { phash, SEED } from './hash';\nimport insertRulePlugin from './stylisPluginInsertRule';\n\nconst COMMENT_REGEX = /^\\s*\\/\\/.*$/gm;\nconst COMPLEX_SELECTOR_PREFIX = [':', '[', '.', '#'];\n\ntype StylisInstanceConstructorArgs = {\n  options?: Object,\n  plugins?: Array<Function>,\n};\n\nexport default function createStylisInstance({\n  options = EMPTY_OBJECT,\n  plugins = EMPTY_ARRAY,\n}: StylisInstanceConstructorArgs = EMPTY_OBJECT) {\n  const stylis = new Stylis(options);\n\n  // Wrap `insertRulePlugin to build a list of rules,\n  // and then make our own plugin to return the rules. This\n  // makes it easier to hook into the existing SSR architecture\n\n  let parsingRules = [];\n\n  // eslint-disable-next-line consistent-return\n  const returnRulesPlugin = context => {\n    if (context === -2) {\n      const parsedRules = parsingRules;\n      parsingRules = [];\n      return parsedRules;\n    }\n  };\n\n  const parseRulesPlugin = insertRulePlugin(rule => {\n    parsingRules.push(rule);\n  });\n\n  let _componentId: string;\n  let _selector: string;\n  let _selectorRegexp: RegExp;\n  let _consecutiveSelfRefRegExp: RegExp;\n\n  const selfReferenceReplacer = (match, offset, string) => {\n    if (\n      // do not replace the first occurrence if it is complex (has a modifier)\n      (offset === 0 ? COMPLEX_SELECTOR_PREFIX.indexOf(string[_selector.length]) === -1 : true) &&\n      // no consecutive self refs (.b.b); that is a precedence boost and treated differently\n      !string.match(_consecutiveSelfRefRegExp)\n    ) {\n      return `.${_componentId}`;\n    }\n\n    return match;\n  };\n\n  /**\n   * When writing a style like\n   *\n   * & + & {\n   *   color: red;\n   * }\n   *\n   * The second ampersand should be a reference to the static component class. stylis\n   * has no knowledge of static class so we have to intelligently replace the base selector.\n   *\n   * https://github.com/thysultan/stylis.js/tree/v3.5.4#plugins <- more info about the context phase values\n   * \"2\" means this plugin is taking effect at the very end after all other processing is complete\n   */\n  const selfReferenceReplacementPlugin = (context, _, selectors) => {\n    if (context === 2 && selectors.length && selectors[0].lastIndexOf(_selector) > 0) {\n      // eslint-disable-next-line no-param-reassign\n      selectors[0] = selectors[0].replace(_selectorRegexp, selfReferenceReplacer);\n    }\n  };\n\n  stylis.use([...plugins, selfReferenceReplacementPlugin, parseRulesPlugin, returnRulesPlugin]);\n\n  function stringifyRules(css, selector, prefix, componentId = '&'): Stringifier {\n    const flatCSS = css.replace(COMMENT_REGEX, '');\n    const cssStr = selector && prefix ? `${prefix} ${selector} { ${flatCSS} }` : flatCSS;\n\n    // stylis has no concept of state to be passed to plugins\n    // but since JS is single-threaded, we can rely on that to ensure\n    // these properties stay in sync with the current stylis run\n    _componentId = componentId;\n    _selector = selector;\n    _selectorRegexp = new RegExp(`\\\\${_selector}\\\\b`, 'g');\n    _consecutiveSelfRefRegExp = new RegExp(`(\\\\${_selector}\\\\b){2,}`);\n\n    return stylis(prefix || !selector ? '' : selector, cssStr);\n  }\n\n  stringifyRules.hash = plugins.length\n    ? plugins\n        .reduce((acc, plugin) => {\n          if (!plugin.name) {\n            throwStyledError(15);\n          }\n\n          return phash(acc, plugin.name);\n        }, SEED)\n        .toString()\n    : '';\n\n  return stringifyRules;\n}\n","// @flow\nimport React, { type Context, type Node, useContext, useEffect, useMemo, useState } from 'react';\nimport shallowequal from 'shallowequal';\nimport StyleSheet from '../sheet';\nimport type { Stringifier } from '../types';\nimport createStylisInstance from '../utils/stylis';\n\ntype Props = {\n  children?: Node,\n  disableCSSOMInjection?: boolean,\n  disableVendorPrefixes?: boolean,\n  sheet?: StyleSheet,\n  stylisPlugins?: Array<Function>,\n  target?: HTMLElement,\n};\n\nexport const StyleSheetContext: Context<StyleSheet | void> = React.createContext();\nexport const StyleSheetConsumer = StyleSheetContext.Consumer;\nexport const StylisContext: Context<Stringifier | void> = React.createContext();\nexport const StylisConsumer = StylisContext.Consumer;\n\nexport const masterSheet: StyleSheet = new StyleSheet();\nexport const masterStylis: Stringifier = createStylisInstance();\n\nexport function useStyleSheet(): StyleSheet {\n  return useContext(StyleSheetContext) || masterSheet;\n}\n\nexport function useStylis(): Stringifier {\n  return useContext(StylisContext) || masterStylis;\n}\n\nexport default function StyleSheetManager(props: Props) {\n  const [plugins, setPlugins] = useState(props.stylisPlugins);\n  const contextStyleSheet = useStyleSheet();\n\n  const styleSheet = useMemo(() => {\n    let sheet = contextStyleSheet;\n\n    if (props.sheet) {\n      // eslint-disable-next-line prefer-destructuring\n      sheet = props.sheet;\n    } else if (props.target) {\n      sheet = sheet.reconstructWithOptions({ target: props.target }, false);\n    }\n\n    if (props.disableCSSOMInjection) {\n      sheet = sheet.reconstructWithOptions({ useCSSOMInjection: false });\n    }\n\n    return sheet;\n  }, [props.disableCSSOMInjection, props.sheet, props.target]);\n\n  const stylis = useMemo(\n    () =>\n      createStylisInstance({\n        options: { prefix: !props.disableVendorPrefixes },\n        plugins,\n      }),\n    [props.disableVendorPrefixes, plugins]\n  );\n\n  useEffect(() => {\n    if (!shallowequal(plugins, props.stylisPlugins)) setPlugins(props.stylisPlugins);\n  }, [props.stylisPlugins]);\n\n  return (\n    <StyleSheetContext.Provider value={styleSheet}>\n      <StylisContext.Provider value={stylis}>\n        {process.env.NODE_ENV !== 'production'\n          ? React.Children.only(props.children)\n          : props.children}\n      </StylisContext.Provider>\n    </StyleSheetContext.Provider>\n  );\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\n\n/**\n * inlined version of\n * https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/hyphenateStyleName.js\n */\n\nconst uppercaseCheck = /([A-Z])/;\nconst uppercasePattern = /([A-Z])/g;\nconst msPattern = /^ms-/;\nconst prefixAndLowerCase = (char: string): string => `-${char.toLowerCase()}`;\n\n/**\n * Hyphenates a camelcased CSS property name, for example:\n *\n *   > hyphenateStyleName('backgroundColor')\n *   < \"background-color\"\n *   > hyphenateStyleName('MozTransition')\n *   < \"-moz-transition\"\n *   > hyphenateStyleName('msTransition')\n *   < \"-ms-transition\"\n *\n * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix\n * is converted to `-ms-`.\n *\n * @param {string} string\n * @return {string}\n */\nexport default function hyphenateStyleName(string: string): string {\n  return uppercaseCheck.test(string)\n  ? string\n    .replace(uppercasePattern, prefixAndLowerCase)\n    .replace(msPattern, '-ms-')\n  : string;\n}\n","// @flow\nimport unitless from '@emotion/unitless';\n\n// Taken from https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/dangerousStyleValue.js\nexport default function addUnitIfNeeded(name: string, value: any): any {\n  // https://github.com/amilajack/eslint-plugin-flowtype-errors/issues/133\n  // $FlowFixMe\n  if (value == null || typeof value === 'boolean' || value === '') {\n    return '';\n  }\n\n  if (typeof value === 'number' && value !== 0 && !(name in unitless) && !name.startsWith('--')) {\n    return `${value}px`; // Presumes implicit 'px' suffix for unitless numbers except for CSS variables\n  }\n\n  return String(value).trim();\n}\n","// @flow\nimport { isElement } from 'react-is';\nimport getComponentName from './getComponentName';\nimport isFunction from './isFunction';\nimport isStatelessFunction from './isStatelessFunction';\nimport isPlainObject from './isPlainObject';\nimport isStyledComponent from './isStyledComponent';\nimport Keyframes from '../models/Keyframes';\nimport hyphenate from './hyphenateStyleName';\nimport addUnitIfNeeded from './addUnitIfNeeded';\nimport { type Stringifier } from '../types';\n\n/**\n * It's falsish not falsy because 0 is allowed.\n */\nconst isFalsish = chunk => chunk === undefined || chunk === null || chunk === false || chunk === '';\n\nexport const objToCssArray = (obj: Object, prevKey?: string): Array<string | Function> => {\n  const rules = [];\n\n  for (const key in obj) {\n    if (!obj.hasOwnProperty(key) || isFalsish(obj[key])) continue;\n\n    if ((Array.isArray(obj[key]) && obj[key].isCss) || isFunction(obj[key])) {\n      rules.push(`${hyphenate(key)}:`, obj[key], ';');\n    } else if (isPlainObject(obj[key])) {\n      rules.push(...objToCssArray(obj[key], key));\n    } else {\n      rules.push(`${hyphenate(key)}: ${addUnitIfNeeded(key, obj[key])};`);\n    }\n  }\n\n  return prevKey ? [`${prevKey} {`, ...rules, '}'] : rules;\n};\n\nexport default function flatten(\n  chunk: any,\n  executionContext: ?Object,\n  styleSheet: ?Object,\n  stylisInstance: ?Stringifier\n): any {\n  if (Array.isArray(chunk)) {\n    const ruleSet = [];\n\n    for (let i = 0, len = chunk.length, result; i < len; i += 1) {\n      result = flatten(chunk[i], executionContext, styleSheet, stylisInstance);\n\n      if (result === '') continue;\n      else if (Array.isArray(result)) ruleSet.push(...result);\n      else ruleSet.push(result);\n    }\n\n    return ruleSet;\n  }\n\n  if (isFalsish(chunk)) {\n    return '';\n  }\n\n  /* Handle other components */\n  if (isStyledComponent(chunk)) {\n    return `.${chunk.styledComponentId}`;\n  }\n\n  /* Either execute or defer the function */\n  if (isFunction(chunk)) {\n    if (isStatelessFunction(chunk) && executionContext) {\n      const result = chunk(executionContext);\n\n      if (process.env.NODE_ENV !== 'production' && isElement(result)) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          `${getComponentName(\n            chunk\n          )} is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.`\n        );\n      }\n\n      return flatten(result, executionContext, styleSheet, stylisInstance);\n    } else return chunk;\n  }\n\n  if (chunk instanceof Keyframes) {\n    if (styleSheet) {\n      chunk.inject(styleSheet, stylisInstance);\n      return chunk.getName(stylisInstance);\n    } else return chunk;\n  }\n\n  /* Handle objects */\n  return isPlainObject(chunk) ? objToCssArray(chunk) : chunk.toString();\n}\n","// @flow\nconst printed = {};\n\nexport default function warnOnce(message) {\n  if (printed[message]) return;\n  printed[message] = true;\n\n  if (typeof console !== 'undefined' && console.warn) console.warn(message);\n}\n","// @flow\nconst SINGLE_QUOTE = \"'\".charCodeAt(0);\nconst DOUBLE_QUOTE = '\"'.charCodeAt(0);\nconst BACKSLASH = '\\\\'.charCodeAt(0);\nconst SLASH = '/'.charCodeAt(0);\nconst NEWLINE = '\\n'.charCodeAt(0);\nconst SPACE = ' '.charCodeAt(0);\nconst FEED = '\\f'.charCodeAt(0);\nconst TAB = '\\t'.charCodeAt(0);\nconst CR = '\\r'.charCodeAt(0);\nconst OPEN_SQUARE = '['.charCodeAt(0);\nconst CLOSE_SQUARE = ']'.charCodeAt(0);\nconst OPEN_PARENTHESES = '('.charCodeAt(0);\nconst CLOSE_PARENTHESES = ')'.charCodeAt(0);\nconst OPEN_CURLY = '{'.charCodeAt(0);\nconst CLOSE_CURLY = '}'.charCodeAt(0);\nconst SEMICOLON = ';'.charCodeAt(0);\nconst ASTERISK = '*'.charCodeAt(0);\nconst COLON = ':'.charCodeAt(0);\nconst AT = '@'.charCodeAt(0);\n\nconst RE_AT_END = /[ \\n\\t\\r\\f\\{\\(\\)'\"\\\\;/\\[\\]#]/g;\nconst RE_WORD_END = /[ \\n\\t\\r\\f\\(\\)\\{\\}:;@!'\"\\\\\\]\\[#]|\\/(?=\\*)/g;\nconst RE_BAD_BRACKET = /.[\\\\\\/\\(\"'\\n]/;\n\nexport default function tokenize(input, options = {}) {\n  const tokens = [];\n  const css = input.css.valueOf();\n\n  const ignore = options.ignoreErrors;\n\n  let code,\n    next,\n    quote,\n    lines,\n    last,\n    content,\n    escape,\n    nextLine,\n    nextOffset,\n    escaped,\n    escapePos,\n    prev,\n    n;\n\n  const length = css.length;\n  let offset = -1;\n  let line = 1;\n  let pos = 0;\n\n  function unclosed(what) {\n    throw input.error(`Unclosed ${what}`, line, pos - offset);\n  }\n\n  while (pos < length) {\n    code = css.charCodeAt(pos);\n\n    if (code === NEWLINE || code === FEED || (code === CR && css.charCodeAt(pos + 1) !== NEWLINE)) {\n      offset = pos;\n      line += 1;\n    }\n\n    switch (code) {\n      case NEWLINE:\n      case SPACE:\n      case TAB:\n      case CR:\n      case FEED:\n        next = pos;\n        do {\n          next += 1;\n          code = css.charCodeAt(next);\n          if (code === NEWLINE) {\n            offset = next;\n            line += 1;\n          }\n        } while (\n          code === SPACE ||\n          code === NEWLINE ||\n          code === TAB ||\n          code === CR ||\n          code === FEED\n        );\n\n        tokens.push(['space', css.slice(pos, next)]);\n        pos = next - 1;\n        break;\n\n      case OPEN_SQUARE:\n        tokens.push(['[', '[', line, pos - offset]);\n        break;\n\n      case CLOSE_SQUARE:\n        tokens.push([']', ']', line, pos - offset]);\n        break;\n\n      case OPEN_CURLY:\n        tokens.push(['{', '{', line, pos - offset]);\n        break;\n\n      case CLOSE_CURLY:\n        tokens.push(['}', '}', line, pos - offset]);\n        break;\n\n      case COLON:\n        tokens.push([':', ':', line, pos - offset]);\n        break;\n\n      case SEMICOLON:\n        tokens.push([';', ';', line, pos - offset]);\n        break;\n\n      case OPEN_PARENTHESES:\n        prev = tokens.length ? tokens[tokens.length - 1][1] : '';\n        n = css.charCodeAt(pos + 1);\n        if (\n          prev === 'url' &&\n          n !== SINGLE_QUOTE &&\n          n !== DOUBLE_QUOTE &&\n          n !== SPACE &&\n          n !== NEWLINE &&\n          n !== TAB &&\n          n !== FEED &&\n          n !== CR\n        ) {\n          next = pos;\n          do {\n            escaped = false;\n            next = css.indexOf(')', next + 1);\n            if (next === -1) {\n              if (ignore) {\n                next = pos;\n                break;\n              } else {\n                unclosed('bracket');\n              }\n            }\n            escapePos = next;\n            while (css.charCodeAt(escapePos - 1) === BACKSLASH) {\n              escapePos -= 1;\n              escaped = !escaped;\n            }\n          } while (escaped);\n\n          tokens.push([\n            'brackets',\n            css.slice(pos, next + 1),\n            line,\n            pos - offset,\n            line,\n            next - offset,\n          ]);\n          pos = next;\n        } else {\n          next = css.indexOf(')', pos + 1);\n          content = css.slice(pos, next + 1);\n\n          if (next === -1 || RE_BAD_BRACKET.test(content)) {\n            tokens.push(['(', '(', line, pos - offset]);\n          } else {\n            tokens.push(['brackets', content, line, pos - offset, line, next - offset]);\n            pos = next;\n          }\n        }\n\n        break;\n\n      case CLOSE_PARENTHESES:\n        tokens.push([')', ')', line, pos - offset]);\n        break;\n\n      case SINGLE_QUOTE:\n      case DOUBLE_QUOTE:\n        quote = code === SINGLE_QUOTE ? \"'\" : '\"';\n        next = pos;\n        do {\n          escaped = false;\n          next = css.indexOf(quote, next + 1);\n          if (next === -1) {\n            if (ignore) {\n              next = pos + 1;\n              break;\n            } else {\n              unclosed('quote');\n            }\n          }\n          escapePos = next;\n          while (css.charCodeAt(escapePos - 1) === BACKSLASH) {\n            escapePos -= 1;\n            escaped = !escaped;\n          }\n        } while (escaped);\n\n        content = css.slice(pos, next + 1);\n        lines = content.split('\\n');\n        last = lines.length - 1;\n\n        if (last > 0) {\n          nextLine = line + last;\n          nextOffset = next - lines[last].length;\n        } else {\n          nextLine = line;\n          nextOffset = offset;\n        }\n\n        tokens.push([\n          'string',\n          css.slice(pos, next + 1),\n          line,\n          pos - offset,\n          nextLine,\n          next - nextOffset,\n        ]);\n\n        offset = nextOffset;\n        line = nextLine;\n        pos = next;\n        break;\n\n      case AT:\n        RE_AT_END.lastIndex = pos + 1;\n        RE_AT_END.test(css);\n        if (RE_AT_END.lastIndex === 0) {\n          next = css.length - 1;\n        } else {\n          next = RE_AT_END.lastIndex - 2;\n        }\n        tokens.push(['at-word', css.slice(pos, next + 1), line, pos - offset, line, next - offset]);\n        pos = next;\n        break;\n\n      case BACKSLASH:\n        next = pos;\n        escape = true;\n        while (css.charCodeAt(next + 1) === BACKSLASH) {\n          next += 1;\n          escape = !escape;\n        }\n        code = css.charCodeAt(next + 1);\n        if (\n          escape &&\n          (code !== SLASH &&\n            code !== SPACE &&\n            code !== NEWLINE &&\n            code !== TAB &&\n            code !== CR &&\n            code !== FEED)\n        ) {\n          next += 1;\n        }\n        tokens.push(['word', css.slice(pos, next + 1), line, pos - offset, line, next - offset]);\n        pos = next;\n        break;\n\n      default:\n        if (code === SLASH && css.charCodeAt(pos + 1) === ASTERISK) {\n          next = css.indexOf('*/', pos + 2) + 1;\n          if (next === 0) {\n            if (ignore) {\n              next = css.length;\n            } else {\n              unclosed('comment');\n            }\n          }\n\n          content = css.slice(pos, next + 1);\n          lines = content.split('\\n');\n          last = lines.length - 1;\n\n          if (last > 0) {\n            nextLine = line + last;\n            nextOffset = next - lines[last].length;\n          } else {\n            nextLine = line;\n            nextOffset = offset;\n          }\n\n          tokens.push(['comment', content, line, pos - offset, nextLine, next - nextOffset]);\n\n          offset = nextOffset;\n          line = nextLine;\n          pos = next;\n        } else {\n          RE_WORD_END.lastIndex = pos + 1;\n          RE_WORD_END.test(css);\n          if (RE_WORD_END.lastIndex === 0) {\n            next = css.length - 1;\n          } else {\n            next = RE_WORD_END.lastIndex - 2;\n          }\n\n          tokens.push(['word', css.slice(pos, next + 1), line, pos - offset, line, next - offset]);\n          pos = next;\n        }\n\n        break;\n    }\n\n    pos++;\n  }\n\n  return tokens;\n}\n","// @flow\nimport tokenize from './tokenize';\nimport Input from './input';\n\nconst HIGHLIGHT_THEME = {\n  brackets: [36, 39], // cyan\n  string: [31, 39], // red\n  'at-word': [31, 39], // red\n  comment: [90, 39], // gray\n  '{': [32, 39], // green\n  '}': [32, 39], // green\n  ':': [1, 22], // bold\n  ';': [1, 22], // bold\n  '(': [1, 22], // bold\n  ')': [1, 22], // bold\n};\n\nfunction code(color) {\n  return `\\u001b[${color}m`;\n}\n\nfunction terminalHighlight(css) {\n  const tokens = tokenize(new Input(css), { ignoreErrors: true });\n  const result = [];\n  tokens.forEach(token => {\n    const color = HIGHLIGHT_THEME[token[0]];\n    if (color) {\n      result.push(\n        token[1]\n          .split(/\\r?\\n/)\n          .map(i => code(color[0]) + i + code(color[1]))\n          .join('\\n')\n      );\n    } else {\n      result.push(token[1]);\n    }\n  });\n  return result.join('');\n}\n\nexport default terminalHighlight;\n","// @flow\nimport supportsColor from 'supports-color';\n\nimport terminalHighlight from './terminal-highlight';\nimport warnOnce from './warn-once';\n\n/**\n * The CSS parser throws this error for broken CSS.\n *\n * Custom parsers can throw this error for broken custom syntax using\n * the {@link Node#error} method.\n *\n *