Change Global component to use the StyleSheet constructor of the current cache.sheet (#2677)

Jack-Works · Andarist · web-flow · commit ff3cb16419b4 · 2022-03-10T12:10:20.000+01:00
* chore: add custom sheet

* chore: add changeset

* chore: remove unused import

* chore: apply patch

* fix inline snapshots

* Fix Flow error

* tweak changeset

Co-authored-by: Mateusz Burzyński &lt;mateuszburzynski@gmail.com&gt;
diff --git a/.changeset/green-dingos-design.md b/.changeset/green-dingos-design.md
@@ -0,0 +1,5 @@
+---
+'@emotion/react': patch
+---
+
+Change `Global` component to use the `StyleSheet` constructor of the current `cache.sheet`. This is useful when `cache.sheet` is not the default implementation. Thanks to that the inner sheet constructed by `Global` can share the behavior with its "main" sheet that is hold by the `cache`.
diff --git a/packages/react/__tests__/custom-cache.js b/packages/react/__tests__/custom-cache.js
@@ -1,9 +1,11 @@
 // @flow
 /** @jsx jsx */
-import 'test-utils/next-env'
 import createCache from '@emotion/cache'
-import { jsx, CacheProvider } from '@emotion/react'
+import { CacheProvider, Global, jsx } from '@emotion/react'
+import { StyleSheet } from '@emotion/sheet'
 import renderer from 'react-test-renderer'
+import { safeQuerySelector } from 'test-utils'
+import 'test-utils/next-env'
 
 function stylisPlugin(element) {
   if (element.type === 'decl' && element.value.startsWith('color:')) {
@@ -15,6 +17,11 @@ function render(ele) {
   return renderer.create(ele).toJSON()
 }
 
+beforeEach(() => {
+  safeQuerySelector('head').innerHTML = ''
+  safeQuerySelector('body').innerHTML = ''
+})
+
 test('with custom plugins', () => {
   let cache = createCache({
     key: 'custom-plugins',
@@ -38,3 +45,46 @@ test('with custom plugins', () => {
     />
   `)
 })
+
+test('Global should "inherit" sheet class from the cache', () => {
+  // https://github.com/emotion-js/emotion/issues/2675
+  let cache = createCache({
+    key: 'test',
+    speedy: false
+  })
+  class MySheet extends StyleSheet {
+    insert(rule) {
+      super.insert(`/** ${this.key} */${rule}`)
+    }
+  }
+  cache.sheet = new MySheet({
+    key: 'test',
+    container: safeQuerySelector('head')
+  })
+
+  render(
+    <CacheProvider value={cache}>
+      <div css={{ color: 'hotpink' }} />
+      <Global styles={{ body: { width: '0' } }} />
+    </CacheProvider>
+  )
+
+  expect(safeQuerySelector('head')).toMatchInlineSnapshot(`
+    <head>
+      <style
+        data-emotion="test-global"
+        data-s=""
+      >
+        
+        /** test-global */body{width:0;}
+      </style>
+      <style
+        data-emotion="test"
+        data-s=""
+      >
+        
+        /** test */.test-1lrxbo5{color:hotpink;}
+      </style>
+    </head>
+  `)
+})
diff --git a/packages/react/src/global.js b/packages/react/src/global.js
@@ -5,7 +5,6 @@ import { ThemeContext } from './theming'
 import { insertStyles } from '@emotion/utils'
 import { isBrowser } from './utils'
 
-import { StyleSheet } from '@emotion/sheet'
 import { serializeStyles } from '@emotion/serialize'
 
 type Styles = Object | Array<Object>
@@ -91,7 +90,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,

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@emotion/react': patch
 +---
++
 +Change `Global` component to use the `StyleSheet` constructor of the current `cache.sheet`. This is useful when `cache.sheet` is not the default implementation. Thanks to that the inner sheet constructed by `Global` can share the behavior with its "main" sheet that is hold by the `cache`.