@emotion/utils - npm Package Compare versions

Comparing version 0.8.2 to 0.9.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.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})});
+!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 s="";return e.split(" ").forEach(function(e){void 0!==t[e]?i.push(t[e]):s+=e+" "}),s},e.insertStyles=function(e,t,i){var s=e.key+"-"+t.name;if(!1===i&&void 0===e.registered[s]&&(e.registered[s]=t.styles),void 0===e.inserted[t.name]){var n=t;do{var o=e.stylis("."+s,n.styles);e.inserted[n.name]=!0,o.forEach(e.sheet.insert,e.sheet),n=n.next}while(void 0!==n)}},Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=index.min.js.map

dist/utils.browser.cjs.js

@@ -17,3 +17,5 @@ 'use strict';
 }
-var insertStyles = function insertStyles(context, insertable, isStringTag) {
+var insertStyles = function insertStyles(cache, serialized, isStringTag) {
+  var className = cache.key + "-" + serialized.name;
+
   if ( // we only need to add the styles to the registered cache if the
@@ -28,13 +30,25 @@ // class name could be used further down
   // also, note that this check 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;
+  true === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
+    cache.registered[className] = serialized.styles;
   }
 
-  if (context.inserted[insertable.name] === undefined) {
-    var rules = context.stylis("." + context.key + "-" + insertable.name, insertable.styles);
-    context.inserted[insertable.name] = true;
+  if (cache.inserted[serialized.name] === undefined) {
+    var current = serialized;
 
-    {
-      rules.forEach(context.sheet.insert, context.sheet);
-    }
+    do {
+      var rules = cache.stylis("." + className, current.styles);
+      cache.inserted[current.name] = true;
+
+      if (process.env.NODE_ENV !== 'production' && current.map !== undefined) {
+        for (var i = 0; i < rules.length; i++) {
+          rules[i] += current.map;
+        }
+      }
+
+      {
+        rules.forEach(cache.sheet.insert, cache.sheet);
+      }
+
+      current = current.next;
+    } while (current !== undefined);
   }
@@ -41,0 +55,0 @@ };

dist/utils.browser.esm.js

@@ -13,3 +13,5 @@ var isBrowser = true;
 }
-var insertStyles = function insertStyles(context, insertable, isStringTag) {
+var insertStyles = function insertStyles(cache, serialized, isStringTag) {
+  var className = cache.key + "-" + serialized.name;
+
   if ( // we only need to add the styles to the registered cache if the
@@ -24,13 +26,25 @@ // class name could be used further down
   // also, note that this check 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;
+  true === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
+    cache.registered[className] = serialized.styles;
   }
 
-  if (context.inserted[insertable.name] === undefined) {
-    var rules = context.stylis("." + context.key + "-" + insertable.name, insertable.styles);
-    context.inserted[insertable.name] = true;
+  if (cache.inserted[serialized.name] === undefined) {
+    var current = serialized;
 
-    {
-      rules.forEach(context.sheet.insert, context.sheet);
-    }
+    do {
+      var rules = cache.stylis("." + className, current.styles);
+      cache.inserted[current.name] = true;
+
+      if (process.env.NODE_ENV !== 'production' && current.map !== undefined) {
+        for (var i = 0; i < rules.length; i++) {
+          rules[i] += current.map;
+        }
+      }
+
+      {
+        rules.forEach(cache.sheet.insert, cache.sheet);
+      }
+
+      current = current.next;
+    } while (current !== undefined);
   }
@@ -37,0 +51,0 @@ };

dist/utils.cjs.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var isBrowser = typeof document !== 'undefined';
-function getRegisteredStyles(registered, registeredStyles, classNames) {
-  var rawClassName = '';
-  classNames.split(' ').forEach(function (className) {
-    if (registered[className] !== undefined) {
-      registeredStyles.push(registered[className]);
-    } else {
-      rawClassName += className + " ";
-    }
-  });
-  return rawClassName;
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./utils.cjs.prod.js');
+} else {
+  module.exports = require('./utils.cjs.dev.js');
 }
-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 check 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;
-  }
-
-  if (context.inserted[insertable.name] === undefined) {
-    var rules = context.stylis("." + context.key + "-" + insertable.name, insertable.styles);
-    context.inserted[insertable.name] = true;
-
-    if (isBrowser) {
-      rules.forEach(context.sheet.insert, context.sheet);
-    } else {
-      var joinedRules = rules.join('');
-
-      if (context.compat === undefined) {
-        // 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;
-      }
-    }
-  }
-};
-
-exports.isBrowser = isBrowser;
-exports.getRegisteredStyles = getRegisteredStyles;
-exports.insertStyles = insertStyles;

dist/utils.esm.js

@@ -13,3 +13,5 @@ var isBrowser = typeof document !== 'undefined';
 }
-var insertStyles = function insertStyles(context, insertable, isStringTag) {
+var insertStyles = function insertStyles(cache, serialized, isStringTag) {
+  var className = cache.key + "-" + serialized.name;
+
   if ( // we only need to add the styles to the registered cache if the
@@ -24,25 +26,42 @@ // class name could be used further down
   // also, note that this check 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;
+  isBrowser === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
+    cache.registered[className] = serialized.styles;
   }
 
-  if (context.inserted[insertable.name] === undefined) {
-    var rules = context.stylis("." + context.key + "-" + insertable.name, insertable.styles);
-    context.inserted[insertable.name] = true;
+  if (cache.inserted[serialized.name] === undefined) {
+    var stylesForSSR = '';
+    var current = serialized;
 
-    if (isBrowser) {
-      rules.forEach(context.sheet.insert, context.sheet);
-    } else {
-      var joinedRules = rules.join('');
+    do {
+      var rules = cache.stylis("." + className, current.styles);
+      cache.inserted[current.name] = true;
 
-      if (context.compat === undefined) {
-        // 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;
+      if (process.env.NODE_ENV !== 'production' && current.map !== undefined) {
+        for (var i = 0; i < rules.length; i++) {
+          rules[i] += current.map;
+        }
+      }
+
+      if (isBrowser) {
+        rules.forEach(cache.sheet.insert, cache.sheet);
       } 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;
+        var joinedRules = rules.join('');
+
+        if (cache.compat === undefined) {
+          // 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
+          stylesForSSR += joinedRules;
+        } else {
+          // in compat mode, we put the styles on the inserted cache so
+          // that emotion-server can pull out the styles
+          cache.inserted[current.name] = joinedRules;
+        }
       }
+
+      current = current.next;
+    } while (current !== undefined);
+
+    if (!isBrowser && stylesForSSR.length !== 0) {
+      return stylesForSSR;
     }
@@ -49,0 +68,0 @@ }

package.json

 {
   "name": "@emotion/utils",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "description": "internal utils for emotion",
@@ -16,3 +16,3 @@ "main": "dist/utils.cjs.js",
   },
-  "repository": "https://github.com/emotion-js/emotion/tree/master/next-packages/serialize",
+  "repository": "https://github.com/emotion-js/emotion/tree/master/packages/serialize",
   "publishConfig": {
@@ -23,3 +23,4 @@ "access": "public"
     "src",
-    "dist"
+    "dist",
+    "types"
   ],
@@ -29,4 +30,3 @@ "umd:main": "./dist/index.min.js",
     "dtslint": "^0.3.0"
-  },
-  "gitHead": "94fed7652759a0f1962da66b922299398e39fe4d"
+  }
 }

src/index.js

 // @flow
-import type {
-  RegisteredCache,
-  CSSContextType,
-  ScopedInsertableStyles
-} from './types'
+import type { RegisteredCache, EmotionCache, SerializedStyles } from './types'
 
@@ -28,6 +24,7 @@ export const isBrowser = typeof document !== 'undefined'
 export const insertStyles = (
-  context: CSSContextType,
-  insertable: ScopedInsertableStyles,
+  cache: EmotionCache,
+  serialized: SerializedStyles,
   isStringTag: boolean
 ) => {
+  let className = `${cache.key}-${serialized.name}`
   if (
@@ -44,28 +41,38 @@ // we only need to add the styles to the registered cache if the
       // also, note that this check will be dead code eliminated in the browser
-      (isBrowser === false && context.compat !== undefined)) &&
-    context.registered[`${context.key}-${insertable.name}`] === undefined
+      (isBrowser === false && cache.compat !== undefined)) &&
+    cache.registered[className] === undefined
   ) {
-    context.registered[`${context.key}-${insertable.name}`] = insertable.styles
+    cache.registered[className] = serialized.styles
   }
-  if (context.inserted[insertable.name] === undefined) {
-    let rules = context.stylis(
-      `.${context.key}-${insertable.name}`,
-      insertable.styles
-    )
-    context.inserted[insertable.name] = true
+  if (cache.inserted[serialized.name] === undefined) {
+    let stylesForSSR = ''
+    let current = serialized
+    do {
+      let rules = cache.stylis(`.${className}`, current.styles)
+      cache.inserted[current.name] = true
 
-    if (isBrowser) {
-      rules.forEach(context.sheet.insert, context.sheet)
-    } else {
-      let joinedRules = rules.join('')
-      if (context.compat === undefined) {
-        // 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
+      if (process.env.NODE_ENV !== 'production' && current.map !== undefined) {
+        for (let i = 0; i < rules.length; i++) {
+          rules[i] += current.map
+        }
+      }
+      if (isBrowser) {
+        rules.forEach(cache.sheet.insert, cache.sheet)
       } 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
+        let joinedRules = rules.join('')
+        if (cache.compat === undefined) {
+          // 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
+          stylesForSSR += joinedRules
+        } else {
+          // in compat mode, we put the styles on the inserted cache so
+          // that emotion-server can pull out the styles
+          cache.inserted[current.name] = joinedRules
+        }
       }
+      current = current.next
+    } while (current !== undefined)
+    if (!isBrowser && stylesForSSR.length !== 0) {
+      return stylesForSSR
     }
@@ -72,0 +79,0 @@ }

src/types.js

@@ -13,3 +13,3 @@ // @flow
 
-export type CSSContextType = {
+export type EmotionCache = {
   stylis: (string, string) => Array<string>,
@@ -19,5 +19,5 @@ inserted: { [string]: string | true },
   sheet: StyleSheet,
-  theme: Object,
   key: string,
-  compat?: true
+  compat?: true,
+  nonce?: string
 }
@@ -27,5 +27,7 @@
 
-export type ScopedInsertableStyles = {|
+export type SerializedStyles = {|
   name: string,
-  styles: string
+  styles: string,
+  map?: string,
+  next?: SerializedStyles
 |}

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

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21713

increased by31.27%

Number of package files

16

increased by33.33%

Lines of code

487

increased by85.17%

Worsened metrics

Number of low supply chain risk alerts

3

increased by200%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes