Improve auto-rehydration for global styles when using extractCritical2

emotion-js · Apr 13, 2021 · ee704e1 · ee704e1
1 parent c39f42a
commit ee704e1
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 3 deletions.
diff --git a/packages/react/__tests__/rehydration.js b/packages/react/__tests__/rehydration.js
@@ -11,22 +11,28 @@ afterEach(() => {
   jest.clearAllMocks()
 })
 
+let React
 let ReactDOM
+let ReactDOMServer
 let createCache
 let css
 let jsx
 let CacheProvider
+let Global
 
 const resetAllModules = () => {
   jest.resetModules()
 
   createCache = require('@emotion/cache').default
+  React = require('react')
   ReactDOM = require('react-dom')
+  ReactDOMServer = require('react-dom/server')
 
   const emotionReact = require('@emotion/react')
   css = emotionReact.css
   jsx = emotionReact.jsx
   CacheProvider = emotionReact.CacheProvider
+  Global = emotionReact.Global
 }
 
 test("cache created in render doesn't cause a hydration mismatch", () => {
@@ -166,3 +172,130 @@ test('initializing another Emotion instance should not move already moved styles
     </head>
   `)
 })
+
+test('xxx', () => {
+  resetAllModules()
+
+  let cache = createCache({ key: 'mui' })
+
+  safeQuerySelector('body').innerHTML = ReactDOMServer.renderToString(
+    <CacheProvider value={cache}>
+      <div id="root">
+        <main css={{ color: 'green' }}>
+          <div css={{ color: 'hotpink' }} />
+        </main>
+      </div>
+    </CacheProvider>
+  ).replace(/\s+?data-reactroot=""/g, '')
+  expect(safeQuerySelector('body')).toMatchInlineSnapshot(`
+    <body>
+      <div
+        id="root"
+      >
+        <main
+          class="mui-bjcoli"
+        >
+          <div
+            class="mui-1lrxbo5"
+          />
+        </main>
+      </div>
+    </body>
+  `)
+
+  safeQuerySelector('head').innerHTML = ReactDOMServer.renderToString(
+    <>
+      <style data-emotion="mui-global l6h">{'body{color:white;}'}</style>
+      <style data-emotion="mui-global 10q49a4">{'html{background:red;}'}</style>
+      <style data-emotion="mui bjcoli 1lrxbo5">
+        {['.mui-bjcoli{color:green;}', '.mui-1lrxbo5{color:hotpink;}'].join('')}
+      </style>
+    </>
+  ).replace(/\s+?data-reactroot=""/g, '')
+  expect(safeQuerySelector('head')).toMatchInlineSnapshot(`
+    <head>
+      <style
+        data-emotion="mui-global l6h"
+      >
+        body{color:white;}
+      </style>
+      <style
+        data-emotion="mui-global 10q49a4"
+      >
+        html{background:red;}
+      </style>
+      <style
+        data-emotion="mui bjcoli 1lrxbo5"
+      >
+        .mui-bjcoli{color:green;}.mui-1lrxbo5{color:hotpink;}
+      </style>
+    </head>
+  `)
+
+  resetAllModules()
+  cache = createCache({ key: 'mui' })
+
+  ReactDOM.render(
+    <CacheProvider value={cache}>
+      <Global styles={{ body: { color: 'white' } }} />
+      <Global styles={{ html: { background: 'red' } }} />
+      <main css={{ color: 'green' }}>
+        <div css={{ color: 'hotpink' }} />
+      </main>
+    </CacheProvider>,
+    safeQuerySelector('#root')
+  )
+
+  expect(safeQuerySelector('head')).toMatchInlineSnapshot(`
+    <head>
+      <style
+        data-emotion="mui-global"
+        data-s=""
+      >
+        
+        body{color:white;}
+      </style>
+      <style
+        data-emotion="mui-global"
+        data-s=""
+      >
+        
+        html{background:red;}
+      </style>
+      <style
+        data-emotion="mui bjcoli 1lrxbo5"
+        data-s=""
+      >
+        .mui-bjcoli{color:green;}.mui-1lrxbo5{color:hotpink;}
+      </style>
+    </head>
+  `)
+
+  ReactDOM.render(
+    <CacheProvider value={cache}>
+      <Global styles={{ html: { background: 'red' } }} />
+      <main css={{ color: 'green' }}>
+        <div css={{ color: 'hotpink' }} />
+      </main>
+    </CacheProvider>,
+    safeQuerySelector('#root')
+  )
+
+  expect(safeQuerySelector('head')).toMatchInlineSnapshot(`
+    <head>
+      <style
+        data-emotion="mui-global"
+        data-s=""
+      >
+        
+        html{background:red;}
+      </style>
+      <style
+        data-emotion="mui bjcoli 1lrxbo5"
+        data-s=""
+      >
+        .mui-bjcoli{color:green;}.mui-1lrxbo5{color:hotpink;}
+      </style>
+    </head>
+  `)
+})
diff --git a/packages/server/src/create-instance/construct-style-tags.js b/packages/server/src/create-instance/construct-style-tags.js
@@ -13,7 +13,7 @@ const createConstructStyleTags = (
 
   criticalData.styles.forEach(item => {
     styleTagsString += generateStyleTag(
-      cache.key,
+      item.key || cache.key,
       item.ids.join(' '),
       item.css,
       nonceString

diff --git a/packages/server/src/create-instance/extract-critical2.js b/packages/server/src/create-instance/extract-critical2.js
@@ -33,13 +33,17 @@ const createExtractCritical2 = (cache: EmotionCache) => (html: string) => {
         regularCss += cache.inserted[id].toString()
       } else {
         // each global styles require a new entry so it can be independently flushed
-        o.styles.push({ ids: [id], css: cache.inserted[id] })
+        o.styles.push({
+          key: `${cache.key}-global`,
+          ids: [id],
+          css: cache.inserted[id]
+        })
       }
     }
   })
 
   // make sure that regular css is added after the global styles
-  o.styles.push({ ids: regularCssIds, css: regularCss })
+  o.styles.push({ key: cache.key, ids: regularCssIds, css: regularCss })
 
   return o
 }