Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

create-emotion

Package Overview
Dependencies
Maintainers
2
Versions
54
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

create-emotion - npm Package Compare versions

Comparing version 9.2.12 to 10.0.0-beta.0

dist/index.browser.cjs.js
dist/index.browser.esm.js
dist/index.cjs.dev.js
dist/index.cjs.js.flow
dist/index.cjs.prod.js

2

dist/emotion.umd.min.js

@@ -1,2 +0,2 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.createEmotion=t()}(this,function(){"use strict";function y(e){function _(e,t,r){var a=t.trim().split(u),c=(t=a).length,i=e.length;switch(i){case 0:case 1:var s=0;for(e=0===i?"":e[0]+" ";s<c;++s)t[s]=f(e,t[s],r).trim();break;default:var n=s=0;for(t=[];s<c;++s)for(var o=0;o<i;++o)t[n++]=f(e[o]+" ",a[s],r).trim()}return t}function f(e,t,r){var a=t.charCodeAt(0);switch(a<33&&(a=(t=t.trim()).charCodeAt(0)),a){case 38:return t.replace(c,"$1"+e.trim());case 58:return e.trim()+t.replace(c,"$1"+e.trim());default:if(0<1*r&&0<t.indexOf("\f"))return t.replace(c,(58===e.charCodeAt(0)?"":"$1")+e.trim())}return e+t}function j(e,t,r,a){var c=e+";",i=2*t+3*r+4*a;if(944===i){e=c.indexOf(":",9)+1;var s=c.substring(e,c.length-1).trim();return s=c.substring(0,e).trim()+s+";",1===D||2===D&&$(s,1)?"-webkit-"+s+s:s}if(0===D||2===D&&!$(c,1))return c;switch(i){case 1015:return 97===c.charCodeAt(10)?"-webkit-"+c+c:c;case 951:return 116===c.charCodeAt(3)?"-webkit-"+c+c:c;case 963:return 110===c.charCodeAt(5)?"-webkit-"+c+c:c;case 1009:if(100!==c.charCodeAt(4))break;case 969:case 942:return"-webkit-"+c+c;case 978:return"-webkit-"+c+"-moz-"+c+c;case 1019:case 983:return"-webkit-"+c+"-moz-"+c+"-ms-"+c+c;case 883:if(45===c.charCodeAt(8))return"-webkit-"+c+c;if(0<c.indexOf("image-set(",11))return c.replace(k,"$1-webkit-$2")+c;break;case 932:if(45===c.charCodeAt(4))switch(c.charCodeAt(5)){case 103:return"-webkit-box-"+c.replace("-grow","")+"-webkit-"+c+"-ms-"+c.replace("grow","positive")+c;case 115:return"-webkit-"+c+"-ms-"+c.replace("shrink","negative")+c;case 98:return"-webkit-"+c+"-ms-"+c.replace("basis","preferred-size")+c}return"-webkit-"+c+"-ms-"+c+c;case 964:return"-webkit-"+c+"-ms-flex-"+c+c;case 1023:if(99!==c.charCodeAt(8))break;return"-webkit-box-pack"+(s=c.substring(c.indexOf(":",15)).replace("flex-","").replace("space-between","justify"))+"-webkit-"+c+"-ms-flex-pack"+s+c;case 1005:return o.test(c)?c.replace(n,":-webkit-")+c.replace(n,":-moz-")+c:c;case 1e3:switch(t=(s=c.substring(13).trim()).indexOf("-")+1,s.charCodeAt(0)+s.charCodeAt(t)){case 226:s=c.replace(h,"tb");break;case 232:s=c.replace(h,"tb-rl");break;case 220:s=c.replace(h,"lr");break;default:return c}return"-webkit-"+c+"-ms-"+s+c;case 1017:if(-1===c.indexOf("sticky",9))break;case 975:switch(t=(c=e).length-10,i=(s=(33===c.charCodeAt(t)?c.substring(0,t):c).substring(e.indexOf(":",7)+1).trim()).charCodeAt(0)+(0|s.charCodeAt(7))){case 203:if(s.charCodeAt(8)<111)break;case 115:c=c.replace(s,"-webkit-"+s)+";"+c;break;case 207:case 102:c=c.replace(s,"-webkit-"+(102<i?"inline-":"")+"box")+";"+c.replace(s,"-webkit-"+s)+";"+c.replace(s,"-ms-"+s+"box")+";"+c}return c+";";case 938:if(45===c.charCodeAt(5))switch(c.charCodeAt(6)){case 105:return s=c.replace("-items",""),"-webkit-"+c+"-webkit-box-"+s+"-ms-flex-"+s+c;case 115:return"-webkit-"+c+"-ms-flex-item-"+c.replace(b,"")+c;default:return"-webkit-"+c+"-ms-flex-line-pack"+c.replace("align-content","").replace(b,"")+c}break;case 973:case 989:if(45!==c.charCodeAt(3)||122===c.charCodeAt(4))break;case 931:case 953:if(!0===p.test(e))return 115===(s=e.substring(e.indexOf(":")+1)).charCodeAt(0)?j(e.replace("stretch","fill-available"),t,r,a).replace(":fill-available",":stretch"):c.replace(s,"-webkit-"+s)+c.replace(s,"-moz-"+s.replace("fill-",""))+c;break;case 962:if(c="-webkit-"+c+(102===c.charCodeAt(5)?"-ms-"+c:"")+c,211===r+a&&105===c.charCodeAt(13)&&0<c.indexOf("transform",10))return c.substring(0,c.indexOf(";",27)+1).replace(l,"$1-webkit-$2")+c}return c}function $(e,t){var r=e.indexOf(1===t?":":"{"),a=e.substring(0,3!==t?r:10);return r=e.substring(r+1,e.length-1),s(2!==t?a:a.replace(i,"$1"),r,t)}function z(e,t){var r=j(t,t.charCodeAt(0),t.charCodeAt(1),t.charCodeAt(2));return r!==t+";"?r.replace(a," or ($1)").substring(4):"("+t+")"}function N(e,t,r,a,c,i,s,n,o,f){for(var l,u=0,h=t;u<q;++u)switch(l=g[u].call(d,e,h,r,a,c,i,s,n,o,f)){case void 0:case!1:case!0:case null:break;default:h=l}if(h!==t)return h}function t(e){return void 0!==(e=e.prefix)&&(s=null,e?"function"!=typeof e?D=1:(D=2,s=e):D=0),t}function d(e,t){var r=e;if(r.charCodeAt(0)<33&&(r=r.trim()),r=[r],0<q){var a=N(-1,t,r,r,P,F,0,0,0,0);void 0!==a&&"string"==typeof a&&(t=a)}var c=function e(t,r,a,c,i){for(var s,n,o,f,l,u=0,h=0,d=0,b=0,p=0,k=0,g=o=s=0,w=0,v=0,m=0,A=0,C=a.length,y=C-1,x="",E="",O="",S="";w<C;){if(n=a.charCodeAt(w),w===y&&0!==h+b+d+u&&(0!==h&&(n=47===h?10:47),b=d=u=0,C++,y++),0===h+b+d+u){if(w===y&&(0<v&&(x=x.replace(I,"")),0<x.trim().length)){switch(n){case 32:case 9:case 59:case 13:case 10:break;default:x+=a.charAt(w)}n=59}switch(n){case 123:for(s=(x=x.trim()).charCodeAt(0),o=1,A=++w;w<C;){switch(n=a.charCodeAt(w)){case 123:o++;break;case 125:o--;break;case 47:switch(n=a.charCodeAt(w+1)){case 42:case 47:e:{for(g=w+1;g<y;++g)switch(a.charCodeAt(g)){case 47:if(42===n&&42===a.charCodeAt(g-1)&&w+2!==g){w=g+1;break e}break;case 10:if(47===n){w=g+1;break e}}w=g}}break;case 91:n++;case 40:n++;case 34:case 39:for(;w++<y&&a.charCodeAt(w)!==n;);}if(0===o)break;w++}switch(o=a.substring(A,w),0===s&&(s=(x=x.replace(R,"").trim()).charCodeAt(0)),s){case 64:switch(0<v&&(x=x.replace(I,"")),n=x.charCodeAt(1)){case 100:case 109:case 115:case 45:v=r;break;default:v=L}if(A=(o=e(r,v,o,n,i+1)).length,0<q&&(l=N(3,o,v=_(L,x,m),r,P,F,A,n,i,c),x=v.join(""),void 0!==l&&0===(A=(o=l.trim()).length)&&(n=0,o="")),0<A)switch(n){case 115:x=x.replace(G,z);case 100:case 109:case 45:o=x+"{"+o+"}";break;case 107:o=(x=x.replace(T,"$1 $2"))+"{"+o+"}",o=1===D||2===D&&$("@"+o,3)?"@-webkit-"+o+"@"+o:"@"+o;break;default:o=x+o,112===c&&(E+=o,o="")}else o="";break;default:o=e(r,_(r,x,m),o,c,i+1)}O+=o,o=m=v=g=s=0,x="",n=a.charCodeAt(++w);break;case 125:case 59:if(1<(A=(x=(0<v?x.replace(I,""):x).trim()).length))switch(0===g&&(s=x.charCodeAt(0),45===s||96<s&&s<123)&&(A=(x=x.replace(" ",":")).length),0<q&&void 0!==(l=N(1,x,r,t,P,F,E.length,c,i,c))&&0===(A=(x=l.trim()).length)&&(x="\0\0"),s=x.charCodeAt(0),n=x.charCodeAt(1),s){case 0:break;case 64:if(105===n||99===n){S+=x+a.charAt(w);break}default:58!==x.charCodeAt(A-1)&&(E+=j(x,s,n,x.charCodeAt(2)))}m=v=g=s=0,x="",n=a.charCodeAt(++w)}}switch(n){case 13:case 10:47===h?h=0:0===1+s&&107!==c&&0<x.length&&(v=1,x+="\0"),0<q*H&&N(0,x,r,t,P,F,E.length,c,i,c),F=1,P++;break;case 59:case 125:if(0===h+b+d+u){F++;break}default:switch(F++,f=a.charAt(w),n){case 9:case 32:if(0===b+u+h)switch(p){case 44:case 58:case 9:case 32:f="";break;default:32!==n&&(f=" ")}break;case 0:f="\\0";break;case 12:f="\\f";break;case 11:f="\\v";break;case 38:0===b+h+u&&(v=m=1,f="\f"+f);break;case 108:if(0===b+h+u+B&&0<g)switch(w-g){case 2:112===p&&58===a.charCodeAt(w-3)&&(B=p);case 8:111===k&&(B=k)}break;case 58:0===b+h+u&&(g=w);break;case 44:0===h+d+b+u&&(v=1,f+="\r");break;case 34:case 39:0===h&&(b=b===n?0:0===b?n:b);break;case 91:0===b+h+d&&u++;break;case 93:0===b+h+d&&u--;break;case 41:0===b+h+u&&d--;break;case 40:if(0===b+h+u){if(0===s)switch(2*p+3*k){case 533:break;default:s=1}d++}break;case 64:0===h+d+b+u+g+o&&(o=1);break;case 42:case 47:if(!(0<b+u+d))switch(h){case 0:switch(2*n+3*a.charCodeAt(w+1)){case 235:h=47;break;case 220:A=w,h=42}break;case 42:47===n&&42===p&&A+2!==w&&(33===a.charCodeAt(A+2)&&(E+=a.substring(A,w+1)),f="",h=0)}}0===h&&(x+=f)}k=p,p=n,w++}if(0<(A=E.length)){if(v=r,0<q&&void 0!==(l=N(2,E,v,t,P,F,A,c,i,c))&&0===(E=l).length)return S+E+O;if(E=v.join(",")+"{"+E+"}",0!=D*B){switch(2!==D||$(E,2)||(B=0),B){case 111:E=E.replace(W,":-moz-$1")+E;break;case 112:E=E.replace(M,"::-webkit-input-$1")+E.replace(M,"::-moz-$1")+E.replace(M,":-ms-input-$1")+E}B=0}}return S+E+O}(L,r,t,0,0);return 0<q&&(void 0!==(a=N(-2,c,r,r,P,F,c.length,0,0,0))&&(c=a)),"",B=0,F=P=1,c}var R=/^\0+/g,I=/[\0\r\f]/g,n=/: */g,o=/zoo|gra/,l=/([,: ])(transform)/g,u=/,\r+?/g,c=/([\t\r\n ])*\f?&/g,T=/@(k\w+)\s*(\S*)\s*/,M=/::(place)/g,W=/:(read-only)/g,h=/[svh]\w+-[tblr]{2}/,G=/\(\s*(.*)\s*\)/g,a=/([\s\S]*?);/g,b=/-self|flex-/g,i=/[^]*?(:[rp][el]a[\w-]+)[^]*/,p=/stretch|:\s*\w+\-(?:conte|avail)/,k=/([^-])(image-set\()/,F=1,P=1,B=0,D=1,L=[],g=[],q=0,s=null,H=0;return d.use=function e(t){switch(t){case void 0:case null:q=g.length=0;break;default:switch(t.constructor){case Array:for(var r=0,a=t.length;r<a;++r)e(t[r]);break;case Function:g[q++]=t;break;case Boolean:H=0|!!t}}return e},d.set=t,void 0!==e&&t(e),d}var e,x=(function(e,t){e.exports=function(l){var u="/*|*/";function h(e){if(e)try{l(e+"}")}catch(e){}}return function(e,t,r,a,c,i,s,n,o,f){switch(e){case 1:if(0===o&&64===t.charCodeAt(0))return l(t+";"),"";break;case 2:if(0===n)return t+u;break;case 3:switch(n){case 102:case 112:return l(r[0]+t),"";default:return t+(0===f?u:"")}case-2:t.split("/*|*/}").forEach(h)}}}}(e={exports:{}},e.exports),e.exports);var t,r,a={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},c=/[A-Z]|^ms/g,E=(t=function(e){return e.replace(c,"-$&").toLowerCase()},r={},function(e){return void 0===r[e]&&(r[e]=t(e)),r[e]}),O=function(e,t){return null==t||"boolean"==typeof t?"":1===a[e]||45===e.charCodeAt(1)||isNaN(t)||0===t?t:t+"px"},S="undefined"!=typeof document;function i(e){var t=document.createElement("style");return t.setAttribute("data-emotion",e.key||""),void 0!==e.nonce&&t.setAttribute("nonce",e.nonce),t.appendChild(document.createTextNode("")),(void 0!==e.container?e.container:document.head).appendChild(t),t}var _=function(){function e(e){this.isSpeedy=!0,this.tags=[],this.ctr=0,this.opts=e}var t=e.prototype;return t.inject=function(){if(this.injected)throw new Error("already injected!");this.tags[0]=i(this.opts),this.injected=!0},t.speedy=function(e){if(0!==this.ctr)throw new Error("cannot change speedy now");this.isSpeedy=!!e},t.insert=function(e,t){if(this.isSpeedy){var r=function(e){if(e.sheet)return e.sheet;for(var t=0;t<document.styleSheets.length;t++)if(document.styleSheets[t].ownerNode===e)return document.styleSheets[t]}(this.tags[this.tags.length-1]);try{r.insertRule(e,r.cssRules.length)}catch(e){}}else{var a=i(this.opts);this.tags.push(a),a.appendChild(document.createTextNode(e+(t||"")))}this.ctr++,this.ctr%65e3==0&&this.tags.push(i(this.opts))},t.flush=function(){this.tags.forEach(function(e){return e.parentNode.removeChild(e)}),this.tags=[],this.ctr=0,this.injected=!1},e}();return function(e,t){if(void 0!==e.__SECRET_EMOTION__)return e.__SECRET_EMOTION__;void 0===t&&(t={});var r,a,c=t.key||"css",i=x(function(e){r+=e,S&&n.insert(e,f)});void 0!==t.prefix&&(a={prefix:t.prefix});var s={registered:{},inserted:{},nonce:t.nonce,key:c},n=new _(t);S&&n.inject();var o=new y(a);o.use(t.stylisPlugins)(i);var f="";function l(e,t){if(null==e)return"";switch(typeof e){case"boolean":return"";case"function":if(void 0!==e.__emotion_styles){var r=e.toString();return r}return l.call(this,void 0===this?e():e(this.mergedProps,this.context),t);case"object":return function(e){if(d.has(e))return d.get(e);var r="";return Array.isArray(e)?e.forEach(function(e){r+=l.call(this,e,!1)},this):Object.keys(e).forEach(function(t){"object"!=typeof e[t]?void 0!==s.registered[e[t]]?r+=t+"{"+s.registered[e[t]]+"}":r+=E(t)+":"+O(t,e[t])+";":Array.isArray(e[t])&&"string"==typeof e[t][0]&&void 0===s.registered[e[t][0]]?e[t].forEach(function(e){r+=E(t)+":"+O(t,e)+";"}):r+=t+"{"+l.call(this,e[t],!1)+"}"},this),d.set(e,r),r}.call(this,e);default:var a=s.registered[e];return!1===t&&void 0!==a?a:e}}var u,h,d=new WeakMap,b=/label:\s*([^\s;\n{]+)\s*;/g,p=function(r){var e,a=!0,c="",i="";null==r||void 0===r.raw?c+=l.call(this,r,a=!1):c+=r[0];for(var t=arguments.length,s=new Array(1<t?t-1:0),n=1;n<t;n++)s[n-1]=arguments[n];return s.forEach(function(e,t){c+=l.call(this,e,46===c.charCodeAt(c.length-1)),!0===a&&void 0!==r[t+1]&&(c+=r[t+1])},this),c=(h=c).replace(b,function(e,t){return i+="-"+t,""}),u=function(e){for(var t,r=e.length,a=r^r,c=0;4<=r;)t=1540483477*(65535&(t=255&e.charCodeAt(c)|(255&e.charCodeAt(++c))<<8|(255&e.charCodeAt(++c))<<16|(255&e.charCodeAt(++c))<<24))+((1540483477*(t>>>16)&65535)<<16),a=1540483477*(65535&a)+((1540483477*(a>>>16)&65535)<<16)^(t=1540483477*(65535&(t^=t>>>24))+((1540483477*(t>>>16)&65535)<<16)),r-=4,++c;switch(r){case 3:a^=(255&e.charCodeAt(c+2))<<16;case 2:a^=(255&e.charCodeAt(c+1))<<8;case 1:a=1540483477*(65535&(a^=255&e.charCodeAt(c)))+((1540483477*(a>>>16)&65535)<<16)}return a=1540483477*(65535&(a^=a>>>13))+((1540483477*(a>>>16)&65535)<<16),((a^=a>>>15)>>>0).toString(36)}(c+(e=i))+e,c};function k(e,t){void 0===s.inserted[u]&&(r="",o(e,t),s.inserted[u]=r)}var g=function(){var e=p.apply(this,arguments),t=c+"-"+u;return void 0===s.registered[t]&&(s.registered[t]=h),k("."+t,e),t};function w(t,e){var r="";return e.split(" ").forEach(function(e){void 0!==s.registered[e]?t.push(e):r+=e+" "}),r}function v(e,t){var r=[],a=w(r,e);return r.length<2?e:a+g(r,t)}function m(e){s.inserted[e]=!0}if(S){var A=document.querySelectorAll("[data-emotion-"+c+"]");Array.prototype.forEach.call(A,function(e){n.tags[0].parentNode.insertBefore(e,n.tags[0]),e.getAttribute("data-emotion-"+c).split(" ").forEach(m)})}var C={flush:function(){S&&(n.flush(),n.inject()),s.inserted={},s.registered={}},hydrate:function(e){e.forEach(m)},cx:function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return v(function e(t){for(var r=t.length,a=0,c="";a<r;a++){var i=t[a];if(null!=i){var s=void 0;switch(typeof i){case"boolean":break;case"function":s=e([i()]);break;case"object":if(Array.isArray(i))s=e(i);else for(var n in s="",i)i[n]&&n&&(s&&(s+=" "),s+=n);break;default:s=i}s&&(c&&(c+=" "),c+=s)}}return c}(t))},merge:v,getRegisteredStyles:w,injectGlobal:function(){k("",p.apply(this,arguments))},keyframes:function(){var e=p.apply(this,arguments),t="animation-"+u;return k("","@keyframes "+t+"{"+e+"}"),t},css:g,sheet:n,caches:s};return e.__SECRET_EMOTION__=C}});
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):e.createEmotion=r()}(this,function(){"use strict";var c=function(){function e(e){this.isSpeedy=void 0===e.speedy||e.speedy,this.tags=[],this.ctr=0,this.nonce=e.nonce,this.key=e.key,this.container=e.container}var r=e.prototype;return r.insert=function(e){if(this.ctr%(this.isSpeedy?65e3:1)==0){var r,t=(a=this,(s=document.createElement("style")).setAttribute("data-emotion",a.key),void 0!==a.nonce&&s.setAttribute("nonce",a.nonce),s.appendChild(document.createTextNode("")),s);r=0===this.tags.length?this.before:this.tags[this.tags.length-1].nextSibling,this.container.insertBefore(t,r),this.tags.push(t)}var a,s,i=this.tags[this.tags.length-1];if(this.isSpeedy){var n=function(e){if(e.sheet)return e.sheet;for(var r=0;r<document.styleSheets.length;r++)if(document.styleSheets[r].ownerNode===e)return document.styleSheets[r]}(i);try{var c=105===e.charCodeAt(1)&&64===e.charCodeAt(0);n.insertRule(e,c?0:n.cssRules.length)}catch(e){}}else i.appendChild(document.createTextNode(e));this.ctr++},r.flush=function(){this.tags.forEach(function(e){return e.parentNode.removeChild(e)}),this.tags=[],this.ctr=0},e}();function o(e){function E(e,r,t){var a=r.trim().split(u),s=(r=a).length,i=e.length;switch(i){case 0:case 1:var n=0;for(e=0===i?"":e[0]+" ";n<s;++n)r[n]=l(e,r[n],t).trim();break;default:var c=n=0;for(r=[];n<s;++n)for(var o=0;o<i;++o)r[c++]=l(e[o]+" ",a[n],t).trim()}return r}function l(e,r,t){var a=r.charCodeAt(0);switch(a<33&&(a=(r=r.trim()).charCodeAt(0)),a){case 38:return r.replace(s,"$1"+e.trim());case 58:return e.trim()+r.replace(s,"$1"+e.trim());default:if(0<1*t&&0<r.indexOf("\f"))return r.replace(s,(58===e.charCodeAt(0)?"":"$1")+e.trim())}return e+r}function z(e,r,t,a){var s=e+";",i=2*r+3*t+4*a;if(944===i){e=s.indexOf(":",9)+1;var n=s.substring(e,s.length-1).trim();return n=s.substring(0,e).trim()+n+";",1===L||2===L&&j(n,1)?"-webkit-"+n+n:n}if(0===L||2===L&&!j(s,1))return s;switch(i){case 1015:return 97===s.charCodeAt(10)?"-webkit-"+s+s:s;case 951:return 116===s.charCodeAt(3)?"-webkit-"+s+s:s;case 963:return 110===s.charCodeAt(5)?"-webkit-"+s+s:s;case 1009:if(100!==s.charCodeAt(4))break;case 969:case 942:return"-webkit-"+s+s;case 978:return"-webkit-"+s+"-moz-"+s+s;case 1019:case 983:return"-webkit-"+s+"-moz-"+s+"-ms-"+s+s;case 883:if(45===s.charCodeAt(8))return"-webkit-"+s+s;if(0<s.indexOf("image-set(",11))return s.replace(g,"$1-webkit-$2")+s;break;case 932:if(45===s.charCodeAt(4))switch(s.charCodeAt(5)){case 103:return"-webkit-box-"+s.replace("-grow","")+"-webkit-"+s+"-ms-"+s.replace("grow","positive")+s;case 115:return"-webkit-"+s+"-ms-"+s.replace("shrink","negative")+s;case 98:return"-webkit-"+s+"-ms-"+s.replace("basis","preferred-size")+s}return"-webkit-"+s+"-ms-"+s+s;case 964:return"-webkit-"+s+"-ms-flex-"+s+s;case 1023:if(99!==s.charCodeAt(8))break;return"-webkit-box-pack"+(n=s.substring(s.indexOf(":",15)).replace("flex-","").replace("space-between","justify"))+"-webkit-"+s+"-ms-flex-pack"+n+s;case 1005:return o.test(s)?s.replace(c,":-webkit-")+s.replace(c,":-moz-")+s:s;case 1e3:switch(r=(n=s.substring(13).trim()).indexOf("-")+1,n.charCodeAt(0)+n.charCodeAt(r)){case 226:n=s.replace(h,"tb");break;case 232:n=s.replace(h,"tb-rl");break;case 220:n=s.replace(h,"lr");break;default:return s}return"-webkit-"+s+"-ms-"+n+s;case 1017:if(-1===s.indexOf("sticky",9))break;case 975:switch(r=(s=e).length-10,i=(n=(33===s.charCodeAt(r)?s.substring(0,r):s).substring(e.indexOf(":",7)+1).trim()).charCodeAt(0)+(0|n.charCodeAt(7))){case 203:if(n.charCodeAt(8)<111)break;case 115:s=s.replace(n,"-webkit-"+n)+";"+s;break;case 207:case 102:s=s.replace(n,"-webkit-"+(102<i?"inline-":"")+"box")+";"+s.replace(n,"-webkit-"+n)+";"+s.replace(n,"-ms-"+n+"box")+";"+s}return s+";";case 938:if(45===s.charCodeAt(5))switch(s.charCodeAt(6)){case 105:return n=s.replace("-items",""),"-webkit-"+s+"-webkit-box-"+n+"-ms-flex-"+n+s;case 115:return"-webkit-"+s+"-ms-flex-item-"+s.replace(b,"")+s;default:return"-webkit-"+s+"-ms-flex-line-pack"+s.replace("align-content","").replace(b,"")+s}break;case 973:case 989:if(45!==s.charCodeAt(3)||122===s.charCodeAt(4))break;case 931:case 953:if(!0===p.test(e))return 115===(n=e.substring(e.indexOf(":")+1)).charCodeAt(0)?z(e.replace("stretch","fill-available"),r,t,a).replace(":fill-available",":stretch"):s.replace(n,"-webkit-"+n)+s.replace(n,"-moz-"+n.replace("fill-",""))+s;break;case 962:if(s="-webkit-"+s+(102===s.charCodeAt(5)?"-ms-"+s:"")+s,211===t+a&&105===s.charCodeAt(13)&&0<s.indexOf("transform",10))return s.substring(0,s.indexOf(";",27)+1).replace(f,"$1-webkit-$2")+s}return s}function j(e,r){var t=e.indexOf(1===r?":":"{"),a=e.substring(0,3!==r?t:10);return t=e.substring(t+1,e.length-1),n(2!==r?a:a.replace(i,"$1"),t,r)}function _(e,r){var t=z(r,r.charCodeAt(0),r.charCodeAt(1),r.charCodeAt(2));return t!==r+";"?t.replace(a," or ($1)").substring(4):"("+r+")"}function N(e,r,t,a,s,i,n,c,o,l){for(var f,u=0,h=r;u<q;++u)switch(f=k[u].call(d,e,h,t,a,s,i,n,c,o,l)){case void 0:case!1:case!0:case null:break;default:h=f}if(h!==r)return h}function r(e){return void 0!==(e=e.prefix)&&(n=null,e?"function"!=typeof e?L=1:(L=2,n=e):L=0),r}function d(e,r){var t=e;if(t.charCodeAt(0)<33&&(t=t.trim()),t=[t],0<q){var a=N(-1,r,t,t,B,P,0,0,0,0);void 0!==a&&"string"==typeof a&&(r=a)}var s=function e(r,t,a,s,i){for(var n,c,o,l,f,u=0,h=0,d=0,b=0,p=0,g=0,k=o=n=0,v=0,m=0,w=0,y=0,A=a.length,C=A-1,x="",O="",S="",$="";v<A;){if(c=a.charCodeAt(v),v===C&&0!==h+b+d+u&&(0!==h&&(c=47===h?10:47),b=d=u=0,A++,C++),0===h+b+d+u){if(v===C&&(0<m&&(x=x.replace(I,"")),0<x.trim().length)){switch(c){case 32:case 9:case 59:case 13:case 10:break;default:x+=a.charAt(v)}c=59}switch(c){case 123:for(n=(x=x.trim()).charCodeAt(0),o=1,y=++v;v<A;){switch(c=a.charCodeAt(v)){case 123:o++;break;case 125:o--;break;case 47:switch(c=a.charCodeAt(v+1)){case 42:case 47:e:{for(k=v+1;k<C;++k)switch(a.charCodeAt(k)){case 47:if(42===c&&42===a.charCodeAt(k-1)&&v+2!==k){v=k+1;break e}break;case 10:if(47===c){v=k+1;break e}}v=k}}break;case 91:c++;case 40:c++;case 34:case 39:for(;v++<C&&a.charCodeAt(v)!==c;);}if(0===o)break;v++}switch(o=a.substring(y,v),0===n&&(n=(x=x.replace(R,"").trim()).charCodeAt(0)),n){case 64:switch(0<m&&(x=x.replace(I,"")),c=x.charCodeAt(1)){case 100:case 109:case 115:case 45:m=t;break;default:m=T}if(y=(o=e(t,m,o,c,i+1)).length,0<q&&(f=N(3,o,m=E(T,x,w),t,B,P,y,c,i,s),x=m.join(""),void 0!==f&&0===(y=(o=f.trim()).length)&&(c=0,o="")),0<y)switch(c){case 115:x=x.replace(M,_);case 100:case 109:case 45:o=x+"{"+o+"}";break;case 107:o=(x=x.replace(G,"$1 $2"))+"{"+o+"}",o=1===L||2===L&&j("@"+o,3)?"@-webkit-"+o+"@"+o:"@"+o;break;default:o=x+o,112===s&&(O+=o,o="")}else o="";break;default:o=e(t,E(t,x,w),o,s,i+1)}S+=o,o=w=m=k=n=0,x="",c=a.charCodeAt(++v);break;case 125:case 59:if(1<(y=(x=(0<m?x.replace(I,""):x).trim()).length))switch(0===k&&(n=x.charCodeAt(0),45===n||96<n&&n<123)&&(y=(x=x.replace(" ",":")).length),0<q&&void 0!==(f=N(1,x,t,r,B,P,O.length,s,i,s))&&0===(y=(x=f.trim()).length)&&(x="\0\0"),n=x.charCodeAt(0),c=x.charCodeAt(1),n){case 0:break;case 64:if(105===c||99===c){$+=x+a.charAt(v);break}default:58!==x.charCodeAt(y-1)&&(O+=z(x,n,c,x.charCodeAt(2)))}w=m=k=n=0,x="",c=a.charCodeAt(++v)}}switch(c){case 13:case 10:47===h?h=0:0===1+n&&107!==s&&0<x.length&&(m=1,x+="\0"),0<q*H&&N(0,x,t,r,B,P,O.length,s,i,s),P=1,B++;break;case 59:case 125:if(0===h+b+d+u){P++;break}default:switch(P++,l=a.charAt(v),c){case 9:case 32:if(0===b+u+h)switch(p){case 44:case 58:case 9:case 32:l="";break;default:32!==c&&(l=" ")}break;case 0:l="\\0";break;case 12:l="\\f";break;case 11:l="\\v";break;case 38:0===b+h+u&&(m=w=1,l="\f"+l);break;case 108:if(0===b+h+u+D&&0<k)switch(v-k){case 2:112===p&&58===a.charCodeAt(v-3)&&(D=p);case 8:111===g&&(D=g)}break;case 58:0===b+h+u&&(k=v);break;case 44:0===h+d+b+u&&(m=1,l+="\r");break;case 34:case 39:0===h&&(b=b===c?0:0===b?c:b);break;case 91:0===b+h+d&&u++;break;case 93:0===b+h+d&&u--;break;case 41:0===b+h+u&&d--;break;case 40:if(0===b+h+u){if(0===n)switch(2*p+3*g){case 533:break;default:n=1}d++}break;case 64:0===h+d+b+u+k+o&&(o=1);break;case 42:case 47:if(!(0<b+u+d))switch(h){case 0:switch(2*c+3*a.charCodeAt(v+1)){case 235:h=47;break;case 220:y=v,h=42}break;case 42:47===c&&42===p&&y+2!==v&&(33===a.charCodeAt(y+2)&&(O+=a.substring(y,v+1)),l="",h=0)}}0===h&&(x+=l)}g=p,p=c,v++}if(0<(y=O.length)){if(m=t,0<q&&void 0!==(f=N(2,O,m,r,B,P,y,s,i,s))&&0===(O=f).length)return $+O+S;if(O=m.join(",")+"{"+O+"}",0!=L*D){switch(2!==L||j(O,2)||(D=0),D){case 111:O=O.replace(F,":-moz-$1")+O;break;case 112:O=O.replace(W,"::-webkit-input-$1")+O.replace(W,"::-moz-$1")+O.replace(W,":-ms-input-$1")+O}D=0}}return $+O+S}(T,t,r,0,0);return 0<q&&(void 0!==(a=N(-2,s,t,t,B,P,s.length,0,0,0))&&(s=a)),"",D=0,P=B=1,s}var R=/^\0+/g,I=/[\0\r\f]/g,c=/: */g,o=/zoo|gra/,f=/([,: ])(transform)/g,u=/,\r+?/g,s=/([\t\r\n ])*\f?&/g,G=/@(k\w+)\s*(\S*)\s*/,W=/::(place)/g,F=/:(read-only)/g,h=/[svh]\w+-[tblr]{2}/,M=/\(\s*(.*)\s*\)/g,a=/([\s\S]*?);/g,b=/-self|flex-/g,i=/[^]*?(:[rp][el]a[\w-]+)[^]*/,p=/stretch|:\s*\w+\-(?:conte|avail)/,g=/([^-])(image-set\()/,P=1,B=1,D=0,L=1,T=[],k=[],q=0,n=null,H=0;return d.use=function e(r){switch(r){case void 0:case null:q=k.length=0;break;default:switch(r.constructor){case Array:for(var t=0,a=r.length;t<a;++t)e(r[t]);break;case Function:k[q++]=r;break;case Boolean:H=0|!!r}}return e},d.set=r,void 0!==e&&r(e),d}var f="/*|*/";function u(e){e&&h.push(e+"}")}var h,l=function(e,r,t,a,s,i,n,c,o,l){switch(e){case-1:h=[];break;case 1:switch(r.charCodeAt(0)){case 64:if(0===o)return h.push(r+";"),"";break;case 108:if(98===r.charCodeAt(2))return""}break;case 2:if(0===c)return r+f;break;case 3:switch(c){case 102:case 112:return h.push(t[0]+r),"";default:return r+(0===l?f:"")}case-2:return r.split("/*|*/}").forEach(u),h}};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,a,s=/[A-Z]|^ms/g,i=/_EMO_([^_]+?)_([^]*?)_EMO_/g,d=(r=function(e){return e.replace(s,"-$&").toLowerCase()},a={},function(e){return void 0===a[e]&&(a[e]=r(e)),a[e]}),b=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 g={name:r,styles:t,next:g},r})}return 1!==t[e]&&45!==e.charCodeAt(1)&&"number"==typeof r&&0!==r?r+"px":r};function p(e,r,t,a){if(null==t)return"";if(void 0!==t.__emotion_styles)return t;switch(typeof t){case"boolean":return"";case"object":if(1===t.anim)return g={name:t.name,styles:t.styles,next:g},t.name;if(void 0!==t.styles){var s=t.next;if(void 0!==s)for(;void 0!==s;)g={name:s.name,styles:s.styles,next:g},s=s.next;return t.styles}return function(e,r,t){var a="";if(Array.isArray(t))for(var s=0;s<t.length;s++)a+=p(e,r,t[s],!1);else for(var i in t){var n=t[i];if("object"!=typeof n)void 0!==r[n]?a+=i+"{"+r[n]+"}":a+=d(i)+":"+b(i,n)+";";else if(Array.isArray(n)&&"string"==typeof n[0]&&void 0===r[n[0]])for(var c=0;c<n.length;c++)a+=d(i)+":"+b(i,n[c])+";";else a+=i+"{"+p(e,r,n,!1)+"}"}return a}(e,r,t);case"function":if(void 0!==e)return p(e,r,t(e),a);default:var i=r[t];return void 0===i||a?t:i}}var g,k=/label:\s*([^\s;\n{]+)\s*;/g,v="",n=function(e,r,t){if(1===r.length&&"object"==typeof r[0]&&null!==r[0]&&void 0!==r[0].styles)return r[0];var a=!0;v="",g=void 0;var s=r[0];if(null==s||void 0===s.raw){var i=p(t,e,s,a=!1);v+=i}else v+=s[0];for(var n=1;n<r.length;n++){var c=p(t,e,r[n],46===v.charCodeAt(v.length-1));v+=c,a&&(v+=s[n])}k.lastIndex=0;for(var o,l="";null!==(o=k.exec(v));)l+="-"+o[1];return{name:function(e){for(var r,t=e.length,a=t^t,s=0;4<=t;)r=1540483477*(65535&(r=255&e.charCodeAt(s)|(255&e.charCodeAt(++s))<<8|(255&e.charCodeAt(++s))<<16|(255&e.charCodeAt(++s))<<24))+((1540483477*(r>>>16)&65535)<<16),a=1540483477*(65535&a)+((1540483477*(a>>>16)&65535)<<16)^(r=1540483477*(65535&(r^=r>>>24))+((1540483477*(r>>>16)&65535)<<16)),t-=4,++s;switch(t){case 3:a^=(255&e.charCodeAt(s+2))<<16;case 2:a^=(255&e.charCodeAt(s+1))<<8;case 1:a=1540483477*(65535&(a^=255&e.charCodeAt(s)))+((1540483477*(a>>>16)&65535)<<16)}return a=1540483477*(65535&(a^=a>>>13))+((1540483477*(a>>>16)&65535)<<16),((a^=a>>>15)>>>0).toString(36)}(v)+l,styles:v,next:g}};function m(r,t,e){var a="";return e.split(" ").forEach(function(e){void 0!==r[e]?t.push(r[e]):a+=e+" "}),a}function w(e,r,t){if(void 0===e.inserted[r]){var a=e.stylis("",t);e.inserted[r]=!0,a.forEach(e.sheet.insert,e.sheet)}}function y(e,r,t){var a=[],s=m(e,a,t);return a.length<2?t:s+r(a)}var A=function e(r){for(var t="",a=0;a<r.length;a++){var s=r[a];if(null!=s){var i=void 0;switch(typeof s){case"boolean":break;case"object":if(Array.isArray(s))i=e(s);else for(var n in i="",s)s[n]&&n&&(i&&(i+=" "),i+=n);break;default:i=s}i&&(t&&(t+=" "),t+=i)}}return t};return function(e){var i=function(e){void 0===e&&(e={});var r,t=e.key||"css";void 0!==e.prefix&&(r={prefix:e.prefix});var a=new o(r);a.use(e.stylisPlugins)(l);var s,i={};s=e.container||document.head;var n=document.querySelectorAll("style[data-emotion-"+t+"]");return Array.prototype.forEach.call(n,function(e){e.getAttribute("data-emotion-"+t).split(" ").forEach(function(e){i[e]=!0}),e.parentNode!==s&&s.appendChild(e)}),{stylis:a,key:t,sheet:new c({key:t,container:s,nonce:e.nonce,speedy:e.speedy}),nonce:e.nonce,inserted:i,registered:{}}}(e);i.sheet.speedy=function(e){this.isSpeedy=e},i.compat=!0;var a=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];var a=n(i.registered,r,void 0!==this?this.mergedProps:void 0);return function(e,r,t){var a=e.key+"-"+r.name;if(!1===t&&void 0===e.registered[a]&&(e.registered[a]=r.styles),void 0===e.inserted[r.name]){var s=r;do{var i=e.stylis("."+a,s.styles);e.inserted[s.name]=!0,i.forEach(e.sheet.insert,e.sheet),s=s.next}while(void 0!==s)}}(i,a,!1),i.key+"-"+a.name};return{css:a,cx:function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];return y(i.registered,a,A(r))},injectGlobal:function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];var a=n(i.registered,r);w(i,a.name,a.styles)},keyframes:function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];var a=n(i.registered,r),s="animation-"+a.name;return w(i,a.name,"@keyframes "+s+"{"+a.styles+"}"),s},hydrate:function(e){e.forEach(function(e){i.inserted[e]=!0})},flush:function(){i.registered={},i.inserted={},i.sheet.flush()},sheet:i.sheet,cache:i,getRegisteredStyles:m.bind(null,i.registered),merge:y.bind(null,i.registered,a)}}});
//# sourceMappingURL=emotion.umd.min.js.map

524

dist/index.cjs.js
'use strict';
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var memoize = _interopDefault(require('@emotion/memoize'));
var unitless = _interopDefault(require('@emotion/unitless'));
var hashString = _interopDefault(require('@emotion/hash'));
var Stylis = _interopDefault(require('@emotion/stylis'));
var stylisRuleSheet = _interopDefault(require('stylis-rule-sheet'));
var hyphenateRegex = /[A-Z]|^ms/g;
var processStyleName = memoize(function (styleName) {
return styleName.replace(hyphenateRegex, '-$&').toLowerCase();
});
var processStyleValue = function processStyleValue(key, value) {
if (value == null || typeof value === 'boolean') {
return '';
}
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('./index.cjs.prod.js');
} else {
module.exports = require('./index.cjs.dev.js');
}
var classnames = function classnames(args) {
var len = args.length;
var i = 0;
var cls = '';
for (; i < len; i++) {
var arg = args[i];
if (arg == null) continue;
var toAdd = void 0;
switch (typeof arg) {
case 'boolean':
break;
case 'function':
if (process.env.NODE_ENV !== 'production') {
console.error('Passing functions to cx is deprecated and will be removed in the next major version of Emotion.\n' + 'Please call the function before passing it to cx.');
}
toAdd = classnames([arg()]);
break;
case 'object':
{
if (Array.isArray(arg)) {
toAdd = classnames(arg);
} else {
toAdd = '';
for (var k in arg) {
if (arg[k] && k) {
toAdd && (toAdd += ' ');
toAdd += k;
}
}
}
break;
}
default:
{
toAdd = arg;
}
}
if (toAdd) {
cls && (cls += ' ');
cls += toAdd;
}
}
return cls;
};
var isBrowser = typeof document !== 'undefined';
/*
high performance StyleSheet for css-in-js systems
- uses multiple style tags behind the scenes for millions of rules
- uses `insertRule` for appending in production for *much* faster performance
- 'polyfills' on server side
// usage
import StyleSheet from 'glamor/lib/sheet'
let styleSheet = new StyleSheet()
styleSheet.inject()
- 'injects' the stylesheet into the page (or into memory if on server)
styleSheet.insert('#box { border: 1px solid red; }')
- appends a css rule into the stylesheet
styleSheet.flush()
- empties the stylesheet of all its contents
*/
// $FlowFixMe
function sheetForTag(tag) {
if (tag.sheet) {
// $FlowFixMe
return tag.sheet;
} // this weirdness brought to you by firefox
for (var i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].ownerNode === tag) {
// $FlowFixMe
return document.styleSheets[i];
}
}
}
function makeStyleTag(opts) {
var tag = document.createElement('style');
tag.setAttribute('data-emotion', opts.key || '');
if (opts.nonce !== undefined) {
tag.setAttribute('nonce', opts.nonce);
}
tag.appendChild(document.createTextNode('')) // $FlowFixMe
;
(opts.container !== undefined ? opts.container : document.head).appendChild(tag);
return tag;
}
var StyleSheet =
/*#__PURE__*/
function () {
function StyleSheet(options) {
this.isSpeedy = process.env.NODE_ENV === 'production'; // the big drawback here is that the css won't be editable in devtools
this.tags = [];
this.ctr = 0;
this.opts = options;
}
var _proto = StyleSheet.prototype;
_proto.inject = function inject() {
if (this.injected) {
throw new Error('already injected!');
}
this.tags[0] = makeStyleTag(this.opts);
this.injected = true;
};
_proto.speedy = function speedy(bool) {
if (this.ctr !== 0) {
// cannot change speedy mode after inserting any rule to sheet. Either call speedy(${bool}) earlier in your app, or call flush() before speedy(${bool})
throw new Error("cannot change speedy now");
}
this.isSpeedy = !!bool;
};
_proto.insert = function insert(rule, sourceMap) {
// this is the ultrafast version, works across browsers
if (this.isSpeedy) {
var tag = this.tags[this.tags.length - 1];
var sheet = sheetForTag(tag);
try {
sheet.insertRule(rule, sheet.cssRules.length);
} catch (e) {
if (process.env.NODE_ENV !== 'production') {
console.warn('illegal rule', rule); // eslint-disable-line no-console
}
}
} else {
var _tag = makeStyleTag(this.opts);
this.tags.push(_tag);
_tag.appendChild(document.createTextNode(rule + (sourceMap || '')));
}
this.ctr++;
if (this.ctr % 65000 === 0) {
this.tags.push(makeStyleTag(this.opts));
}
};
_proto.flush = function flush() {
// $FlowFixMe
this.tags.forEach(function (tag) {
return tag.parentNode.removeChild(tag);
});
this.tags = [];
this.ctr = 0; // todo - look for remnants in document.styleSheets
this.injected = false;
};
return StyleSheet;
}();
function createEmotion(context, options) {
if (context.__SECRET_EMOTION__ !== undefined) {
return context.__SECRET_EMOTION__;
}
if (options === undefined) options = {};
var key = options.key || 'css';
if (process.env.NODE_ENV !== 'production') {
if (/[^a-z-]/.test(key)) {
throw new Error("Emotion key must only contain lower case alphabetical characters and - but \"" + key + "\" was passed");
}
}
var current;
function insertRule(rule) {
current += rule;
if (isBrowser) {
sheet.insert(rule, currentSourceMap);
}
}
var insertionPlugin = stylisRuleSheet(insertRule);
var stylisOptions;
if (options.prefix !== undefined) {
stylisOptions = {
prefix: options.prefix
};
}
var caches = {
registered: {},
inserted: {},
nonce: options.nonce,
key: key
};
var sheet = new StyleSheet(options);
if (isBrowser) {
// 🚀
sheet.inject();
}
var stylis = new Stylis(stylisOptions);
stylis.use(options.stylisPlugins)(insertionPlugin);
var currentSourceMap = '';
function handleInterpolation(interpolation, couldBeSelectorInterpolation) {
if (interpolation == null) {
return '';
}
switch (typeof interpolation) {
case 'boolean':
return '';
case 'function':
if (interpolation.__emotion_styles !== undefined) {
var selector = interpolation.toString();
if (selector === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {
throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
}
return selector;
}
if (this === undefined && process.env.NODE_ENV !== 'production') {
console.error('Interpolating functions in css calls is deprecated and will be removed in the next major version of Emotion.\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}`");
}
return handleInterpolation.call(this, this === undefined ? interpolation() : // $FlowFixMe
interpolation(this.mergedProps, this.context), couldBeSelectorInterpolation);
case 'object':
return createStringFromObject.call(this, interpolation);
default:
var cached = caches.registered[interpolation];
return couldBeSelectorInterpolation === false && cached !== undefined ? cached : interpolation;
}
}
var objectToStringCache = new WeakMap();
function createStringFromObject(obj) {
if (objectToStringCache.has(obj)) {
// $FlowFixMe
return objectToStringCache.get(obj);
}
var string = '';
if (Array.isArray(obj)) {
obj.forEach(function (interpolation) {
string += handleInterpolation.call(this, interpolation, false);
}, this);
} else {
Object.keys(obj).forEach(function (key) {
if (typeof obj[key] !== 'object') {
if (caches.registered[obj[key]] !== undefined) {
string += key + "{" + caches.registered[obj[key]] + "}";
} else {
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 babel-plugin-emotion.');
}
if (Array.isArray(obj[key]) && typeof obj[key][0] === 'string' && caches.registered[obj[key][0]] === undefined) {
obj[key].forEach(function (value) {
string += processStyleName(key) + ":" + processStyleValue(key, value) + ";";
});
} else {
string += key + "{" + handleInterpolation.call(this, obj[key], false) + "}";
}
}
}, this);
}
objectToStringCache.set(obj, string);
return string;
}
var name;
var stylesWithLabel;
var labelPattern = /label:\s*([^\s;\n{]+)\s*;/g;
var createClassName = function createClassName(styles, identifierName) {
return hashString(styles + identifierName) + identifierName;
};
if (process.env.NODE_ENV !== 'production') {
var oldCreateClassName = createClassName;
var sourceMappingUrlPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
createClassName = function createClassName(styles, identifierName) {
return oldCreateClassName(styles.replace(sourceMappingUrlPattern, function (sourceMap) {
currentSourceMap = sourceMap;
return '';
}), identifierName);
};
}
var createStyles = function createStyles(strings) {
var stringMode = true;
var styles = '';
var identifierName = '';
if (strings == null || strings.raw === undefined) {
stringMode = false;
styles += handleInterpolation.call(this, strings, false);
} else {
styles += strings[0];
}
for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
interpolations[_key - 1] = arguments[_key];
}
interpolations.forEach(function (interpolation, i) {
styles += handleInterpolation.call(this, interpolation, styles.charCodeAt(styles.length - 1) === 46 // .
);
if (stringMode === true && strings[i + 1] !== undefined) {
styles += strings[i + 1];
}
}, this);
stylesWithLabel = styles;
styles = styles.replace(labelPattern, function (match, p1) {
identifierName += "-" + p1;
return '';
});
name = createClassName(styles, identifierName);
return styles;
};
if (process.env.NODE_ENV !== 'production') {
var oldStylis = stylis;
stylis = function stylis(selector, styles) {
oldStylis(selector, styles);
currentSourceMap = '';
};
}
function insert(scope, styles) {
if (caches.inserted[name] === undefined) {
current = '';
stylis(scope, styles);
caches.inserted[name] = current;
}
}
var css = function css() {
var styles = createStyles.apply(this, arguments);
var selector = key + "-" + name;
if (caches.registered[selector] === undefined) {
caches.registered[selector] = stylesWithLabel;
}
insert("." + selector, styles);
return selector;
};
var keyframes = function keyframes() {
var styles = createStyles.apply(this, arguments);
var animation = "animation-" + name;
insert('', "@keyframes " + animation + "{" + styles + "}");
return animation;
};
var injectGlobal = function injectGlobal() {
var styles = createStyles.apply(this, arguments);
insert('', styles);
};
function getRegisteredStyles(registeredStyles, classNames) {
var rawClassName = '';
classNames.split(' ').forEach(function (className) {
if (caches.registered[className] !== undefined) {
registeredStyles.push(className);
} else {
rawClassName += className + " ";
}
});
return rawClassName;
}
function merge(className, sourceMap) {
var registeredStyles = [];
var rawClassName = getRegisteredStyles(registeredStyles, className);
if (registeredStyles.length < 2) {
return className;
}
return rawClassName + css(registeredStyles, sourceMap);
}
function cx() {
for (var _len2 = arguments.length, classNames = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
classNames[_key2] = arguments[_key2];
}
return merge(classnames(classNames));
}
function hydrateSingleId(id) {
caches.inserted[id] = true;
}
function hydrate(ids) {
ids.forEach(hydrateSingleId);
}
function flush() {
if (isBrowser) {
sheet.flush();
sheet.inject();
}
caches.inserted = {};
caches.registered = {};
}
if (isBrowser) {
var chunks = document.querySelectorAll("[data-emotion-" + key + "]");
Array.prototype.forEach.call(chunks, function (node) {
// $FlowFixMe
sheet.tags[0].parentNode.insertBefore(node, sheet.tags[0]); // $FlowFixMe
node.getAttribute("data-emotion-" + key).split(' ').forEach(hydrateSingleId);
});
}
var emotion = {
flush: flush,
hydrate: hydrate,
cx: cx,
merge: merge,
getRegisteredStyles: getRegisteredStyles,
injectGlobal: injectGlobal,
keyframes: keyframes,
css: css,
sheet: sheet,
caches: caches
};
context.__SECRET_EMOTION__ = emotion;
return emotion;
}
module.exports = createEmotion;

556

dist/index.esm.js

@@ -1,46 +0,108 @@

import memoize from '@emotion/memoize';
import unitless from '@emotion/unitless';
import hashString from '@emotion/hash';
import Stylis from '@emotion/stylis';
import stylisRuleSheet from 'stylis-rule-sheet';
import createCache from '@emotion/cache';
import { serializeStyles } from '@emotion/serialize';
import { insertStyles, isBrowser, getRegisteredStyles } from '@emotion/utils';
var hyphenateRegex = /[A-Z]|^ms/g;
var processStyleName = memoize(function (styleName) {
return styleName.replace(hyphenateRegex, '-$&').toLowerCase();
});
var processStyleValue = function processStyleValue(key, value) {
if (value == null || typeof value === 'boolean') {
return '';
function insertWithoutScoping(cache, name, styles) {
if (cache.inserted[name] === undefined) {
var rules = cache.stylis('', styles);
cache.inserted[name] = true;
if (isBrowser) {
rules.forEach(cache.sheet.insert, cache.sheet);
} else {
var joinedRules = rules.join('');
cache.inserted[name] = joinedRules;
}
}
}
if (unitless[key] !== 1 && key.charCodeAt(1) !== 45 && // custom properties
!isNaN(value) && value !== 0) {
return value + 'px';
function merge(registered, css, className) {
var registeredStyles = [];
var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
if (registeredStyles.length < 2) {
return className;
}
return value;
};
return rawClassName + css(registeredStyles);
}
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;
var createEmotion = function createEmotion(options) {
var cache = createCache(options); // $FlowFixMe
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 + "\"'`");
}
cache.sheet.speedy = function (value) {
if (process.env.NODE_ENV !== 'production' && this.ctr !== 0) {
throw new Error('speedy must be changed before any rules are inserted');
}
return oldProcessStyleValue(key, value);
this.isSpeedy = value;
};
}
cache.compat = true;
var css = function css() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var serialized = serializeStyles(cache.registered, args, this !== undefined ? this.mergedProps : undefined);
insertStyles(cache, serialized, false);
return cache.key + "-" + serialized.name;
};
var keyframes = function keyframes() {
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
var serialized = serializeStyles(cache.registered, args);
var animation = "animation-" + serialized.name;
insertWithoutScoping(cache, serialized.name, "@keyframes " + animation + "{" + serialized.styles + "}");
return animation;
};
var injectGlobal = function injectGlobal() {
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
args[_key3] = arguments[_key3];
}
var serialized = serializeStyles(cache.registered, args);
insertWithoutScoping(cache, serialized.name, serialized.styles);
};
var cx = function cx() {
for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
args[_key4] = arguments[_key4];
}
return merge(cache.registered, css, classnames(args));
};
return {
css: css,
cx: cx,
injectGlobal: injectGlobal,
keyframes: keyframes,
hydrate: function hydrate(ids) {
ids.forEach(function (key) {
cache.inserted[key] = true;
});
},
flush: function flush() {
cache.registered = {};
cache.inserted = {};
cache.sheet.flush();
},
// $FlowFixMe
sheet: cache.sheet,
cache: cache,
getRegisteredStyles: getRegisteredStyles.bind(null, cache.registered),
merge: merge.bind(null, cache.registered, css)
};
};
var classnames = function classnames(args) {
var len = args.length;
var i = 0;
var cls = '';
for (; i < len; i++) {
for (var i = 0; i < args.length; i++) {
var arg = args[i];

@@ -54,10 +116,2 @@ if (arg == null) continue;

case 'function':
if (process.env.NODE_ENV !== 'production') {
console.error('Passing functions to cx is deprecated and will be removed in the next major version of Emotion.\n' + 'Please call the function before passing it to cx.');
}
toAdd = classnames([arg()]);
break;
case 'object':

@@ -95,427 +149,3 @@ {

};
var isBrowser = typeof document !== 'undefined';
/*
high performance StyleSheet for css-in-js systems
- uses multiple style tags behind the scenes for millions of rules
- uses `insertRule` for appending in production for *much* faster performance
- 'polyfills' on server side
// usage
import StyleSheet from 'glamor/lib/sheet'
let styleSheet = new StyleSheet()
styleSheet.inject()
- 'injects' the stylesheet into the page (or into memory if on server)
styleSheet.insert('#box { border: 1px solid red; }')
- appends a css rule into the stylesheet
styleSheet.flush()
- empties the stylesheet of all its contents
*/
// $FlowFixMe
function sheetForTag(tag) {
if (tag.sheet) {
// $FlowFixMe
return tag.sheet;
} // this weirdness brought to you by firefox
for (var i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].ownerNode === tag) {
// $FlowFixMe
return document.styleSheets[i];
}
}
}
function makeStyleTag(opts) {
var tag = document.createElement('style');
tag.setAttribute('data-emotion', opts.key || '');
if (opts.nonce !== undefined) {
tag.setAttribute('nonce', opts.nonce);
}
tag.appendChild(document.createTextNode('')) // $FlowFixMe
;
(opts.container !== undefined ? opts.container : document.head).appendChild(tag);
return tag;
}
var StyleSheet =
/*#__PURE__*/
function () {
function StyleSheet(options) {
this.isSpeedy = process.env.NODE_ENV === 'production'; // the big drawback here is that the css won't be editable in devtools
this.tags = [];
this.ctr = 0;
this.opts = options;
}
var _proto = StyleSheet.prototype;
_proto.inject = function inject() {
if (this.injected) {
throw new Error('already injected!');
}
this.tags[0] = makeStyleTag(this.opts);
this.injected = true;
};
_proto.speedy = function speedy(bool) {
if (this.ctr !== 0) {
// cannot change speedy mode after inserting any rule to sheet. Either call speedy(${bool}) earlier in your app, or call flush() before speedy(${bool})
throw new Error("cannot change speedy now");
}
this.isSpeedy = !!bool;
};
_proto.insert = function insert(rule, sourceMap) {
// this is the ultrafast version, works across browsers
if (this.isSpeedy) {
var tag = this.tags[this.tags.length - 1];
var sheet = sheetForTag(tag);
try {
sheet.insertRule(rule, sheet.cssRules.length);
} catch (e) {
if (process.env.NODE_ENV !== 'production') {
console.warn('illegal rule', rule); // eslint-disable-line no-console
}
}
} else {
var _tag = makeStyleTag(this.opts);
this.tags.push(_tag);
_tag.appendChild(document.createTextNode(rule + (sourceMap || '')));
}
this.ctr++;
if (this.ctr % 65000 === 0) {
this.tags.push(makeStyleTag(this.opts));
}
};
_proto.flush = function flush() {
// $FlowFixMe
this.tags.forEach(function (tag) {
return tag.parentNode.removeChild(tag);
});
this.tags = [];
this.ctr = 0; // todo - look for remnants in document.styleSheets
this.injected = false;
};
return StyleSheet;
}();
function createEmotion(context, options) {
if (context.__SECRET_EMOTION__ !== undefined) {
return context.__SECRET_EMOTION__;
}
if (options === undefined) options = {};
var key = options.key || 'css';
if (process.env.NODE_ENV !== 'production') {
if (/[^a-z-]/.test(key)) {
throw new Error("Emotion key must only contain lower case alphabetical characters and - but \"" + key + "\" was passed");
}
}
var current;
function insertRule(rule) {
current += rule;
if (isBrowser) {
sheet.insert(rule, currentSourceMap);
}
}
var insertionPlugin = stylisRuleSheet(insertRule);
var stylisOptions;
if (options.prefix !== undefined) {
stylisOptions = {
prefix: options.prefix
};
}
var caches = {
registered: {},
inserted: {},
nonce: options.nonce,
key: key
};
var sheet = new StyleSheet(options);
if (isBrowser) {
// 🚀
sheet.inject();
}
var stylis = new Stylis(stylisOptions);
stylis.use(options.stylisPlugins)(insertionPlugin);
var currentSourceMap = '';
function handleInterpolation(interpolation, couldBeSelectorInterpolation) {
if (interpolation == null) {
return '';
}
switch (typeof interpolation) {
case 'boolean':
return '';
case 'function':
if (interpolation.__emotion_styles !== undefined) {
var selector = interpolation.toString();
if (selector === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {
throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
}
return selector;
}
if (this === undefined && process.env.NODE_ENV !== 'production') {
console.error('Interpolating functions in css calls is deprecated and will be removed in the next major version of Emotion.\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}`");
}
return handleInterpolation.call(this, this === undefined ? interpolation() : // $FlowFixMe
interpolation(this.mergedProps, this.context), couldBeSelectorInterpolation);
case 'object':
return createStringFromObject.call(this, interpolation);
default:
var cached = caches.registered[interpolation];
return couldBeSelectorInterpolation === false && cached !== undefined ? cached : interpolation;
}
}
var objectToStringCache = new WeakMap();
function createStringFromObject(obj) {
if (objectToStringCache.has(obj)) {
// $FlowFixMe
return objectToStringCache.get(obj);
}
var string = '';
if (Array.isArray(obj)) {
obj.forEach(function (interpolation) {
string += handleInterpolation.call(this, interpolation, false);
}, this);
} else {
Object.keys(obj).forEach(function (key) {
if (typeof obj[key] !== 'object') {
if (caches.registered[obj[key]] !== undefined) {
string += key + "{" + caches.registered[obj[key]] + "}";
} else {
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 babel-plugin-emotion.');
}
if (Array.isArray(obj[key]) && typeof obj[key][0] === 'string' && caches.registered[obj[key][0]] === undefined) {
obj[key].forEach(function (value) {
string += processStyleName(key) + ":" + processStyleValue(key, value) + ";";
});
} else {
string += key + "{" + handleInterpolation.call(this, obj[key], false) + "}";
}
}
}, this);
}
objectToStringCache.set(obj, string);
return string;
}
var name;
var stylesWithLabel;
var labelPattern = /label:\s*([^\s;\n{]+)\s*;/g;
var createClassName = function createClassName(styles, identifierName) {
return hashString(styles + identifierName) + identifierName;
};
if (process.env.NODE_ENV !== 'production') {
var oldCreateClassName = createClassName;
var sourceMappingUrlPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
createClassName = function createClassName(styles, identifierName) {
return oldCreateClassName(styles.replace(sourceMappingUrlPattern, function (sourceMap) {
currentSourceMap = sourceMap;
return '';
}), identifierName);
};
}
var createStyles = function createStyles(strings) {
var stringMode = true;
var styles = '';
var identifierName = '';
if (strings == null || strings.raw === undefined) {
stringMode = false;
styles += handleInterpolation.call(this, strings, false);
} else {
styles += strings[0];
}
for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
interpolations[_key - 1] = arguments[_key];
}
interpolations.forEach(function (interpolation, i) {
styles += handleInterpolation.call(this, interpolation, styles.charCodeAt(styles.length - 1) === 46 // .
);
if (stringMode === true && strings[i + 1] !== undefined) {
styles += strings[i + 1];
}
}, this);
stylesWithLabel = styles;
styles = styles.replace(labelPattern, function (match, p1) {
identifierName += "-" + p1;
return '';
});
name = createClassName(styles, identifierName);
return styles;
};
if (process.env.NODE_ENV !== 'production') {
var oldStylis = stylis;
stylis = function stylis(selector, styles) {
oldStylis(selector, styles);
currentSourceMap = '';
};
}
function insert(scope, styles) {
if (caches.inserted[name] === undefined) {
current = '';
stylis(scope, styles);
caches.inserted[name] = current;
}
}
var css = function css() {
var styles = createStyles.apply(this, arguments);
var selector = key + "-" + name;
if (caches.registered[selector] === undefined) {
caches.registered[selector] = stylesWithLabel;
}
insert("." + selector, styles);
return selector;
};
var keyframes = function keyframes() {
var styles = createStyles.apply(this, arguments);
var animation = "animation-" + name;
insert('', "@keyframes " + animation + "{" + styles + "}");
return animation;
};
var injectGlobal = function injectGlobal() {
var styles = createStyles.apply(this, arguments);
insert('', styles);
};
function getRegisteredStyles(registeredStyles, classNames) {
var rawClassName = '';
classNames.split(' ').forEach(function (className) {
if (caches.registered[className] !== undefined) {
registeredStyles.push(className);
} else {
rawClassName += className + " ";
}
});
return rawClassName;
}
function merge(className, sourceMap) {
var registeredStyles = [];
var rawClassName = getRegisteredStyles(registeredStyles, className);
if (registeredStyles.length < 2) {
return className;
}
return rawClassName + css(registeredStyles, sourceMap);
}
function cx() {
for (var _len2 = arguments.length, classNames = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
classNames[_key2] = arguments[_key2];
}
return merge(classnames(classNames));
}
function hydrateSingleId(id) {
caches.inserted[id] = true;
}
function hydrate(ids) {
ids.forEach(hydrateSingleId);
}
function flush() {
if (isBrowser) {
sheet.flush();
sheet.inject();
}
caches.inserted = {};
caches.registered = {};
}
if (isBrowser) {
var chunks = document.querySelectorAll("[data-emotion-" + key + "]");
Array.prototype.forEach.call(chunks, function (node) {
// $FlowFixMe
sheet.tags[0].parentNode.insertBefore(node, sheet.tags[0]); // $FlowFixMe
node.getAttribute("data-emotion-" + key).split(' ').forEach(hydrateSingleId);
});
}
var emotion = {
flush: flush,
hydrate: hydrate,
cx: cx,
merge: merge,
getRegisteredStyles: getRegisteredStyles,
injectGlobal: injectGlobal,
keyframes: keyframes,
css: css,
sheet: sheet,
caches: caches
};
context.__SECRET_EMOTION__ = emotion;
return emotion;
}
export default createEmotion;

25

package.json
{
"name": "create-emotion",
"version": "9.2.12",
"version": "10.0.0-beta.0",
"description": "The Next Generation of CSS-in-JS.",

@@ -17,6 +17,11 @@ "main": "dist/index.cjs.js",

"dependencies": {
"@emotion/hash": "^0.6.2",
"@emotion/memoize": "^0.6.1",
"@emotion/stylis": "^0.7.0",
"@emotion/unitless": "^0.6.2",
"@emotion/cache": "^10.0.0-beta.0",
"@emotion/css": "^10.0.0-beta.0",
"@emotion/hash": "^0.7.0",
"@emotion/memoize": "^0.7.0",
"@emotion/serialize": "^0.10.0",
"@emotion/sheet": "^0.9.0",
"@emotion/stylis": "^0.8.0",
"@emotion/unitless": "^0.7.0",
"@emotion/utils": "^0.9.0",
"csstype": "^2.5.2",

@@ -27,3 +32,3 @@ "stylis": "^3.5.0",

"devDependencies": {
"@types/react": "16.0.16",
"@types/react": "16.3.18",
"babel-plugin-transform-define": "^1.3.0",

@@ -47,3 +52,9 @@ "dtslint": "^0.3.0"

"umd:main": "./dist/emotion.umd.min.js",
"gitHead": "7c582301317cd9c0038a13a118456e798ffcadf8"
"publishConfig": {
"tag": "next"
},
"browser": {
"./dist/index.cjs.js": "./dist/index.browser.cjs.js",
"./dist/index.esm.js": "./dist/index.browser.esm.js"
}
}

481

src/index.js
// @flow
import hashString from '@emotion/hash'
import Stylis from '@emotion/stylis'
import stylisRuleSheet from 'stylis-rule-sheet'
import createCache from '@emotion/cache'
import { serializeStyles } from '@emotion/serialize'
import {
processStyleName,
processStyleValue,
classnames,
isBrowser
} from './utils'
import StyleSheet from './sheet'
import type { PrefixOption, ClassNameArg } from './utils'
insertStyles,
isBrowser,
getRegisteredStyles,
type EmotionCache
} from '@emotion/utils'
type StylisPlugins = Function[] | null | Function
function insertWithoutScoping(cache, name: string, styles: string) {
if (cache.inserted[name] === undefined) {
let rules = cache.stylis('', styles)
cache.inserted[name] = true
type EmotionCaches = {|
registered: { [key: string]: string },
inserted: { [key: string]: string | true },
nonce?: string,
key: string
|}
if (isBrowser) {
rules.forEach(cache.sheet.insert, cache.sheet)
} else {
let joinedRules = rules.join('')
cache.inserted[name] = joinedRules
}
}
}
// this should probably be an actual type but it's hard to do without errors
function merge(registered: Object, css: (*) => string, className: string) {
const registeredStyles = []
const rawClassName = getRegisteredStyles(
registered,
registeredStyles,
className
)
if (registeredStyles.length < 2) {
return className
}
return rawClassName + css(registeredStyles)
}
export type Interpolation = any
// | string
// | number
// | void
// | boolean
// | null
// | Object
// | Array<Interpolation>
// | (() => Interpolation)
// | ((props?: Object, context?: Object) => Interpolation)
export type Interpolations = Array<Interpolation>

@@ -39,2 +45,17 @@

type ClassNameArg =
| string
| boolean
| { [key: string]: boolean }
| Array<ClassNameArg>
declare class StyleSheet {
insert(rule: string): void;
flush(): void;
speedy(newVal: boolean): void;
tags: Array<HTMLStyleElement>;
isSpeedy: number;
ctr: number;
}
export type Emotion = {

@@ -44,355 +65,111 @@ css: CreateStyles<string>,

flush: () => void,
getRegisteredStyles: (
registeredStyles: Array<string>,
classNames: string
) => string,
hydrate: (ids: Array<string>) => void,
injectGlobal: CreateStyles<void>,
keyframes: CreateStyles<string>,
merge: (className: string, sourceMap?: string) => string,
sheet: StyleSheet,
caches: EmotionCaches
cache: EmotionCache,
merge: *,
getRegisteredStyles: *
}
type EmotionOptions = {
nonce?: string,
stylisPlugins?: StylisPlugins,
prefix?: PrefixOption,
key?: string,
container?: HTMLElement
}
let createEmotion = (options: *): Emotion => {
let cache = createCache(options)
function createEmotion(
context: { __SECRET_EMOTION__?: Emotion },
options?: EmotionOptions
): Emotion {
if (context.__SECRET_EMOTION__ !== undefined) {
return context.__SECRET_EMOTION__
}
if (options === undefined) options = {}
let key = options.key || 'css'
if (process.env.NODE_ENV !== 'production') {
if (/[^a-z-]/.test(key)) {
throw new Error(
`Emotion key must only contain lower case alphabetical characters and - but "${key}" was passed`
)
// $FlowFixMe
cache.sheet.speedy = function(value: boolean) {
if (process.env.NODE_ENV !== 'production' && this.ctr !== 0) {
throw new Error('speedy must be changed before any rules are inserted')
}
this.isSpeedy = value
}
let current
function insertRule(rule: string) {
current += rule
if (isBrowser) {
sheet.insert(rule, currentSourceMap)
}
cache.compat = true
let css = function(...args) {
let serialized = serializeStyles(
cache.registered,
args,
this !== undefined ? this.mergedProps : undefined
)
insertStyles(cache, serialized, false)
return `${cache.key}-${serialized.name}`
}
const insertionPlugin = stylisRuleSheet(insertRule)
let keyframes = (...args) => {
let serialized = serializeStyles(cache.registered, args)
let animation = `animation-${serialized.name}`
insertWithoutScoping(
cache,
serialized.name,
`@keyframes ${animation}{${serialized.styles}}`
)
let stylisOptions
if (options.prefix !== undefined) {
stylisOptions = {
prefix: options.prefix
}
return animation
}
const caches = {
registered: {},
inserted: {},
nonce: options.nonce,
key
let injectGlobal = (...args) => {
let serialized = serializeStyles(cache.registered, args)
insertWithoutScoping(cache, serialized.name, serialized.styles)
}
const sheet = new StyleSheet(options)
if (isBrowser) {
// 🚀
sheet.inject()
let cx = (...args) => {
return merge(cache.registered, css, classnames(args))
}
return {
css,
cx,
injectGlobal,
keyframes,
hydrate(ids: Array<string>) {
ids.forEach(key => {
cache.inserted[key] = true
})
},
flush() {
cache.registered = {}
cache.inserted = {}
cache.sheet.flush()
},
// $FlowFixMe
sheet: cache.sheet,
cache,
getRegisteredStyles: getRegisteredStyles.bind(null, cache.registered),
merge: merge.bind(null, cache.registered, css)
}
}
let stylis = new Stylis(stylisOptions)
stylis.use(options.stylisPlugins)(insertionPlugin)
let classnames = args => {
let cls = ''
for (let i = 0; i < args.length; i++) {
let arg = args[i]
if (arg == null) continue
let currentSourceMap = ''
function handleInterpolation(
interpolation: Interpolation,
couldBeSelectorInterpolation: boolean
): string | number {
if (interpolation == null) {
return ''
}
switch (typeof interpolation) {
let toAdd
switch (typeof arg) {
case 'boolean':
return ''
case 'function':
if (interpolation.__emotion_styles !== undefined) {
let selector = interpolation.toString()
if (
selector === 'NO_COMPONENT_SELECTOR' &&
process.env.NODE_ENV !== 'production'
) {
throw new Error(
'Component selectors can only be used in conjunction with babel-plugin-emotion.'
)
}
return selector
}
if (this === undefined && process.env.NODE_ENV !== 'production') {
console.error(
'Interpolating functions in css calls is deprecated and will be removed in the next major version of Emotion.\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}`"
)
}
return handleInterpolation.call(
this,
this === undefined
? interpolation()
: // $FlowFixMe
interpolation(this.mergedProps, this.context),
couldBeSelectorInterpolation
)
case 'object':
return createStringFromObject.call(this, interpolation)
default:
const cached = caches.registered[interpolation]
return couldBeSelectorInterpolation === false && cached !== undefined
? cached
: interpolation
}
}
const objectToStringCache = new WeakMap()
function createStringFromObject(obj: {
[key: string]: Interpolation
}): string {
if (objectToStringCache.has(obj)) {
// $FlowFixMe
return objectToStringCache.get(obj)
}
let string = ''
if (Array.isArray(obj)) {
obj.forEach(function(interpolation: Interpolation) {
string += handleInterpolation.call(this, interpolation, false)
}, this)
} else {
Object.keys(obj).forEach(function(key: string) {
if (typeof obj[key] !== 'object') {
if (caches.registered[obj[key]] !== undefined) {
string += `${key}{${caches.registered[obj[key]]}}`
} else {
string += `${processStyleName(key)}:${processStyleValue(
key,
obj[key]
)};`
}
break
case 'object': {
if (Array.isArray(arg)) {
toAdd = classnames(arg)
} else {
if (
key === 'NO_COMPONENT_SELECTOR' &&
process.env.NODE_ENV !== 'production'
) {
throw new Error(
'Component selectors can only be used in conjunction with babel-plugin-emotion.'
)
toAdd = ''
for (const k in arg) {
if (arg[k] && k) {
toAdd && (toAdd += ' ')
toAdd += k
}
}
if (
Array.isArray(obj[key]) &&
(typeof obj[key][0] === 'string' &&
caches.registered[obj[key][0]] === undefined)
) {
obj[key].forEach(value => {
string += `${processStyleName(key)}:${processStyleValue(
key,
value
)};`
})
} else {
string += `${key}{${handleInterpolation.call(
this,
obj[key],
false
)}}`
}
}
}, this)
}
objectToStringCache.set(obj, string)
return string
}
let name
let stylesWithLabel
const labelPattern = /label:\s*([^\s;\n{]+)\s*;/g
let createClassName = (styles, identifierName) => {
return hashString(styles + identifierName) + identifierName
}
if (process.env.NODE_ENV !== 'production') {
const oldCreateClassName = createClassName
const sourceMappingUrlPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g
createClassName = (styles, identifierName) => {
return oldCreateClassName(
styles.replace(sourceMappingUrlPattern, sourceMap => {
currentSourceMap = sourceMap
return ''
}),
identifierName
)
}
}
const createStyles: CreateStyles<string> = function(
strings: Interpolation | string[],
...interpolations: Interpolation[]
) {
let stringMode = true
let styles: string = ''
let identifierName = ''
if (strings == null || strings.raw === undefined) {
stringMode = false
styles += handleInterpolation.call(this, strings, false)
} else {
styles += strings[0]
}
interpolations.forEach(function(interpolation, i) {
styles += handleInterpolation.call(
this,
interpolation,
styles.charCodeAt(styles.length - 1) === 46 // .
)
if (stringMode === true && strings[i + 1] !== undefined) {
styles += strings[i + 1]
break
}
}, this)
stylesWithLabel = styles
styles = styles.replace(labelPattern, (match, p1: string) => {
identifierName += `-${p1}`
return ''
})
name = createClassName(styles, identifierName)
return styles
}
if (process.env.NODE_ENV !== 'production') {
const oldStylis = stylis
stylis = (selector, styles) => {
oldStylis(selector, styles)
currentSourceMap = ''
}
}
function insert(scope, styles) {
if (caches.inserted[name] === undefined) {
current = ''
stylis(scope, styles)
caches.inserted[name] = current
}
}
const css: CreateStyles<string> = function css() {
const styles = createStyles.apply(this, arguments)
const selector = `${key}-${name}`
if (caches.registered[selector] === undefined) {
caches.registered[selector] = stylesWithLabel
}
insert(`.${selector}`, styles)
return selector
}
const keyframes: CreateStyles<string> = function keyframes() {
const styles = createStyles.apply(this, arguments)
const animation = `animation-${name}`
insert('', `@keyframes ${animation}{${styles}}`)
return animation
}
const injectGlobal: CreateStyles<void> = function injectGlobal() {
const styles = createStyles.apply(this, arguments)
insert('', styles)
}
function getRegisteredStyles(registeredStyles: string[], classNames: string) {
let rawClassName = ''
classNames.split(' ').forEach(className => {
if (caches.registered[className] !== undefined) {
registeredStyles.push(className)
} else {
rawClassName += `${className} `
default: {
toAdd = arg
}
})
return rawClassName
}
function merge(className: string, sourceMap?: string) {
const registeredStyles = []
const rawClassName = getRegisteredStyles(registeredStyles, className)
if (registeredStyles.length < 2) {
return className
}
return rawClassName + css(registeredStyles, sourceMap)
}
function cx(...classNames: Array<ClassNameArg>) {
return merge(classnames(classNames))
}
function hydrateSingleId(id: string) {
caches.inserted[id] = true
}
function hydrate(ids: string[]) {
ids.forEach(hydrateSingleId)
}
function flush() {
if (isBrowser) {
sheet.flush()
sheet.inject()
if (toAdd) {
cls && (cls += ' ')
cls += toAdd
}
caches.inserted = {}
caches.registered = {}
}
if (isBrowser) {
let chunks = document.querySelectorAll(`[data-emotion-${key}]`)
Array.prototype.forEach.call(chunks, node => {
// $FlowFixMe
sheet.tags[0].parentNode.insertBefore(node, sheet.tags[0])
// $FlowFixMe
node
.getAttribute(`data-emotion-${key}`)
.split(' ')
.forEach(hydrateSingleId)
})
}
const emotion = {
flush,
hydrate,
cx,
merge,
getRegisteredStyles,
injectGlobal,
keyframes,
css,
sheet,
caches
}
context.__SECRET_EMOTION__ = emotion
return emotion
return cls
}
export default createEmotion

141

types/index.d.ts
// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
// TypeScript Version: 2.3
// TypeScript Version: 2.8
import * as CSS from 'csstype';
import { EmotionCache, Options } from '@emotion/cache'
import { Interpolation } from '@emotion/serialize'
import { StyleSheet } from '@emotion/sheet'
import { RegisteredCache, getRegisteredStyles } from '@emotion/utils'
export type CSSBaseObject = CSS.PropertiesFallback<number | string>;
export type CSSPseudoObject = { [K in CSS.Pseudos]?: CSSObject };
export interface CSSOthersObject {
[propertiesName: string]: Interpolation;
}
export interface CSSObject extends CSSBaseObject, CSSPseudoObject, CSSOthersObject {}
export {
ArrayInterpolation,
ComponentSelector,
FunctionInterpolation,
ObjectInterpolation
} from '@emotion/serialize'
export interface ArrayInterpolation extends Array<Interpolation> {}
export { EmotionCache, Interpolation, Options, RegisteredCache, StyleSheet }
export interface ClassInterpolation extends Function {
__emotion_real: any;
__emotion_styles: Array<Interpolation>;
__emotion_base: ClassInterpolation;
__emotion_target: string;
__emotion_forwardProp: undefined | null | ((arg: string) => boolean);
}
export interface ArrayClassNamesArg extends Array<ClassNamesArg> {}
export type ClassNamesArg =
| undefined
| null
| string
| boolean
| { [className: string]: boolean }
| ArrayClassNamesArg
export type Interpolation =
| undefined | null | boolean | string | number
| TemplateStringsArray
| CSSObject
| ArrayInterpolation
| ClassInterpolation
;
export interface ArrayClassNameArg extends Array<ClassNameArg> {}
export type ClassNameArg =
| undefined | null | boolean | string
| { [key: string]: undefined | null | boolean | string }
| ArrayClassNameArg
;
export interface StyleSheet {
inject(): void;
speedy(bool: boolean): void;
insert(rule: string, sourceMap?: string): void;
flush(): void;
}
export interface EmotionCache {
registered: {
[key: string]: string;
};
inserted: {
[key: string]: string;
};
nonce?: string;
key: string;
}
export interface Emotion {
flush(): void;
hydrate(ids: Array<string>): void;
cx(...classNames: Array<ClassNameArg>): string;
merge(className: string, sourceMap?: string): string;
getRegisteredStyles(registeredStyles: Array<string>, classNames: string): string;
css(...args: Array<Interpolation>): string;
injectGlobal(...args: Array<Interpolation>): void;
keyframes(...args: Array<Interpolation>): string;
sheet: StyleSheet;
caches: EmotionCache;
css(template: TemplateStringsArray, ...args: Array<Interpolation>): string
css(...args: Array<Interpolation>): string
cx(...classNames: Array<ClassNamesArg>): string
flush(): void
hydrate(ids: Array<string>): void
injectGlobal(
template: TemplateStringsArray,
...args: Array<Interpolation>
): void
injectGlobal(...args: Array<Interpolation>): void
keyframes(
template: TemplateStringsArray,
...args: Array<Interpolation>
): string
keyframes(...args: Array<Interpolation>): string
sheet: StyleSheet
cache: EmotionCache
merge(className: string): string
getRegisteredStyles(
registeredStyles: Array<string>,
className: string
): string
}
export interface EmotionBaseContext {
__SECRET_EMOTION__?: Emotion;
}
export interface EmotionContext extends EmotionBaseContext {
[key: string]: any;
}
export type StylisPlugins =
| null
| ((...args: Array<any>) => any)
| Array<(...args: Array<any>) => any>
;
export interface EmotionOptions {
nonce?: string;
stylisPlugins?: StylisPlugins;
prefix?: boolean | ((key: string, value: string, context: 1 | 2 | 3) => boolean);
key?: string;
container?: HTMLElement;
}
export default function createEmotion(context: EmotionContext, options?: EmotionOptions): Emotion;
declare module 'react' {
interface HTMLAttributes<T> {
css?: Interpolation;
}
}
// Preact support for css prop
declare global {
namespace JSX {
interface HTMLAttributes {
css?: Interpolation;
}
}
}
export default function createEmotion(options?: Options): Emotion

17

types/tslint.json
{
"extends": "dtslint/dtslint.json",
"rules": {
"no-relative-import-in-test": false,
"array-type": [true, "generic"]
"array-type": [true, "generic"],
"import-spacing": false,
"semicolon": false,
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-module",
"check-rest-spread",
"check-type",
"check-typecast",
"check-type-operator",
"check-preblock"
]
}
}
LICENSE
src/sheet.js
src/utils.js
dist/emotion.umd.min.js.map

Sorry, the diff of this file is not supported yet

types/tests.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc