Fixed an issue with multiple Emotion caches moving SSRed styles to he…

…ad at their initialization times
emotion-js · Oct 2, 2020 · 7719cf3 · 7719cf3
1 parent 5d094b5
commit 7719cf3
Show file tree

Hide file tree

Showing 14 changed files with 157 additions and 5 deletions.
diff --git a/.changeset/gentle-owls-chew.md 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
@@ -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
@@ -5,6 +5,7 @@ exports[`it works 1`] = `
   <head>
     <style
       data-emotion="css 1lrxbo5"
+      data-s=""
     >
       .css-1lrxbo5{color:hotpink;}
     </style>
@@ -18,6 +19,7 @@ exports[`rehydrated styles to head can be flushed 1`] = `
   <head>
     <style
       data-emotion="emo 1lrxbo5"
+      data-s=""
     >
       .emo-1lrxbo5{color:hotpink;}
     </style>

diff --git a/packages/cache/src/index.js b/packages/cache/src/index.js
@@ -41,7 +41,6 @@ let getServerStylisCache = isBrowser
     )
 
 const defaultStylisPlugins = [prefixer]
-let movedStyles = false
 
 let createCache = (options: Options): EmotionCache => {
   let key = options.key
@@ -53,14 +52,15 @@ let createCache = (options: Options): EmotionCache => {
     )
   }
 
-  if (isBrowser && !movedStyles && key === 'css') {
-    movedStyles = true
-
-    const ssrStyles = document.querySelectorAll(`style[data-emotion]`)
+  if (isBrowser && key === 'css') {
+    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.setAttribute('data-s', '')
     })
   }
 

diff --git 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 [
   <style
     data-emotion="css"
+    data-s=""
   >
     
   </style>,

diff --git 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`] = `
 <head>
   <style
     data-emotion="css-global"
+    data-s=""
   >
     
   </style>
   <style
     data-emotion="css"
+    data-s=""
   >
     
   </style>
@@ -31,6 +33,7 @@ exports[`basic 4`] = `
 <head>
   <style
     data-emotion="css"
+    data-s=""
   >
     
   </style>

diff --git 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`] = `
   <head>
     <style
       data-emotion="css-global"
+      data-s=""
     >
       
       html{background-color:green;}
     </style>
     <style
       data-emotion="css-global"
+      data-s=""
     >
       
       html{font-size:16px;}
@@ -40,6 +42,7 @@ exports[`basic 1`] = `
   <head>
     <style
       data-emotion="css-global"
+      data-s=""
     >
       
       html{background-color:green;}

diff --git a/packages/react/__tests__/__snapshots__/global.js.snap b/packages/react/__tests__/__snapshots__/global.js.snap
@@ -4,42 +4,49 @@ exports[`basic 1`] = `
 <head>
   <style
     data-emotion="css"
+    data-s=""
   >
     
     .css-animation-ocj8pk{}
   </style>
   <style
     data-emotion="css"
+    data-s=""
   >
     
     @-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
   </style>
   <style
     data-emotion="css"
+    data-s=""
   >
     
     @keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
   </style>
   <style
     data-emotion="css-global"
+    data-s=""
   >
     
     @import url('something.com/file.css');
   </style>
   <style
     data-emotion="css-global"
+    data-s=""
   >
     
     html{background-color:hotpink;}
   </style>
   <style
     data-emotion="css-global"
+    data-s=""
   >
     
     h1{-webkit-animation:animation-ocj8pk 1s;animation:animation-ocj8pk 1s;}
   </style>
   <style
     data-emotion="css-global"
+    data-s=""
   >
     
     @font-face{font-family:some-name;}
@@ -59,18 +66,21 @@ exports[`basic 3`] = `
 <head>
   <style
     data-emotion="css"
+    data-s=""
   >
     
     .css-animation-ocj8pk{}
   </style>
   <style
     data-emotion="css"
+    data-s=""
   >
     
     @-webkit-keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
   </style>
   <style
     data-emotion="css"
+    data-s=""
   >
     
     @keyframes animation-ocj8pk{from,to{color:green;}50%{color:hotpink;}}
@@ -90,12 +100,14 @@ exports[`updating more than 1 global rule 1`] = `
 <head>
   <style
     data-emotion="global-multiple-rules-global"
+    data-s=""
   >
     
     body{background:white;}
   </style>
   <style
     data-emotion="global-multiple-rules-global"
+    data-s=""
   >
     
     div{color:black;}
@@ -107,12 +119,14 @@ exports[`updating more than 1 global rule 2`] = `
 <head>
   <style
     data-emotion="global-multiple-rules-global"
+    data-s=""
   >
     
     body{background:gray;}
   </style>
   <style
     data-emotion="global-multiple-rules-global"
+    data-s=""
   >
     
     div{color:white;}

diff --git a/packages/react/__tests__/__snapshots__/globals-are-the-worst.js.snap b/packages/react/__tests__/__snapshots__/globals-are-the-worst.js.snap
@@ -5,12 +5,14 @@ exports[`specificity with globals 1`] = `
   <head>
     <style
       data-emotion="css-global"
+      data-s=""
     >
       
       .some-class{color:green;}
     </style>
     <style
       data-emotion="css"
+      data-s=""
     >
       
       .css-1ndtvd6{color:hotpink;}
@@ -40,12 +42,14 @@ exports[`specificity with globals 2`] = `
   <head>
     <style
       data-emotion="css-global"
+      data-s=""
     >
       
       .some-class{color:yellow;}
     </style>
     <style
       data-emotion="css"
+      data-s=""
     >
       
       .css-1ndtvd6{color:hotpink;}

diff --git a/packages/react/__tests__/compat/__snapshots__/browser.js.snap b/packages/react/__tests__/compat/__snapshots__/browser.js.snap
@@ -5,6 +5,7 @@ exports[`composition works from old emotion css calls 1`] = `
   <head>
     <style
       data-emotion="css"
+      data-s=""
     >
       
       .css-ulmpz9{color:green;}

diff --git a/packages/react/__tests__/rehydration.js b/packages/react/__tests__/rehydration.js
@@ -63,3 +63,106 @@ test("cache created in render doesn't cause a hydration mismatch", () => {
   expect((console.error: any).mock.calls).toMatchInlineSnapshot(`Array []`)
   expect((console.warn: any).mock.calls).toMatchInlineSnapshot(`Array []`)
 })
+
+test('initializing another Emotion instance should not move already moved styles elements', () => {
+  safeQuerySelector('head').innerHTML = '<div id="style-container"></div>'
+  safeQuerySelector('body').innerHTML = [
+    '<div id="root">',
+    '<style data-emotion="stl 1pdkrhd">.stl-1pdkrhd-App {color: hotpink;}</style>',
+    '<div class="stl-1pdkrhd-App">Hello world!</div>',
+    '</div>'
+  ].join('')
+
+  resetAllModules()
+
+  const cache = createCache({
+    key: 'stl',
+    container: safeQuerySelector('#style-container')
+  })
+
+  function App() {
+    return (
+      <CacheProvider value={cache}>
+        <div
+          css={css`
+            color: hotpink;
+          `}
+        >
+          {'Hello world!'}
+        </div>
+      </CacheProvider>
+    )
+  }
+
+  ReactDOM.hydrate(<App />, safeQuerySelector('#root'))
+
+  resetAllModules()
+
+  expect(safeQuerySelector('head')).toMatchInlineSnapshot(`
+    <head>
+      <div
+        id="style-container"
+      >
+        <style
+          data-emotion="stl 1pdkrhd"
+          data-s=""
+        >
+          .stl-1pdkrhd-App {color: hotpink;}
+        </style>
+        <style
+          data-emotion="stl"
+          data-s=""
+        >
+          
+          .stl-1pdkrhd-App{color:hotpink;}
+        </style>
+      </div>
+    </head>
+  `)
+})
+
+test('initializing another Emotion instance should not move already moved styles elements', () => {
+  safeQuerySelector('head').innerHTML = '<div id="style-container"></div>'
+  safeQuerySelector('body').innerHTML = '<div id="root"></div>'
+
+  resetAllModules()
+
+  const cache = createCache({
+    key: 'stl',
+    container: safeQuerySelector('#style-container')
+  })
+
+  function App() {
+    return (
+      <CacheProvider value={cache}>
+        <div
+          css={css`
+            color: hotpink;
+          `}
+        >
+          {'Hello world!'}
+        </div>
+      </CacheProvider>
+    )
+  }
+
+  ReactDOM.render(<App />, safeQuerySelector('#root'))
+
+  resetAllModules()
+
+  expect(safeQuerySelector('head')).toMatchInlineSnapshot(`
+    <head>
+      <div
+        id="style-container"
+      >
+        <style
+          data-emotion="stl"
+          data-s=""
+        >
+          
+          .stl-1pdkrhd-App{color:hotpink;}
+        </style>
+      </div>
+    </head>
+  `)
+})