emotion-js · emmatown · May 7, 2021 · Apr 6, 2021 · Apr 6, 2021 · Apr 9, 2021
diff --git a/docs/ssr.mdx b/docs/ssr.mdx
@@ -41,6 +41,46 @@ import { renderToString } from 'react-dom/server'
 import createEmotionServer from '@emotion/server/create-instance'
 import createCache from '@emotion/cache'
 
+const key = 'custom'
+const cache = createCache({ key })
+const { extractCriticalToChunks, constructStyleTags } = createEmotionServer(cache)
+
+let element = (
+  <CacheProvider value={cache}>
+    <App />
+  </CacheProvider>
+)
+
+let { html, styles } = extractCriticalToChunks(renderToString(element))
+
+res
+  .status(200)
+  .header('Content-Type', 'text/html')
+  .send(`<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>My site</title>
+    ${constructStyleTags({ html, styles })}
+</head>
+<body>
+    <div id="root">${html}</div>
+
+    <script src="./bundle.js"></script>
+</body>
+</html>`);
+```
+
+#### Deprecated
+
+```jsx
+import { CacheProvider } from '@emotion/react'
+import { renderToString } from 'react-dom/server'
+import createEmotionServer from '@emotion/server/create-instance'
+import createCache from '@emotion/cache'
+
 const key = 'custom'
 const cache = createCache({ key })
 const { extractCritical } = createEmotionServer(cache)

diff --git a/packages/react/__tests__/compat/server.js b/packages/react/__tests__/compat/server.js
@@ -41,7 +41,7 @@ test('extracted rules have correct keys when dealing with multiple caches', () =
   )
 
   let cache2 = createCache({ key: 'ssr-second-key' })
-  let { extractCritical: extractCritical2 } = createEmotionServer(cache2)
+  let { extractCritical: extractCriticalToChunks } = createEmotionServer(cache2)
   let ele2 = (
     <CacheProvider value={cache2}>
       <div css={{ color: 'rebeccapurple' }} />
@@ -50,6 +50,6 @@ test('extracted rules have correct keys when dealing with multiple caches', () =
 
   expect([
     extractCritical1(renderToString(ele1)),
-    extractCritical2(renderToString(ele2))
+    extractCriticalToChunks(renderToString(ele2))
   ]).toMatchSnapshot()
 })
diff --git a/packages/react/__tests__/rehydration.js b/packages/react/__tests__/rehydration.js
@@ -11,22 +11,54 @@ afterEach(() => {
   jest.clearAllMocks()
 })
 
+let React
 let ReactDOM
+let ReactDOMServer
 let createCache
 let css
 let jsx
 let CacheProvider
+let Global
+let createEmotionServer
 
 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
+  createEmotionServer = require('@emotion/server/create-instance').default
+}
+
+const removeGlobalProp = prop => {
+  let descriptor = Object.getOwnPropertyDescriptor(global, prop)
+  Object.defineProperty(global, prop, {
+    value: undefined,
+    writable: true,
+    configurable: true
+  })
+  // $FlowFixMe
+  return () => Object.defineProperty(global, prop, descriptor)
+}
+
+const disableBrowserEnvTemporarily = fn => {
+  let restoreDocument = removeGlobalProp('document')
+  let restoreWindow = removeGlobalProp('window')
+  let restoreHTMLElement = removeGlobalProp('HTMLElement')
+  try {
+    return fn()
+  } finally {
+    restoreDocument()
+    restoreWindow()
+    restoreHTMLElement()
+  }
 }
 
 test("cache created in render doesn't cause a hydration mismatch", () => {
@@ -166,3 +198,130 @@ test('initializing another Emotion instance should not move already moved styles
     </head>
   `)
 })
+
+test('global styles can be removed individually after rehydrating SSRed HTML', () => {
+  const { app, styles } = disableBrowserEnvTemporarily(() => {
+    resetAllModules()
+
+    let cache = createCache({ key: 'mui' })
+    let { extractCriticalToChunks, constructStyleTags } = createEmotionServer(
+      cache
+    )
+
+    const rendered = ReactDOMServer.renderToString(
+      <CacheProvider value={cache}>
+        <Global styles={{ body: { color: 'white' } }} />
+        <Global styles={{ html: { background: 'red' } }} />
+        <main css={{ color: 'green' }}>
+          <div css={{ color: 'hotpink' }} />
+        </main>
+      </CacheProvider>
+    )
+    const extracted = extractCriticalToChunks(rendered)
+    return {
+      app: extracted.html,
+      styles: constructStyleTags(extracted)
+    }
+  })
+
+  safeQuerySelector('head').innerHTML = styles
+  safeQuerySelector('body').innerHTML = `<div id="root">${app}</div>`
+  expect(safeQuerySelector('html')).toMatchInlineSnapshot(`
+    <html>
+      <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>
+      <body>
+        <div
+          id="root"
+        >
+          <main
+            class="mui-bjcoli"
+          >
+            <div
+              class="mui-1lrxbo5"
+            />
+          </main>
+        </div>
+      </body>
+    </html>
+  `)
+
+  resetAllModules()
+  const 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 l6h"
+        data-s=""
+      >
+        body{color:white;}
+      </style>
+      <style
+        data-emotion="mui-global 10q49a4"
+        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={{ body: { color: 'white' } }} />
+      <main css={{ color: 'green' }}>
+        <div css={{ color: 'hotpink' }} />
+      </main>
+    </CacheProvider>,
+    safeQuerySelector('#root')
+  )
+
+  expect(safeQuerySelector('head')).toMatchInlineSnapshot(`
+    <head>
+      <style
+        data-emotion="mui-global l6h"
+        data-s=""
+      >
+        body{color:white;}
+      </style>
+      <style
+        data-emotion="mui bjcoli 1lrxbo5"
+        data-s=""
+      >
+        .mui-bjcoli{color:green;}.mui-1lrxbo5{color:hotpink;}
+      </style>
+    </head>
+  `)
+})
diff --git a/packages/react/src/global.js b/packages/react/src/global.js
@@ -80,13 +80,10 @@ export let Global: React.AbstractComponent<
     )
   }
 
-  // yes, i know these hooks are used conditionally
+  // yes, i know this hook is used conditionally
   // but it is based on a constant that will never change at runtime
   // it's effectively like having two implementations and switching them out
   // so it's not actually breaking anything
-
-  let sheetRef = React.useRef()
-
   React.useLayoutEffect(
     () => {
       const key = `${cache.key}-global`
@@ -101,35 +98,22 @@ export let Global: React.AbstractComponent<
       let node: HTMLStyleElement | null = document.querySelector(
         `style[data-emotion="${key} ${serialized.name}"]`
       )
-
       if (cache.sheet.tags.length) {
         sheet.before = cache.sheet.tags[0]
       }
       if (node !== null) {
         sheet.hydrate([node])
+      } else {
+        if (serialized.next !== undefined) {
+          // insert keyframes
+          insertStyles(cache, serialized.next, true)
+        }
+        cache.insert(``, serialized, sheet, false)
       }
-      sheetRef.current = sheet
-      return () => {
-        sheet.flush()
-      }
-    },
-    [cache]
-  )
 
-  React.useLayoutEffect(
-    () => {
-      if (serialized.next !== undefined) {
-        // insert keyframes
-        insertStyles(cache, serialized.next, true)
-      }
-      let sheet: StyleSheet = ((sheetRef.current: any): StyleSheet)
-      if (sheet.tags.length) {
-        // if this doesn't exist then it will be null so the style element will be appended
-        let element = sheet.tags[sheet.tags.length - 1].nextElementSibling
-        sheet.before = ((element: any): Element | null)
+      return () => {
         sheet.flush()
       }
-      cache.insert(``, serialized, sheet, false)
     },
     [cache, serialized.name]
   )

diff --git a/packages/server/src/create-instance/construct-style-tags.js b/packages/server/src/create-instance/construct-style-tags.js
@@ -0,0 +1,26 @@
+// @flow
+import type { EmotionCache } from '@emotion/utils'
+import { generateStyleTag } from './utils'
+
+const createConstructStyleTags = (
+  cache: EmotionCache,
+  nonceString: string
+) => (criticalData: {
+  html: string,
+  styles: Array<{ key: string, ids: Array<string>, css: string }>
+}) => {
+  let styleTagsString = ''
+
+  criticalData.styles.forEach(item => {
+    styleTagsString += generateStyleTag(
+      item.key,
+      item.ids.join(' '),
+      item.css,
+      nonceString
+    )
+  })
+
+  return styleTagsString
+}
+
+export default createConstructStyleTags
diff --git a/packages/server/src/create-instance/extract-critical-to-chunks.js b/packages/server/src/create-instance/extract-critical-to-chunks.js
@@ -0,0 +1,51 @@
+// @flow
+import type { EmotionCache } from '@emotion/utils'
+
+const extractCriticalToChunks = (cache: EmotionCache) => (html: string) => {
+  // parse out ids from html
+  // reconstruct css/rules/cache to pass
+  let RGX = new RegExp(`${cache.key}-([a-zA-Z0-9-_]+)`, 'gm')
+
+  let o = { html, styles: [] }
+  let match
+  let ids = {}
+  while ((match = RGX.exec(html)) !== null) {
+    // $FlowFixMe
+    if (ids[match[1]] === undefined) {
+      // $FlowFixMe
+      ids[match[1]] = true
+    }
+  }
+
+  const regularCssIds = []
+  let regularCss = ''
+
+  Object.keys(cache.inserted).forEach(id => {
+    if (
+      (ids[id] !== undefined ||
+        cache.registered[`${cache.key}-${id}`] === undefined) &&
+      cache.inserted[id] !== true
+    ) {
+      if (cache.registered[`${cache.key}-${id}`]) {
+        // regular css can be added in one style tag
+        regularCssIds.push(id)
+        // $FlowFixMe
+        regularCss += cache.inserted[id].toString()
+      } else {
+        // each global styles require a new entry so it can be independently flushed
+        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({ key: cache.key, ids: regularCssIds, css: regularCss })
+
+  return o
+}
+
+export default extractCriticalToChunks