@emotion/serialize - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

dist/emotion-serialize.cjs.d.ts

 export * from "./declarations/src/index";
-//# sourceMappingURL=emotion-serialize.cjs.d.ts.map
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZW1vdGlvbi1zZXJpYWxpemUuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuL2RlY2xhcmF0aW9ucy9zcmMvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9

dist/emotion-serialize.cjs.js

 'use strict';
 
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./emotion-serialize.cjs.prod.js");
-} else {
-  module.exports = require("./emotion-serialize.cjs.dev.js");
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var hashString = require('@emotion/hash');
+var unitless = require('@emotion/unitless');
+var memoize = require('@emotion/memoize');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var hashString__default = /*#__PURE__*/_interopDefault(hashString);
+var unitless__default = /*#__PURE__*/_interopDefault(unitless);
+var memoize__default = /*#__PURE__*/_interopDefault(memoize);
+
+var isDevelopment = false;
+
+var hyphenateRegex = /[A-Z]|^ms/g;
+var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
+
+var isCustomProperty = function isCustomProperty(property) {
+  return property.charCodeAt(1) === 45;
+};
+
+var isProcessableValue = function isProcessableValue(value) {
+  return value != null && typeof value !== 'boolean';
+};
+
+var processStyleName = /* #__PURE__ */memoize__default["default"](function (styleName) {
+  return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
+});
+
+var processStyleValue = function processStyleValue(key, value) {
+  switch (key) {
+    case 'animation':
+    case 'animationName':
+      {
+        if (typeof value === 'string') {
+          return value.replace(animationRegex, function (match, p1, p2) {
+            cursor = {
+              name: p1,
+              styles: p2,
+              next: cursor
+            };
+            return p1;
+          });
+        }
+      }
+  }
+
+  if (unitless__default["default"][key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
+    return value + 'px';
+  }
+
+  return value;
+};
+
+var noComponentSelectorMessage = 'Component selectors can only be used in conjunction with ' + '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' + 'compiler transform.';
+
+function handleInterpolation(mergedProps, registered, interpolation) {
+  if (interpolation == null) {
+    return '';
+  }
+
+  var componentSelector = interpolation;
+
+  if (componentSelector.__emotion_styles !== undefined) {
+
+    return componentSelector;
+  }
+
+  switch (typeof interpolation) {
+    case 'boolean':
+      {
+        return '';
+      }
+
+    case 'object':
+      {
+        var keyframes = interpolation;
+
+        if (keyframes.anim === 1) {
+          cursor = {
+            name: keyframes.name,
+            styles: keyframes.styles,
+            next: cursor
+          };
+          return keyframes.name;
+        }
+
+        var serializedStyles = interpolation;
+
+        if (serializedStyles.styles !== undefined) {
+          var next = serializedStyles.next;
+
+          if (next !== undefined) {
+            // not the most efficient thing ever but this is a pretty rare case
+            // and there will be very few iterations of this generally
+            while (next !== undefined) {
+              cursor = {
+                name: next.name,
+                styles: next.styles,
+                next: cursor
+              };
+              next = next.next;
+            }
+          }
+
+          var styles = serializedStyles.styles + ";";
+
+          return styles;
+        }
+
+        return createStringFromObject(mergedProps, registered, interpolation);
+      }
+
+    case 'function':
+      {
+        if (mergedProps !== undefined) {
+          var previousCursor = cursor;
+          var result = interpolation(mergedProps);
+          cursor = previousCursor;
+          return handleInterpolation(mergedProps, registered, result);
+        }
+
+        break;
+      }
+  } // finalize string values (regular strings and functions interpolated into css calls)
+
+
+  var asString = interpolation;
+
+  if (registered == null) {
+    return asString;
+  }
+
+  var cached = registered[asString];
+  return cached !== undefined ? cached : asString;
 }
+
+function createStringFromObject(mergedProps, registered, obj) {
+  var string = '';
+
+  if (Array.isArray(obj)) {
+    for (var i = 0; i < obj.length; i++) {
+      string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
+    }
+  } else {
+    for (var key in obj) {
+      var value = obj[key];
+
+      if (typeof value !== 'object') {
+        var asString = value;
+
+        if (registered != null && registered[asString] !== undefined) {
+          string += key + "{" + registered[asString] + "}";
+        } else if (isProcessableValue(asString)) {
+          string += processStyleName(key) + ":" + processStyleValue(key, asString) + ";";
+        }
+      } else {
+        if (key === 'NO_COMPONENT_SELECTOR' && isDevelopment) {
+          throw new Error(noComponentSelectorMessage);
+        }
+
+        if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
+          for (var _i = 0; _i < value.length; _i++) {
+            if (isProcessableValue(value[_i])) {
+              string += processStyleName(key) + ":" + processStyleValue(key, value[_i]) + ";";
+            }
+          }
+        } else {
+          var interpolated = handleInterpolation(mergedProps, registered, value);
+
+          switch (key) {
+            case 'animation':
+            case 'animationName':
+              {
+                string += processStyleName(key) + ":" + interpolated + ";";
+                break;
+              }
+
+            default:
+              {
+
+                string += key + "{" + interpolated + "}";
+              }
+          }
+        }
+      }
+    }
+  }
+
+  return string;
+}
+
+var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
+// keyframes are stored on the SerializedStyles object as a linked list
+
+
+var cursor;
+function serializeStyles(args, registered, mergedProps) {
+  if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
+    return args[0];
+  }
+
+  var stringMode = true;
+  var styles = '';
+  cursor = undefined;
+  var strings = args[0];
+
+  if (strings == null || strings.raw === undefined) {
+    stringMode = false;
+    styles += handleInterpolation(mergedProps, registered, strings);
+  } else {
+    var asTemplateStringsArr = strings;
+
+    styles += asTemplateStringsArr[0];
+  } // we start at 1 since we've already handled the first arg
+
+
+  for (var i = 1; i < args.length; i++) {
+    styles += handleInterpolation(mergedProps, registered, args[i]);
+
+    if (stringMode) {
+      var templateStringsArr = strings;
+
+      styles += templateStringsArr[i];
+    }
+  }
+
+
+  labelPattern.lastIndex = 0;
+  var identifierName = '';
+  var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
+
+  while ((match = labelPattern.exec(styles)) !== null) {
+    identifierName += '-' + match[1];
+  }
+
+  var name = hashString__default["default"](styles) + identifierName;
+
+  return {
+    name: name,
+    styles: styles,
+    next: cursor
+  };
+}
+
+exports.serializeStyles = serializeStyles;

dist/emotion-serialize.esm.js

@@ -5,4 +5,4 @@ import hashString from '@emotion/hash';
 
-var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
-var UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
+var isDevelopment = false;
+
 var hyphenateRegex = /[A-Z]|^ms/g;
@@ -48,30 +48,2 @@ var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
 
-if (process.env.NODE_ENV !== 'production') {
-  var contentValuePattern = /(var|attr|counters?|url|element|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
-  var contentValues = ['normal', 'none', 'initial', 'inherit', 'unset'];
-  var oldProcessStyleValue = processStyleValue;
-  var msPattern = /^-ms-/;
-  var hyphenPattern = /-(.)/g;
-  var hyphenatedCache = {};
-
-  processStyleValue = function processStyleValue(key, value) {
-    if (key === 'content') {
-      if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
-        throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
-      }
-    }
-
-    var processed = oldProcessStyleValue(key, value);
-
-    if (processed !== '' && !isCustomProperty(key) && key.indexOf('-') !== -1 && hyphenatedCache[key] === undefined) {
-      hyphenatedCache[key] = true;
-      console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern, 'ms-').replace(hyphenPattern, function (str, _char) {
-        return _char.toUpperCase();
-      }) + "?");
-    }
-
-    return processed;
-  };
-}
-
 var noComponentSelectorMessage = 'Component selectors can only be used in conjunction with ' + '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' + 'compiler transform.';
@@ -87,5 +59,2 @@
   if (componentSelector.__emotion_styles !== undefined) {
-    if (process.env.NODE_ENV !== 'production' && String(componentSelector) === 'NO_COMPONENT_SELECTOR') {
-      throw new Error(noComponentSelectorMessage);
-    }
 
@@ -134,6 +103,2 @@ return componentSelector;
 
-          if (process.env.NODE_ENV !== 'production' && serializedStyles.map !== undefined) {
-            styles += serializedStyles.map;
-          }
-
           return styles;
@@ -152,4 +117,2 @@ }
           return handleInterpolation(mergedProps, registered, result);
-        } else if (process.env.NODE_ENV !== 'production') {
-          console.error('Functions that are interpolated in css calls will be stringified.\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\n' + 'let dynamicStyle = (props) => css`color: ${props.color}`\n' + 'It can be called directly with props or interpolated in a styled call like this\n' + "let SomeComponent = styled('div')`${dynamicStyle}`");
         }
@@ -159,18 +122,2 @@
       }
-
-    case 'string':
-      if (process.env.NODE_ENV !== 'production') {
-        var matched = [];
-        var replaced = interpolation.replace(animationRegex, function (_match, _p1, p2) {
-          var fakeVarName = "animation" + matched.length;
-          matched.push("const " + fakeVarName + " = keyframes`" + p2.replace(/^@keyframes animation-\w+/, '') + "`");
-          return "${" + fakeVarName + "}";
-        });
-
-        if (matched.length) {
-          console.error("`keyframes` output got interpolated into plain string, please wrap it with `css`.\n\nInstead of doing this:\n\n" + [].concat(matched, ["`" + replaced + "`"]).join('\n') + "\n\nYou should wrap it with `css` like this:\n\ncss`" + replaced + "`");
-        }
-      }
-
-      break;
   } // finalize string values (regular strings and functions interpolated into css calls)
@@ -209,3 +156,3 @@
       } else {
-        if (key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {
+        if (key === 'NO_COMPONENT_SELECTOR' && isDevelopment) {
           throw new Error(noComponentSelectorMessage);
@@ -233,5 +180,2 @@ }
               {
-                if (process.env.NODE_ENV !== 'production' && key === 'undefined') {
-                  console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
-                }
 
@@ -250,7 +194,2 @@ string += key + "{" + interpolated + "}";
 var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
-var sourceMapPattern;
-
-if (process.env.NODE_ENV !== 'production') {
-  sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
-} // this is the cursor for keyframes
 // keyframes are stored on the SerializedStyles object as a linked list
@@ -276,6 +215,2 @@
 
-    if (process.env.NODE_ENV !== 'production' && asTemplateStringsArr[0] === undefined) {
-      console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
-    }
-
     styles += asTemplateStringsArr[0];
@@ -291,6 +226,2 @@ } // we start at 1 since we've already handled the first arg
 
-      if (process.env.NODE_ENV !== 'production' && templateStringsArr[i] === undefined) {
-        console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
-      }
-
       styles += templateStringsArr[i];
@@ -300,12 +231,3 @@ }
 
-  var sourceMap;
 
-  if (process.env.NODE_ENV !== 'production') {
-    styles = styles.replace(sourceMapPattern, function (match) {
-      sourceMap = match;
-      return '';
-    });
-  } // using a global regex with .exec is stateful so lastIndex has to be reset each time
-
-
   labelPattern.lastIndex = 0;
@@ -321,15 +243,2 @@ var identifierName = '';
 
-  if (process.env.NODE_ENV !== 'production') {
-    var devStyles = {
-      name: name,
-      styles: styles,
-      map: sourceMap,
-      next: cursor,
-      toString: function toString() {
-        return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-      }
-    };
-    return devStyles;
-  }
-
   return {
@@ -336,0 +245,0 @@ name: name,

package.json

 {
   "name": "@emotion/serialize",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "serialization utils for emotion",
@@ -20,3 +20,3 @@ "main": "dist/emotion-serialize.cjs.js",
     "@emotion/unitless": "^0.9.0",
-    "@emotion/utils": "^1.3.0",
+    "@emotion/utils": "^1.4.0",
     "csstype": "^3.0.2"
@@ -32,11 +32,14 @@ },
   ],
-  "browser": {
-    "./dist/emotion-serialize.esm.js": "./dist/emotion-serialize.browser.esm.js"
-  },
   "exports": {
     ".": {
-      "module": {
-        "browser": "./dist/emotion-serialize.browser.esm.js",
-        "default": "./dist/emotion-serialize.esm.js"
+      "types": {
+        "import": "./dist/emotion-serialize.cjs.mjs",
+        "default": "./dist/emotion-serialize.cjs.js"
       },
+      "development": {
+        "module": "./dist/emotion-serialize.development.esm.js",
+        "import": "./dist/emotion-serialize.development.cjs.mjs",
+        "default": "./dist/emotion-serialize.development.cjs.js"
+      },
+      "module": "./dist/emotion-serialize.esm.js",
       "import": "./dist/emotion-serialize.cjs.mjs",
@@ -47,9 +50,8 @@ "default": "./dist/emotion-serialize.cjs.js"
   },
-  "preconstruct": {
-    "exports": {
-      "envConditions": [
-        "browser"
-      ]
+  "imports": {
+    "#is-development": {
+      "development": "./src/conditions/true.ts",
+      "default": "./src/conditions/false.ts"
     }
   }
 }

src/index.ts

@@ -5,2 +5,3 @@ import type { RegisteredCache, SerializedStyles } from '@emotion/utils'
 import memoize from '@emotion/memoize'
+import isDevelopment from '#is-development'
 import * as CSS from 'csstype'
@@ -125,3 +126,3 @@
 
-if (process.env.NODE_ENV !== 'production') {
+if (isDevelopment) {
   let contentValuePattern =
@@ -189,3 +190,3 @@ /(var|attr|counters?|url|element|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/
     if (
-      process.env.NODE_ENV !== 'production' &&
+      isDevelopment &&
       String(componentSelector) === 'NO_COMPONENT_SELECTOR'
@@ -229,6 +230,3 @@ ) {
         let styles = `${serializedStyles.styles};`
-        if (
-          process.env.NODE_ENV !== 'production' &&
-          serializedStyles.map !== undefined
-        ) {
+        if (isDevelopment && serializedStyles.map !== undefined) {
           styles += serializedStyles.map
@@ -253,3 +251,3 @@ }
         return handleInterpolation(mergedProps, registered, result)
-      } else if (process.env.NODE_ENV !== 'production') {
+      } else if (isDevelopment) {
         console.error(
@@ -266,3 +264,3 @@ 'Functions that are interpolated in css calls will be stringified.\n' +
     case 'string':
-      if (process.env.NODE_ENV !== 'production') {
+      if (isDevelopment) {
         const matched: string[] = []
@@ -333,6 +331,3 @@ const replaced = interpolation.replace(
       } else {
-        if (
-          key === 'NO_COMPONENT_SELECTOR' &&
-          process.env.NODE_ENV !== 'production'
-        ) {
+        if (key === 'NO_COMPONENT_SELECTOR' && isDevelopment) {
           throw new Error(noComponentSelectorMessage)
@@ -366,6 +361,3 @@ }
             default: {
-              if (
-                process.env.NODE_ENV !== 'production' &&
-                key === 'undefined'
-              ) {
+              if (isDevelopment && key === 'undefined') {
                 console.error(UNDEFINED_AS_OBJECT_KEY_ERROR)
@@ -387,3 +379,3 @@ }
 let sourceMapPattern: RegExp | undefined
-if (process.env.NODE_ENV !== 'production') {
+if (isDevelopment) {
   sourceMapPattern =
@@ -429,6 +421,3 @@ /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g
     const asTemplateStringsArr = strings as TemplateStringsArray
-    if (
-      process.env.NODE_ENV !== 'production' &&
-      asTemplateStringsArr[0] === undefined
-    ) {
+    if (isDevelopment && asTemplateStringsArr[0] === undefined) {
       console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)
@@ -447,6 +436,3 @@ }
       const templateStringsArr = strings as TemplateStringsArray
-      if (
-        process.env.NODE_ENV !== 'production' &&
-        templateStringsArr[i] === undefined
-      ) {
+      if (isDevelopment && templateStringsArr[i] === undefined) {
         console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)
@@ -459,3 +445,3 @@ }
 
-  if (process.env.NODE_ENV !== 'production') {
+  if (isDevelopment) {
     styles = styles.replace(sourceMapPattern!, match => {
@@ -479,3 +465,3 @@ sourceMap = match
 
-  if (process.env.NODE_ENV !== 'production') {
+  if (isDevelopment) {
     const devStyles = {
@@ -482,0 +468,0 @@ name,

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

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

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

Number of low supply chain risk alerts

1

decreased by-97.37%

Worsened metrics

Total package byte prevSize

53716

decreased by-10.19%

Lines of code

1363

decreased by-6.9%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@emotion/utils@^1.4.0