From ff3cb16419b44578c7bab275dce7b5845b61db84 Mon Sep 17 00:00:00 2001 From: Jack Works Date: Thu, 10 Mar 2022 19:10:20 +0800 Subject: [PATCH] Change `Global` component to use the `StyleSheet` constructor of the current `cache.sheet` (#2677) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- .changeset/green-dingos-design.md | 5 +++ packages/react/__tests__/custom-cache.js | 54 +++++++++++++++++++++++- packages/react/src/global.js | 4 +- 3 files changed, 59 insertions(+), 4 deletions(-) create mode 100644 .changeset/green-dingos-design.md diff --git a/.changeset/green-dingos-design.md b/.changeset/green-dingos-design.md new file mode 100644 index 000000000..4483f7a0e --- /dev/null +++ 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 index 1fb975c8c..2ccf1e336 100644 --- 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( + +
+ + + ) + + expect(safeQuerySelector('head')).toMatchInlineSnapshot(` + + + + + `) +}) diff --git a/packages/react/src/global.js b/packages/react/src/global.js index fcfca2866..d3d966e2b 100644 --- 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 @@ -91,7 +90,8 @@ export let Global: React.AbstractComponent = 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,