@emotion/styled-base - npm Package Compare versions

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

dist/index.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("@emotion/core")):"function"==typeof define&&define.amd?define(["react","@emotion/core"],t):e.emotionStyledBase=t(e.React,e.emotionCore)}(this,function(h,g){"use strict";function e(t){var r={};return function(e){return void 0===r[e]&&(r[e]=t(e)),r[e]}}var t=/^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|default|defer|dir|disabled|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|itemProp|itemScope|itemType|itemID|itemRef|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class)|(on[A-Z].*)|((data|aria|x)-.*))$/i,r=e(t.test.bind(t)),n=function(e){return"theme"!==e&&"innerRef"!==e},y=function(){return!0},v=function(e,t){for(var r=2,n=arguments.length;r<n;r++){var o=arguments[r],i=void 0;for(i in o)e(i)&&(t[i]=o[i])}return t};var o={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},i=/[A-Z]|^ms/g,a=/_EMO_([^_]+?)_([^]*?)_EMO_/g,s=e(function(e){return e.replace(i,"-$&").toLowerCase()}),l=function(e,t){if(null==t||"boolean"==typeof t)return"";switch(e){case"animation":case"animationName":t=t.replace(a,function(e,t,r){return b=r+b,t})}return 1===o[e]||45===e.charCodeAt(1)||isNaN(t)||0===t?t:t+"px"};function k(e,t,r){if(null==r)return"";if(void 0!==r.__emotion_styles)return r;switch(typeof r){case"boolean":return"";case"object":return 1===r.anim?(b=r.styles+b,r.name):void 0!==r.styles?r.styles:function(e,r,n){var o="";if(Array.isArray(n))for(var t=0;t<n.length;t++)o+=k(e,r,n[t]);else{var i=function(t){"object"!=typeof n[t]?o+=s(t)+":"+l(t,n[t])+";":Array.isArray(n[t])&&"string"==typeof n[t][0]&&void 0===r[n[t][0]]?n[t].forEach(function(e){o+=s(t)+":"+l(t,e)+";"}):o+=t+"{"+k(e,r,n[t])+"}"};for(var a in n)i(a)}return o}(e,t,r);case"function":if(void 0!==e)return k(e,t,r(e));default:var n=t[r];return void 0!==n?n:r}}var x=/label:\s*([^\s;\n{]+)\s*;/g,b="";return function i(a,s){var l,u,p;void 0!==s&&(l=s.label,p=s.target,u=a.__emotion_forwardProp&&s.shouldForwardProp?function(e){return a.__emotion_forwardProp(e)&&s.shouldForwardProp(e)}:s.shouldForwardProp);var c=a.__emotion_real===a,f=c&&a.__emotion_base||a,m="string"==typeof f;return"function"!=typeof u&&(u=m&&96<f.charCodeAt(0)?r:n),function(){var e=arguments,d=c&&void 0!==a.__emotion_styles?a.__emotion_styles.slice(0):[];if(void 0!==l&&d.push("label:"+l+";"),null==e[0]||void 0===e[0].raw)d.push.apply(d,e);else{d.push(e[0][0]);for(var t=e.length,r=1;r<t;r++)d.push(e[r],e[0][r])}var n=g.withCSSContext(function(e,t){var r,n,o,i,a="",s=[],l=v(y,{},e,{theme:e.theme||t.theme});"string"==typeof e.className&&(a+=(r=t.registered,n=s,o=e.className,i="",o.split(" ").forEach(function(e){void 0!==r[e]?n.push(r[e]):i+=e+" "}),i));var c=function(e,t,r){if(1===t.length&&"object"==typeof t[0]&&null!==t[0]&&void 0!==t[0].styles)return t[0];var n=!0,o=b="",i=t[0];if(null==i||void 0===i.raw){n=!1;var a=k(r,e,i);b+=a}else b+=i[0];for(var s=1;s<t.length;s++){var l=k(r,e,t[s]);b+=l,n&&(b+=i[s])}return{name:function(e){for(var t,r=e.length,n=r^r,o=0;4<=r;)t=1540483477*(65535&(t=255&e.charCodeAt(o)|(255&e.charCodeAt(++o))<<8|(255&e.charCodeAt(++o))<<16|(255&e.charCodeAt(++o))<<24))+((1540483477*(t>>>16)&65535)<<16),n=1540483477*(65535&n)+((1540483477*(n>>>16)&65535)<<16)^(t=1540483477*(65535&(t^=t>>>24))+((1540483477*(t>>>16)&65535)<<16)),r-=4,++o;switch(r){case 3:n^=(255&e.charCodeAt(o+2))<<16;case 2:n^=(255&e.charCodeAt(o+1))<<8;case 1:n=1540483477*(65535&(n^=255&e.charCodeAt(o)))+((1540483477*(n>>>16)&65535)<<16)}return n=1540483477*(65535&(n^=n>>>13))+((1540483477*(n>>>16)&65535)<<16),((n^=n>>>15)>>>0).toString(36)}(b=b.replace(x,function(e,t){return o+="-"+t,""}))+o,styles:b}}(t.registered,d.concat(s),l);return function(e,t,r){if(!1===r&&void 0===e.registered[e.key+"-"+t.name]&&(e.registered[e.key+"-"+t.name]=t.styles),void 0===e.inserted[t.name]){var n=e.stylis("."+e.key+"-"+t.name,t.styles);e.inserted[t.name]=!0,n.forEach(e.sheet.insert,e.sheet)}}(t,c,m),a+=t.key+"-"+c.name,void 0!==p&&(a+=" "+p),h.createElement(f,v(u,{},e,{className:a,ref:e.innerRef}))});n.displayName=void 0!==l?l:"Styled("+("string"==typeof f?f:f.displayName||f.name||"Component")+")";var o=h.forwardRef(function(e,t){return h.createElement(n,null===t?e:v(y,{innerRef:t},e))});return(o.__emotion_real=o).__emotion_base=f,o.__emotion_styles=d,o.__emotion_forwardProp=u,Object.defineProperty(o,"toString",{value:function(){return"."+p}}),o.withComponent=function(e,t){return i(e,void 0!==t?v(y,{},s||{},t):s).apply(void 0,d)},o}}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("@emotion/core")):"function"==typeof define&&define.amd?define(["react","@emotion/core"],t):e.emotionStyledBase=t(e.React,e.emotionCore)}(this,function(k,c){"use strict";function d(){return(d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function e(t){var r={};return function(e){return void 0===r[e]&&(r[e]=t(e)),r[e]}}var t=/^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|default|defer|dir|disabled|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|itemProp|itemScope|itemType|itemID|itemRef|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class)|(on[A-Z].*)|((data|aria|x)-.*))$/i,r=e(t.test.bind(t)),n=function(e){return"theme"!==e&&"innerRef"!==e};var o={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},i=/[A-Z]|^ms/g,a=/_EMO_([^_]+?)_([^]*?)_EMO_/g,l=e(function(e){return e.replace(i,"-$&").toLowerCase()}),u=function(e,t){if(null==t||"boolean"==typeof t)return"";switch(e){case"animation":case"animationName":t=t.replace(a,function(e,t,r){return C={name:t,styles:r,next:C},t})}return 1!==o[e]&&45!==e.charCodeAt(1)&&"number"==typeof t&&0!==t?t+"px":t};function b(e,t,r,n){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 C={name:r.name,styles:r.styles,next:C},r.name;if(void 0!==r.styles){var o=r.next;if(void 0!==o)for(;void 0!==o;)C={name:o.name,styles:o.styles,next:C},o=o.next;return r.styles}return function(e,t,r){var n="";if(Array.isArray(r))for(var o=0;o<r.length;o++)n+=b(e,t,r[o],!1);else for(var i in r){var a=r[i];if("object"!=typeof a)void 0!==t[a]?n+=i+"{"+t[a]+"}":n+=l(i)+":"+u(i,a)+";";else if(Array.isArray(a)&&"string"==typeof a[0]&&void 0===t[a[0]])for(var s=0;s<a.length;s++)n+=l(i)+":"+u(i,a[s])+";";else n+=i+"{"+b(e,t,a,!1)+"}"}return n}(e,t,r);case"function":if(void 0!==e)return b(e,t,r(e),n);default:var i=t[r];return void 0===i||n?r:i}}var C,w=/label:\s*([^\s;\n{]+)\s*;/g,_="";return function o(i,a){var s,g,y;void 0!==a&&(s=a.label,y=a.target,g=i.__emotion_forwardProp&&a.shouldForwardProp?function(e){return i.__emotion_forwardProp(e)&&a.shouldForwardProp(e)}:a.shouldForwardProp);var l=i.__emotion_real===i,v=l&&i.__emotion_base||i,x="string"==typeof v;return"function"!=typeof g&&(g=x&&96<v.charCodeAt(0)?r:n),function(){var e=arguments,h=l&&void 0!==i.__emotion_styles?i.__emotion_styles.slice(0):[];if(void 0!==s&&1===e.length&&0===h.length&&void 0!==e[0].styles)h.push({name:e[0].name,label:s,styles:e[0].styles,map:e[0].map});else if(void 0!==s&&h.push("label:"+s+";"),null==e[0]||void 0===e[0].raw)h.push.apply(h,e);else{h.push(e[0][0]);for(var t=e.length,r=1;r<t;r++)h.push(e[r],e[0][r])}var n=c.withEmotionCache(function(p,f,m){return k.createElement(c.ThemeContext.Consumer,null,function(e){var t,r,n,o,i="",a=[],s=p;if(null==p.theme){for(var l in s={},p)s[l]=p[l];s.theme=e}"string"==typeof p.className&&(i+=(t=f.registered,r=a,n=p.className,o="",n.split(" ").forEach(function(e){void 0!==t[e]?r.push(t[e]):o+=e+" "}),o));var c=function(e,t,r){if(1===t.length&&"object"==typeof t[0]&&null!==t[0]&&void 0!==t[0].styles)return t[0];var n=!0;_="",C=void 0;var o=t[0];if(null==o||void 0===o.raw){var i=b(r,e,o,n=!1);_+=i}else _+=o[0];for(var a=1;a<t.length;a++){var s=b(r,e,t[a],46===_.charCodeAt(_.length-1));_+=s,n&&(_+=o[a])}w.lastIndex=0;for(var l,c="";null!==(l=w.exec(_));)c+="-"+l[1];return{name:function(e){for(var t,r=e.length,n=r^r,o=0;4<=r;)t=1540483477*(65535&(t=255&e.charCodeAt(o)|(255&e.charCodeAt(++o))<<8|(255&e.charCodeAt(++o))<<16|(255&e.charCodeAt(++o))<<24))+((1540483477*(t>>>16)&65535)<<16),n=1540483477*(65535&n)+((1540483477*(n>>>16)&65535)<<16)^(t=1540483477*(65535&(t^=t>>>24))+((1540483477*(t>>>16)&65535)<<16)),r-=4,++o;switch(r){case 3:n^=(255&e.charCodeAt(o+2))<<16;case 2:n^=(255&e.charCodeAt(o+1))<<8;case 1:n=1540483477*(65535&(n^=255&e.charCodeAt(o)))+((1540483477*(n>>>16)&65535)<<16)}return n=1540483477*(65535&(n^=n>>>13))+((1540483477*(n>>>16)&65535)<<16),((n^=n>>>15)>>>0).toString(36)}(_)+c,styles:_,next:C}}(f.registered,h.concat(a),s);!function(e,t,r){var n=e.key+"-"+t.name;if(!1===r&&void 0===e.registered[n]&&(e.registered[n]=t.styles),void 0===e.inserted[t.name]){var o=t;do{var i=e.stylis("."+n,o.styles);e.inserted[o.name]=!0,i.forEach(e.sheet.insert,e.sheet),o=o.next}while(void 0!==o)}}(f,c,x),i+=f.key+"-"+c.name,void 0!==y&&(i+=" "+y);var d={};for(var u in p)g(u)&&(d[u]=p[u]);return d.className=i,d.ref=m,k.createElement(v,d)})});return n.displayName=void 0!==s?s:"Styled("+("string"==typeof v?v:v.displayName||v.name||"Component")+")",n.defaultProps=i.defaultProps,(n.__emotion_real=n).__emotion_base=v,n.__emotion_styles=h,n.__emotion_forwardProp=g,Object.defineProperty(n,"toString",{value:function(){return"."+y}}),n.withComponent=function(e,t){return o(e,void 0!==t?d({},a||{},t):a).apply(void 0,h)},n}}});
 //# sourceMappingURL=index.min.js.map

dist/styled-base.browser.esm.js

@@ -1,31 +0,28 @@
-import { createElement, forwardRef } from 'react';
+import { createElement } from 'react';
 import isPropValid from '@emotion/is-prop-valid';
-import { withCSSContext } from '@emotion/core';
+import { withEmotionCache, ThemeContext } from '@emotion/core';
 import { getRegisteredStyles, insertStyles } from '@emotion/utils';
 import { serializeStyles } from '@emotion/serialize';
 
-var testOmitPropsOnStringTag = isPropValid;
-var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
-  return key !== 'theme' && key !== 'innerRef';
-};
-var testAlwaysTrue = function testAlwaysTrue() {
-  return true;
-};
-var pickAssign = function pickAssign(testFn, target) {
-  var i = 2;
-  var length = arguments.length;
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-  for (; i < length; i++) {
-    var source = arguments[i];
-
-    var _key = void 0;
-
-    for (_key in source) {
-      if (testFn(_key)) {
-        target[_key] = source[_key];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
       }
     }
-  }
 
-  return target;
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+var testOmitPropsOnStringTag = isPropValid;
+var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
+  return key !== 'theme' && key !== 'innerRef';
 };
@@ -66,59 +63,91 @@
     var args = arguments;
-    var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];
+    var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : []; // idk if this is worth it.
+    // it's only for when autoLabel is on and styles are completely static
+    // and it's only a performance optimisation
+    // just committing this in case we want it later
 
-    if (identifierName !== undefined) {
-      styles.push("label:" + identifierName + ";");
-    }
-
-    if (args[0] == null || args[0].raw === undefined) {
-      styles.push.apply(styles, args);
+    if (identifierName !== undefined && args.length === 1 && styles.length === 0 && args[0].styles !== undefined) {
+      styles.push({
+        name: args[0].name,
+        label: identifierName,
+        styles: args[0].styles,
+        map: args[0].map
+      });
     } else {
-      styles.push(args[0][0]);
-      var len = args.length;
-      var i = 1;
+      if (identifierName !== undefined) {
+        styles.push("label:" + identifierName + ";");
+      }
 
-      for (; i < len; i++) {
-        styles.push(args[i], args[0][i]);
+      if (args[0] == null || args[0].raw === undefined) {
+        styles.push.apply(styles, args);
+      } else {
+        styles.push(args[0][0]);
+        var len = args.length;
+        var i = 1;
+
+        for (; i < len; i++) {
+          styles.push(args[i], args[0][i]);
+        }
       }
     }
 
-    var Styled = withCSSContext(function (props, context) {
-      var className = '';
-      var classInterpolations = [];
-      var mergedProps = pickAssign(testAlwaysTrue, {}, props, {
-        theme: props.theme || context.theme
-      });
+    var Styled = withEmotionCache(function (props, context, ref) {
+      return createElement(ThemeContext.Consumer, null, function (theme) {
+        var className = '';
+        var classInterpolations = [];
+        var mergedProps = props;
 
-      if (typeof props.className === 'string') {
-        className += getRegisteredStyles(context.registered, classInterpolations, props.className);
-      }
+        if (props.theme == null) {
+          mergedProps = {};
 
-      var serialized = serializeStyles(context.registered, styles.concat(classInterpolations), mergedProps);
-      var rules = insertStyles(context, serialized, isStringTag);
-      className += context.key + "-" + serialized.name;
+          for (var key in props) {
+            mergedProps[key] = props[key];
+          }
 
-      if (targetClassName !== undefined) {
-        className += " " + targetClassName;
-      }
+          mergedProps.theme = theme;
+        }
 
-      var ele = createElement(baseTag, // $FlowFixMe
-      pickAssign(shouldForwardProp, {}, props, {
-        className: className,
-        ref: props.innerRef
-      }));
+        if (typeof props.className === 'string') {
+          className += getRegisteredStyles(context.registered, classInterpolations, props.className);
+        }
 
-      return ele;
+        var serialized = serializeStyles(context.registered, styles.concat(classInterpolations), mergedProps);
+        var rules = insertStyles(context, serialized, isStringTag);
+        className += context.key + "-" + serialized.name;
+
+        if (targetClassName !== undefined) {
+          className += " " + targetClassName;
+        }
+
+        var newProps = {};
+
+        for (var _key in props) {
+          if ( // $FlowFixMe
+          shouldForwardProp(_key)) {
+            newProps[_key] = props[_key];
+          }
+        }
+
+        newProps.className = className;
+
+        {
+          newProps.ref = ref;
+
+          if (process.env.NODE_ENV !== 'production' && props.innerRef) {
+            console.error('`innerRef` is no longer allowed, please use the `ref` prop instead');
+          }
+        }
+
+        var ele = createElement(baseTag, newProps);
+
+        return ele;
+      });
     });
     Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
-    var FinalStyled = forwardRef(function (props, ref) {
-      // this avoids creating a new object if there's no ref
-      return createElement(Styled, ref === null ? props : pickAssign(testAlwaysTrue, {
-        innerRef: ref
-      }, props));
-    });
-    FinalStyled.__emotion_real = FinalStyled;
-    FinalStyled.__emotion_base = baseTag;
-    FinalStyled.__emotion_styles = styles;
-    FinalStyled.__emotion_forwardProp = shouldForwardProp;
-    Object.defineProperty(FinalStyled, 'toString', {
+    Styled.defaultProps = tag.defaultProps;
+    Styled.__emotion_real = Styled;
+    Styled.__emotion_base = baseTag;
+    Styled.__emotion_styles = styles;
+    Styled.__emotion_forwardProp = shouldForwardProp;
+    Object.defineProperty(Styled, 'toString', {
       value: function value() {
@@ -134,7 +163,7 @@ if (targetClassName === undefined && process.env.NODE_ENV !== 'production') {
 
-    FinalStyled.withComponent = function (nextTag, nextOptions) {
-      return createStyled(nextTag, nextOptions !== undefined ? pickAssign(testAlwaysTrue, {}, options || {}, nextOptions) : options).apply(void 0, styles);
+    Styled.withComponent = function (nextTag, nextOptions) {
+      return createStyled(nextTag, nextOptions !== undefined ? _extends({}, options || {}, nextOptions) : options).apply(void 0, styles);
     };
 
-    return FinalStyled;
+    return Styled;
   };
@@ -141,0 +170,0 @@ };

dist/styled-base.cjs.js

 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = require('react');
-var isPropValid = _interopDefault(require('@emotion/is-prop-valid'));
-var core = require('@emotion/core');
-var utils = require('@emotion/utils');
-var serialize = require('@emotion/serialize');
-
-var testOmitPropsOnStringTag = isPropValid;
-var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
-  return key !== 'theme' && key !== 'innerRef';
-};
-var testAlwaysTrue = function testAlwaysTrue() {
-  return true;
-};
-var pickAssign = function pickAssign(testFn, target) {
-  var i = 2;
-  var length = arguments.length;
-
-  for (; i < length; i++) {
-    var source = arguments[i];
-
-    var _key = void 0;
-
-    for (_key in source) {
-      if (testFn(_key)) {
-        target[_key] = source[_key];
-      }
-    }
-  }
-
-  return target;
-};
-
-var createStyled = function createStyled(tag, options) {
-  if (process.env.NODE_ENV !== 'production') {
-    if (tag === undefined) {
-      throw new Error('You are trying to create a styled element with an undefined component.\nYou may have forgotten to import it.');
-    }
-  }
-
-  var identifierName;
-  var shouldForwardProp;
-  var targetClassName;
-
-  if (options !== undefined) {
-    identifierName = options.label;
-    targetClassName = options.target;
-    shouldForwardProp = tag.__emotion_forwardProp && options.shouldForwardProp ? function (propName) {
-      return tag.__emotion_forwardProp(propName) && // $FlowFixMe
-      options.shouldForwardProp(propName);
-    } : options.shouldForwardProp;
-  }
-
-  var isReal = tag.__emotion_real === tag;
-  var baseTag = isReal && tag.__emotion_base || tag;
-  var isStringTag = typeof baseTag === 'string';
-
-  if (typeof shouldForwardProp !== 'function') {
-    shouldForwardProp = isStringTag && // 96 is one less than the char code
-    // for "a" so this is checking that
-    // it's a lowercase character
-    baseTag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
-  }
-
-  return function () {
-    var args = arguments;
-    var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];
-
-    if (identifierName !== undefined) {
-      styles.push("label:" + identifierName + ";");
-    }
-
-    if (args[0] == null || args[0].raw === undefined) {
-      styles.push.apply(styles, args);
-    } else {
-      styles.push(args[0][0]);
-      var len = args.length;
-      var i = 1;
-
-      for (; i < len; i++) {
-        styles.push(args[i], args[0][i]);
-      }
-    }
-
-    var Styled = core.withCSSContext(function (props, context) {
-      var className = '';
-      var classInterpolations = [];
-      var mergedProps = pickAssign(testAlwaysTrue, {}, props, {
-        theme: props.theme || context.theme
-      });
-
-      if (typeof props.className === 'string') {
-        className += utils.getRegisteredStyles(context.registered, classInterpolations, props.className);
-      }
-
-      var serialized = serialize.serializeStyles(context.registered, styles.concat(classInterpolations), mergedProps);
-      var rules = utils.insertStyles(context, serialized, isStringTag);
-      className += context.key + "-" + serialized.name;
-
-      if (targetClassName !== undefined) {
-        className += " " + targetClassName;
-      }
-
-      var ele = React.createElement(baseTag, // $FlowFixMe
-      pickAssign(shouldForwardProp, {}, props, {
-        className: className,
-        ref: props.innerRef
-      }));
-
-      if (!utils.isBrowser && rules !== undefined) {
-        var _ref;
-
-        return React.createElement(React.Fragment, null, React.createElement("style", (_ref = {}, _ref["data-emotion-" + context.key] = serialized.name, _ref.dangerouslySetInnerHTML = {
-          __html: rules
-        }, _ref.nonce = context.sheet.nonce, _ref)), ele);
-      }
-
-      return ele;
-    });
-    Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
-    var FinalStyled = React.forwardRef(function (props, ref) {
-      // this avoids creating a new object if there's no ref
-      return React.createElement(Styled, ref === null ? props : pickAssign(testAlwaysTrue, {
-        innerRef: ref
-      }, props));
-    });
-    FinalStyled.__emotion_real = FinalStyled;
-    FinalStyled.__emotion_base = baseTag;
-    FinalStyled.__emotion_styles = styles;
-    FinalStyled.__emotion_forwardProp = shouldForwardProp;
-    Object.defineProperty(FinalStyled, 'toString', {
-      value: function value() {
-        if (targetClassName === undefined && process.env.NODE_ENV !== 'production') {
-          return 'NO_COMPONENT_SELECTOR';
-        } // $FlowFixMe
-
-
-        return "." + targetClassName;
-      }
-    });
-
-    FinalStyled.withComponent = function (nextTag, nextOptions) {
-      return createStyled(nextTag, nextOptions !== undefined ? pickAssign(testAlwaysTrue, {}, options || {}, nextOptions) : options).apply(void 0, styles);
-    };
-
-    return FinalStyled;
-  };
-};
-
-module.exports = createStyled;
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./styled-base.cjs.prod.js');
+} else {
+  module.exports = require('./styled-base.cjs.dev.js');
+}

dist/styled-base.esm.js

@@ -1,31 +0,28 @@
-import { createElement, Fragment, forwardRef } from 'react';
+import { createElement, Fragment } from 'react';
 import isPropValid from '@emotion/is-prop-valid';
-import { withCSSContext } from '@emotion/core';
+import { withEmotionCache, ThemeContext } from '@emotion/core';
 import { getRegisteredStyles, insertStyles, isBrowser } from '@emotion/utils';
 import { serializeStyles } from '@emotion/serialize';
 
-var testOmitPropsOnStringTag = isPropValid;
-var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
-  return key !== 'theme' && key !== 'innerRef';
-};
-var testAlwaysTrue = function testAlwaysTrue() {
-  return true;
-};
-var pickAssign = function pickAssign(testFn, target) {
-  var i = 2;
-  var length = arguments.length;
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-  for (; i < length; i++) {
-    var source = arguments[i];
-
-    var _key = void 0;
-
-    for (_key in source) {
-      if (testFn(_key)) {
-        target[_key] = source[_key];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
       }
     }
-  }
 
-  return target;
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+var testOmitPropsOnStringTag = isPropValid;
+var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
+  return key !== 'theme' && key !== 'innerRef';
 };
@@ -66,67 +63,107 @@
     var args = arguments;
-    var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];
+    var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : []; // idk if this is worth it.
+    // it's only for when autoLabel is on and styles are completely static
+    // and it's only a performance optimisation
+    // just committing this in case we want it later
 
-    if (identifierName !== undefined) {
-      styles.push("label:" + identifierName + ";");
-    }
-
-    if (args[0] == null || args[0].raw === undefined) {
-      styles.push.apply(styles, args);
+    if (identifierName !== undefined && args.length === 1 && styles.length === 0 && args[0].styles !== undefined) {
+      styles.push({
+        name: args[0].name,
+        label: identifierName,
+        styles: args[0].styles,
+        map: args[0].map
+      });
     } else {
-      styles.push(args[0][0]);
-      var len = args.length;
-      var i = 1;
+      if (identifierName !== undefined) {
+        styles.push("label:" + identifierName + ";");
+      }
 
-      for (; i < len; i++) {
-        styles.push(args[i], args[0][i]);
+      if (args[0] == null || args[0].raw === undefined) {
+        styles.push.apply(styles, args);
+      } else {
+        styles.push(args[0][0]);
+        var len = args.length;
+        var i = 1;
+
+        for (; i < len; i++) {
+          styles.push(args[i], args[0][i]);
+        }
       }
     }
 
-    var Styled = withCSSContext(function (props, context) {
-      var className = '';
-      var classInterpolations = [];
-      var mergedProps = pickAssign(testAlwaysTrue, {}, props, {
-        theme: props.theme || context.theme
-      });
+    var Styled = withEmotionCache(function (props, context, ref) {
+      return createElement(ThemeContext.Consumer, null, function (theme) {
+        var className = '';
+        var classInterpolations = [];
+        var mergedProps = props;
 
-      if (typeof props.className === 'string') {
-        className += getRegisteredStyles(context.registered, classInterpolations, props.className);
-      }
+        if (props.theme == null) {
+          mergedProps = {};
 
-      var serialized = serializeStyles(context.registered, styles.concat(classInterpolations), mergedProps);
-      var rules = insertStyles(context, serialized, isStringTag);
-      className += context.key + "-" + serialized.name;
+          for (var key in props) {
+            mergedProps[key] = props[key];
+          }
 
-      if (targetClassName !== undefined) {
-        className += " " + targetClassName;
-      }
+          mergedProps.theme = theme;
+        }
 
-      var ele = createElement(baseTag, // $FlowFixMe
-      pickAssign(shouldForwardProp, {}, props, {
-        className: className,
-        ref: props.innerRef
-      }));
+        if (typeof props.className === 'string') {
+          className += getRegisteredStyles(context.registered, classInterpolations, props.className);
+        }
 
-      if (!isBrowser && rules !== undefined) {
-        var _ref;
+        var serialized = serializeStyles(context.registered, styles.concat(classInterpolations), mergedProps);
+        var rules = insertStyles(context, serialized, isStringTag);
+        className += context.key + "-" + serialized.name;
 
-        return createElement(Fragment, null, createElement("style", (_ref = {}, _ref["data-emotion-" + context.key] = serialized.name, _ref.dangerouslySetInnerHTML = {
-          __html: rules
-        }, _ref.nonce = context.sheet.nonce, _ref)), ele);
-      }
+        if (targetClassName !== undefined) {
+          className += " " + targetClassName;
+        }
 
-      return ele;
+        var newProps = {};
+
+        for (var _key in props) {
+          if ( // $FlowFixMe
+          shouldForwardProp(_key)) {
+            newProps[_key] = props[_key];
+          }
+        }
+
+        newProps.className = className;
+
+        {
+          newProps.ref = ref;
+
+          if (process.env.NODE_ENV !== 'production' && props.innerRef) {
+            console.error('`innerRef` is no longer allowed, please use the `ref` prop instead');
+          }
+        }
+
+        var ele = createElement(baseTag, newProps);
+
+        if (!isBrowser && rules !== undefined) {
+          var _ref;
+
+          var serializedNames = serialized.name;
+          var next = serialized.next;
+
+          while (next !== undefined) {
+            serializedNames += ' ' + next.name;
+            next = next.next;
+          }
+
+          return createElement(Fragment, null, createElement("style", (_ref = {}, _ref["data-emotion-" + context.key] = serializedNames, _ref.dangerouslySetInnerHTML = {
+            __html: rules
+          }, _ref.nonce = context.sheet.nonce, _ref)), ele);
+        }
+
+        return ele;
+      });
     });
     Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
-    var FinalStyled = forwardRef(function (props, ref) {
-      // this avoids creating a new object if there's no ref
-      return createElement(Styled, ref === null ? props : pickAssign(testAlwaysTrue, {
-        innerRef: ref
-      }, props));
-    });
-    FinalStyled.__emotion_real = FinalStyled;
-    FinalStyled.__emotion_base = baseTag;
-    FinalStyled.__emotion_styles = styles;
-    FinalStyled.__emotion_forwardProp = shouldForwardProp;
-    Object.defineProperty(FinalStyled, 'toString', {
+    Styled.defaultProps = tag.defaultProps;
+    Styled.__emotion_real = Styled;
+    Styled.__emotion_base = baseTag;
+    Styled.__emotion_styles = styles;
+    Styled.__emotion_forwardProp = shouldForwardProp;
+    Object.defineProperty(Styled, 'toString', {
       value: function value() {
@@ -142,7 +179,7 @@ if (targetClassName === undefined && process.env.NODE_ENV !== 'production') {
 
-    FinalStyled.withComponent = function (nextTag, nextOptions) {
-      return createStyled(nextTag, nextOptions !== undefined ? pickAssign(testAlwaysTrue, {}, options || {}, nextOptions) : options).apply(void 0, styles);
+    Styled.withComponent = function (nextTag, nextOptions) {
+      return createStyled(nextTag, nextOptions !== undefined ? _extends({}, options || {}, nextOptions) : options).apply(void 0, styles);
     };
 
-    return FinalStyled;
+    return Styled;
   };
@@ -149,0 +186,0 @@ };

package.json

 {
   "name": "@emotion/styled-base",
-  "version": "0.10.6",
+  "version": "10.0.0-really-unsafe-please-do-not-use.0",
   "description": "base styled API for emotion",
@@ -14,5 +14,5 @@ "main": "dist/styled-base.cjs.js",
   "dependencies": {
-    "@emotion/is-prop-valid": "^0.6.8",
-    "@emotion/serialize": "^0.9.1",
-    "@emotion/utils": "^0.8.2"
+    "@emotion/is-prop-valid": "^10.0.0-really-unsafe-please-do-not-use.0",
+    "@emotion/serialize": "^10.0.0-really-unsafe-please-do-not-use.0",
+    "@emotion/utils": "^10.0.0-really-unsafe-please-do-not-use.0"
   },
@@ -31,3 +31,3 @@ "peerDependencies": {
   "umd:main": "./dist/index.min.js",
-  "gitHead": "94fed7652759a0f1962da66b922299398e39fe4d"
+  "gitHead": "a5f3825603dffd69fddb44bf5f29afd7c49eabd5"
 }

src/index.js

@@ -6,9 +6,7 @@ // @flow
   testOmitPropsOnComponent,
-  testAlwaysTrue,
   testOmitPropsOnStringTag,
-  pickAssign,
   type StyledOptions,
   type CreateStyled
 } from './utils'
-import { withCSSContext } from '@emotion/core'
+import { withEmotionCache, ThemeContext } from '@emotion/core'
 import { getRegisteredStyles, insertStyles, isBrowser } from '@emotion/utils'
@@ -65,63 +63,117 @@ import { serializeStyles } from '@emotion/serialize'
         : []
-    if (identifierName !== undefined) {
-      styles.push(`label:${identifierName};`)
-    }
-    if (args[0] == null || args[0].raw === undefined) {
-      styles.push.apply(styles, args)
-    } else {
-      styles.push(args[0][0])
-      let len = args.length
-      let i = 1
-      for (; i < len; i++) {
-        styles.push(args[i], args[0][i])
-      }
-    }
 
-    const Styled: any = withCSSContext((props, context) => {
-      let className = ''
-      let classInterpolations = []
-      let mergedProps = pickAssign(testAlwaysTrue, {}, props, {
-        theme: props.theme || context.theme
+    // idk if this is worth it.
+    // it's only for when autoLabel is on and styles are completely static
+    // and it's only a performance optimisation
+    // just committing this in case we want it later
+    if (
+      identifierName !== undefined &&
+      args.length === 1 &&
+      styles.length === 0 &&
+      args[0].styles !== undefined
+    ) {
+      styles.push({
+        name: args[0].name,
+        label: identifierName,
+        styles: args[0].styles,
+        map: args[0].map
       })
-      if (typeof props.className === 'string') {
-        className += getRegisteredStyles(
-          context.registered,
-          classInterpolations,
-          props.className
-        )
+    } else {
+      if (identifierName !== undefined) {
+        styles.push(`label:${identifierName};`)
       }
-      const serialized = serializeStyles(
-        context.registered,
-        styles.concat(classInterpolations),
-        mergedProps
-      )
-      const rules = insertStyles(context, serialized, isStringTag)
-      className += `${context.key}-${serialized.name}`
-      if (targetClassName !== undefined) {
-        className += ` ${targetClassName}`
+      if (args[0] == null || args[0].raw === undefined) {
+        styles.push.apply(styles, args)
+      } else {
+        styles.push(args[0][0])
+        let len = args.length
+        let i = 1
+        for (; i < len; i++) {
+          styles.push(args[i], args[0][i])
+        }
       }
+    }
 
-      const ele = React.createElement(
-        baseTag,
-        // $FlowFixMe
-        pickAssign(shouldForwardProp, {}, props, {
-          className,
-          ref: props.innerRef
-        })
+    const Styled: any = withEmotionCache((props, context, ref) => {
+      return (
+        <ThemeContext.Consumer>
+          {theme => {
+            let className = ''
+            let classInterpolations = []
+            let mergedProps = props
+            if (props.theme == null) {
+              mergedProps = {}
+              for (let key in props) {
+                mergedProps[key] = props[key]
+              }
+              mergedProps.theme = theme
+            }
+
+            if (typeof props.className === 'string') {
+              className += getRegisteredStyles(
+                context.registered,
+                classInterpolations,
+                props.className
+              )
+            }
+            const serialized = serializeStyles(
+              context.registered,
+              styles.concat(classInterpolations),
+              mergedProps
+            )
+            const rules = insertStyles(context, serialized, isStringTag)
+            className += `${context.key}-${serialized.name}`
+            if (targetClassName !== undefined) {
+              className += ` ${targetClassName}`
+            }
+            let newProps = {}
+
+            for (let key in props) {
+              if (
+                // $FlowFixMe
+                shouldForwardProp(key)
+              ) {
+                newProps[key] = props[key]
+              }
+            }
+
+            newProps.className = className
+            if (process.env.PREACT) {
+              if (props.innerRef != null) {
+                newProps.ref = props.innerRef
+              }
+            } else {
+              newProps.ref = ref
+              if (process.env.NODE_ENV !== 'production' && props.innerRef) {
+                console.error(
+                  '`innerRef` is no longer allowed, please use the `ref` prop instead'
+                )
+              }
+            }
+
+            const ele = React.createElement(baseTag, newProps)
+            if (!isBrowser && rules !== undefined) {
+              let serializedNames = serialized.name
+              let next = serialized.next
+              while (next !== undefined) {
+                serializedNames += ' ' + next.name
+                next = next.next
+              }
+              return (
+                <React.Fragment>
+                  <style
+                    {...{
+                      [`data-emotion-${context.key}`]: serializedNames,
+                      dangerouslySetInnerHTML: { __html: rules },
+                      nonce: context.sheet.nonce
+                    }}
+                  />
+                  {ele}
+                </React.Fragment>
+              )
+            }
+            return ele
+          }}
+        </ThemeContext.Consumer>
       )
-      if (!isBrowser && rules !== undefined) {
-        return (
-          <React.Fragment>
-            <style
-              {...{
-                [`data-emotion-${context.key}`]: serialized.name,
-                dangerouslySetInnerHTML: { __html: rules },
-                nonce: context.sheet.nonce
-              }}
-            />
-            {ele}
-          </React.Fragment>
-        )
-      }
-      return ele
     })
@@ -137,22 +189,10 @@
           })`
-    let FinalStyled = process.env.PREACT
-      ? Styled
-      : // $FlowFixMe
-        React.forwardRef((props, ref) => {
-          // this avoids creating a new object if there's no ref
-          return (
-            <Styled
-              {...(ref === null
-                ? props
-                : pickAssign(testAlwaysTrue, { innerRef: ref }, props))}
-            />
-          )
-        })
 
-    FinalStyled.__emotion_real = FinalStyled
-    FinalStyled.__emotion_base = baseTag
-    FinalStyled.__emotion_styles = styles
-    FinalStyled.__emotion_forwardProp = shouldForwardProp
+    Styled.defaultProps = tag.defaultProps
+    Styled.__emotion_real = Styled
+    Styled.__emotion_base = baseTag
+    Styled.__emotion_styles = styles
+    Styled.__emotion_forwardProp = shouldForwardProp
 
-    Object.defineProperty(FinalStyled, 'toString', {
+    Object.defineProperty(Styled, 'toString', {
       value() {
@@ -170,3 +210,3 @@ if (
 
-    FinalStyled.withComponent = (
+    Styled.withComponent = (
       nextTag: ElementType,
@@ -178,7 +218,7 @@ nextOptions?: StyledOptions
         nextOptions !== undefined
-          ? pickAssign(testAlwaysTrue, {}, options || {}, nextOptions)
+          ? { ...(options || {}), ...nextOptions }
           : options
       )(...styles)
     }
-    return FinalStyled
+    return Styled
   }
@@ -185,0 +225,0 @@ }

src/utils.js

@@ -10,23 +10,3 @@ // @flow
   key !== 'theme' && key !== 'innerRef'
-export const testAlwaysTrue = () => true
 
-export const pickAssign: (
-  testFn: (key: string) => boolean,
-  target: {},
-  ...sources: Array<{}>
-) => Object = function(testFn, target) {
-  let i = 2
-  let length = arguments.length
-  for (; i < length; i++) {
-    let source = arguments[i]
-    let key
-    for (key in source) {
-      if (testFn(key)) {
-        target[key] = source[key]
-      }
-    }
-  }
-  return target
-}
-
 export type StyledOptions = {
@@ -33,0 +13,0 @@ label?: string,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

78370

increased by25.63%

Number of package files

13

increased by8.33%

Lines of code

1018

increased by40.22%

Worsened metrics

Number of low supply chain risk alerts

16

increased by33.33%

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/is-prop-valid@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/serialize@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/is-prop-valid@0.6.8(transitive)

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

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

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