How to use @emotion/sheet - 10 common examples

it("should use the container option instead of document.head to insert style elements into if it's passed", () => {
    const container = document.createElement('div')
    // $FlowFixMe
    document.body.appendChild(container)
    const sheet = new StyleSheet({ container })
    expect(sheet.container).toBe(container)
    sheet.insert(rule)
    expect(document.querySelector('html')).toMatchSnapshot()
    expect(sheet.tags).toHaveLength(1)
    expect(sheet.tags[0].parentNode).toBe(container)
    sheet.flush()
    // $FlowFixMe
    document.body.removeChild(container)
  })
})

it('should not throw an error when inserting a @import rule in speedy when a rule has already been inserted', () => {
    const sheet = new StyleSheet({ ...defaultOptions, speedy: true })
    sheet.insert('h1 {color:hotpink;}')
    let importRule =
      "@import url('https://fonts.googleapis.com/css?family=Merriweather');"
    sheet.insert(importRule)
    expect(sheet.tags).toHaveLength(1)
    // $FlowFixMe
    expect(sheet.tags[0].sheet.cssRules[0]).toBeInstanceOf(window.CSSImportRule)
    sheet.flush()
  })
})

key: 'abc',
  container: document.createElement('div'),
  speedy: true
})
// $ExpectError
new StyleSheet({
  container: document.createElement('div'),
  key: 120
})
new StyleSheet({
  container: document.createElement('div'),
  // $ExpectError
  kye: 'abc'
})

const styleSheet0 = new StyleSheet({
  key: 'abc',
  container: document.createElement('div')
})
const styleSheet1: StyleSheet = styleSheet0
const styleSheet2: StyleSheet = new StyleSheet()

const styleSheet = new StyleSheet({
  key: 'abc',
  container: document.createElement('div')
})

styleSheet.insert('.name{ color: black; }')
styleSheet.insert('.cl{ width: 200px; height: 200px; }')
// $ExpectError
styleSheet.insert()
// $ExpectError

// $FlowFixMe
      attrib.split(' ').forEach(id => {
        inserted[id] = true
      })
      // $FlowFixMe
      let parent = options.container || document.head
      if (node.parentNode !== parent) {
        // $FlowFixMe
        parent.appendChild(node)
      }
    })
  }
  const context: CSSContextType = {
    stylis,
    key,
    sheet: new StyleSheet({
      key,
      container: options.container,
      nonce: options.nonce
    }),
    inserted,
    registered: {},
    theme: {}
  }
  return context
}

componentDidMount() {
    this.sheet = new StyleSheet({
      key: `${this.props.cache.key}-global`,
      nonce: this.props.cache.sheet.nonce,
      container: this.props.cache.sheet.container
    })
    // $FlowFixMe
    let node: HTMLStyleElement | null = document.querySelector(
      `style[data-emotion-${this.props.cache.key}="${
        this.props.serialized.name
      }"]`
    )

    if (node !== null) {
      this.sheet.tags.push(node)
    }
    if (this.props.cache.sheet.tags.length) {
      this.sheet.before = this.props.cache.sheet.tags[0]

componentDidMount() {
    this.sheet = new StyleSheet({
      key: `${this.props.cache.key}-global`,
      nonce: this.props.cache.sheet.nonce,
      container: this.props.cache.sheet.container
    })
    // $FlowFixMe
    let node: HTMLStyleElement | null = document.querySelector(
      `style[data-emotion-${this.props.cache.key}="${
        this.props.serialized.name
      }"]`
    )

    if (node !== null) {
      this.sheet.tags.push(node)
    }
    if (this.props.cache.sheet.tags.length) {
      this.sheet.before = this.props.cache.sheet.tags[0]

renderChild = (context: CSSContextType) => {
    const serialized = serializeStyles(context.registered, [this.props.css])
    if (this.oldName !== serialized.name) {
      if (isBrowser) {
        this.sheet = new StyleSheet({
          key: `${context.key}-global`,
          // $FlowFixMe
          nonce: context.sheet.nonce,
          container: context.sheet.container
        })
      }
      this.oldName = serialized.name
      let rules = context.stylis(``, serialized.styles)
      if (shouldSerializeToReactTree) {
        this.serialized = rules.join('')
      }

      if (isBrowser) {
        this.sheet.flush()
        rules.forEach(rule => {
          this.sheet.insert(rule)

it('should set the nonce option as an attribute to style elements', () => {
    let nonce = 'some-nonce'
    const sheet = new StyleSheet({ nonce })
    sheet.insert(rule)
    expect(sheet.tags[0]).toBe(document.querySelector('[data-emotion]'))
    expect(sheet.tags).toHaveLength(1)
    expect(sheet.tags[0].getAttribute('nonce')).toBe(nonce)
    sheet.flush()
  })

it('should insert a rule into the DOM when not in speedy', () => {
    const sheet = new StyleSheet(defaultOptions)
    sheet.insert(rule)
    expect(document.documentElement).toMatchSnapshot()
    sheet.flush()
  })

it('should remove its style elements from the document when flushed', () => {
    const sheet = new StyleSheet()
    sheet.insert(rule)
    expect(document.querySelector('html')).toMatchSnapshot()
    sheet.flush()
    expect(document.querySelector('html')).toMatchSnapshot()
  })