@emotion/serialize - npm Package Compare versions

Comparing version 0.9.1 to 10.0.0-really-unsafe-please-do-not-use.0

dist/index.min.js

@@ -1,2 +0,2 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r(e.emotionSerialize={})}(this,function(e){"use strict";var t={animationIterationCount:1,borderImageOutset:1,borderImageSlice:1,borderImageWidth:1,boxFlex:1,boxFlexGroup:1,boxOrdinalGroup:1,columnCount:1,columns:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,flexOrder:1,gridRow:1,gridRowEnd:1,gridRowSpan:1,gridRowStart:1,gridColumn:1,gridColumnEnd:1,gridColumnSpan:1,gridColumnStart:1,fontWeight:1,lineHeight:1,opacity:1,order:1,orphans:1,tabSize:1,widows:1,zIndex:1,zoom:1,WebkitLineClamp:1,fillOpacity:1,floodOpacity:1,stopOpacity:1,strokeDasharray:1,strokeDashoffset:1,strokeMiterlimit:1,strokeOpacity:1,strokeWidth:1};var r,o,n=/[A-Z]|^ms/g,i=/_EMO_([^_]+?)_([^]*?)_EMO_/g,s=(r=function(e){return e.replace(n,"-$&").toLowerCase()},o={},function(e){return void 0===o[e]&&(o[e]=r(e)),o[e]}),l=function(e,r){if(null==r||"boolean"==typeof r)return"";switch(e){case"animation":case"animationName":r=r.replace(i,function(e,r,t){return u=t+u,r})}return 1===t[e]||45===e.charCodeAt(1)||isNaN(r)||0===r?r:r+"px"};function c(e,r,t){if(null==t)return"";if(void 0!==t.__emotion_styles)return t;switch(typeof t){case"boolean":return"";case"object":return 1===t.anim?(u=t.styles+u,t.name):void 0!==t.styles?t.styles:function(e,t,o){var n="";if(Array.isArray(o))for(var r=0;r<o.length;r++)n+=c(e,t,o[r]);else{var i=function(r){"object"!=typeof o[r]?n+=s(r)+":"+l(r,o[r])+";":Array.isArray(o[r])&&"string"==typeof o[r][0]&&void 0===t[o[r][0]]?o[r].forEach(function(e){n+=s(r)+":"+l(r,e)+";"}):n+=r+"{"+c(e,t,o[r])+"}"};for(var a in o)i(a)}return n}(e,r,t);case"function":if(void 0!==e)return c(e,r,t(e));default:var o=r[t];return void 0!==o?o:t}}var f=/label:\s*([^\s;\n{]+)\s*;/g,u="";e.serializeStyles=function(e,r,t){if(1===r.length&&"object"==typeof r[0]&&null!==r[0]&&void 0!==r[0].styles)return r[0];var o=!0,n=u="",i=r[0];if(null==i||void 0===i.raw){o=!1;var a=c(t,e,i);u+=a}else u+=i[0];for(var s=1;s<r.length;s++){var l=c(t,e,r[s]);u+=l,o&&(u+=i[s])}return{name:function(e){for(var r,t=e.length,o=t^t,n=0;4<=t;)r=1540483477*(65535&(r=255&e.charCodeAt(n)|(255&e.charCodeAt(++n))<<8|(255&e.charCodeAt(++n))<<16|(255&e.charCodeAt(++n))<<24))+((1540483477*(r>>>16)&65535)<<16),o=1540483477*(65535&o)+((1540483477*(o>>>16)&65535)<<16)^(r=1540483477*(65535&(r^=r>>>24))+((1540483477*(r>>>16)&65535)<<16)),t-=4,++n;switch(t){case 3:o^=(255&e.charCodeAt(n+2))<<16;case 2:o^=(255&e.charCodeAt(n+1))<<8;case 1:o=1540483477*(65535&(o^=255&e.charCodeAt(n)))+((1540483477*(o>>>16)&65535)<<16)}return o=1540483477*(65535&(o^=o>>>13))+((1540483477*(o>>>16)&65535)<<16),((o^=o>>>15)>>>0).toString(36)}(u=u.replace(f,function(e,r){return n+="-"+r,""}))+n,styles:u}},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.emotionSerialize={})}(this,function(e){"use strict";var r={animationIterationCount:1,borderImageOutset:1,borderImageSlice:1,borderImageWidth:1,boxFlex:1,boxFlexGroup:1,boxOrdinalGroup:1,columnCount:1,columns:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,flexOrder:1,gridRow:1,gridRowEnd:1,gridRowSpan:1,gridRowStart:1,gridColumn:1,gridColumnEnd:1,gridColumnSpan:1,gridColumnStart:1,fontWeight:1,lineHeight:1,opacity:1,order:1,orphans:1,tabSize:1,widows:1,zIndex:1,zoom:1,WebkitLineClamp:1,fillOpacity:1,floodOpacity:1,stopOpacity:1,strokeDasharray:1,strokeDashoffset:1,strokeMiterlimit:1,strokeOpacity:1,strokeWidth:1};var t,o,n=/[A-Z]|^ms/g,i=/_EMO_([^_]+?)_([^]*?)_EMO_/g,l=(t=function(e){return e.replace(n,"-$&").toLowerCase()},o={},function(e){return void 0===o[e]&&(o[e]=t(e)),o[e]}),f=function(e,t){if(null==t||"boolean"==typeof t)return"";switch(e){case"animation":case"animationName":t=t.replace(i,function(e,t,r){return u={name:t,styles:r,next:u},t})}return 1!==r[e]&&45!==e.charCodeAt(1)&&"number"==typeof t&&0!==t?t+"px":t};function d(e,t,r,o){if(null==r)return"";if(void 0!==r.__emotion_styles)return r;switch(typeof r){case"boolean":return"";case"object":if(1===r.anim)return u={name:r.name,styles:r.styles,next:u},r.name;if(void 0!==r.styles){var n=r.next;if(void 0!==n)for(;void 0!==n;)u={name:n.name,styles:n.styles,next:u},n=n.next;return r.styles}return function(e,t,r){var o="";if(Array.isArray(r))for(var n=0;n<r.length;n++)o+=d(e,t,r[n],!1);else for(var i in r){var a=r[i];if("object"!=typeof a)void 0!==t[a]?o+=i+"{"+t[a]+"}":o+=l(i)+":"+f(i,a)+";";else if(Array.isArray(a)&&"string"==typeof a[0]&&void 0===t[a[0]])for(var s=0;s<a.length;s++)o+=l(i)+":"+f(i,a[s])+";";else o+=i+"{"+d(e,t,a,!1)+"}"}return o}(e,t,r);case"function":if(void 0!==e)return d(e,t,r(e),o);default:var i=t[r];return void 0===i||o?r:i}}var u,c=/label:\s*([^\s;\n{]+)\s*;/g,v="";e.serializeStyles=function(e,t,r){if(1===t.length&&"object"==typeof t[0]&&null!==t[0]&&void 0!==t[0].styles)return t[0];var o=!0;v="",u=void 0;var n=t[0];if(null==n||void 0===n.raw){var i=d(r,e,n,o=!1);v+=i}else v+=n[0];for(var a=1;a<t.length;a++){var s=d(r,e,t[a],46===v.charCodeAt(v.length-1));v+=s,o&&(v+=n[a])}c.lastIndex=0;for(var l,f="";null!==(l=c.exec(v));)f+="-"+l[1];return{name:function(e){for(var t,r=e.length,o=r^r,n=0;4<=r;)t=1540483477*(65535&(t=255&e.charCodeAt(n)|(255&e.charCodeAt(++n))<<8|(255&e.charCodeAt(++n))<<16|(255&e.charCodeAt(++n))<<24))+((1540483477*(t>>>16)&65535)<<16),o=1540483477*(65535&o)+((1540483477*(o>>>16)&65535)<<16)^(t=1540483477*(65535&(t^=t>>>24))+((1540483477*(t>>>16)&65535)<<16)),r-=4,++n;switch(r){case 3:o^=(255&e.charCodeAt(n+2))<<16;case 2:o^=(255&e.charCodeAt(n+1))<<8;case 1:o=1540483477*(65535&(o^=255&e.charCodeAt(n)))+((1540483477*(o>>>16)&65535)<<16)}return o=1540483477*(65535&(o^=o>>>13))+((1540483477*(o>>>16)&65535)<<16),((o^=o>>>15)>>>0).toString(36)}(v)+f,styles:v,next:u}},Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=index.min.js.map

dist/serialize.cjs.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var hashString = _interopDefault(require('@emotion/hash'));
-var unitless = _interopDefault(require('@emotion/unitless'));
-var memoize = _interopDefault(require('@emotion/memoize'));
-
-var hyphenateRegex = /[A-Z]|^ms/g;
-var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
-var processStyleName = memoize(function (styleName) {
-  return styleName.replace(hyphenateRegex, '-$&').toLowerCase();
-});
-
-var processStyleValue = function processStyleValue(key, value) {
-  if (value == null || typeof value === 'boolean') {
-    return '';
-  }
-
-  switch (key) {
-    case 'animation':
-    case 'animationName':
-      {
-        value = value.replace(animationRegex, function (match, p1, p2) {
-          styles = p2 + styles;
-          return p1;
-        });
-      }
-  }
-
-  if (unitless[key] !== 1 && key.charCodeAt(1) !== 45 && // custom properties
-  !isNaN(value) && value !== 0) {
-    return value + 'px';
-  }
-
-  return value;
-};
-
-if (process.env.NODE_ENV !== 'production') {
-  var contentValuePattern = /(attr|calc|counters?|url)\(/;
-  var contentValues = ['normal', 'none', 'counter', 'open-quote', 'close-quote', 'no-open-quote', 'no-close-quote', 'initial', 'inherit', 'unset'];
-  var oldProcessStyleValue = processStyleValue;
-
-  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) !== "'")) {
-        console.error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
-      }
-    }
-
-    return oldProcessStyleValue(key, value);
-  };
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./serialize.cjs.prod.js');
+} else {
+  module.exports = require('./serialize.cjs.dev.js');
 }
-
-function handleInterpolation(mergedProps, registered, interpolation) {
-  if (interpolation == null) {
-    return '';
-  }
-
-  if (interpolation.__emotion_styles !== undefined) {
-    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.');
-    }
-
-    return interpolation;
-  }
-
-  switch (typeof interpolation) {
-    case 'boolean':
-      {
-        return '';
-      }
-
-    case 'object':
-      {
-        if (interpolation.anim === 1) {
-          styles = interpolation.styles + styles;
-          return interpolation.name;
-        }
-
-        if (interpolation.styles !== undefined) {
-          return interpolation.styles;
-        }
-
-        return createStringFromObject(mergedProps, registered, interpolation);
-      }
-
-    case 'function':
-      {
-        if (mergedProps !== undefined) {
-          return handleInterpolation(mergedProps, registered, // $FlowFixMe
-          interpolation(mergedProps));
-        }
-      }
-    // eslint-disable-next-line no-fallthrough
-
-    default:
-      {
-        var cached = registered[interpolation];
-        return cached !== undefined ? cached : interpolation;
-      }
-  }
-}
-
-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 {
-    var _loop = function _loop(_key) {
-      if (typeof obj[_key] !== 'object') {
-        string += processStyleName(_key) + ":" + processStyleValue(_key, obj[_key]) + ";";
-      } else {
-        if (_key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {
-          throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin-core.');
-        }
-
-        if (Array.isArray(obj[_key]) && typeof obj[_key][0] === 'string' && registered[obj[_key][0]] === undefined) {
-          obj[_key].forEach(function (value) {
-            string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
-          });
-        } else {
-          string += _key + "{" + handleInterpolation(mergedProps, registered, obj[_key]) + "}";
-        }
-      }
-    };
-
-    for (var _key in obj) {
-      _loop(_key);
-    }
-  }
-
-  return string;
-}
-
-var labelPattern = /label:\s*([^\s;\n{]+)\s*;/g; // this is set to an empty string on each serializeStyles call
-// it's declared in the module scope since we need to add to
-// it in the middle of serialization to add styles from keyframes
-
-var styles = '';
-var serializeStyles = function serializeStyles(registered, args, mergedProps) {
-  if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
-    return args[0];
-  }
-
-  var stringMode = true;
-  styles = '';
-  var identifierName = '';
-  var strings = args[0];
-
-  if (strings == null || strings.raw === undefined) {
-    stringMode = false; // we have to store this in a variable and then append it to styles since
-    // styles could be modified in handleInterpolation and using += would mean
-    // it would append the return value of handleInterpolation to the value before handleInterpolation is called
-
-    var stringifiedInterpolation = handleInterpolation(mergedProps, registered, strings);
-    styles += stringifiedInterpolation;
-  } else {
-    styles += strings[0];
-  } // we start at 1 since we've already handled the first arg
-
-
-  for (var i = 1; i < args.length; i++) {
-    // we have to store this in a variable and then append it to styles since
-    // styles could be modified in handleInterpolation and using += would mean
-    // it would append the return value of handleInterpolation to the value before handleInterpolation is called
-    var _stringifiedInterpolation = handleInterpolation(mergedProps, registered, args[i]);
-
-    styles += _stringifiedInterpolation;
-
-    if (stringMode) {
-      styles += strings[i];
-    }
-  }
-
-  styles = styles.replace(labelPattern, function (match, p1) {
-    identifierName += "-" + p1;
-    return '';
-  });
-  var name = hashString(styles) + identifierName;
-  return {
-    name: name,
-    styles: styles
-  };
-};
-
-exports.serializeStyles = serializeStyles;

dist/serialize.esm.js

@@ -21,3 +21,7 @@ import hashString from '@emotion/hash';
         value = value.replace(animationRegex, function (match, p1, p2) {
-          styles = p2 + styles;
+          cursor = {
+            name: p1,
+            styles: p2,
+            next: cursor
+          };
           return p1;
@@ -29,3 +33,3 @@ });
   if (unitless[key] !== 1 && key.charCodeAt(1) !== 45 && // custom properties
-  !isNaN(value) && value !== 0) {
+  typeof value === 'number' && value !== 0) {
     return value + 'px';
@@ -53,3 +57,3 @@ }
 
-function handleInterpolation(mergedProps, registered, interpolation) {
+function handleInterpolation(mergedProps, registered, interpolation, couldBeSelectorInterpolation) {
   if (interpolation == null) {
@@ -76,3 +80,7 @@ return '';
         if (interpolation.anim === 1) {
-          styles = interpolation.styles + styles;
+          cursor = {
+            name: interpolation.name,
+            styles: interpolation.styles,
+            next: cursor
+          };
           return interpolation.name;
@@ -82,2 +90,17 @@ }
         if (interpolation.styles !== undefined) {
+          var next = interpolation.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;
+            }
+          }
+
           return interpolation.styles;
@@ -92,4 +115,5 @@ }
         if (mergedProps !== undefined) {
-          return handleInterpolation(mergedProps, registered, // $FlowFixMe
-          interpolation(mergedProps));
+          return handleInterpolation(mergedProps, registered, interpolation(mergedProps), couldBeSelectorInterpolation);
+        } 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}`");
         }
@@ -102,3 +126,3 @@ }
         var cached = registered[interpolation];
-        return cached !== undefined ? cached : interpolation;
+        return cached !== undefined && !couldBeSelectorInterpolation ? cached : interpolation;
       }
@@ -113,25 +137,27 @@ }
     for (var i = 0; i < obj.length; i++) {
-      string += handleInterpolation(mergedProps, registered, obj[i]);
+      string += handleInterpolation(mergedProps, registered, obj[i], false);
     }
   } else {
-    var _loop = function _loop(_key) {
-      if (typeof obj[_key] !== 'object') {
-        string += processStyleName(_key) + ":" + processStyleValue(_key, obj[_key]) + ";";
+    for (var _key in obj) {
+      var value = obj[_key];
+
+      if (typeof value !== 'object') {
+        if (registered[value] !== undefined) {
+          string += _key + "{" + registered[value] + "}";
+        } else {
+          string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
+        }
       } else {
         if (_key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {
-          throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin-core.');
+          throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
         }
 
-        if (Array.isArray(obj[_key]) && typeof obj[_key][0] === 'string' && registered[obj[_key][0]] === undefined) {
-          obj[_key].forEach(function (value) {
-            string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
-          });
+        if (Array.isArray(value) && typeof value[0] === 'string' && registered[value[0]] === undefined) {
+          for (var _i = 0; _i < value.length; _i++) {
+            string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
+          }
         } else {
-          string += _key + "{" + handleInterpolation(mergedProps, registered, obj[_key]) + "}";
+          string += _key + "{" + handleInterpolation(mergedProps, registered, value, false) + "}";
         }
       }
-    };
-
-    for (var _key in obj) {
-      _loop(_key);
     }
@@ -148,2 +174,11 @@ }
 var styles = '';
+var sourceMapPattern;
+
+if (process.env.NODE_ENV !== 'production') {
+  sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//;
+} // this is the cursor for keyframes
+// keyframes are stored on the SerializedStyles object as a linked list
+
+
+var cursor;
 var serializeStyles = function serializeStyles(registered, args, mergedProps) {
@@ -156,3 +191,3 @@ if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
   styles = '';
-  var identifierName = '';
+  cursor = undefined;
   var strings = args[0];
@@ -165,3 +200,3 @@
 
-    var stringifiedInterpolation = handleInterpolation(mergedProps, registered, strings);
+    var stringifiedInterpolation = handleInterpolation(mergedProps, registered, strings, false);
     styles += stringifiedInterpolation;
@@ -177,3 +212,3 @@ } else {
     // it would append the return value of handleInterpolation to the value before handleInterpolation is called
-    var _stringifiedInterpolation = handleInterpolation(mergedProps, registered, args[i]);
+    var _stringifiedInterpolation = handleInterpolation(mergedProps, registered, args[i], styles.charCodeAt(styles.length - 1) === 46);
 
@@ -187,10 +222,36 @@ styles += _stringifiedInterpolation;
 
-  styles = styles.replace(labelPattern, function (match, p1) {
-    identifierName += "-" + p1;
-    return '';
-  });
+  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;
+  var identifierName = '';
+  var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
+
+  while ((match = labelPattern.exec(styles)) !== null) {
+    identifierName += '-' + // $FlowFixMe we know it's not null
+    match[1];
+  }
+
   var name = hashString(styles) + identifierName;
+
+  if (process.env.NODE_ENV !== 'production') {
+    return {
+      name: name,
+      styles: styles,
+      map: sourceMap,
+      next: cursor
+    };
+  }
+
   return {
     name: name,
-    styles: styles
+    styles: styles,
+    next: cursor
   };
@@ -197,0 +258,0 @@ };

package.json

 {
   "name": "@emotion/serialize",
-  "version": "0.9.1",
+  "version": "10.0.0-really-unsafe-please-do-not-use.0",
   "description": "serialization utils for emotion",
@@ -13,6 +13,6 @@ "main": "dist/serialize.cjs.js",
   "dependencies": {
-    "@emotion/hash": "^0.6.6",
-    "@emotion/memoize": "^0.6.6",
-    "@emotion/unitless": "^0.6.7",
-    "@emotion/utils": "^0.8.2"
+    "@emotion/hash": "^10.0.0-really-unsafe-please-do-not-use.0",
+    "@emotion/memoize": "^10.0.0-really-unsafe-please-do-not-use.0",
+    "@emotion/unitless": "^10.0.0-really-unsafe-please-do-not-use.0",
+    "@emotion/utils": "^10.0.0-really-unsafe-please-do-not-use.0"
   },
@@ -24,3 +24,7 @@ "files": [
   "umd:main": "./dist/index.min.js",
-  "gitHead": "94fed7652759a0f1962da66b922299398e39fe4d"
+  "browser": {
+    "./dist/serialize.cjs.js": "./dist/serialize.browser.cjs.js",
+    "./dist/serialize.esm.js": "./dist/serialize.browser.esm.js"
+  },
+  "gitHead": "a5f3825603dffd69fddb44bf5f29afd7c49eabd5"
 }

src/index.js

 // @flow
 import type {
   Interpolation,
-  ScopedInsertableStyles,
+  SerializedStyles,
   RegisteredCache
@@ -28,3 +28,7 @@ } from '@emotion/utils'
       value = value.replace(animationRegex, (match, p1, p2) => {
-        styles = p2 + styles
+        cursor = {
+          name: p1,
+          styles: p2,
+          next: cursor
+        }
         return p1
@@ -38,3 +42,3 @@ })
     key.charCodeAt(1) !== 45 && // custom properties
-    !isNaN(value) &&
+    typeof value === 'number' &&
     value !== 0
@@ -83,3 +87,4 @@ ) {
   registered: RegisteredCache,
-  interpolation: Interpolation
+  interpolation: Interpolation,
+  couldBeSelectorInterpolation: boolean
 ): string | number {
@@ -107,6 +112,24 @@ if (interpolation == null) {
       if (interpolation.anim === 1) {
-        styles = interpolation.styles + styles
+        cursor = {
+          name: interpolation.name,
+          styles: interpolation.styles,
+          next: cursor
+        }
+
         return interpolation.name
       }
       if (interpolation.styles !== undefined) {
+        let next = interpolation.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
+          }
+        }
         return interpolation.styles
@@ -122,5 +145,13 @@ }
           registered,
-          // $FlowFixMe
-          interpolation(mergedProps)
+          interpolation(mergedProps),
+          couldBeSelectorInterpolation
         )
+      } 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}`"
+        )
       }
@@ -131,3 +162,5 @@ }
       const cached = registered[interpolation]
-      return cached !== undefined ? cached : interpolation
+      return cached !== undefined && !couldBeSelectorInterpolation
+        ? cached
+        : interpolation
     }
@@ -146,11 +179,13 @@ }
     for (let i = 0; i < obj.length; i++) {
-      string += handleInterpolation(mergedProps, registered, obj[i])
+      string += handleInterpolation(mergedProps, registered, obj[i], false)
     }
   } else {
     for (let key in obj) {
-      if (typeof obj[key] !== 'object') {
-        string += `${processStyleName(key)}:${processStyleValue(
-          key,
-          obj[key]
-        )};`
+      let value = obj[key]
+      if (typeof value !== 'object') {
+        if (registered[value] !== undefined) {
+          string += `${key}{${registered[value]}}`
+        } else {
+          string += `${processStyleName(key)}:${processStyleValue(key, value)};`
+        }
       } else {
@@ -162,16 +197,15 @@ if (
           throw new Error(
-            'Component selectors can only be used in conjunction with @emotion/babel-plugin-core.'
+            'Component selectors can only be used in conjunction with babel-plugin-emotion.'
           )
         }
         if (
-          Array.isArray(obj[key]) &&
-          (typeof obj[key][0] === 'string' &&
-            registered[obj[key][0]] === undefined)
+          Array.isArray(value) &&
+          (typeof value[0] === 'string' && registered[value[0]] === undefined)
         ) {
-          obj[key].forEach(value => {
+          for (let i = 0; i < value.length; i++) {
             string += `${processStyleName(key)}:${processStyleValue(
               key,
-              value
+              value[i]
             )};`
-          })
+          }
         } else {
@@ -181,3 +215,4 @@ string += `${key}{${handleInterpolation(
             registered,
-            obj[key]
+            value,
+            false
           )}}`
@@ -199,2 +234,11 @@ }
 
+let sourceMapPattern
+if (process.env.NODE_ENV !== 'production') {
+  sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//
+}
+
+// this is the cursor for keyframes
+// keyframes are stored on the SerializedStyles object as a linked list
+let cursor
+
 export const serializeStyles = function(
@@ -204,3 +248,3 @@ registered: RegisteredCache,
   mergedProps: void | Object
-): ScopedInsertableStyles {
+): SerializedStyles {
   if (
@@ -216,3 +260,4 @@ args.length === 1 &&
   styles = ''
-  let identifierName = ''
+  cursor = undefined
+
   let strings = args[0]
@@ -227,3 +272,4 @@ if (strings == null || strings.raw === undefined) {
       registered,
-      strings
+      strings,
+      false
     )
@@ -242,3 +288,4 @@ styles += stringifiedInterpolation
       registered,
-      args[i]
+      args[i],
+      styles.charCodeAt(styles.length - 1) === 46
     )
@@ -250,14 +297,39 @@ styles += stringifiedInterpolation
   }
+  let sourceMap
 
-  styles = styles.replace(labelPattern, (match, p1: string) => {
-    identifierName += `-${p1}`
-    return ''
-  })
+  if (process.env.NODE_ENV !== 'production') {
+    styles = styles.replace(sourceMapPattern, match => {
+      sourceMap = match
+      return ''
+    })
+  }
 
+  // using a global regex with .exec is stateful so lastIndex has to be reset each time
+  labelPattern.lastIndex = 0
+  let identifierName = ''
+
+  let match
+  // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
+  while ((match = labelPattern.exec(styles)) !== null) {
+    identifierName +=
+      '-' +
+      // $FlowFixMe we know it's not null
+      match[1]
+  }
+
   let name = hashString(styles) + identifierName
 
+  if (process.env.NODE_ENV !== 'production') {
+    return {
+      name,
+      styles,
+      map: sourceMap,
+      next: cursor
+    }
+  }
   return {
     name,
-    styles
+    styles,
+    next: cursor
   }
 }

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

Improved metrics

Total package byte prevSize

68188

increased by85.65%

Number of package files

12

increased by33.33%

Lines of code

1288

increased by134.18%

Worsened metrics

Number of low supply chain risk alerts

37

increased by270%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@emotion/hash@10.0.0-really-unsafe-please-do-not-use.2(transitive)

• + Added@emotion/memoize@10.0.0-really-unsafe-please-do-not-use.2(transitive)

• + Added@emotion/unitless@10.0.0-really-unsafe-please-do-not-use.2(transitive)

• + Added@emotion/utils@10.0.0-really-unsafe-please-do-not-use.2(transitive)

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

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

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

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

• Updated@emotion/hash@^10.0.0-really-unsafe-please-do-not-use.0

• Updated@emotion/memoize@^10.0.0-really-unsafe-please-do-not-use.0

• Updated@emotion/unitless@^10.0.0-really-unsafe-please-do-not-use.0

• Updated@emotion/utils@^10.0.0-really-unsafe-please-do-not-use.0