@emotion/serialize - npm Package Compare versions

Comparing version 0.11.11 to 0.11.12

CHANGELOG.md

 # @emotion/serialize
 
+## 0.11.12
+
+### Patch Changes
+
+- [`4fc5657a`](https://github.com/emotion-js/emotion/commit/4fc5657ac8d0002322321cfbfc254b7196d27387) [#1219](https://github.com/emotion-js/emotion/pull/1219) Thanks [@Andarist](https://github.com/Andarist)! - Add dev hint about css object being stringified by accident
+
+* [`10211951`](https://github.com/emotion-js/emotion/commit/10211951051729b149930a8646de14bae9ae1bbc) [#1553](https://github.com/emotion-js/emotion/pull/1553) Thanks [@Andarist](https://github.com/Andarist)! - Add dev warning about keyframes being interpolated into plain strings.
+
+- [`57a767ea`](https://github.com/emotion-js/emotion/commit/57a767ea3dd18eefbbdc7269cc13128caad65286) [#1560](https://github.com/emotion-js/emotion/pull/1560) Thanks [@Andarist](https://github.com/Andarist)! - Fix composition of styles without a final semicolon in a declaration block
+
 ## 0.11.11
@@ -4,0 +14,0 @@

dist/serialize.browser.cjs.js

@@ -128,3 +128,3 @@ 'use strict';
 
-          var styles = interpolation.styles;
+          var styles = interpolation.styles + ";";
 
@@ -151,21 +151,36 @@ if (process.env.NODE_ENV !== 'production' && interpolation.map !== undefined) {
         }
+
+        break;
       }
-    // eslint-disable-next-line no-fallthrough
 
-    default:
-      {
-        if (registered == null) {
-          return interpolation;
+    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\n' + 'Instead of doing this:\n\n' + [].concat(matched, ["`" + replaced + "`"]).join('\n') + '\n\nYou should wrap it with `css` like this:\n\n' + ("css`" + replaced + "`"));
         }
+      }
 
-        var cached = registered[interpolation];
+      break;
+  } // finalize string values (regular strings and functions interpolated into css calls)
 
-        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;
-      }
+  if (registered == null) {
+    return interpolation;
   }
+
+  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;
 }
@@ -293,3 +308,6 @@
       map: sourceMap,
-      next: cursor
+      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).";
+      }
     };
@@ -296,0 +314,0 @@ }

dist/serialize.browser.esm.js

@@ -122,3 +122,3 @@ import hashString from '@emotion/hash';
 
-          var styles = interpolation.styles;
+          var styles = interpolation.styles + ";";
 
@@ -145,21 +145,36 @@ if (process.env.NODE_ENV !== 'production' && interpolation.map !== undefined) {
         }
+
+        break;
       }
-    // eslint-disable-next-line no-fallthrough
 
-    default:
-      {
-        if (registered == null) {
-          return interpolation;
+    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\n' + 'Instead of doing this:\n\n' + [].concat(matched, ["`" + replaced + "`"]).join('\n') + '\n\nYou should wrap it with `css` like this:\n\n' + ("css`" + replaced + "`"));
         }
+      }
 
-        var cached = registered[interpolation];
+      break;
+  } // finalize string values (regular strings and functions interpolated into css calls)
 
-        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;
-      }
+  if (registered == null) {
+    return interpolation;
   }
+
+  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;
 }
@@ -287,3 +302,6 @@
       map: sourceMap,
-      next: cursor
+      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).";
+      }
     };
@@ -290,0 +308,0 @@ }

dist/serialize.cjs.dev.js

@@ -128,3 +128,3 @@ 'use strict';
 
-          var styles = interpolation.styles;
+          var styles = interpolation.styles + ";";
 
@@ -151,21 +151,36 @@ if (process.env.NODE_ENV !== 'production' && interpolation.map !== undefined) {
         }
+
+        break;
       }
-    // eslint-disable-next-line no-fallthrough
 
-    default:
-      {
-        if (registered == null) {
-          return interpolation;
+    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\n' + 'Instead of doing this:\n\n' + [].concat(matched, ["`" + replaced + "`"]).join('\n') + '\n\nYou should wrap it with `css` like this:\n\n' + ("css`" + replaced + "`"));
         }
+      }
 
-        var cached = registered[interpolation];
+      break;
+  } // finalize string values (regular strings and functions interpolated into css calls)
 
-        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;
-      }
+  if (registered == null) {
+    return interpolation;
   }
+
+  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;
 }
@@ -293,3 +308,6 @@
       map: sourceMap,
-      next: cursor
+      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).";
+      }
     };
@@ -296,0 +314,0 @@ }

dist/serialize.cjs.prod.js

@@ -51,3 +51,3 @@ "use strict";
       }, next = next.next;
-      return interpolation.styles;
+      return interpolation.styles + ";";
     }
@@ -61,8 +61,6 @@ return createStringFromObject(mergedProps, registered, interpolation);
     }
-
-   default:
-    if (null == registered) return interpolation;
-    var cached = registered[interpolation];
-    return void 0 === cached || couldBeSelectorInterpolation ? interpolation : cached;
   }
+  if (null == registered) return interpolation;
+  var cached = registered[interpolation];
+  return void 0 === cached || couldBeSelectorInterpolation ? interpolation : cached;
 }
@@ -69,0 +67,0 @@

dist/serialize.esm.js

@@ -122,3 +122,3 @@ import hashString from '@emotion/hash';
 
-          var styles = interpolation.styles;
+          var styles = interpolation.styles + ";";
 
@@ -145,21 +145,36 @@ if (process.env.NODE_ENV !== 'production' && interpolation.map !== undefined) {
         }
+
+        break;
       }
-    // eslint-disable-next-line no-fallthrough
 
-    default:
-      {
-        if (registered == null) {
-          return interpolation;
+    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\n' + 'Instead of doing this:\n\n' + [].concat(matched, ["`" + replaced + "`"]).join('\n') + '\n\nYou should wrap it with `css` like this:\n\n' + ("css`" + replaced + "`"));
         }
+      }
 
-        var cached = registered[interpolation];
+      break;
+  } // finalize string values (regular strings and functions interpolated into css calls)
 
-        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;
-      }
+  if (registered == null) {
+    return interpolation;
   }
+
+  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;
 }
@@ -287,3 +302,6 @@
       map: sourceMap,
-      next: cursor
+      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).";
+      }
     };
@@ -290,0 +308,0 @@ }

package.json

 {
   "name": "@emotion/serialize",
-  "version": "0.11.11",
+  "version": "0.11.12",
   "description": "serialization utils for emotion",
@@ -35,2 +35,2 @@ "main": "dist/serialize.cjs.js",
   }
-}
+}

src/index.js

@@ -171,3 +171,3 @@ // @flow
         }
-        let styles = interpolation.styles
+        let styles = `${interpolation.styles};`
         if (
@@ -206,26 +206,53 @@ process.env.NODE_ENV !== 'production' &&
       }
+      break
     }
-    // eslint-disable-next-line no-fallthrough
-    default: {
-      if (registered == null) {
-        return interpolation
-      }
-      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'
+    case 'string':
+      if (process.env.NODE_ENV !== 'production') {
+        const matched = []
+        const replaced = interpolation.replace(
+          animationRegex,
+          (match, p1, p2) => {
+            const fakeVarName = `animation${matched.length}`
+            matched.push(
+              `const ${fakeVarName} = keyframes\`${p2.replace(
+                /^@keyframes animation-\w+/,
+                ''
+              )}\``
+            )
+            return `\${${fakeVarName}}`
+          }
         )
-        shouldWarnAboutInterpolatingClassNameFromCss = false
+        if (matched.length) {
+          console.error(
+            '`keyframes` output got interpolated into plain string, please wrap it with `css`.\n\n' +
+              'Instead of doing this:\n\n' +
+              [...matched, `\`${replaced}\``].join('\n') +
+              '\n\nYou should wrap it with `css` like this:\n\n' +
+              `css\`${replaced}\``
+          )
+        }
       }
-      return cached !== undefined && !couldBeSelectorInterpolation
-        ? cached
-        : interpolation
-    }
+      break
   }
+
+  // finalize string values (regular strings and functions interpolated into css calls)
+  if (registered == null) {
+    return interpolation
+  }
+  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
 }
@@ -380,3 +407,6 @@
       map: sourceMap,
-      next: cursor
+      next: cursor,
+      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)."
+      }
     }
@@ -383,0 +413,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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68511

increased by9.81%

Lines of code

1675

increased by5.02%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low supply chain risk alerts

62

increased by8.77%

No dependency changes