Styles are now correctly extracted from the correct cache (key-sens…

…itive) on the server (#1998)

.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.

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",

packages/cache/src/index.js

@@ -11,6 +11,7 @@ import {
   COMMENT
 } from 'stylis'
 import weakMemoize from '@emotion/weak-memoize'
+import memoize from '@emotion/memoize'
 import {
   compat,
   removeLabel,
@@ -32,10 +33,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
@@ -175,7 +178,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) {

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;}",

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()
+})