diff --git a/packages/react/__tests__/rehydration.js b/packages/react/__tests__/rehydration.js
index c79ee0f30..dd9799c3b 100644
--- 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
`)
})
+
+test('xxx', () => {
+ resetAllModules()
+
+ let cache = createCache({ key: 'mui' })
+
+ safeQuerySelector('body').innerHTML = ReactDOMServer.renderToString(
+
+
+
+ ).replace(/\s+?data-reactroot=""/g, '')
+ expect(safeQuerySelector('body')).toMatchInlineSnapshot(`
+
+
+
+ `)
+
+ safeQuerySelector('head').innerHTML = ReactDOMServer.renderToString(
+ <>
+
+
+
+
+ ).replace(/\s+?data-reactroot=""/g, '')
+ expect(safeQuerySelector('head')).toMatchInlineSnapshot(`
+
+
+
+
+
+ `)
+
+ resetAllModules()
+ cache = createCache({ key: 'mui' })
+
+ ReactDOM.render(
+
+
+
+
+
+
+ ,
+ safeQuerySelector('#root')
+ )
+
+ expect(safeQuerySelector('head')).toMatchInlineSnapshot(`
+
+
+
+
+
+ `)
+
+ ReactDOM.render(
+
+
+
+
+
+ ,
+ safeQuerySelector('#root')
+ )
+
+ expect(safeQuerySelector('head')).toMatchInlineSnapshot(`
+
+
+
+
+ `)
+})
diff --git a/packages/server/src/create-instance/construct-style-tags.js b/packages/server/src/create-instance/construct-style-tags.js
index 280e62284..aae238b95 100644
--- 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
index 966c0bc17..8646b213d 100644
--- 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
}