Fix SSR with multiple createEmotion calls with the same context (#605)

Author: emmatown

packages/create-emotion/src/index.js

@@ -15,8 +15,6 @@ type StylisPlugins = Function[] | null | Function
 type EmotionCaches = {|
   registered: { [key: string]: string },
   inserted: { [key: string]: string | true },
-  stylis: (scope: string, styles: string) => string,
-  sheet: StyleSheet,
   nonce?: string,
   key: string
 |}
@@ -62,9 +60,12 @@ type EmotionOptions = {
 }
 
 function createEmotion(
-  context: { __SECRET_EMOTION__?: EmotionCaches },
+  context: { __SECRET_EMOTION__?: Emotion },
   options?: EmotionOptions
 ): Emotion {
+  if (context.__SECRET_EMOTION__ !== undefined) {
+    return context.__SECRET_EMOTION__
+  }
   if (options === undefined) options = {}
   let key = options.key || 'css'
   if (process.env.NODE_ENV !== 'production') {
@@ -74,10 +75,7 @@ function createEmotion(
       )
     }
   }
-  // $FlowFixMe
-  let caches: EmotionCaches = context.__SECRET_EMOTION__
   let current
-
   function insertRule(rule: string) {
     current += rule
     if (isBrowser) {
@@ -87,35 +85,33 @@ function createEmotion(
 
   const insertionPlugin = stylisRuleSheet(insertRule)
 
-  if (caches === undefined) {
-    const stylisOptions: StylisOptions = {
-      keyframe: false,
-      global: false,
-      prefix: options.prefix === undefined ? true : options.prefix,
-      semicolon: true
-    }
+  const stylisOptions: StylisOptions = {
+    keyframe: false,
+    global: false,
+    prefix: options.prefix === undefined ? true : options.prefix,
+    semicolon: true
+  }
 
-    if (process.env.NODE_ENV !== 'production') {
-      stylisOptions.compress = false
-    }
-    context.__SECRET_EMOTION__ = caches = {
-      registered: {},
-      inserted: {},
-      sheet: new StyleSheet(options),
-      stylis: new Stylis(stylisOptions),
-      nonce: options.nonce,
-      key
-    }
+  if (process.env.NODE_ENV !== 'production') {
+    stylisOptions.compress = false
+  }
+
+  const caches = {
+    registered: {},
+    inserted: {},
+    nonce: options.nonce,
+    key
+  }
+
+  const sheet = new StyleSheet(options)
 
-    caches.stylis.use(options.stylisPlugins)(insertionPlugin)
+  if (isBrowser) {
     // 🚀
-    if (isBrowser) {
-      caches.sheet.inject()
-    }
+    sheet.inject()
   }
 
-  let stylis = caches.stylis
-  let sheet = caches.sheet
+  let stylis = new Stylis(stylisOptions)
+  stylis.use(options.stylisPlugins)(insertionPlugin)
 
   let currentSourceMap = ''
 
@@ -355,6 +351,7 @@ function createEmotion(
     sheet,
     caches
   }
+  context.__SECRET_EMOTION__ = emotion
   return emotion
 }
 

packages/create-emotion/test/__snapshots__/ssr-multiple-create-calls.test.js.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`multiple createEmotion calls with the same context are the same 1`] = `
+
+<style data-emotion-css="84kji8 16qlhaj hbhpyh">
+  @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-16qlhaj{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation-16qlhaj{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
+</style>
+<style data-emotion-css="4xq7ky">
+  .css-4xq7ky{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-4xq7ky:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+</style>
+<main class="css-4xq7ky e126fyao0"
+      data-reactroot
+>
+  <style data-emotion-css="z382ib">
+    .css-z382ib{-webkit-animation:animation-16qlhaj;animation:animation-16qlhaj;border-radius:50%;height:50px;width:50px;background-color:red;}
+  </style>
+  <img size="30"
+       class="css-z382ib e126fyao1"
+  >
+  <img size="100"
+       class="css-z382ib e126fyao1"
+  >
+  <img class="css-z382ib e126fyao1">
+</main>
+
+`;

packages/create-emotion/test/ssr-multiple-create-calls.test.js

@@ -0,0 +1,29 @@
+// @flow
+/**
+ * @jest-environment node
+ */
+import React from 'react'
+import createEmotion from 'create-emotion'
+import createEmotionServer from 'create-emotion-server'
+import createEmotionStyled from 'create-emotion-styled'
+import { renderToString } from 'react-dom/server'
+import { getComponents } from '../../emotion-server/test/util'
+
+test('multiple createEmotion calls with the same context are the same', () => {
+  const context = {}
+  const emotion1 = createEmotion(context)
+  const emotion2 = createEmotion(context)
+  const emotionServer1 = createEmotionServer(emotion1)
+  const emotionServer2 = createEmotionServer(emotion2)
+  const styled = createEmotionStyled(emotion1, React)
+
+  const Components = getComponents(emotion1, { default: styled })
+  const one = emotionServer1.renderStylesToString(
+    renderToString(<Components.Page1 />)
+  )
+  const two = emotionServer2.renderStylesToString(
+    renderToString(<Components.Page1 />)
+  )
+  expect(one).toEqual(two)
+  expect(one).toMatchSnapshot()
+})