@emotion/cache - npm Package Compare versions

Comparing version 11.0.0-next.10 to 11.0.0-next.12

CHANGELOG.md

 # @emotion/cache
 
+## 11.0.0-next.12
+
+### Major Changes
+
+- [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d) [#1572](https://github.com/emotion-js/emotion/pull/1572) Thanks [@Andarist](https://github.com/Andarist)! - From now on `key` option is required. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache. If multiple caches share the same key they might "fight" for each other's style elements.
+
+### Patch Changes
+
+- [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d) [#1572](https://github.com/emotion-js/emotion/pull/1572) Thanks [@Andarist](https://github.com/Andarist)! - Fixed issue with SSRed styles causing a React rehydration mismatch between server & client when cache was created in render.
+
 ## 11.0.0-next.10
@@ -28,2 +38,21 @@
 
+## 10.0.29
+
+### Patch Changes
+
+- Updated dependencies [[`446e756`](https://github.com/emotion-js/emotion/commit/446e75661c4aa01e51d1466472a212940c19cd82)]:
+  - @emotion/hash@0.8.0
+
+## 10.0.27
+
+### Patch Changes
+
+- [`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968) [#1698](https://github.com/emotion-js/emotion/pull/1698) Thanks [@Andarist](https://github.com/Andarist)! - Add LICENSE file
+- Updated dependencies [[`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968)]:
+  - @emotion/hash@0.7.4
+  - @emotion/sheet@0.9.4
+  - @emotion/stylis@0.8.5
+  - @emotion/utils@0.11.3
+  - @emotion/weak-memoize@0.2.5
+
 ## 10.0.19
@@ -30,0 +59,0 @@

dist/cache.browser.cjs.js

@@ -86,7 +86,22 @@ 'use strict';
 
+var movedStyles = false;
+
 var createCache = function createCache(options) {
-  if (options === undefined) options = {};
-  var key = options.key || 'css';
+  var key = options.key;
   var stylisOptions;
 
+  if (!key) {
+    throw new Error("You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\n" + "If multiple caches share the same key they might \"fight\" for each other's style elements.");
+  }
+
+  if ( !movedStyles && key === 'css') {
+    movedStyles = true;
+    var ssrStyles = document.querySelectorAll("style[data-emotion]"); // get SSRed styles out of the way of React's hydration
+    // document.head is a safe place to move them to
+
+    Array.prototype.forEach.call(ssrStyles, function (node) {
+      document.head.appendChild(node);
+    });
+  }
+
   if (options.prefix !== undefined) {
@@ -114,9 +129,14 @@ stylisOptions = {
     container = options.container || document.head;
-    var nodes = document.querySelectorAll("style[data-emotion-" + key + "]");
-    Array.prototype.forEach.call(nodes, function (node) {
-      var attrib = node.getAttribute("data-emotion-" + key); // $FlowFixMe
+    Array.prototype.forEach.call(document.querySelectorAll("style[data-emotion]"), function (node) {
+      var attrib = node.getAttribute("data-emotion").split(' ');
 
-      attrib.split(' ').forEach(function (id) {
-        inserted[id] = true;
-      });
+      if (attrib[0] !== key) {
+        return;
+      } // $FlowFixMe
+
+
+      for (var i = 1; i < attrib.length; i++) {
+        inserted[attrib[i]] = true;
+      }
+
       nodesToRehydrate.push(node);
@@ -123,0 +143,0 @@ });

dist/cache.browser.esm.js

@@ -80,7 +80,22 @@ import { StyleSheet } from '@emotion/sheet';
 
+var movedStyles = false;
+
 var createCache = function createCache(options) {
-  if (options === undefined) options = {};
-  var key = options.key || 'css';
+  var key = options.key;
   var stylisOptions;
 
+  if (!key) {
+    throw new Error("You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\n" + "If multiple caches share the same key they might \"fight\" for each other's style elements.");
+  }
+
+  if ( !movedStyles && key === 'css') {
+    movedStyles = true;
+    var ssrStyles = document.querySelectorAll("style[data-emotion]"); // get SSRed styles out of the way of React's hydration
+    // document.head is a safe place to move them to
+
+    Array.prototype.forEach.call(ssrStyles, function (node) {
+      document.head.appendChild(node);
+    });
+  }
+
   if (options.prefix !== undefined) {
@@ -108,9 +123,14 @@ stylisOptions = {
     container = options.container || document.head;
-    var nodes = document.querySelectorAll("style[data-emotion-" + key + "]");
-    Array.prototype.forEach.call(nodes, function (node) {
-      var attrib = node.getAttribute("data-emotion-" + key); // $FlowFixMe
+    Array.prototype.forEach.call(document.querySelectorAll("style[data-emotion]"), function (node) {
+      var attrib = node.getAttribute("data-emotion").split(' ');
 
-      attrib.split(' ').forEach(function (id) {
-        inserted[id] = true;
-      });
+      if (attrib[0] !== key) {
+        return;
+      } // $FlowFixMe
+
+
+      for (var i = 1; i < attrib.length; i++) {
+        inserted[attrib[i]] = true;
+      }
+
       nodesToRehydrate.push(node);
@@ -117,0 +137,0 @@ });

dist/cache.cjs.dev.js

@@ -114,8 +114,22 @@ 'use strict';
 });
+var movedStyles = false;
 
 var createCache = function createCache(options) {
-  if (options === undefined) options = {};
-  var key = options.key || 'css';
+  var key = options.key;
   var stylisOptions;
 
+  if (!key) {
+    throw new Error("You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\n" + "If multiple caches share the same key they might \"fight\" for each other's style elements.");
+  }
+
+  if (isBrowser && !movedStyles && key === 'css') {
+    movedStyles = true;
+    var ssrStyles = document.querySelectorAll("style[data-emotion]"); // get SSRed styles out of the way of React's hydration
+    // document.head is a safe place to move them to
+
+    Array.prototype.forEach.call(ssrStyles, function (node) {
+      document.head.appendChild(node);
+    });
+  }
+
   if (options.prefix !== undefined) {
@@ -143,9 +157,14 @@ stylisOptions = {
     container = options.container || document.head;
-    var nodes = document.querySelectorAll("style[data-emotion-" + key + "]");
-    Array.prototype.forEach.call(nodes, function (node) {
-      var attrib = node.getAttribute("data-emotion-" + key); // $FlowFixMe
+    Array.prototype.forEach.call(document.querySelectorAll("style[data-emotion]"), function (node) {
+      var attrib = node.getAttribute("data-emotion").split(' ');
 
-      attrib.split(' ').forEach(function (id) {
-        inserted[id] = true;
-      });
+      if (attrib[0] !== key) {
+        return;
+      } // $FlowFixMe
+
+
+      for (var i = 1; i < attrib.length; i++) {
+        inserted[attrib[i]] = true;
+      }
+
       nodesToRehydrate.push(node);
@@ -152,0 +171,0 @@ });

dist/cache.cjs.prod.js

@@ -57,5 +57,12 @@ "use strict";
   };
-})), createCache = function(options) {
-  void 0 === options && (options = {});
-  var stylisOptions, key = options.key || "css";
+})), movedStyles = !1, createCache = function(options) {
+  var stylisOptions, key = options.key;
+  if (!key) throw new Error("You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\nIf multiple caches share the same key they might \"fight\" for each other's style elements.");
+  if (isBrowser && !movedStyles && "css" === key) {
+    movedStyles = !0;
+    var ssrStyles = document.querySelectorAll("style[data-emotion]");
+    Array.prototype.forEach.call(ssrStyles, (function(node) {
+      document.head.appendChild(node);
+    }));
+  }
   void 0 !== options.prefix && (stylisOptions = {
@@ -65,12 +72,9 @@ prefix: options.prefix
   var container, _insert, stylis = new Stylis(stylisOptions), inserted = {}, nodesToRehydrate = [];
-  if (isBrowser) {
-    container = options.container || document.head;
-    var nodes = document.querySelectorAll("style[data-emotion-" + key + "]");
-    Array.prototype.forEach.call(nodes, (function(node) {
-      node.getAttribute("data-emotion-" + key).split(" ").forEach((function(id) {
-        inserted[id] = !0;
-      })), nodesToRehydrate.push(node);
-    }));
-  }
-  if (isBrowser) stylis.use(options.stylisPlugins)(ruleSheet), _insert = function(selector, serialized, sheet, shouldCache) {
+  if (isBrowser && (container = options.container || document.head, Array.prototype.forEach.call(document.querySelectorAll("style[data-emotion]"), (function(node) {
+    var attrib = node.getAttribute("data-emotion").split(" ");
+    if (attrib[0] === key) {
+      for (var i = 1; i < attrib.length; i++) inserted[attrib[i]] = !0;
+      nodesToRehydrate.push(node);
+    }
+  }))), isBrowser) stylis.use(options.stylisPlugins)(ruleSheet), _insert = function(selector, serialized, sheet, shouldCache) {
     var name = serialized.name;
@@ -77,0 +81,0 @@ Sheet.current = sheet, stylis(selector, serialized.styles), shouldCache && (cache.inserted[name] = !0);

dist/cache.esm.js

@@ -108,8 +108,22 @@ import { StyleSheet } from '@emotion/sheet';
 });
+var movedStyles = false;
 
 var createCache = function createCache(options) {
-  if (options === undefined) options = {};
-  var key = options.key || 'css';
+  var key = options.key;
   var stylisOptions;
 
+  if (!key) {
+    throw new Error("You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\n" + "If multiple caches share the same key they might \"fight\" for each other's style elements.");
+  }
+
+  if (isBrowser && !movedStyles && key === 'css') {
+    movedStyles = true;
+    var ssrStyles = document.querySelectorAll("style[data-emotion]"); // get SSRed styles out of the way of React's hydration
+    // document.head is a safe place to move them to
+
+    Array.prototype.forEach.call(ssrStyles, function (node) {
+      document.head.appendChild(node);
+    });
+  }
+
   if (options.prefix !== undefined) {
@@ -137,9 +151,14 @@ stylisOptions = {
     container = options.container || document.head;
-    var nodes = document.querySelectorAll("style[data-emotion-" + key + "]");
-    Array.prototype.forEach.call(nodes, function (node) {
-      var attrib = node.getAttribute("data-emotion-" + key); // $FlowFixMe
+    Array.prototype.forEach.call(document.querySelectorAll("style[data-emotion]"), function (node) {
+      var attrib = node.getAttribute("data-emotion").split(' ');
 
-      attrib.split(' ').forEach(function (id) {
-        inserted[id] = true;
-      });
+      if (attrib[0] !== key) {
+        return;
+      } // $FlowFixMe
+
+
+      for (var i = 1; i < attrib.length; i++) {
+        inserted[attrib[i]] = true;
+      }
+
       nodesToRehydrate.push(node);
@@ -146,0 +165,0 @@ });

package.json

 {
   "name": "@emotion/cache",
-  "version": "11.0.0-next.10",
+  "version": "11.0.0-next.12",
   "description": "emotion's cache",
@@ -19,8 +19,8 @@ "main": "dist/cache.cjs.js",
     "@emotion/sheet": "0.10.0-next.1",
-    "@emotion/stylis": "0.8.4",
-    "@emotion/utils": "0.11.2",
-    "@emotion/weak-memoize": "0.2.4"
+    "@emotion/stylis": "0.8.5",
+    "@emotion/utils": "0.11.3",
+    "@emotion/weak-memoize": "0.2.5"
   },
   "devDependencies": {
-    "@emotion/hash": "0.7.3",
+    "@emotion/hash": "*",
     "dtslint": "^0.3.0"
@@ -27,0 +27,0 @@ },

README.md

@@ -50,3 +50,3 @@ # @emotion/cache
 
-`string`, defaults to `"css"`
+`string`,
 
@@ -53,0 +53,0 @@ The prefix before class names. It will also be set as the value of the `data-emotion` attribute on the style tags that emotion inserts and it's used in the attribute name that marks style elements in `renderStylesToString` and `renderStylesToNodeStream`. This is **required if using multiple emotion caches in the same app**.

src/index.js

@@ -20,3 +20,3 @@ // @flow
   prefix?: PrefixOption,
-  key?: string,
+  key: string,
   container?: HTMLElement,
@@ -46,7 +46,26 @@ speedy?: boolean,
 
-let createCache = (options?: Options): EmotionCache => {
-  if (options === undefined) options = {}
-  let key = options.key || 'css'
+let movedStyles = false
+
+let createCache = (options: Options): EmotionCache => {
+  let key = options.key
   let stylisOptions
 
+  if (!key) {
+    throw new Error(
+      "You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\n" +
+        `If multiple caches share the same key they might "fight" for each other's style elements.`
+    )
+  }
+
+  if (isBrowser && !movedStyles && key === 'css') {
+    movedStyles = true
+
+    const ssrStyles = document.querySelectorAll(`style[data-emotion]`)
+    // get SSRed styles out of the way of React's hydration
+    // document.head is a safe place to move them to
+    Array.prototype.forEach.call(ssrStyles, (node: HTMLStyleElement) => {
+      ;((document.head: any): HTMLHeadElement).appendChild(node)
+    })
+  }
+
   if (options.prefix !== undefined) {
@@ -75,12 +94,18 @@ stylisOptions = {
 
-    const nodes = document.querySelectorAll(`style[data-emotion-${key}]`)
-
-    Array.prototype.forEach.call(nodes, (node: HTMLStyleElement) => {
-      const attrib = node.getAttribute(`data-emotion-${key}`)
-      // $FlowFixMe
-      attrib.split(' ').forEach(id => {
-        inserted[id] = true
-      })
-      nodesToRehydrate.push(node)
-    })
+    Array.prototype.forEach.call(
+      document.querySelectorAll(`style[data-emotion]`),
+      (node: HTMLStyleElement) => {
+        const attrib = ((node.getAttribute(`data-emotion`): any): string).split(
+          ' '
+        )
+        if (attrib[0] !== key) {
+          return
+        }
+        // $FlowFixMe
+        for (let i = 1; i < attrib.length; i++) {
+          inserted[attrib[i]] = true
+        }
+        nodesToRehydrate.push(node)
+      }
+    )
   }
@@ -87,0 +112,0 @@

types/index.d.ts

@@ -12,3 +12,3 @@ // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
   prefix?: Prefix
-  key?: string
+  key: string
   container?: HTMLElement
@@ -19,2 +19,2 @@ speedy?: boolean
 
-export default function createCache(options?: Options): EmotionCache
+export default function createCache(options: Options): EmotionCache

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53939

increased by13.74%

Number of package files

15

increased by7.14%

Lines of code

1379

increased by6%

Dependency changes

• + Added@emotion/stylis@0.8.5(transitive)

• + Added@emotion/utils@0.11.3(transitive)

• + Added@emotion/weak-memoize@0.2.5(transitive)

• - Removed@emotion/stylis@0.8.4(transitive)

• - Removed@emotion/utils@0.11.2(transitive)

• - Removed@emotion/weak-memoize@0.2.4(transitive)

• Updated@emotion/stylis@0.8.5

• Updated@emotion/utils@0.11.3

• Updated@emotion/weak-memoize@0.2.5