@emotion/serialize - npm Package Compare versions

Comparing version 0.11.13 to 0.11.14

CHANGELOG.md

 # @emotion/serialize
 
+## 0.11.14
+
+### Patch Changes
+
+- [`a55f3d49`](https://github.com/emotion-js/emotion/commit/a55f3d49c2febdf7eb1bede3f12da13c3efa1399) [#1581](https://github.com/emotion-js/emotion/pull/1581) Thanks [@Andarist](https://github.com/Andarist)! - Don't cause invalid rule to be serialized when using object style with falsy value
+
+* [`ca95f385`](https://github.com/emotion-js/emotion/commit/ca95f385f7ce3da6d53de1a652b3b219f11434c4) [#1580](https://github.com/emotion-js/emotion/pull/1580) Thanks [@Andarist](https://github.com/Andarist)! - Warn about `undefined` being used as object style's key
+
 ## 0.11.13
@@ -4,0 +12,0 @@

dist/serialize.browser.cjs.js

@@ -12,2 +12,3 @@ 'use strict';
 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 hyphenateRegex = /[A-Z]|^ms/g;
@@ -20,2 +21,6 @@ var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
 
+var isProcessableValue = function isProcessableValue(value) {
+  return value != null && typeof value !== 'boolean';
+};
+
 var processStyleName = memoize(function (styleName) {
@@ -26,6 +31,2 @@ return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
 var processStyleValue = function processStyleValue(key, value) {
-  if (value == null || typeof value === 'boolean') {
-    return '';
-  }
-
   switch (key) {
@@ -203,3 +204,3 @@ case 'animation':
           string += _key + "{" + registered[value] + "}";
-        } else {
+        } else if (isProcessableValue(value)) {
           string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
@@ -214,3 +215,5 @@ }
           for (var _i = 0; _i < value.length; _i++) {
-            string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
+            if (isProcessableValue(value[_i])) {
+              string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
+            }
           }
@@ -230,2 +233,6 @@ } else {
               {
+                if (process.env.NODE_ENV !== 'production' && _key === 'undefined') {
+                  console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
+                }
+
                 string += _key + "{" + interpolated + "}";
@@ -232,0 +239,0 @@ }

dist/serialize.browser.esm.js

@@ -6,2 +6,3 @@ 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 hyphenateRegex = /[A-Z]|^ms/g;
@@ -14,2 +15,6 @@ var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
 
+var isProcessableValue = function isProcessableValue(value) {
+  return value != null && typeof value !== 'boolean';
+};
+
 var processStyleName = memoize(function (styleName) {
@@ -20,6 +25,2 @@ return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
 var processStyleValue = function processStyleValue(key, value) {
-  if (value == null || typeof value === 'boolean') {
-    return '';
-  }
-
   switch (key) {
@@ -197,3 +198,3 @@ case 'animation':
           string += _key + "{" + registered[value] + "}";
-        } else {
+        } else if (isProcessableValue(value)) {
           string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
@@ -208,3 +209,5 @@ }
           for (var _i = 0; _i < value.length; _i++) {
-            string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
+            if (isProcessableValue(value[_i])) {
+              string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
+            }
           }
@@ -224,2 +227,6 @@ } else {
               {
+                if (process.env.NODE_ENV !== 'production' && _key === 'undefined') {
+                  console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
+                }
+
                 string += _key + "{" + interpolated + "}";
@@ -226,0 +233,0 @@ }

dist/serialize.cjs.dev.js

@@ -12,2 +12,3 @@ 'use strict';
 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 hyphenateRegex = /[A-Z]|^ms/g;
@@ -20,2 +21,6 @@ var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
 
+var isProcessableValue = function isProcessableValue(value) {
+  return value != null && typeof value !== 'boolean';
+};
+
 var processStyleName = memoize(function (styleName) {
@@ -26,6 +31,2 @@ return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
 var processStyleValue = function processStyleValue(key, value) {
-  if (value == null || typeof value === 'boolean') {
-    return '';
-  }
-
   switch (key) {
@@ -203,3 +204,3 @@ case 'animation':
           string += _key + "{" + registered[value] + "}";
-        } else {
+        } else if (isProcessableValue(value)) {
           string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
@@ -214,3 +215,5 @@ }
           for (var _i = 0; _i < value.length; _i++) {
-            string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
+            if (isProcessableValue(value[_i])) {
+              string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
+            }
           }
@@ -230,2 +233,6 @@ } else {
               {
+                if (process.env.NODE_ENV !== 'production' && _key === 'undefined') {
+                  console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
+                }
+
                 string += _key + "{" + interpolated + "}";
@@ -232,0 +239,0 @@ }

dist/serialize.cjs.prod.js

@@ -13,6 +13,7 @@ "use strict";
   return 45 === property.charCodeAt(1);
+}, isProcessableValue = function(value) {
+  return null != value && "boolean" != typeof value;
 }, processStyleName = memoize(function(styleName) {
   return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, "-$&").toLowerCase();
 }), processStyleValue = function(key, value) {
-  if (null == value || "boolean" == typeof value) return "";
   switch (key) {
@@ -71,3 +72,3 @@ case "animation":
     var value = obj[_key];
-    if ("object" != typeof value) null != registered && void 0 !== registered[value] ? string += _key + "{" + registered[value] + "}" : string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";"; else if (!Array.isArray(value) || "string" != typeof value[0] || null != registered && void 0 !== registered[value[0]]) {
+    if ("object" != typeof value) null != registered && void 0 !== registered[value] ? string += _key + "{" + registered[value] + "}" : isProcessableValue(value) && (string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";"); else if (!Array.isArray(value) || "string" != typeof value[0] || null != registered && void 0 !== registered[value[0]]) {
       var interpolated = handleInterpolation(mergedProps, registered, value, !1);
@@ -83,3 +84,3 @@ switch (_key) {
       }
-    } else for (var _i = 0; _i < value.length; _i++) string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
+    } else for (var _i = 0; _i < value.length; _i++) isProcessableValue(value[_i]) && (string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";");
   }
@@ -86,0 +87,0 @@ return string;

dist/serialize.esm.js

@@ -6,2 +6,3 @@ 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 hyphenateRegex = /[A-Z]|^ms/g;
@@ -14,2 +15,6 @@ var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
 
+var isProcessableValue = function isProcessableValue(value) {
+  return value != null && typeof value !== 'boolean';
+};
+
 var processStyleName = memoize(function (styleName) {
@@ -20,6 +25,2 @@ return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
 var processStyleValue = function processStyleValue(key, value) {
-  if (value == null || typeof value === 'boolean') {
-    return '';
-  }
-
   switch (key) {
@@ -197,3 +198,3 @@ case 'animation':
           string += _key + "{" + registered[value] + "}";
-        } else {
+        } else if (isProcessableValue(value)) {
           string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
@@ -208,3 +209,5 @@ }
           for (var _i = 0; _i < value.length; _i++) {
-            string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
+            if (isProcessableValue(value[_i])) {
+              string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
+            }
           }
@@ -224,2 +227,6 @@ } else {
               {
+                if (process.env.NODE_ENV !== 'production' && _key === 'undefined') {
+                  console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
+                }
+
                 string += _key + "{" + interpolated + "}";
@@ -226,0 +233,0 @@ }

package.json

 {
   "name": "@emotion/serialize",
-  "version": "0.11.13",
+  "version": "0.11.14",
   "description": "serialization utils for emotion",
@@ -5,0 +5,0 @@ "main": "dist/serialize.cjs.js",

src/index.js

@@ -16,2 +16,5 @@ // @flow
 
+const 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)."
+
 let hyphenateRegex = /[A-Z]|^ms/g
@@ -21,2 +24,3 @@ let animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g
 const isCustomProperty = (property: string) => property.charCodeAt(1) === 45
+const isProcessableValue = value => value != null && typeof value !== 'boolean'
 
@@ -34,6 +38,2 @@ const processStyleName = memoize(
 ): string | number => {
-  if (value == null || typeof value === 'boolean') {
-    return ''
-  }
-
   switch (key) {
@@ -278,3 +278,3 @@ case 'animation':
           string += `${key}{${registered[value]}}`
-        } else {
+        } else if (isProcessableValue(value)) {
           string += `${processStyleName(key)}:${processStyleValue(key, value)};`
@@ -297,6 +297,8 @@ }
           for (let i = 0; i < value.length; i++) {
-            string += `${processStyleName(key)}:${processStyleValue(
-              key,
-              value[i]
-            )};`
+            if (isProcessableValue(value[i])) {
+              string += `${processStyleName(key)}:${processStyleValue(
+                key,
+                value[i]
+              )};`
+            }
           }
@@ -317,2 +319,8 @@ } else {
             default: {
+              if (
+                process.env.NODE_ENV !== 'production' &&
+                key === 'undefined'
+              ) {
+                console.error(UNDEFINED_AS_OBJECT_KEY_ERROR)
+              }
               string += `${key}{${interpolated}}`
@@ -319,0 +327,0 @@ }

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

72329

increased by4.47%

Lines of code

1713

increased by1.96%

Worsened metrics

Number of low supply chain risk alerts

67

increased by8.06%

No dependency changes