From a45351147c8a5f7119918542ca57074752738d9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Thu, 1 Oct 2020 16:00:00 +0200 Subject: [PATCH] Fixed an issue with multiple Emotion caches moving SSRed styles to head at their initialization times --- .changeset/gentle-owls-chew.md | 5 + .changeset/proud-bats-cheer.md | 5 + .../__tests__/__snapshots__/hydration.js.snap | 2 + packages/cache/src/index.js | 5 +- .../test/__snapshots__/sheet.dom.test.js.snap | 1 + .../__tests__/__snapshots__/at-import.js.snap | 3 + .../__snapshots__/global-with-theme.js.snap | 3 + .../__tests__/__snapshots__/global.js.snap | 14 +++ .../globals-are-the-worst.js.snap | 4 + .../compat/__snapshots__/browser.js.snap | 1 + packages/react/__tests__/rehydration.js | 103 ++++++++++++++++++ .../__tests__/__snapshots__/index.js.snap | 9 ++ packages/sheet/src/index.js | 1 + .../__snapshots__/source-map.test.js.snap | 1 + 14 files changed, 156 insertions(+), 1 deletion(-) create mode 100644 .changeset/gentle-owls-chew.md create mode 100644 .changeset/proud-bats-cheer.md diff --git a/.changeset/gentle-owls-chew.md b/.changeset/gentle-owls-chew.md new file mode 100644 index 0000000000..32cbaf88c4 --- /dev/null +++ b/.changeset/gentle-owls-chew.md @@ -0,0 +1,5 @@ +--- +'@emotion/sheet': patch +--- + +Generated style elements got `data-s="1"` attribute so `@emotion/cache` can recognize them as being already owned by another Emotion copy to avoid messing up existing style elements when initializing a new copy. diff --git a/.changeset/proud-bats-cheer.md b/.changeset/proud-bats-cheer.md new file mode 100644 index 0000000000..70867b29ce --- /dev/null +++ b/.changeset/proud-bats-cheer.md @@ -0,0 +1,5 @@ +--- +'@emotion/cache': patch +--- + +Fixed an issue with Emotion messing up style elements already processed by previously initialized Emotion copy. diff --git a/packages/cache/__tests__/__snapshots__/hydration.js.snap b/packages/cache/__tests__/__snapshots__/hydration.js.snap index 3cf7f2eef5..68fd441157 100644 --- a/packages/cache/__tests__/__snapshots__/hydration.js.snap +++ b/packages/cache/__tests__/__snapshots__/hydration.js.snap @@ -5,6 +5,7 @@ exports[`it works 1`] = ` @@ -18,6 +19,7 @@ exports[`rehydrated styles to head can be flushed 1`] = ` diff --git a/packages/cache/src/index.js b/packages/cache/src/index.js index 6d6fefd409..509b6ab846 100644 --- a/packages/cache/src/index.js +++ b/packages/cache/src/index.js @@ -56,11 +56,14 @@ let createCache = (options: Options): EmotionCache => { if (isBrowser && !movedStyles && key === 'css') { movedStyles = true - const ssrStyles = document.querySelectorAll(`style[data-emotion]`) + const ssrStyles = document.querySelectorAll( + `style[data-emotion]:not([data-s])` + ) // get SSRed styles out of the way of React's hydration // document.head is a safe place to move them to Array.prototype.forEach.call(ssrStyles, (node: HTMLStyleElement) => { ;((document.head: any): HTMLHeadElement).appendChild(node) + node.dataset.s = 1 }) } diff --git a/packages/css/test/__snapshots__/sheet.dom.test.js.snap b/packages/css/test/__snapshots__/sheet.dom.test.js.snap index eb72ce89d6..d0b27c8bc0 100644 --- a/packages/css/test/__snapshots__/sheet.dom.test.js.snap +++ b/packages/css/test/__snapshots__/sheet.dom.test.js.snap @@ -6,6 +6,7 @@ exports[`sheet tags 1`] = ` Array [ , diff --git a/packages/react/__tests__/__snapshots__/at-import.js.snap b/packages/react/__tests__/__snapshots__/at-import.js.snap index a29f70d23a..c9f33cf7d0 100644 --- a/packages/react/__tests__/__snapshots__/at-import.js.snap +++ b/packages/react/__tests__/__snapshots__/at-import.js.snap @@ -4,11 +4,13 @@ exports[`basic 1`] = ` @@ -31,6 +33,7 @@ exports[`basic 4`] = ` diff --git a/packages/react/__tests__/__snapshots__/global-with-theme.js.snap b/packages/react/__tests__/__snapshots__/global-with-theme.js.snap index 4205a678d6..58be4230bc 100644 --- a/packages/react/__tests__/__snapshots__/global-with-theme.js.snap +++ b/packages/react/__tests__/__snapshots__/global-with-theme.js.snap @@ -5,12 +5,14 @@ exports[`array 1`] = ` ', + '
Hello world!
', + '' + ].join('') + + resetAllModules() + + const cache = createCache({ + key: 'stl', + container: safeQuerySelector('#style-container') + }) + + function App() { + return ( + +
+ {'Hello world!'} +
+ + ) + } + + ReactDOM.hydrate(, safeQuerySelector('#root')) + + resetAllModules() + + expect(safeQuerySelector('head')).toMatchInlineSnapshot(` + +
+ + +
+ + `) +}) + +test('initializing another Emotion instance should not move already moved styles elements', () => { + safeQuerySelector('head').innerHTML = '
' + safeQuerySelector('body').innerHTML = '
' + + resetAllModules() + + const cache = createCache({ + key: 'stl', + container: safeQuerySelector('#style-container') + }) + + function App() { + return ( + +
+ {'Hello world!'} +
+ + ) + } + + ReactDOM.render(, safeQuerySelector('#root')) + + resetAllModules() + + expect(safeQuerySelector('head')).toMatchInlineSnapshot(` + +
+ +
+ + `) +}) diff --git a/packages/sheet/__tests__/__snapshots__/index.js.snap b/packages/sheet/__tests__/__snapshots__/index.js.snap index f868172551..746bd301d8 100644 --- a/packages/sheet/__tests__/__snapshots__/index.js.snap +++ b/packages/sheet/__tests__/__snapshots__/index.js.snap @@ -5,12 +5,14 @@ exports[`StyleSheet should accept prepend option 1`] = ` @@ -158,6 +164,7 @@ exports[`StyleSheet should remove its style elements from the document when flus