@emotion/serialize - npm Package Compare versions

Comparing version 1.0.0-next.0 to 1.0.0-next.1

CHANGELOG.md

 # @emotion/serialize
 
+## 1.0.0-next.1
+
+### Patch Changes
+
+- [`e3d7db87`](https://github.com/emotion-js/emotion/commit/e3d7db87deaac95817404760112417ac1fa1b56d) [#1732](https://github.com/emotion-js/emotion/pull/1732) Thanks [@Andarist](https://github.com/Andarist)! - An additional semicolon is now inserted after interpolated arrays to cover cases when it doesn't have a trailing semi itself and thus breaking composition with styles coming after it.
+
+## 0.11.15-next.4
+
+### Patch Changes
+
+- [`f08ef5a3`](https://github.com/emotion-js/emotion/commit/f08ef5a316c1d05bff8e7f3690781e1089a263c6) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@Andarist](https://github.com/Andarist)! - Removed leftover `@emotion/react` import from type definition file.
+
+## 0.12.0-next.3
+
+### Minor Changes
+
+- [`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@joltmode](https://github.com/joltmode)! - Reworked Interpolation-related types. Correct types should now be provided to all flavours of emotion.
+
+## 0.11.15-next.2
+
+### Patch Changes
+
+- [`5c55fd17`](https://github.com/emotion-js/emotion/commit/5c55fd17dcaec84d1f5d5d13ae90dd336d7e4403) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@Andarist](https://github.com/Andarist)! - Fix to what location generated source maps are pointing in case of composed styles.
+
+* [`729ef9d8`](https://github.com/emotion-js/emotion/commit/729ef9d8408af82c7a63effc1b8728f79c66bed1) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@Andarist](https://github.com/Andarist)! - Update `csstype` dependency.
+
+## 0.11.15-next.1
+
+### Patch Changes
+
+- [`8a896a31`](https://github.com/emotion-js/emotion/commit/8a896a31434a1d2f69e1f1467c446c884c929387) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@Andarist](https://github.com/Andarist)! - Throw error about invalid content property values instead of just logging error to the console.
+
+* [`a085003d`](https://github.com/emotion-js/emotion/commit/a085003d4c8ca284c116668d7217fb747802ed85) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@Andarist](https://github.com/Andarist)! - Add missing `#__PURE__` annotations
+
 ## 1.0.0-next.0
@@ -39,2 +73,20 @@
 
+## 0.11.16
+
+### Patch Changes
+
+- Updated dependencies [[`446e756`](https://github.com/emotion-js/emotion/commit/446e75661c4aa01e51d1466472a212940c19cd82)]:
+  - @emotion/hash@0.8.0
+
+## 0.11.15
+
+### 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/memoize@0.7.4
+  - @emotion/unitless@0.7.5
+  - @emotion/utils@0.11.3
+
 ## 0.11.14
@@ -41,0 +93,0 @@

dist/serialize.browser.cjs.js

@@ -24,3 +24,5 @@ 'use strict';
 
-var processStyleName = memoize(function (styleName) {
+var processStyleName =
+/* #__PURE__ */
+memoize(function (styleName) {
   return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
@@ -65,3 +67,3 @@ });
       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) !== "'")) {
-        console.error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
+        throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
       }
@@ -83,5 +85,3 @@ }
 
-var shouldWarnAboutInterpolatingClassNameFromCss = true;
-
-function handleInterpolation(mergedProps, registered, interpolation, couldBeSelectorInterpolation) {
+function handleInterpolation(mergedProps, registered, interpolation) {
   if (interpolation == null) {
@@ -93,3 +93,3 @@ return '';
     if (process.env.NODE_ENV !== 'production' && interpolation.toString() === 'NO_COMPONENT_SELECTOR') {
-      throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
+      throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
     }
@@ -151,3 +151,3 @@
           cursor = previousCursor;
-          return handleInterpolation(mergedProps, registered, result, couldBeSelectorInterpolation);
+          return handleInterpolation(mergedProps, registered, result);
         } else if (process.env.NODE_ENV !== 'production') {
@@ -183,9 +183,3 @@ 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}`");
   var cached = registered[interpolation];
-
-  if (process.env.NODE_ENV !== 'production' && couldBeSelectorInterpolation && shouldWarnAboutInterpolatingClassNameFromCss && cached !== undefined) {
-    console.error('Interpolating a className from css`` is not recommended and will cause problems with composition.\n' + 'Interpolating a className from css`` will be completely unsupported in a future major version of Emotion');
-    shouldWarnAboutInterpolatingClassNameFromCss = false;
-  }
-
-  return cached !== undefined && !couldBeSelectorInterpolation ? cached : interpolation;
+  return cached !== undefined ? cached : interpolation;
 }
@@ -198,3 +192,3 @@
     for (var i = 0; i < obj.length; i++) {
-      string += handleInterpolation(mergedProps, registered, obj[i], false);
+      string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
     }
@@ -213,3 +207,3 @@ } else {
         if (_key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {
-          throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
+          throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
         }
@@ -224,3 +218,3 @@
         } else {
-          var interpolated = handleInterpolation(mergedProps, registered, value, false);
+          var interpolated = handleInterpolation(mergedProps, registered, value);
 
@@ -256,3 +250,3 @@ switch (_key) {
 if (process.env.NODE_ENV !== 'production') {
-  sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//;
+  sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
 } // this is the cursor for keyframes
@@ -275,3 +269,3 @@ // keyframes are stored on the SerializedStyles object as a linked list
     stringMode = false;
-    styles += handleInterpolation(mergedProps, registered, strings, false);
+    styles += handleInterpolation(mergedProps, registered, strings);
   } else {
@@ -287,3 +281,3 @@ if (process.env.NODE_ENV !== 'production' && strings[0] === undefined) {
   for (var i = 1; i < args.length; i++) {
-    styles += handleInterpolation(mergedProps, registered, args[i], styles.charCodeAt(styles.length - 1) === 46);
+    styles += handleInterpolation(mergedProps, registered, args[i]);
 
@@ -290,0 +284,0 @@ if (stringMode) {

dist/serialize.browser.esm.js

@@ -18,3 +18,5 @@ import hashString from '@emotion/hash';
 
-var processStyleName = memoize(function (styleName) {
+var processStyleName =
+/* #__PURE__ */
+memoize(function (styleName) {
   return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
@@ -59,3 +61,3 @@ });
       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) !== "'")) {
-        console.error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
+        throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
       }
@@ -77,5 +79,3 @@ }
 
-var shouldWarnAboutInterpolatingClassNameFromCss = true;
-
-function handleInterpolation(mergedProps, registered, interpolation, couldBeSelectorInterpolation) {
+function handleInterpolation(mergedProps, registered, interpolation) {
   if (interpolation == null) {
@@ -87,3 +87,3 @@ return '';
     if (process.env.NODE_ENV !== 'production' && interpolation.toString() === 'NO_COMPONENT_SELECTOR') {
-      throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
+      throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
     }
@@ -145,3 +145,3 @@
           cursor = previousCursor;
-          return handleInterpolation(mergedProps, registered, result, couldBeSelectorInterpolation);
+          return handleInterpolation(mergedProps, registered, result);
         } else if (process.env.NODE_ENV !== 'production') {
@@ -177,9 +177,3 @@ 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}`");
   var cached = registered[interpolation];
-
-  if (process.env.NODE_ENV !== 'production' && couldBeSelectorInterpolation && shouldWarnAboutInterpolatingClassNameFromCss && cached !== undefined) {
-    console.error('Interpolating a className from css`` is not recommended and will cause problems with composition.\n' + 'Interpolating a className from css`` will be completely unsupported in a future major version of Emotion');
-    shouldWarnAboutInterpolatingClassNameFromCss = false;
-  }
-
-  return cached !== undefined && !couldBeSelectorInterpolation ? cached : interpolation;
+  return cached !== undefined ? cached : interpolation;
 }
@@ -192,3 +186,3 @@
     for (var i = 0; i < obj.length; i++) {
-      string += handleInterpolation(mergedProps, registered, obj[i], false);
+      string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
     }
@@ -207,3 +201,3 @@ } else {
         if (_key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {
-          throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
+          throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
         }
@@ -218,3 +212,3 @@
         } else {
-          var interpolated = handleInterpolation(mergedProps, registered, value, false);
+          var interpolated = handleInterpolation(mergedProps, registered, value);
 
@@ -250,3 +244,3 @@ switch (_key) {
 if (process.env.NODE_ENV !== 'production') {
-  sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//;
+  sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
 } // this is the cursor for keyframes
@@ -269,3 +263,3 @@ // keyframes are stored on the SerializedStyles object as a linked list
     stringMode = false;
-    styles += handleInterpolation(mergedProps, registered, strings, false);
+    styles += handleInterpolation(mergedProps, registered, strings);
   } else {
@@ -281,3 +275,3 @@ if (process.env.NODE_ENV !== 'production' && strings[0] === undefined) {
   for (var i = 1; i < args.length; i++) {
-    styles += handleInterpolation(mergedProps, registered, args[i], styles.charCodeAt(styles.length - 1) === 46);
+    styles += handleInterpolation(mergedProps, registered, args[i]);
 
@@ -284,0 +278,0 @@ if (stringMode) {

dist/serialize.cjs.dev.js

@@ -24,3 +24,5 @@ 'use strict';
 
-var processStyleName = memoize(function (styleName) {
+var processStyleName =
+/* #__PURE__ */
+memoize(function (styleName) {
   return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
@@ -65,3 +67,3 @@ });
       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) !== "'")) {
-        console.error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
+        throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
       }
@@ -83,5 +85,3 @@ }
 
-var shouldWarnAboutInterpolatingClassNameFromCss = true;
-
-function handleInterpolation(mergedProps, registered, interpolation, couldBeSelectorInterpolation) {
+function handleInterpolation(mergedProps, registered, interpolation) {
   if (interpolation == null) {
@@ -93,3 +93,3 @@ return '';
     if (process.env.NODE_ENV !== 'production' && interpolation.toString() === 'NO_COMPONENT_SELECTOR') {
-      throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
+      throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
     }
@@ -151,3 +151,3 @@
           cursor = previousCursor;
-          return handleInterpolation(mergedProps, registered, result, couldBeSelectorInterpolation);
+          return handleInterpolation(mergedProps, registered, result);
         } else if (process.env.NODE_ENV !== 'production') {
@@ -183,9 +183,3 @@ 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}`");
   var cached = registered[interpolation];
-
-  if (process.env.NODE_ENV !== 'production' && couldBeSelectorInterpolation && shouldWarnAboutInterpolatingClassNameFromCss && cached !== undefined) {
-    console.error('Interpolating a className from css`` is not recommended and will cause problems with composition.\n' + 'Interpolating a className from css`` will be completely unsupported in a future major version of Emotion');
-    shouldWarnAboutInterpolatingClassNameFromCss = false;
-  }
-
-  return cached !== undefined && !couldBeSelectorInterpolation ? cached : interpolation;
+  return cached !== undefined ? cached : interpolation;
 }
@@ -198,3 +192,3 @@
     for (var i = 0; i < obj.length; i++) {
-      string += handleInterpolation(mergedProps, registered, obj[i], false);
+      string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
     }
@@ -213,3 +207,3 @@ } else {
         if (_key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {
-          throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
+          throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
         }
@@ -224,3 +218,3 @@
         } else {
-          var interpolated = handleInterpolation(mergedProps, registered, value, false);
+          var interpolated = handleInterpolation(mergedProps, registered, value);
 
@@ -256,3 +250,3 @@ switch (_key) {
 if (process.env.NODE_ENV !== 'production') {
-  sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//;
+  sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
 } // this is the cursor for keyframes
@@ -275,3 +269,3 @@ // keyframes are stored on the SerializedStyles object as a linked list
     stringMode = false;
-    styles += handleInterpolation(mergedProps, registered, strings, false);
+    styles += handleInterpolation(mergedProps, registered, strings);
   } else {
@@ -287,3 +281,3 @@ if (process.env.NODE_ENV !== 'production' && strings[0] === undefined) {
   for (var i = 1; i < args.length; i++) {
-    styles += handleInterpolation(mergedProps, registered, args[i], styles.charCodeAt(styles.length - 1) === 46);
+    styles += handleInterpolation(mergedProps, registered, args[i]);
 
@@ -290,0 +284,0 @@ if (stringMode) {

dist/serialize.cjs.prod.js

@@ -15,9 +15,9 @@ "use strict";
   return null != value && "boolean" != typeof value;
-}, processStyleName = memoize(function(styleName) {
+}, processStyleName = memoize((function(styleName) {
   return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, "-$&").toLowerCase();
-}), processStyleValue = function(key, value) {
+})), processStyleValue = function(key, value) {
   switch (key) {
    case "animation":
    case "animationName":
-    if ("string" == typeof value) return value.replace(animationRegex, function(match, p1, p2) {
+    if ("string" == typeof value) return value.replace(animationRegex, (function(match, p1, p2) {
       return cursor = {
@@ -28,3 +28,3 @@ name: p1,
       }, p1;
-    });
+    }));
   }
@@ -34,3 +34,3 @@ return 1 === unitless[key] || isCustomProperty(key) || "number" != typeof value || 0 === value ? value : value + "px";
 
-function handleInterpolation(mergedProps, registered, interpolation, couldBeSelectorInterpolation) {
+function handleInterpolation(mergedProps, registered, interpolation) {
   if (null == interpolation) return "";
@@ -62,3 +62,3 @@ if (void 0 !== interpolation.__emotion_styles) return interpolation;
       var previousCursor = cursor, result = interpolation(mergedProps);
-      return cursor = previousCursor, handleInterpolation(mergedProps, registered, result, couldBeSelectorInterpolation);
+      return cursor = previousCursor, handleInterpolation(mergedProps, registered, result);
     }
@@ -68,3 +68,3 @@ }
   var cached = registered[interpolation];
-  return void 0 === cached || couldBeSelectorInterpolation ? interpolation : cached;
+  return void 0 !== cached ? cached : interpolation;
 }
@@ -74,6 +74,6 @@
   var string = "";
-  if (Array.isArray(obj)) for (var i = 0; i < obj.length; i++) string += handleInterpolation(mergedProps, registered, obj[i], !1); else for (var _key in obj) {
+  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 ("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);
+      var interpolated = handleInterpolation(mergedProps, registered, value);
       switch (_key) {
@@ -98,4 +98,4 @@ case "animation":
   var strings = args[0];
-  null == strings || void 0 === strings.raw ? (stringMode = !1, styles += handleInterpolation(mergedProps, registered, strings, !1)) : styles += strings[0];
-  for (var i = 1; i < args.length; i++) styles += handleInterpolation(mergedProps, registered, args[i], 46 === styles.charCodeAt(styles.length - 1)), 
+  null == strings || void 0 === strings.raw ? (stringMode = !1, styles += handleInterpolation(mergedProps, registered, strings)) : styles += strings[0];
+  for (var i = 1; i < args.length; i++) styles += handleInterpolation(mergedProps, registered, args[i]), 
   stringMode && (styles += strings[i]);
@@ -102,0 +102,0 @@ labelPattern.lastIndex = 0;

dist/serialize.esm.js

@@ -18,3 +18,5 @@ import hashString from '@emotion/hash';
 
-var processStyleName = memoize(function (styleName) {
+var processStyleName =
+/* #__PURE__ */
+memoize(function (styleName) {
   return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
@@ -59,3 +61,3 @@ });
       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) !== "'")) {
-        console.error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
+        throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
       }
@@ -77,5 +79,3 @@ }
 
-var shouldWarnAboutInterpolatingClassNameFromCss = true;
-
-function handleInterpolation(mergedProps, registered, interpolation, couldBeSelectorInterpolation) {
+function handleInterpolation(mergedProps, registered, interpolation) {
   if (interpolation == null) {
@@ -87,3 +87,3 @@ return '';
     if (process.env.NODE_ENV !== 'production' && interpolation.toString() === 'NO_COMPONENT_SELECTOR') {
-      throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
+      throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
     }
@@ -145,3 +145,3 @@
           cursor = previousCursor;
-          return handleInterpolation(mergedProps, registered, result, couldBeSelectorInterpolation);
+          return handleInterpolation(mergedProps, registered, result);
         } else if (process.env.NODE_ENV !== 'production') {
@@ -177,9 +177,3 @@ 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}`");
   var cached = registered[interpolation];
-
-  if (process.env.NODE_ENV !== 'production' && couldBeSelectorInterpolation && shouldWarnAboutInterpolatingClassNameFromCss && cached !== undefined) {
-    console.error('Interpolating a className from css`` is not recommended and will cause problems with composition.\n' + 'Interpolating a className from css`` will be completely unsupported in a future major version of Emotion');
-    shouldWarnAboutInterpolatingClassNameFromCss = false;
-  }
-
-  return cached !== undefined && !couldBeSelectorInterpolation ? cached : interpolation;
+  return cached !== undefined ? cached : interpolation;
 }
@@ -192,3 +186,3 @@
     for (var i = 0; i < obj.length; i++) {
-      string += handleInterpolation(mergedProps, registered, obj[i], false);
+      string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
     }
@@ -207,3 +201,3 @@ } else {
         if (_key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {
-          throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
+          throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
         }
@@ -218,3 +212,3 @@
         } else {
-          var interpolated = handleInterpolation(mergedProps, registered, value, false);
+          var interpolated = handleInterpolation(mergedProps, registered, value);
 
@@ -250,3 +244,3 @@ switch (_key) {
 if (process.env.NODE_ENV !== 'production') {
-  sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//;
+  sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
 } // this is the cursor for keyframes
@@ -269,3 +263,3 @@ // keyframes are stored on the SerializedStyles object as a linked list
     stringMode = false;
-    styles += handleInterpolation(mergedProps, registered, strings, false);
+    styles += handleInterpolation(mergedProps, registered, strings);
   } else {
@@ -281,3 +275,3 @@ if (process.env.NODE_ENV !== 'production' && strings[0] === undefined) {
   for (var i = 1; i < args.length; i++) {
-    styles += handleInterpolation(mergedProps, registered, args[i], styles.charCodeAt(styles.length - 1) === 46);
+    styles += handleInterpolation(mergedProps, registered, args[i]);
 
@@ -284,0 +278,0 @@ if (stringMode) {

package.json

 {
   "name": "@emotion/serialize",
-  "version": "1.0.0-next.0",
+  "version": "1.0.0-next.1",
   "description": "serialization utils for emotion",
@@ -17,7 +17,7 @@ "main": "dist/serialize.cjs.js",
   "dependencies": {
-    "@emotion/hash": "0.7.3",
-    "@emotion/memoize": "0.7.3",
-    "@emotion/unitless": "0.7.4",
-    "@emotion/utils": "0.11.2",
-    "csstype": "^2.5.7"
+    "@emotion/hash": "0.8.0",
+    "@emotion/memoize": "0.7.4",
+    "@emotion/unitless": "0.7.5",
+    "@emotion/utils": "0.11.3",
+    "csstype": "^2.6.7"
   },
@@ -30,3 +30,3 @@ "devDependencies": {
     "dist",
-    "types"
+    "types/*.d.ts"
   ],
@@ -33,0 +33,0 @@ "browser": {

src/index.js

@@ -25,3 +25,3 @@ // @flow
 
-const processStyleName = memoize(
+const processStyleName = /* #__PURE__ */ memoize(
   (styleName: string) =>
@@ -95,3 +95,3 @@ isCustomProperty(styleName)
       ) {
-        console.error(
+        throw new Error(
           `You seem to be using a value for 'content' without quotes, try replacing it with \`content: '"${value}"'\``
@@ -122,9 +122,6 @@ )
 
-let shouldWarnAboutInterpolatingClassNameFromCss = true
-
 function handleInterpolation(
   mergedProps: void | Object,
   registered: RegisteredCache | void,
-  interpolation: Interpolation,
-  couldBeSelectorInterpolation: boolean
+  interpolation: Interpolation
 ): string | number {
@@ -140,3 +137,3 @@ if (interpolation == null) {
       throw new Error(
-        'Component selectors can only be used in conjunction with babel-plugin-emotion.'
+        'Component selectors can only be used in conjunction with @emotion/babel-plugin.'
       )
@@ -194,8 +191,3 @@ }
 
-        return handleInterpolation(
-          mergedProps,
-          registered,
-          result,
-          couldBeSelectorInterpolation
-        )
+        return handleInterpolation(mergedProps, registered, result)
       } else if (process.env.NODE_ENV !== 'production') {
@@ -246,17 +238,3 @@ console.error(
   const cached = registered[interpolation]
-  if (
-    process.env.NODE_ENV !== 'production' &&
-    couldBeSelectorInterpolation &&
-    shouldWarnAboutInterpolatingClassNameFromCss &&
-    cached !== undefined
-  ) {
-    console.error(
-      'Interpolating a className from css`` is not recommended and will cause problems with composition.\n' +
-        'Interpolating a className from css`` will be completely unsupported in a future major version of Emotion'
-    )
-    shouldWarnAboutInterpolatingClassNameFromCss = false
-  }
-  return cached !== undefined && !couldBeSelectorInterpolation
-    ? cached
-    : interpolation
+  return cached !== undefined ? cached : interpolation
 }
@@ -273,3 +251,3 @@
     for (let i = 0; i < obj.length; i++) {
-      string += handleInterpolation(mergedProps, registered, obj[i], false)
+      string += `${handleInterpolation(mergedProps, registered, obj[i])};`
     }
@@ -291,3 +269,3 @@ } else {
           throw new Error(
-            'Component selectors can only be used in conjunction with babel-plugin-emotion.'
+            'Component selectors can only be used in conjunction with @emotion/babel-plugin.'
           )
@@ -312,4 +290,3 @@ }
             registered,
-            value,
-            false
+            value
           )
@@ -344,3 +321,3 @@ switch (key) {
 if (process.env.NODE_ENV !== 'production') {
-  sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//
+  sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g
 }
@@ -372,3 +349,3 @@
     stringMode = false
-    styles += handleInterpolation(mergedProps, registered, strings, false)
+    styles += handleInterpolation(mergedProps, registered, strings)
   } else {
@@ -382,8 +359,3 @@ if (process.env.NODE_ENV !== 'production' && strings[0] === undefined) {
   for (let i = 1; i < args.length; i++) {
-    styles += handleInterpolation(
-      mergedProps,
-      registered,
-      args[i],
-      styles.charCodeAt(styles.length - 1) === 46
-    )
+    styles += handleInterpolation(mergedProps, registered, args[i])
     if (stringMode) {
@@ -390,0 +362,0 @@ if (process.env.NODE_ENV !== 'production' && strings[i] === undefined) {

types/index.d.ts

@@ -15,15 +15,8 @@ // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
 }
-/**
- * @desc Following type exists for autocompletion of key.
- */
-export type CSSPseudos<MP> = { [K in CSS.Pseudos]?: ObjectInterpolation<MP> }
-export interface CSSOthersObject<MP> {
-  [propertiesName: string]: Interpolation<MP>
-}
 
-export type CSSPseudosForCSSObject = { [K in CSS.Pseudos]?: CSSObject }
+export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject }
 
 export interface ArrayCSSInterpolation extends Array<CSSInterpolation> {}
 
-export type CSSInterpolation =
+export type InterpolationPrimitive =
   | null
@@ -38,5 +31,6 @@ | undefined
   | CSSObject
-  | ArrayCSSInterpolation
 
-export interface CSSOthersObjectForCSSObject {
+export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation
+
+export interface CSSOthersObject {
   [propertiesName: string]: CSSInterpolation
@@ -47,4 +41,4 @@ }
   extends CSSPropertiesWithMultiValues,
-    CSSPseudosForCSSObject,
-    CSSOthersObjectForCSSObject {}
+    CSSPseudos,
+    CSSOthersObject {}
 
@@ -62,29 +56,18 @@ export interface ComponentSelector {
 
-export interface ArrayInterpolation<MP> extends Array<Interpolation<MP>> {}
-export interface ObjectInterpolation<MP>
-  extends CSSPropertiesWithMultiValues,
-    CSSPseudos<MP>,
-    CSSOthersObject<MP> {}
+export interface ArrayInterpolation<Props>
+  extends Array<Interpolation<Props>> {}
 
-export interface FunctionInterpolation<MergedProps> {
-  (mergedProps: MergedProps): Interpolation<MergedProps>
+export interface FunctionInterpolation<Props> {
+  (props: Props): Interpolation<Props>
 }
 
-export type Interpolation<MergedProps = undefined> =
-  | null
-  | undefined
-  | boolean
-  | number
-  | string
-  | ComponentSelector
-  | Keyframes
-  | SerializedStyles
-  | ArrayInterpolation<MergedProps>
-  | ObjectInterpolation<MergedProps>
-  | FunctionInterpolation<MergedProps>
+export type Interpolation<Props> =
+  | InterpolationPrimitive
+  | ArrayInterpolation<Props>
+  | FunctionInterpolation<Props>
 
-export function serializeStyles<MP>(
-  args: Array<TemplateStringsArray | Interpolation<MP>>,
+export function serializeStyles<Props>(
+  args: Array<TemplateStringsArray | Interpolation<Props>>,
   registered: RegisteredCache,
-  mergedProps?: MP
+  props?: Props
 ): 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

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

Number of low supply chain risk alerts

62

decreased by-7.46%

Worsened metrics

Total package byte prevSize

72249

decreased by-2.69%

Number of package files

12

decreased by-14.29%

Lines of code

1560

decreased by-8.83%

Dependency changes

• + Added@emotion/hash@0.8.0(transitive)

• + Added@emotion/memoize@0.7.4(transitive)

• + Added@emotion/unitless@0.7.5(transitive)

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

• - Removed@emotion/hash@0.7.3(transitive)

• - Removed@emotion/memoize@0.7.3(transitive)

• - Removed@emotion/unitless@0.7.4(transitive)

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

• Updated@emotion/hash@0.8.0

• Updated@emotion/memoize@0.7.4

• Updated@emotion/unitless@0.7.5

• Updated@emotion/utils@0.11.3

• Updatedcsstype@^2.6.7