chore: custom sheet

.changeset/green-dingos-design.md

@@ -0,0 +1,5 @@
+---
+'@emotion/react': patch
+---
+
+Change Global component to construct custom StyleSheet constructor. This is useful when cache.sheet is not the default implementation

packages/react/__tests__/custom-cache.js

@@ -2,7 +2,8 @@
 /** @jsx jsx */
 import 'test-utils/next-env'
 import createCache from '@emotion/cache'
-import { jsx, CacheProvider } from '@emotion/react'
+import { jsx, CacheProvider, Global } from '@emotion/react'
+import { StyleSheet } from '@emotion/sheet'
 import renderer from 'react-test-renderer'
 
 function stylisPlugin(element) {
@@ -38,3 +39,41 @@ test('with custom plugins', () => {
     />
   `)
 })
+
+test('with custom sheet', () => {
+  // https://github.com/emotion-js/emotion/issues/2675
+  let cache = createCache({
+    key: 'test',
+    speedy: false
+  })
+
+  class GlobalSheet extends StyleSheet {
+    insert(rule) {
+      return super.insert('/** global */' + rule)
+    }
+  }
+  class MySheet extends StyleSheet {
+    constructor(options) {
+      super(options)
+      if (Reflect.get(options.container, 'sheet')) {
+        return new GlobalSheet(options)
+      } else {
+        Reflect.set(options.container, 'sheet', this)
+      }
+    }
+
+    insert(rule) {
+      super.insert(`/** ${this.key} */${rule}`)
+    }
+  }
+  cache.sheet = new MySheet({ key: 'test', container: document.head })
+
+  expect(
+    render(
+      <CacheProvider value={cache}>
+        <div css={{ display: 'flex', color: 'blue' }} />
+        <Global styles={{ body: { width: '0' } }} />
+      </CacheProvider>
+    )
+  ).toMatchInlineSnapshot()
+})

packages/react/src/global.js

@@ -91,7 +91,8 @@ export let Global: React.AbstractComponent<GlobalProps> =
     useInsertionEffect(() => {
       const key = `${cache.key}-global`
 
-      let sheet = new StyleSheet({
+      // use case of https://github.com/emotion-js/emotion/issues/2675
+      let sheet = new cache.sheet.constructor({
         key,
         nonce: cache.sheet.nonce,
         container: cache.sheet.container,