From 04b265c562703b5405037d49e635598f0fcb21e3 Mon Sep 17 00:00:00 2001 From: Jack Works Date: Wed, 9 Mar 2022 18:25:56 +0800 Subject: [PATCH 1/7] chore: add custom sheet --- packages/react/__tests__/custom-cache.js | 41 +++++++++++++++++++++++- packages/react/src/global.js | 3 +- 2 files changed, 42 insertions(+), 2 deletions(-) diff --git a/packages/react/__tests__/custom-cache.js b/packages/react/__tests__/custom-cache.js index 1fb975c8c..cab71fc38 100644 --- a/packages/react/__tests__/custom-cache.js +++ b/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( + +
+ + + ) + ).toMatchInlineSnapshot() +}) diff --git a/packages/react/src/global.js b/packages/react/src/global.js index fcfca2866..eb4a45e90 100644 --- a/packages/react/src/global.js +++ b/packages/react/src/global.js @@ -91,7 +91,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, From e638c6d844db8c5f33250a830f37c0cd91fdc1e7 Mon Sep 17 00:00:00 2001 From: Jack Works Date: Wed, 9 Mar 2022 18:29:26 +0800 Subject: [PATCH 2/7] chore: add changeset --- .changeset/green-dingos-design.md | 5 +++++ 1 file changed, 5 insertions(+) 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..1c695f8a7 --- /dev/null +++ b/.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 From 8f6c32fd0a65463c5136be541f0d8815e73db394 Mon Sep 17 00:00:00 2001 From: Jack Works Date: Wed, 9 Mar 2022 22:03:12 +0800 Subject: [PATCH 3/7] chore: remove unused import --- packages/react/src/global.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/global.js b/packages/react/src/global.js index eb4a45e90..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 From c3a2df3d6c6cc38b19a0465e77e7b7a91f1ce594 Mon Sep 17 00:00:00 2001 From: Jack Works Date: Thu, 10 Mar 2022 09:54:17 +0800 Subject: [PATCH 4/7] chore: apply patch --- packages/react/__tests__/custom-cache.js | 60 ++++++++++++++---------- 1 file changed, 34 insertions(+), 26 deletions(-) diff --git a/packages/react/__tests__/custom-cache.js b/packages/react/__tests__/custom-cache.js index cab71fc38..1e4af6149 100644 --- a/packages/react/__tests__/custom-cache.js +++ b/packages/react/__tests__/custom-cache.js @@ -1,10 +1,11 @@ // @flow /** @jsx jsx */ -import 'test-utils/next-env' import createCache from '@emotion/cache' -import { jsx, CacheProvider, Global } 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:')) { @@ -16,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', @@ -40,40 +46,42 @@ test('with custom plugins', () => { `) }) -test('with custom sheet', () => { +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 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( - -
- - - ) - ).toMatchInlineSnapshot() + render( + +
+ + + ) + + expect(safeQuerySelector('head')).toMatchInlineSnapshot(` + + + + + `) }) From 1bb5167ab72f6e96b1cbef14ccb610d3d62cc8af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Thu, 10 Mar 2022 11:25:06 +0100 Subject: [PATCH 5/7] fix inline snapshots --- packages/react/__tests__/custom-cache.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/__tests__/custom-cache.js b/packages/react/__tests__/custom-cache.js index 1e4af6149..86f6d89f7 100644 --- a/packages/react/__tests__/custom-cache.js +++ b/packages/react/__tests__/custom-cache.js @@ -72,14 +72,14 @@ test('Global should "inherit" sheet class from the cache', () => { data-emotion="test-global" data-s="" > - + /** test-global */body{width:0;} From 4b790e417eebf460840f27a767cccf6e6615a892 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Thu, 10 Mar 2022 11:44:27 +0100 Subject: [PATCH 6/7] Fix Flow error --- packages/react/__tests__/custom-cache.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react/__tests__/custom-cache.js b/packages/react/__tests__/custom-cache.js index 86f6d89f7..2ccf1e336 100644 --- a/packages/react/__tests__/custom-cache.js +++ b/packages/react/__tests__/custom-cache.js @@ -57,7 +57,10 @@ test('Global should "inherit" sheet class from the cache', () => { super.insert(`/** ${this.key} */${rule}`) } } - cache.sheet = new MySheet({ key: 'test', container: document.head }) + cache.sheet = new MySheet({ + key: 'test', + container: safeQuerySelector('head') + }) render( From ea74c7a3b05ed43e1ec69aee1319145c06031d3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Thu, 10 Mar 2022 12:09:33 +0100 Subject: [PATCH 7/7] tweak changeset --- .changeset/green-dingos-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/green-dingos-design.md b/.changeset/green-dingos-design.md index 1c695f8a7..4483f7a0e 100644 --- a/.changeset/green-dingos-design.md +++ b/.changeset/green-dingos-design.md @@ -2,4 +2,4 @@ '@emotion/react': patch --- -Change Global component to construct custom StyleSheet constructor. This is useful when cache.sheet is not the default implementation +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`.