@emotion/styled-base - npm Package Compare versions

Comparing version 0.10.1 to 0.10.2

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(g,d){"use strict";function e(t){var r={};return function(e){return void 0===r[e]&&(r[e]=t(e)),r[e]}}var t=e(RegExp.prototype.test.bind(/^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|accept|acceptCharset|accessKey|action|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|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)-.*))$/i)),r=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 n={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},o=/[A-Z]|^ms/g,i=e(function(e){return e.replace(o,"-$&").toLowerCase()}),a=function(e,t){return null==t||"boolean"==typeof t?"":1===n[e]||45===e.charCodeAt(1)||isNaN(t)||0===t?t:t+"px"};function k(e,t){if(null==t)return"";if(void 0!==t.__emotion_styles)return t.toString(),t;switch(typeof t){case"boolean":return"";case"object":return 2===t.type?t.name:void 0!==t.styles?t.styles:function(r,e){var n="";Array.isArray(e)?e.forEach(function(e){n+=k.call(this,r,e)},this):Object.keys(e).forEach(function(t){"object"!=typeof e[t]?n+=i(t)+":"+a(t,e[t])+";":Array.isArray(e[t])&&"string"==typeof e[t][0]&&void 0===r[e[t][0]]?e[t].forEach(function(e){n+=i(t)+":"+a(t,e)+";"}):n+=t+"{"+k.call(this,r,e[t])+"}"},this);return n}.call(this,e,t);case"function":if(void 0!==this)return k.call(this,e,t(this));default:var r=e[t];return void 0!==r?r:t}}var x=/label:\s*([^\s;\n{]+)\s*;/g;return function i(a,s){var l,f,m;void 0!==s&&(l=s.label,m=s.target,f=a.__emotion_forwardProp&&s.shouldForwardProp?function(e){return a.__emotion_forwardProp(e)&&s.shouldForwardProp(e)}:s.shouldForwardProp);var c=a.__emotion_real===a,h=c&&a.__emotion_base||a;return"function"!=typeof f&&(f="string"==typeof h&&96<h.charCodeAt(0)?t:r),function(){var e=arguments,p=c&&void 0!==a.__emotion_styles?a.__emotion_styles.slice(0):[];if(void 0!==l&&p.push("label:"+l+";"),null==e[0]||void 0===e[0].raw)p.push.apply(p,e);else{p.push(e[0][0]);for(var t=e.length,r=1;r<t;r++)p.push(e[r],e[0][r])}var n=d.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,d,u=function(r,e){if(1===e.length&&"object"==typeof e[0]&&null!==e[0]&&void 0!==e[0].styles)return e[0];var n="",o="";return e.forEach(function(e,t){n+=k.call(this,r,e)},this),{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)}(n=n.replace(x,function(e,t){return o+="-"+t,""}))+o,styles:n}}.call(l,t.registered,p.concat(s));return d=u,void 0===(c=t).registered[c.key+"-"+d.name]&&(c.registered[c.key+"-"+d.name]=d.styles),void 0===c.inserted[d.name]&&(c.stylis("."+c.key+"-"+d.name,d.styles).forEach(function(e){c.sheet.insert(e)}),c.inserted[d.name]=!0),a+=t.key+"-"+u.name,void 0!==m&&(a+=" "+m),g.createElement(h,v(f,{},e,{className:a,ref:e.innerRef}))});n.displayName=void 0!==l?l:"Styled("+("string"==typeof h?h:h.displayName||h.name||"Component")+")";var o=g.forwardRef(function(e,t){return null===t?g.createElement(n,e):g.createElement(n,v(y,{innerRef:t},e))});return(o.__emotion_real=o).__emotion_base=h,o.__emotion_styles=p,o.__emotion_forwardProp=f,Object.defineProperty(o,"toString",{enumerable:!1,value:function(){return"."+m}}),o.withComponent=function(e,t){return i(e,void 0!==t?v(y,{},s||{},t):s).apply(void 0,p)},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(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=e(RegExp.prototype.test.bind(/^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|accept|acceptCharset|accessKey|action|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|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)-.*))$/i)),r=function(e){return"theme"!==e&&"innerRef"!==e},y=function(){return!0},v=function(e,t){for(var r=2,o=arguments.length;r<o;r++){var n=arguments[r],i=void 0;for(i in n)e(i)&&(t[i]=n[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},n=/[A-Z]|^ms/g,i=e(function(e){return e.replace(n,"-$&").toLowerCase()}),a=function(e,t){return null==t||"boolean"==typeof t?"":1===o[e]||45===e.charCodeAt(1)||isNaN(t)||0===t?t:t+"px"};function k(e,t){if(null==t)return"";if(void 0!==t.__emotion_styles)return t.toString(),t;switch(typeof t){case"boolean":return"";case"object":return 2===t.type?t.name:void 0!==t.styles?t.styles:function(r,e){var o="";Array.isArray(e)?e.forEach(function(e){o+=k.call(this,r,e)},this):Object.keys(e).forEach(function(t){"object"!=typeof e[t]?o+=i(t)+":"+a(t,e[t])+";":Array.isArray(e[t])&&"string"==typeof e[t][0]&&void 0===r[e[t][0]]?e[t].forEach(function(e){o+=i(t)+":"+a(t,e)+";"}):o+=t+"{"+k.call(this,r,e[t])+"}"},this);return o}.call(this,e,t);case"function":if(void 0!==this)return k.call(this,e,t(this));default:var r=e[t];return void 0!==r?r:t}}var x=/label:\s*([^\s;\n{]+)\s*;/g;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)?t:r),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 o=g.withCSSContext(function(e,t){var r,o,n,i,a="",s=[],l=v(y,{},e,{theme:e.theme||t.theme});"string"==typeof e.className&&(a+=(r=t.registered,o=s,n=e.className,i="",n.split(" ").forEach(function(e){void 0!==r[e]?o.push(r[e]):i+=e+" "}),i));var c=function(r,e){if(1===e.length&&"object"==typeof e[0]&&null!==e[0]&&void 0!==e[0].styles)return e[0];var o="",n="";return e.forEach(function(e,t){o+=k.call(this,r,e)},this),{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)}(o=o.replace(x,function(e,t){return n+="-"+t,""}))+n,styles:o}}.call(l,t.registered,d.concat(s));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 o=e.stylis("."+e.key+"-"+t.name,t.styles);e.inserted[t.name]=!0,o.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}))});o.displayName=void 0!==l?l:"Styled("+("string"==typeof f?f:f.displayName||f.name||"Component")+")";var n=h.forwardRef(function(e,t){return h.createElement(o,null===t?e:v(y,{innerRef:t},e))});return(n.__emotion_real=n).__emotion_base=f,n.__emotion_styles=d,n.__emotion_forwardProp=u,Object.defineProperty(n,"toString",{enumerable:!1,value:function(){return"."+p}}),n.withComponent=function(e,t){return i(e,void 0!==t?v(y,{},s||{},t):s).apply(void 0,d)},n}}});
 //# sourceMappingURL=index.min.js.map

dist/styled-base.browser.cjs.js

@@ -59,5 +59,6 @@ 'use strict';
   var baseTag = isReal && tag.__emotion_base || tag;
+  var isStringTag = typeof baseTag === 'string';
 
   if (typeof shouldForwardProp !== 'function') {
-    shouldForwardProp = typeof baseTag === 'string' && // 96 is one less than the char code
+    shouldForwardProp = isStringTag && // 96 is one less than the char code
     // for "a" so this is checking that
@@ -100,3 +101,3 @@ // it's a lowercase character
       var serialized = serialize.serializeStyles.call(mergedProps, context.registered, styles.concat(classInterpolations));
-      var rules = utils.insertStyles(context, serialized);
+      var rules = utils.insertStyles(context, serialized, isStringTag);
       className += context.key + "-" + serialized.name;
@@ -116,11 +117,6 @@
     });
-    Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")"; // $FlowFixMe
-
+    Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
     var FinalStyled = React.forwardRef(function (props, ref) {
-      if (ref === null) {
-        // this avoids creating a new object if there's no ref
-        return React.createElement(Styled, props);
-      }
-
-      return React.createElement(Styled, pickAssign(testAlwaysTrue, {
+      // this avoids creating a new object if there's no ref
+      return React.createElement(Styled, ref === null ? props : pickAssign(testAlwaysTrue, {
         innerRef: ref
@@ -154,2 +150,1 @@ }, props));
 module.exports = createStyled;
-//# sourceMappingURL=styled-base.browser.cjs.js.map

dist/styled-base.browser.esm.js

@@ -55,5 +55,6 @@ import { createElement, forwardRef } from 'react';
   var baseTag = isReal && tag.__emotion_base || tag;
+  var isStringTag = typeof baseTag === 'string';
 
   if (typeof shouldForwardProp !== 'function') {
-    shouldForwardProp = typeof baseTag === 'string' && // 96 is one less than the char code
+    shouldForwardProp = isStringTag && // 96 is one less than the char code
     // for "a" so this is checking that
@@ -96,3 +97,3 @@ // it's a lowercase character
       var serialized = serializeStyles.call(mergedProps, context.registered, styles.concat(classInterpolations));
-      var rules = insertStyles(context, serialized);
+      var rules = insertStyles(context, serialized, isStringTag);
       className += context.key + "-" + serialized.name;
@@ -112,11 +113,6 @@
     });
-    Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")"; // $FlowFixMe
-
+    Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
     var FinalStyled = forwardRef(function (props, ref) {
-      if (ref === null) {
-        // this avoids creating a new object if there's no ref
-        return createElement(Styled, props);
-      }
-
-      return createElement(Styled, pickAssign(testAlwaysTrue, {
+      // this avoids creating a new object if there's no ref
+      return createElement(Styled, ref === null ? props : pickAssign(testAlwaysTrue, {
         innerRef: ref
@@ -150,2 +146,1 @@ }, props));
 export default createStyled;
-//# sourceMappingURL=styled-base.browser.esm.js.map

dist/styled-base.cjs.js

@@ -59,5 +59,6 @@ 'use strict';
   var baseTag = isReal && tag.__emotion_base || tag;
+  var isStringTag = typeof baseTag === 'string';
 
   if (typeof shouldForwardProp !== 'function') {
-    shouldForwardProp = typeof baseTag === 'string' && // 96 is one less than the char code
+    shouldForwardProp = isStringTag && // 96 is one less than the char code
     // for "a" so this is checking that
@@ -100,3 +101,3 @@ // it's a lowercase character
       var serialized = serialize.serializeStyles.call(mergedProps, context.registered, styles.concat(classInterpolations));
-      var rules = utils.insertStyles(context, serialized);
+      var rules = utils.insertStyles(context, serialized, isStringTag);
       className += context.key + "-" + serialized.name;
@@ -114,3 +115,3 @@
 
-      if (utils.shouldSerializeToReactTree && rules !== undefined) {
+      if (!utils.isBrowser && rules !== undefined) {
         var _ref;
@@ -120,3 +121,3 @@
           __html: rules
-        }, _ref)), ele);
+        }, _ref.nonce = context.sheet.nonce, _ref)), ele);
       }
@@ -126,11 +127,6 @@
     });
-    Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")"; // $FlowFixMe
-
+    Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
     var FinalStyled = React.forwardRef(function (props, ref) {
-      if (ref === null) {
-        // this avoids creating a new object if there's no ref
-        return React.createElement(Styled, props);
-      }
-
-      return React.createElement(Styled, pickAssign(testAlwaysTrue, {
+      // this avoids creating a new object if there's no ref
+      return React.createElement(Styled, ref === null ? props : pickAssign(testAlwaysTrue, {
         innerRef: ref
@@ -164,2 +160,1 @@ }, props));
 module.exports = createStyled;
-//# sourceMappingURL=styled-base.cjs.js.map

dist/styled-base.esm.js

 import { createElement, Fragment, forwardRef } from 'react';
 import isPropValid from '@emotion/is-prop-valid';
 import { withCSSContext } from '@emotion/core';
-import { getRegisteredStyles, insertStyles, shouldSerializeToReactTree } from '@emotion/utils';
+import { getRegisteredStyles, insertStyles, isBrowser } from '@emotion/utils';
 import { serializeStyles } from '@emotion/serialize';
@@ -55,5 +55,6 @@
   var baseTag = isReal && tag.__emotion_base || tag;
+  var isStringTag = typeof baseTag === 'string';
 
   if (typeof shouldForwardProp !== 'function') {
-    shouldForwardProp = typeof baseTag === 'string' && // 96 is one less than the char code
+    shouldForwardProp = isStringTag && // 96 is one less than the char code
     // for "a" so this is checking that
@@ -96,3 +97,3 @@ // it's a lowercase character
       var serialized = serializeStyles.call(mergedProps, context.registered, styles.concat(classInterpolations));
-      var rules = insertStyles(context, serialized);
+      var rules = insertStyles(context, serialized, isStringTag);
       className += context.key + "-" + serialized.name;
@@ -110,3 +111,3 @@
 
-      if (shouldSerializeToReactTree && rules !== undefined) {
+      if (!isBrowser && rules !== undefined) {
         var _ref;
@@ -116,3 +117,3 @@
           __html: rules
-        }, _ref)), ele);
+        }, _ref.nonce = context.sheet.nonce, _ref)), ele);
       }
@@ -122,11 +123,6 @@
     });
-    Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")"; // $FlowFixMe
-
+    Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
     var FinalStyled = forwardRef(function (props, ref) {
-      if (ref === null) {
-        // this avoids creating a new object if there's no ref
-        return createElement(Styled, props);
-      }
-
-      return createElement(Styled, pickAssign(testAlwaysTrue, {
+      // this avoids creating a new object if there's no ref
+      return createElement(Styled, ref === null ? props : pickAssign(testAlwaysTrue, {
         innerRef: ref
@@ -160,2 +156,1 @@ }, props));
 export default createStyled;
-//# sourceMappingURL=styled-base.esm.js.map

package.json

 {
   "name": "@emotion/styled-base",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "base styled API for emotion",
@@ -15,4 +15,4 @@ "main": "dist/styled-base.cjs.js",
     "@emotion/is-prop-valid": "^0.6.5",
-    "@emotion/serialize": "^0.8.5",
-    "@emotion/utils": "^0.7.3"
+    "@emotion/serialize": "^0.8.6",
+    "@emotion/utils": "^0.8.0"
   },
@@ -19,0 +19,0 @@ "peerDependencies": {

src/index.js

@@ -13,9 +13,11 @@ // @flow
 import { withCSSContext } from '@emotion/core'
-import {
-  getRegisteredStyles,
-  insertStyles,
-  shouldSerializeToReactTree
-} from '@emotion/utils'
+import { getRegisteredStyles, insertStyles, isBrowser } from '@emotion/utils'
 import { serializeStyles } from '@emotion/serialize'
 
+type StyledComponent = (
+  props: *
+) => React.Node & {
+  withComponent(nextTag: ElementType, nextOptions?: StyledOptions): *
+}
+
 let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
@@ -45,5 +47,6 @@ if (process.env.NODE_ENV !== 'production') {
   const baseTag = (isReal && tag.__emotion_base) || tag
+  let isStringTag = typeof baseTag === 'string'
   if (typeof shouldForwardProp !== 'function') {
     shouldForwardProp =
-      typeof baseTag === 'string' &&
+      isStringTag &&
       // 96 is one less than the char code
@@ -57,3 +60,3 @@ // for "a" so this is checking that
 
-  return function() {
+  return function(): StyledComponent {
     let args = arguments
@@ -78,3 +81,3 @@ let styles =
 
-    const Styled = withCSSContext((props, context) => {
+    const Styled: any = withCSSContext((props, context) => {
       let className = ''
@@ -97,3 +100,3 @@ let classInterpolations = []
       )
-      const rules = insertStyles(context, serialized)
+      const rules = insertStyles(context, serialized, isStringTag)
       className += `${context.key}-${serialized.name}`
@@ -112,3 +115,3 @@ if (targetClassName !== undefined) {
       )
-      if (shouldSerializeToReactTree && rules !== undefined) {
+      if (!isBrowser && rules !== undefined) {
         return (
@@ -119,3 +122,4 @@ <React.Fragment>
                 [`data-emotion-${context.key}`]: serialized.name,
-                dangerouslySetInnerHTML: { __html: rules }
+                dangerouslySetInnerHTML: { __html: rules },
+                nonce: context.sheet.nonce
               }}
@@ -138,14 +142,16 @@ />
           })`
+    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))}
+            />
+          )
+        })
 
-    // $FlowFixMe
-    const FinalStyled = React.forwardRef((props, ref) => {
-      if (ref === null) {
-        // this avoids creating a new object if there's no ref
-        return <Styled {...props} />
-      }
-      return (
-        <Styled {...pickAssign(testAlwaysTrue, { innerRef: ref }, props)} />
-      )
-    })
-
     FinalStyled.__emotion_real = FinalStyled
@@ -152,0 +158,0 @@ FinalStyled.__emotion_base = baseTag

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

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

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

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

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

57798

decreased by-41.19%

Number of package files

11

decreased by-26.67%

Lines of code

730

decreased by-0.82%

Number of low supply chain risk alerts

12

increased by9.09%

Dependency changes

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

• Updated@emotion/serialize@^0.8.6

• Updated@emotion/utils@^0.8.0