Extract rather than inline styles in Global component when in compat …

…mode (#1443)

* Extract rather than inline styles in Global component when in compat mode

* Add a changeset

* Update a comment

.changeset/friendly-experts-jump/changes.json

@@ -0,0 +1 @@
+{ "releases": [{ "name": "@emotion/core", "type": "patch" }], "dependents": [] }

.changeset/friendly-experts-jump/changes.md

@@ -0,0 +1 @@
+Extract styles rather than inline them in compat mode with the Global component

packages/cache/src/index.js

@@ -160,7 +160,11 @@ let createCache = (options?: Options): EmotionCache => {
       } else {
         // in compat mode, we put the styles on the inserted cache so
         // that emotion-server can pull out the styles
-        // except when we don't want to cache it(just the Global component right now)
+        // except when we don't want to cache it which was in Global but now
+        // is nowhere but we don't want to do a major right now
+        // and just in case we're going to leave the case here
+        // it's also not affecting client side bundle size
+        // so it's really not a big deal
 
         if (shouldCache) {
           cache.inserted[name] = rules

packages/core/__tests__/__snapshots__/server.js.snap

@@ -160,14 +160,14 @@ exports[`ssr styled with keyframes 1`] = `
 
 exports[`ssr with old api @import 1`] = `
 
+<style data-emotion-css="1sh9nmh">
+  @import url('https://some-url');h1{color:hotpink;}
+</style>
 <style data-emotion-css="1lrxbo5">
   .css-1lrxbo5{color:hotpink;}
 </style>
 <div class="css-1lrxbo5">
 </div>
-<style data-emotion-css="1sh9nmh">
-  @import url('https://some-url');h1{color:hotpink;}
-</style>
 
 `;
 
@@ -330,6 +330,11 @@ exports[`ssr with old api styled with keyframes 1`] = `
 
 exports[`ssr with old api works with nonces 1`] = `
 
+<style data-emotion-css="1r145pv"
+       nonce="some-nonce"
+>
+  html{margin:0;padding:0;font-family:sans-serif;}
+</style>
 <style data-emotion-css="ihiui2"
        nonce="some-nonce"
 >
@@ -344,11 +349,6 @@ exports[`ssr with old api works with nonces 1`] = `
 </style>
 <div class="css-1lrxbo5">
 </div>
-<style data-emotion-css="1r145pv"
-       nonce="some-nonce"
->
-  html{margin:0;padding:0;font-family:sans-serif;}
-</style>
 
 `;
 

packages/core/__tests__/compat/__snapshots__/server.js.snap

@@ -1,5 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Global component extracts the styles rather than inlines it 1`] = `
+Object {
+  "css": ".css-1lrxbo5{color:hotpink;}html{color:green;}",
+  "html": "<div class=\\"css-1lrxbo5\\"></div>",
+  "ids": Array [
+    "1lrxbo5",
+    "1vwj31w",
+  ],
+}
+`;
+
 exports[`it works 1`] = `
 Object {
   "css": ".css-1lrxbo5{color:hotpink;}",

packages/core/__tests__/compat/server.js

@@ -2,17 +2,31 @@
  * @jest-environment node
  * @flow
  */
-import { jsx } from '@emotion/core'
-import { cache } from 'emotion'
-import { extractCritical } from 'emotion-server'
+import { jsx, Global } from '@emotion/core'
+import createEmotionServer from 'create-emotion-server'
+import createCache from '@emotion/cache'
 import { CacheProvider } from '@emotion/core'
 import { renderToString } from 'react-dom/server'
 
 test('it works', () => {
+  let cache = createCache()
+  let { extractCritical } = createEmotionServer(cache)
   let ele = (
     <CacheProvider value={cache}>
       <div css={{ color: 'hotpink' }} />
     </CacheProvider>
   )
   expect(extractCritical(renderToString(ele))).toMatchSnapshot()
 })
+
+test('Global component extracts the styles rather than inlines it', () => {
+  let cache = createCache()
+  let { extractCritical } = createEmotionServer(cache)
+  let ele = (
+    <CacheProvider value={cache}>
+      <div css={{ color: 'hotpink' }} />
+      <Global styles={{ html: { color: 'green' } }} />
+    </CacheProvider>
+  )
+  expect(extractCritical(renderToString(ele))).toMatchSnapshot()
+})

packages/core/src/global.js

@@ -122,22 +122,26 @@ class InnerGlobal extends React.Component<InnerGlobalProps> {
         next = next.next
       }
 
+      let shouldCache = this.props.cache.compat === true
+
       let rules = this.props.cache.insert(
         ``,
         { name: serializedNames, styles: serializedStyles },
         this.sheet,
-        false
+        shouldCache
       )
 
-      return (
-        <style
-          {...{
-            [`data-emotion-${this.props.cache.key}`]: serializedNames,
-            dangerouslySetInnerHTML: { __html: rules },
-            nonce: this.props.cache.sheet.nonce
-          }}
-        />
-      )
+      if (!shouldCache) {
+        return (
+          <style
+            {...{
+              [`data-emotion-${this.props.cache.key}`]: serializedNames,
+              dangerouslySetInnerHTML: { __html: rules },
+              nonce: this.props.cache.sheet.nonce
+            }}
+          />
+        )
+      }
     }
     return null
   }