feat: insertMethod

[jonathantneal]

This PR adds the following:

• Added an insertMethod feature that lets users override the default DOM insertion method. By default, a stylesheet will prepend it to the beginning of the document head. Passing append changes the insertion method to append it to the end of the document head.

Passing an init function gives the author full control over the dom insertion, which is useful for ShadowDOM wiring up Stitches for a ShadowDOM.

createCss{
  // recreates the default insertion method
  insertMethod(init) => {
    const isAppend = init.insertMethod === 'append'

    let currentCssHead = null
    let currentCssNode = null

    return (cssText) => {
      if (typeof document === 'object') {
        if (!currentCssHead) currentCssHead = document.head || document.documentElement
        if (!currentCssNode) currentCssNode = document.getElementById('stitches') || Object.assign(document.createElement('style'), { id: 'stitches' })
        if (!currentCssNode.parentNode) currentCssHead[isAppend ? 'append' : 'prepend'](currentCssNode)

        currentCssNode.textContent = cssText
      }
    }
  }
})

Resolves #357

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit bfb9c27:

Sandbox	Source
Stitches CI: CRA	Configuration
Stitches CI: Next.js	Configuration