How to use @emotion/stylis - 9 common examples

let createCache = (options?: Options): CSSContextType => {
  if (options === undefined) options = {}
  let key = options.key || 'css'
  let stylisOptions

  if (options.prefix !== undefined) {
    stylisOptions = {
      prefix: options.prefix
    }
  }

  let stylis = new Stylis(stylisOptions)

  stylis.use(options.stylisPlugins)(ruleSheetPlugin)

  if (process.env.NODE_ENV !== 'production') {
    // $FlowFixMe
    if (/[^a-z-]/.test(key)) {
      throw new Error(
        `Emotion key must only contain lower case alphabetical characters and - but "${key}" was passed`
      )
    }
    let sourceMapRegEx = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//
    let currentSourceMap
    stylis.use((context, content, selectors) => {
      switch (context) {
        case -1: {
          let result = sourceMapRegEx.exec(content)

let createCache = (options?: Options): EmotionCache => {
  if (options === undefined) options = {}
  let key = options.key || 'css'
  let stylisOptions

  if (options.prefix !== undefined) {
    stylisOptions = {
      prefix: options.prefix
    }
  }

  let stylis = new Stylis(stylisOptions)

  if (process.env.NODE_ENV !== 'production') {
    // $FlowFixMe
    if (/[^a-z-]/.test(key)) {
      throw new Error(
        `Emotion key must only contain lower case alphabetical characters and - but "${key}" was passed`
      )
    }
  }
  let inserted = {}
  // $FlowFixMe
  let container: HTMLElement
  if (isBrowser) {
    container = options.container || document.head

    const nodes = document.querySelectorAll(`style[data-emotion-${key}]`)

import Stylis from "@emotion/stylis"
import { createCssClass, GeneratedCssClass } from "./css-class"
import { Styles } from "./styles"

const $generateClassName = Symbol("generateClassName")
const stylis = new Stylis()

export interface GeneratedStylesheet {
  /** Maps `originalClassName` => `generatedClassName` */
  classes: { [originalClassName in ClassNames]: GeneratedCssClass }
  classNames: Set
  classRuleIndexes: { [originalClassName in ClassNames]: number }
  rewrittenClassNames: { [originalClassName in ClassNames]: string }
  // TODO: topLevelRules?: GeneratedCssClass
  injectionPosition: number
  isAttached: boolean
  styleElement: HTMLStyleElement

  attach(): void
  destroy(): void
  detach(): void
  addClass(originalClassName: ClassNames, rewrittenClassName: string, cssClass: GeneratedCssClass): void

export default function createStylisInstance({
  options = EMPTY_OBJECT,
  plugins = EMPTY_ARRAY,
}: StylisInstanceConstructorArgs = EMPTY_OBJECT) {
  const stylis = new Stylis(options);

  // Wrap `insertRulePlugin to build a list of rules,
  // and then make our own plugin to return the rules. This
  // makes it easier to hook into the existing SSR architecture

  let parsingRules = [];

  // eslint-disable-next-line consistent-return
  const returnRulesPlugin = context => {
    if (context === -2) {
      const parsedRules = parsingRules;
      parsingRules = [];
      return parsedRules;
    }
  };

name: 'complex nested selector',
    sample:
      '&:hover{color:blue;&:active{color:red;}}font-size:2rem;padding:16px;&:hover{color:pink;&:active{color:purple;}&.some-class{color:yellow;}}'
  }
]

let stylisOptions = {
  global: false,
  preserve: false,
  keyframe: false,
  semicolon: true,
  cascade: true
}

let stylis = new Stylis(stylisOptions)
let regularStylis = new Stylis(stylisOptions)

specs.forEach((spec, i) => {
  const newTest = spec.only ? test.only : spec.skip ? test.skip : test
  newTest(spec.name, () => {
    let out = []
    const plugin = stylisRuleSheet(rule => {
      out.push(rule)
    })
    stylis.use(null)(plugin)
    stylis(`.css-${i}`, spec.sample)
    expect(out).toMatchSnapshot()
    expect(out.join('')).toEqual(regularStylis(`.css-${i}`, spec.sample))
  })
})

name: 'comments(context character VIII)',
    sample: `background: url[img}.png];.a {background: url[img}.png];}`,
    expected: `.user{background:url[img}.png];}.user .a{background:url[img}.png];}`
  }
]

let stylisOptions = {
  global: false,
  preserve: false,
  keyframe: false,
  semicolon: true,
  cascade: true
}

let stylis = new Stylis(stylisOptions)
let regularStylis = new Stylis(stylisOptions)

specs.forEach((spec, i) => {
  const newTest = spec.only ? test.only : spec.skip ? test.skip : test
  newTest(spec.name, () => {
    let out = []
    const plugin = stylisRuleSheet(rule => {
      out.push(rule)
    })
    let selector = spec.expected ? '.user' : `.css-${i}`
    stylis.use(null)(plugin)
    stylis(selector, spec.sample)
    if (spec.expected) {
      expect(out.join('')).toEqual(spec.expected)
    } else {
      expect(out).toMatchSnapshot()
    }

{
    name: 'complex nested selector',
    sample:
      '&:hover{color:blue;&:active{color:red;}}font-size:2rem;padding:16px;&:hover{color:pink;&:active{color:purple;}&.some-class{color:yellow;}}'
  }
]

let stylisOptions = {
  global: false,
  preserve: false,
  keyframe: false,
  semicolon: true,
  cascade: true
}

let stylis = new Stylis(stylisOptions)
let regularStylis = new Stylis(stylisOptions)

specs.forEach((spec, i) => {
  const newTest = spec.only ? test.only : spec.skip ? test.skip : test
  newTest(spec.name, () => {
    let out = []
    const plugin = stylisRuleSheet(rule => {
      out.push(rule)
    })
    stylis.use(null)(plugin)
    stylis(`.css-${i}`, spec.sample)
    expect(out).toMatchSnapshot()
    expect(out.join('')).toEqual(regularStylis(`.css-${i}`, spec.sample))
  })
})

{
    name: 'comments(context character VIII)',
    sample: `background: url[img}.png];.a {background: url[img}.png];}`,
    expected: `.user{background:url[img}.png];}.user .a{background:url[img}.png];}`
  }
]

let stylisOptions = {
  global: false,
  preserve: false,
  keyframe: false,
  semicolon: true,
  cascade: true
}

let stylis = new Stylis(stylisOptions)
let regularStylis = new Stylis(stylisOptions)

specs.forEach((spec, i) => {
  const newTest = spec.only ? test.only : spec.skip ? test.skip : test
  newTest(spec.name, () => {
    let out = []
    const plugin = stylisRuleSheet(rule => {
      out.push(rule)
    })
    let selector = spec.expected ? '.user' : `.css-${i}`
    stylis.use(null)(plugin)
    stylis(selector, spec.sample)
    if (spec.expected) {
      expect(out.join('')).toEqual(spec.expected)
    } else {
      expect(out).toMatchSnapshot()

import {USE_PREFIX, KEYS} from '@reshadow/core';
import Stylis from '@emotion/stylis';

const __root__ = '__root__';

const stylis = new Stylis();

const parse = (
    code,
    hash,
    {isMixin, elements, attributes, onlyNamespaced, classes},
) => {
    const options = {
        prefix: !isMixin,
    };

    stylis.set(options);

    const tokens = Object.create(null);
    tokens[KEYS.__use__] = {};
    const postfix = '_' + hash;