@emotion/utils - npm Package Compare versions

Comparing version 0.7.3 to 0.8.0

dist/index.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.emotionUtils={})}(this,function(e){"use strict";e.isBrowser=!0,e.shouldSerializeToReactTree=!1,e.getRegisteredStyles=function(t,i,e){var n="";return e.split(" ").forEach(function(e){void 0!==t[e]?i.push(t[e]):n+=e+" "}),n},e.insertStyles=function(t,e){void 0===t.registered[t.key+"-"+e.name]&&(t.registered[t.key+"-"+e.name]=e.styles),void 0===t.inserted[e.name]&&(t.stylis("."+t.key+"-"+e.name,e.styles).forEach(function(e){t.sheet.insert(e)}),t.inserted[e.name]=!0)},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.emotionUtils={})}(this,function(e){"use strict";e.isBrowser=!0,e.getRegisteredStyles=function(t,i,e){var n="";return e.split(" ").forEach(function(e){void 0!==t[e]?i.push(t[e]):n+=e+" "}),n},e.insertStyles=function(e,t,i){if(!1===i&&void 0===e.registered[e.key+"-"+t.name]&&(e.registered[e.key+"-"+t.name]=t.styles),void 0===e.inserted[t.name]){var n=e.stylis("."+e.key+"-"+t.name,t.styles);e.inserted[t.name]=!0,n.forEach(e.sheet.insert,e.sheet)}},Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=index.min.js.map

dist/utils.browser.cjs.js

@@ -6,3 +6,2 @@ 'use strict';
 var isBrowser = true;
-var shouldSerializeToReactTree = false;
 function getRegisteredStyles(registered, registeredStyles, classNames) {
@@ -19,4 +18,13 @@ var rawClassName = '';
 }
-var insertStyles = function insertStyles(context, insertable) {
-  if (context.registered[context.key + "-" + insertable.name] === undefined) {
+var insertStyles = function insertStyles(context, insertable, isStringTag) {
+  if ( // we only need to add the styles to the registered cache if the
+  // class name could be used further down
+  // the tree but if it's a string tag, we know it won't
+  // so we don't have to add it to registered cache.
+  // this improves memory usage since we can avoid storing the whole style string
+  (isStringTag === false || // we need to always store it if we're in compat mode and
+  // in node since emotion-server relies on whether a style is in
+  // the registered cache to know whether a style is global or not
+  // also, note that this will be dead code eliminated in the browser
+  true === false && context.compat !== undefined) && context.registered[context.key + "-" + insertable.name] === undefined) {
     context.registered[context.key + "-" + insertable.name] = insertable.styles;
@@ -27,8 +35,6 @@ }
     var rules = context.stylis("." + context.key + "-" + insertable.name, insertable.styles);
+    context.inserted[insertable.name] = true;
 
     {
-      rules.forEach(function (rule) {
-        context.sheet.insert(rule);
-      });
-      context.inserted[insertable.name] = true;
+      rules.forEach(context.sheet.insert, context.sheet);
     }
@@ -39,5 +45,3 @@ }
 exports.isBrowser = isBrowser;
-exports.shouldSerializeToReactTree = shouldSerializeToReactTree;
 exports.getRegisteredStyles = getRegisteredStyles;
 exports.insertStyles = insertStyles;
-//# sourceMappingURL=utils.browser.cjs.js.map

dist/utils.browser.esm.js

 var isBrowser = true;
-var shouldSerializeToReactTree = false;
 function getRegisteredStyles(registered, registeredStyles, classNames) {
@@ -14,4 +13,13 @@ var rawClassName = '';
 }
-var insertStyles = function insertStyles(context, insertable) {
-  if (context.registered[context.key + "-" + insertable.name] === undefined) {
+var insertStyles = function insertStyles(context, insertable, isStringTag) {
+  if ( // we only need to add the styles to the registered cache if the
+  // class name could be used further down
+  // the tree but if it's a string tag, we know it won't
+  // so we don't have to add it to registered cache.
+  // this improves memory usage since we can avoid storing the whole style string
+  (isStringTag === false || // we need to always store it if we're in compat mode and
+  // in node since emotion-server relies on whether a style is in
+  // the registered cache to know whether a style is global or not
+  // also, note that this will be dead code eliminated in the browser
+  true === false && context.compat !== undefined) && context.registered[context.key + "-" + insertable.name] === undefined) {
     context.registered[context.key + "-" + insertable.name] = insertable.styles;
@@ -22,8 +30,6 @@ }
     var rules = context.stylis("." + context.key + "-" + insertable.name, insertable.styles);
+    context.inserted[insertable.name] = true;
 
     {
-      rules.forEach(function (rule) {
-        context.sheet.insert(rule);
-      });
-      context.inserted[insertable.name] = true;
+      rules.forEach(context.sheet.insert, context.sheet);
     }
@@ -33,3 +39,2 @@ }
 
-export { isBrowser, shouldSerializeToReactTree, getRegisteredStyles, insertStyles };
-//# sourceMappingURL=utils.browser.esm.js.map
+export { isBrowser, getRegisteredStyles, insertStyles };

dist/utils.cjs.js

@@ -6,3 +6,2 @@ 'use strict';
 var isBrowser = typeof document !== 'undefined';
-var shouldSerializeToReactTree = !isBrowser || process.env.NODE_ENV === 'test';
 function getRegisteredStyles(registered, registeredStyles, classNames) {
@@ -19,4 +18,13 @@ var rawClassName = '';
 }
-var insertStyles = function insertStyles(context, insertable) {
-  if (context.registered[context.key + "-" + insertable.name] === undefined) {
+var insertStyles = function insertStyles(context, insertable, isStringTag) {
+  if ( // we only need to add the styles to the registered cache if the
+  // class name could be used further down
+  // the tree but if it's a string tag, we know it won't
+  // so we don't have to add it to registered cache.
+  // this improves memory usage since we can avoid storing the whole style string
+  (isStringTag === false || // we need to always store it if we're in compat mode and
+  // in node since emotion-server relies on whether a style is in
+  // the registered cache to know whether a style is global or not
+  // also, note that this will be dead code eliminated in the browser
+  isBrowser === false && context.compat !== undefined) && context.registered[context.key + "-" + insertable.name] === undefined) {
     context.registered[context.key + "-" + insertable.name] = insertable.styles;
@@ -27,14 +35,19 @@ }
     var rules = context.stylis("." + context.key + "-" + insertable.name, insertable.styles);
+    context.inserted[insertable.name] = true;
 
-    if (shouldSerializeToReactTree) {
-      context.inserted[insertable.name] = rules.join('');
+    if (!isBrowser) {
+      var joinedRules = rules.join('');
 
       if (context.compat === undefined) {
-        return context.inserted[insertable.name];
+        // in regular mode, we don't set the styles on the inserted cache
+        // since we don't need to and that would be wasting memory
+        // we return them so that they are rendered in a style tag
+        return joinedRules;
+      } else {
+        // in compat mode, we put the styles on the inserted cache so
+        // that emotion-server can pull out the styles
+        context.inserted[insertable.name] = joinedRules;
       }
     } else {
-      rules.forEach(function (rule) {
-        context.sheet.insert(rule);
-      });
-      context.inserted[insertable.name] = true;
+      rules.forEach(context.sheet.insert, context.sheet);
     }
@@ -45,5 +58,3 @@ }
 exports.isBrowser = isBrowser;
-exports.shouldSerializeToReactTree = shouldSerializeToReactTree;
 exports.getRegisteredStyles = getRegisteredStyles;
 exports.insertStyles = insertStyles;
-//# sourceMappingURL=utils.cjs.js.map

dist/utils.esm.js

 var isBrowser = typeof document !== 'undefined';
-var shouldSerializeToReactTree = !isBrowser || process.env.NODE_ENV === 'test';
 function getRegisteredStyles(registered, registeredStyles, classNames) {
@@ -14,4 +13,13 @@ var rawClassName = '';
 }
-var insertStyles = function insertStyles(context, insertable) {
-  if (context.registered[context.key + "-" + insertable.name] === undefined) {
+var insertStyles = function insertStyles(context, insertable, isStringTag) {
+  if ( // we only need to add the styles to the registered cache if the
+  // class name could be used further down
+  // the tree but if it's a string tag, we know it won't
+  // so we don't have to add it to registered cache.
+  // this improves memory usage since we can avoid storing the whole style string
+  (isStringTag === false || // we need to always store it if we're in compat mode and
+  // in node since emotion-server relies on whether a style is in
+  // the registered cache to know whether a style is global or not
+  // also, note that this will be dead code eliminated in the browser
+  isBrowser === false && context.compat !== undefined) && context.registered[context.key + "-" + insertable.name] === undefined) {
     context.registered[context.key + "-" + insertable.name] = insertable.styles;
@@ -22,14 +30,19 @@ }
     var rules = context.stylis("." + context.key + "-" + insertable.name, insertable.styles);
+    context.inserted[insertable.name] = true;
 
-    if (shouldSerializeToReactTree) {
-      context.inserted[insertable.name] = rules.join('');
+    if (!isBrowser) {
+      var joinedRules = rules.join('');
 
       if (context.compat === undefined) {
-        return context.inserted[insertable.name];
+        // in regular mode, we don't set the styles on the inserted cache
+        // since we don't need to and that would be wasting memory
+        // we return them so that they are rendered in a style tag
+        return joinedRules;
+      } else {
+        // in compat mode, we put the styles on the inserted cache so
+        // that emotion-server can pull out the styles
+        context.inserted[insertable.name] = joinedRules;
       }
     } else {
-      rules.forEach(function (rule) {
-        context.sheet.insert(rule);
-      });
-      context.inserted[insertable.name] = true;
+      rules.forEach(context.sheet.insert, context.sheet);
     }
@@ -39,3 +52,2 @@ }
 
-export { isBrowser, shouldSerializeToReactTree, getRegisteredStyles, insertStyles };
-//# sourceMappingURL=utils.esm.js.map
+export { isBrowser, getRegisteredStyles, insertStyles };

package.json

 {
   "name": "@emotion/utils",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "description": "internal utils for emotion",
@@ -5,0 +5,0 @@ "main": "dist/utils.cjs.js",

src/index.js

@@ -9,4 +9,2 @@ // @flow
 export const isBrowser = typeof document !== 'undefined'
-export const shouldSerializeToReactTree =
-  !isBrowser || process.env.NODE_ENV === 'test'
 
@@ -32,5 +30,19 @@ export function getRegisteredStyles(
   context: CSSContextType,
-  insertable: ScopedInsertableStyles
+  insertable: ScopedInsertableStyles,
+  isStringTag: boolean
 ) => {
-  if (context.registered[`${context.key}-${insertable.name}`] === undefined) {
+  if (
+    // we only need to add the styles to the registered cache if the
+    // class name could be used further down
+    // the tree but if it's a string tag, we know it won't
+    // so we don't have to add it to registered cache.
+    // this improves memory usage since we can avoid storing the whole style string
+    (isStringTag === false ||
+      // we need to always store it if we're in compat mode and
+      // in node since emotion-server relies on whether a style is in
+      // the registered cache to know whether a style is global or not
+      // also, note that this will be dead code eliminated in the browser
+      (isBrowser === false && context.compat !== undefined)) &&
+    context.registered[`${context.key}-${insertable.name}`] === undefined
+  ) {
     context.registered[`${context.key}-${insertable.name}`] = insertable.styles
@@ -43,13 +55,18 @@ }
     )
+    context.inserted[insertable.name] = true
 
-    if (shouldSerializeToReactTree) {
-      context.inserted[insertable.name] = rules.join('')
+    if (!isBrowser) {
+      let joinedRules = rules.join('')
       if (context.compat === undefined) {
-        return context.inserted[insertable.name]
+        // in regular mode, we don't set the styles on the inserted cache
+        // since we don't need to and that would be wasting memory
+        // we return them so that they are rendered in a style tag
+        return joinedRules
+      } else {
+        // in compat mode, we put the styles on the inserted cache so
+        // that emotion-server can pull out the styles
+        context.inserted[insertable.name] = joinedRules
       }
     } else {
-      rules.forEach(rule => {
-        context.sheet.insert(rule)
-      })
-      context.inserted[insertable.name] = true
+      rules.forEach(context.sheet.insert, context.sheet)
     }
@@ -56,0 +73,0 @@ }

src/types.js

@@ -6,2 +6,4 @@ // @flow
   container: HTMLElement;
+  nonce: string | void;
+  key: string;
   insert(rule: string): void;
@@ -8,0 +10,0 @@ flush(): void;

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Lines of code

262

increased by24.17%

Number of low supply chain risk alerts

1

decreased by-50%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

15292

decreased by-29.59%

Number of package files

11

decreased by-26.67%

No dependency changes