From 39f5a98bbdf0633e0d601c52419d40f75ca34d15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sat, 5 Sep 2020 23:15:20 +0200
Subject: [PATCH] Styles are now correctly extracted from the correct cache
 (`key`-sensitive) on the server

---
 .changeset/cool-carpets-wave.md               |  5 ++++
 packages/cache/package.json                   |  1 +
 packages/cache/src/index.js                   | 13 +++++++----
 .../compat/__snapshots__/server.js.snap       | 19 +++++++++++++++
 packages/react/__tests__/compat/server.js     | 23 +++++++++++++++++++
 5 files changed, 56 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/cool-carpets-wave.md

diff --git a/.changeset/cool-carpets-wave.md b/.changeset/cool-carpets-wave.md
new file mode 100644
index 000000000..d5749346f
--- /dev/null
+++ b/.changeset/cool-carpets-wave.md
@@ -0,0 +1,5 @@
+---
+'@emotion/cache': patch
+---
+
+Styles are now correctly extracted from the correct cache (`key`-sensitive) on the server.
diff --git a/packages/cache/package.json b/packages/cache/package.json
index a42466282..bcb5db8e4 100644
--- a/packages/cache/package.json
+++ b/packages/cache/package.json
@@ -15,6 +15,7 @@
     "test:typescript": "dtslint types"
   },
   "dependencies": {
+    "@emotion/memoize": "^0.7.4",
     "@emotion/sheet": "1.0.0-next.3",
     "@emotion/utils": "1.0.0-next.0",
     "@emotion/weak-memoize": "0.2.5",
diff --git a/packages/cache/src/index.js b/packages/cache/src/index.js
index 441496044..dd69bc3c7 100644
--- a/packages/cache/src/index.js
+++ b/packages/cache/src/index.js
@@ -10,6 +10,7 @@ import {
   prefixer
 } from 'stylis'
 import weakMemoize from '@emotion/weak-memoize'
+import memoize from '@emotion/memoize'
 import {
   compat,
   removeLabel,
@@ -31,10 +32,12 @@ export type Options = {
 
 let getServerStylisCache = isBrowser
   ? undefined
-  : weakMemoize(() => {
-      let cache = {}
-      return name => cache[name]
-    })
+  : weakMemoize(() =>
+      memoize(() => {
+        let cache = {}
+        return name => cache[name]
+      })
+    )
 
 const defaultStylisPlugins = [prefixer]
 let movedStyles = false
@@ -162,7 +165,7 @@ let createCache = (options: Options): EmotionCache => {
     const stylis = styles => serialize(compile(styles), serializer)
 
     // $FlowFixMe
-    let serverStylisCache = getServerStylisCache(stylisPlugins)
+    let serverStylisCache = getServerStylisCache(stylisPlugins)(key)
     let getRules = (selector: string, serialized: SerializedStyles): string => {
       let name = serialized.name
       if (serverStylisCache[name] === undefined) {
diff --git a/packages/react/__tests__/compat/__snapshots__/server.js.snap b/packages/react/__tests__/compat/__snapshots__/server.js.snap
index 2eb56ba6e..16bc521c8 100644
--- a/packages/react/__tests__/compat/__snapshots__/server.js.snap
+++ b/packages/react/__tests__/compat/__snapshots__/server.js.snap
@@ -11,6 +11,25 @@ Object {
 }
 `;
 
+exports[`extracted rules have correct keys when dealing with multiple caches 1`] = `
+Array [
+  Object {
+    "css": ".ssr-first-key-1j7dx2f{color:rebeccapurple;}",
+    "html": "<div class=\\"ssr-first-key-1j7dx2f\\"></div>",
+    "ids": Array [
+      "1j7dx2f",
+    ],
+  },
+  Object {
+    "css": ".ssr-second-key-1j7dx2f{color:rebeccapurple;}",
+    "html": "<div class=\\"ssr-second-key-1j7dx2f\\"></div>",
+    "ids": Array [
+      "1j7dx2f",
+    ],
+  },
+]
+`;
+
 exports[`it works 1`] = `
 Object {
   "css": ".ssr-1lrxbo5{color:hotpink;}",
diff --git a/packages/react/__tests__/compat/server.js b/packages/react/__tests__/compat/server.js
index cb1e006d9..08218a251 100644
--- a/packages/react/__tests__/compat/server.js
+++ b/packages/react/__tests__/compat/server.js
@@ -30,3 +30,26 @@ test('Global component extracts the styles rather than inlines it', () => {
   )
   expect(extractCritical(renderToString(ele))).toMatchSnapshot()
 })
+
+test('extracted rules have correct keys when dealing with multiple caches', () => {
+  let cache1 = createCache({ key: 'ssr-first-key' })
+  let { extractCritical: extractCritical1 } = createEmotionServer(cache1)
+  let ele1 = (
+    <CacheProvider value={cache1}>
+      <div css={{ color: 'rebeccapurple' }} />
+    </CacheProvider>
+  )
+
+  let cache2 = createCache({ key: 'ssr-second-key' })
+  let { extractCritical: extractCritical2 } = createEmotionServer(cache2)
+  let ele2 = (
+    <CacheProvider value={cache2}>
+      <div css={{ color: 'rebeccapurple' }} />
+    </CacheProvider>
+  )
+
+  expect([
+    extractCritical1(renderToString(ele1)),
+    extractCritical2(renderToString(ele2))
+  ]).toMatchSnapshot()
+})