Socket
Socket
Sign inDemoInstall

aphrodite

Package Overview
Dependencies
Maintainers
5
Versions
31
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

aphrodite - npm Package Compare versions

Comparing version 2.2.0 to 2.2.1

.nyc_output/98587.json
es/chunk-957f2f88.js
lib/chunk-901a259f.js

4

CHANGELOG.md

@@ -0,1 +1,5 @@

# 2.2.1
- Use code-splitting for default and no-important builds ([#325](https://github.com/Khan/aphrodite/pull/325))
# 2.2.0

@@ -2,0 +6,0 @@

2

dist/aphrodite.umd.min.js

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

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.aphrodite={})}(this,function(e){"use strict";var t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function r(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function n(e,t){return e(t={exports:{}},t.exports),t.exports}var o=n(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return e.charAt(0).toUpperCase()+e.slice(1)},e.exports=t.default}),i=r(o),a=Object.freeze({default:i,__moduleExports:o}),u=a&&i||a,l=n(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r){if(e.hasOwnProperty(t)){for(var o={},i=e[t],a=(0,n.default)(t),u=Object.keys(r),l=0;l<u.length;l++){var f=u[l];if(f===t)for(var s=0;s<i.length;s++)o[i[s]+a]=r[t];o[f]=r[f]}return o}return r};var r,n=(r=u)&&r.__esModule?r:{default:r};e.exports=t.default}),f=r(l),s=Object.freeze({default:f,__moduleExports:l}),c=n(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r,n,o){for(var i=0,a=e.length;i<a;++i){var u=e[i](t,r,n,o);if(u)return u}},e.exports=t.default}),d=r(c),p=Object.freeze({default:d,__moduleExports:c}),m=n(function(e,t){function r(e,t){-1===e.indexOf(t)&&e.push(t)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if(Array.isArray(t))for(var n=0,o=t.length;n<o;++n)r(e,t[n]);else r(e,t)},e.exports=t.default}),y=r(m),h=Object.freeze({default:y,__moduleExports:m}),g=n(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return e instanceof Object&&!Array.isArray(e)},e.exports=t.default}),b=r(g),v=Object.freeze({default:b,__moduleExports:g}),x=s&&f||s,O=p&&d||p,_=h&&y||h,k=v&&b||v,S=r(n(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){var t=e.prefixMap,a=e.plugins;return function e(u){for(var l in u){var f=u[l];if((0,i.default)(f))u[l]=e(f);else if(Array.isArray(f)){for(var s=[],c=0,d=f.length;c<d;++c){var p=(0,n.default)(a,l,f[c],u,t);(0,o.default)(s,p||f[c])}s.length>0&&(u[l]=s)}else{var m=(0,n.default)(a,l,f,u,t);m&&(u[l]=m),u=(0,r.default)(t,l,u)}}return u}};var r=a(x),n=a(O),o=a(_),i=a(k);function a(e){return e&&e.__esModule?e:{default:e}}e.exports=t.default})),j=n(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return"string"==typeof e&&r.test(e)};var r=/-webkit-|-moz-|-ms-/;e.exports=t.default}),w=r(j),M=Object.freeze({default:w,__moduleExports:j}),P=M&&w||M,z=n(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("string"==typeof t&&!(0,n.default)(t)&&t.indexOf("calc(")>-1)return o.map(function(e){return t.replace(/calc\(/g,e+"calc(")})};var r,n=(r=P)&&r.__esModule?r:{default:r};var o=["-webkit-","-moz-",""];e.exports=t.default}),A=r(z),E=Object.freeze({default:A,__moduleExports:z}),C=n(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("string"==typeof t&&!(0,n.default)(t)&&t.indexOf("cross-fade(")>-1)return o.map(function(e){return t.replace(/cross-fade\(/g,e+"cross-fade(")})};var r,n=(r=P)&&r.__esModule?r:{default:r};var o=["-webkit-",""];e.exports=t.default}),W=r(C),T=Object.freeze({default:W,__moduleExports:C}),F=n(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("cursor"===e&&n.hasOwnProperty(t))return r.map(function(e){return e+t})};var r=["-webkit-","-moz-",""],n={"zoom-in":!0,"zoom-out":!0,grab:!0,grabbing:!0};e.exports=t.default}),I=r(F),R=Object.freeze({default:I,__moduleExports:F}),B=n(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("string"==typeof t&&!(0,n.default)(t)&&t.indexOf("filter(")>-1)return o.map(function(e){return t.replace(/filter\(/g,e+"filter(")})};var r,n=(r=P)&&r.__esModule?r:{default:r};var o=["-webkit-",""];e.exports=t.default}),D=r(B),N=Object.freeze({default:D,__moduleExports:B}),G=n(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("display"===e&&r.hasOwnProperty(t))return r[t]};var r={flex:["-webkit-box","-moz-box","-ms-flexbox","-webkit-flex","flex"],"inline-flex":["-webkit-inline-box","-moz-inline-box","-ms-inline-flexbox","-webkit-inline-flex","inline-flex"]};e.exports=t.default}),L=r(G),H=Object.freeze({default:L,__moduleExports:G}),U=n(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,o){n.hasOwnProperty(e)&&(o[n[e]]=r[t]||t)};var r={"space-around":"distribute","space-between":"justify","flex-start":"start","flex-end":"end"},n={alignContent:"msFlexLinePack",alignSelf:"msFlexItemAlign",alignItems:"msFlexAlign",justifyContent:"msFlexPack",order:"msFlexOrder",flexGrow:"msFlexPositive",flexShrink:"msFlexNegative",flexBasis:"msFlexPreferredSize"};e.exports=t.default}),q=r(U),Z=Object.freeze({default:q,__moduleExports:U}),J=n(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,o){"flexDirection"===e&&"string"==typeof t&&(t.indexOf("column")>-1?o.WebkitBoxOrient="vertical":o.WebkitBoxOrient="horizontal",t.indexOf("reverse")>-1?o.WebkitBoxDirection="reverse":o.WebkitBoxDirection="normal");n.hasOwnProperty(e)&&(o[n[e]]=r[t]||t)};var r={"space-around":"justify","space-between":"justify","flex-start":"start","flex-end":"end","wrap-reverse":"multiple",wrap:"multiple"},n={alignItems:"WebkitBoxAlign",justifyContent:"WebkitBoxPack",flexWrap:"WebkitBoxLines"};e.exports=t.default}),K=r(J),X=Object.freeze({default:K,__moduleExports:J}),Y=n(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("string"==typeof t&&!(0,n.default)(t)&&i.test(t))return o.map(function(e){return e+t})};var r,n=(r=P)&&r.__esModule?r:{default:r};var o=["-webkit-","-moz-",""],i=/linear-gradient|radial-gradient|repeating-linear-gradient|repeating-radial-gradient/;e.exports=t.default}),V=r(Y),$=Object.freeze({default:V,__moduleExports:Y}),Q=n(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("string"==typeof t&&!(0,n.default)(t)&&t.indexOf("image-set(")>-1)return o.map(function(e){return t.replace(/image-set\(/g,e+"image-set(")})};var r,n=(r=P)&&r.__esModule?r:{default:r};var o=["-webkit-",""];e.exports=t.default}),ee=r(Q),te=Object.freeze({default:ee,__moduleExports:Q}),re=n(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("position"===e&&"sticky"===t)return["-webkit-sticky","sticky"]},e.exports=t.default}),ne=r(re),oe=Object.freeze({default:ne,__moduleExports:re}),ie=n(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if(n.hasOwnProperty(e)&&o.hasOwnProperty(t))return r.map(function(e){return e+t})};var r=["-webkit-","-moz-",""],n={maxHeight:!0,maxWidth:!0,width:!0,height:!0,columnWidth:!0,minWidth:!0,minHeight:!0},o={"min-content":!0,"max-content":!0,"fill-available":!0,"fit-content":!0,"contain-floats":!0};e.exports=t.default}),ae=r(ie),ue=Object.freeze({default:ae,__moduleExports:ie}),le=/[A-Z]/g,fe=/^ms-/,se={};var ce=function(e){return e in se?se[e]:se[e]=e.replace(le,"-$&").toLowerCase().replace(fe,"-ms-")},de=Object.freeze({default:ce,__moduleExports:ce}),pe=de&&ce||de,me=n(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return(0,n.default)(e)};var r,n=(r=pe)&&r.__esModule?r:{default:r};e.exports=t.default}),ye=r(me),he=Object.freeze({default:ye,__moduleExports:me}),ge=he&&ye||he,be=n(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,i,u){if("string"==typeof t&&a.hasOwnProperty(e)){var f=function(e,t){if((0,n.default)(e))return e;for(var o=e.split(/,(?![^()]*(?:\([^()]*\))?\))/g),i=0,a=o.length;i<a;++i){var u=o[i],f=[u];for(var s in t){var c=(0,r.default)(s);if(u.indexOf(c)>-1&&"order"!==c)for(var d=t[s],p=0,m=d.length;p<m;++p)f.unshift(u.replace(c,l[d[p]]+c))}o[i]=f.join(",")}return o.join(",")}(t,u),s=f.split(/,(?![^()]*(?:\([^()]*\))?\))/g).filter(function(e){return!/-moz-|-ms-/.test(e)}).join(",");if(e.indexOf("Webkit")>-1)return s;var c=f.split(/,(?![^()]*(?:\([^()]*\))?\))/g).filter(function(e){return!/-webkit-|-ms-/.test(e)}).join(",");return e.indexOf("Moz")>-1?c:(i["Webkit"+(0,o.default)(e)]=s,i["Moz"+(0,o.default)(e)]=c,f)}};var r=i(ge),n=i(P),o=i(u);function i(e){return e&&e.__esModule?e:{default:e}}var a={transition:!0,transitionProperty:!0,WebkitTransition:!0,WebkitTransitionProperty:!0,MozTransition:!0,MozTransitionProperty:!0},l={Webkit:"-webkit-",Moz:"-moz-",ms:"-ms-"};e.exports=t.default}),ve=r(be),xe=Object.freeze({default:ve,__moduleExports:be}),Oe=["Webkit"],_e=["Moz"],ke=["ms"],Se=["Webkit","Moz"],je=["Webkit","ms"],we=["Webkit","Moz","ms"],Me={plugins:[E&&A||E,T&&W||T,R&&I||R,N&&D||N,H&&L||H,Z&&q||Z,X&&K||X,$&&V||$,te&&ee||te,oe&&ne||oe,ue&&ae||ue,xe&&ve||xe],prefixMap:{transform:je,transformOrigin:je,transformOriginX:je,transformOriginY:je,backfaceVisibility:Oe,perspective:Oe,perspectiveOrigin:Oe,transformStyle:Oe,transformOriginZ:Oe,animation:Oe,animationDelay:Oe,animationDirection:Oe,animationFillMode:Oe,animationDuration:Oe,animationIterationCount:Oe,animationName:Oe,animationPlayState:Oe,animationTimingFunction:Oe,appearance:Se,userSelect:we,fontKerning:Oe,textEmphasisPosition:Oe,textEmphasis:Oe,textEmphasisStyle:Oe,textEmphasisColor:Oe,boxDecorationBreak:Oe,clipPath:Oe,maskImage:Oe,maskMode:Oe,maskRepeat:Oe,maskPosition:Oe,maskClip:Oe,maskOrigin:Oe,maskSize:Oe,maskComposite:Oe,mask:Oe,maskBorderSource:Oe,maskBorderMode:Oe,maskBorderSlice:Oe,maskBorderWidth:Oe,maskBorderOutset:Oe,maskBorderRepeat:Oe,maskBorder:Oe,maskType:Oe,textDecorationStyle:Se,textDecorationSkip:Se,textDecorationLine:Se,textDecorationColor:Se,filter:Oe,fontFeatureSettings:Se,breakAfter:we,breakBefore:we,breakInside:we,columnCount:Se,columnFill:Se,columnGap:Se,columnRule:Se,columnRuleColor:Se,columnRuleStyle:Se,columnRuleWidth:Se,columns:Se,columnSpan:Se,columnWidth:Se,writingMode:je,flex:je,flexBasis:Oe,flexDirection:je,flexGrow:Oe,flexFlow:je,flexShrink:Oe,flexWrap:je,alignContent:Oe,alignItems:Oe,alignSelf:Oe,justifyContent:Oe,order:Oe,transitionDelay:Oe,transitionDuration:Oe,transitionProperty:Oe,transitionTimingFunction:Oe,backdropFilter:Oe,scrollSnapType:je,scrollSnapPointsX:je,scrollSnapPointsY:je,scrollSnapDestination:je,scrollSnapCoordinate:je,shapeImageThreshold:Oe,shapeImageMargin:Oe,shapeImageOutside:Oe,hyphens:we,flowInto:je,flowFrom:je,regionFragment:je,boxSizing:_e,textAlignLast:_e,tabSize:_e,wrapFlow:ke,wrapThrough:ke,wrapMargin:ke,touchAction:ke,gridTemplateColumns:ke,gridTemplateRows:ke,gridTemplateAreas:ke,gridTemplate:ke,gridAutoColumns:ke,gridAutoRows:ke,gridAutoFlow:ke,grid:ke,gridRowStart:ke,gridColumnStart:ke,gridRowEnd:ke,gridRow:ke,gridColumn:ke,gridColumnEnd:ke,gridColumnGap:ke,gridRowGap:ke,gridArea:ke,gridGap:ke,textSizeAdjust:je,borderImage:Oe,borderImageOutset:Oe,borderImageRepeat:Oe,borderImageSlice:Oe,borderImageSource:Oe,borderImageWidth:Oe}},Pe="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},ze=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}();var Ae="undefined"!=typeof Map,Ee=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.elements={},this.keyOrder=[]}return ze(e,[{key:"forEach",value:function(){return function(e){for(var t=0;t<this.keyOrder.length;t++)e(this.elements[this.keyOrder[t]],this.keyOrder[t])}}()},{key:"set",value:function(){return function(t,r,n){if(this.elements.hasOwnProperty(t)){if(n){var o=this.keyOrder.indexOf(t);this.keyOrder.splice(o,1),this.keyOrder.push(t)}}else this.keyOrder.push(t);if(null!=r){if(Ae&&r instanceof Map||r instanceof e){var i=this.elements.hasOwnProperty(t)?this.elements[t]:new e;return r.forEach(function(e,t){i.set(t,e,n)}),void(this.elements[t]=i)}if(Array.isArray(r)||"object"!==(void 0===r?"undefined":Pe(r)))this.elements[t]=r;else{for(var a=this.elements.hasOwnProperty(t)?this.elements[t]:new e,u=Object.keys(r),l=0;l<u.length;l+=1)a.set(u[l],r[u[l]],n);this.elements[t]=a}}else this.elements[t]=r}}()},{key:"get",value:function(){return function(e){return this.elements[e]}}()},{key:"has",value:function(){return function(e){return this.elements.hasOwnProperty(e)}}()},{key:"addStyleType",value:function(){return function(t){var r=this;if(Ae&&t instanceof Map||t instanceof e)t.forEach(function(e,t){r.set(t,e,!0)});else for(var n=Object.keys(t),o=0;o<n.length;o++)this.set(n[o],t[n[o]],!0)}}()}]),e}();var Ce=function(e){for(var t=5381,r=e.length;r;)t=33*t^e.charCodeAt(--r);return t>>>0},We=/([A-Z])/g,Te=function(e){return"-"+String(e.toLowerCase())},Fe={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridColumn:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0};var Ie=["Webkit","ms","Moz","O"];Object.keys(Fe).forEach(function(e){Ie.forEach(function(t){Fe[function(e,t){return e+t.charAt(0).toUpperCase()+t.substring(1)}(t,e)]=Fe[e]})});var Re=function(e,t){return"number"==typeof t?Fe[e]?""+t:t+"px":""+t},Be=function(e,t){return Ge(Re(e,t))},De=function(e,t){return Ce(e).toString(36)},Ne=function(e){return De(JSON.stringify(e))},Ge=function(e){return"!"===e[e.length-10]&&" !important"===e.slice(-11)?e:String(e)+" !important"};var Le=S(Me),He=[function(){return function(e,t,r){return":"!==e[0]?null:r(t+e)}}(),function(){return function(e,t,r){if("@"!==e[0])return null;var n=r(t);return[String(e)+"{"+String(n.join(""))+"}"]}}()],Ue=function e(t,r,n,o,i){for(var a=new Ee,u=0;u<r.length;u++)a.addStyleType(r[u]);var l=new Ee,f=[];a.forEach(function(r,a){n.some(function(u){var l=u(a,t,function(t){return e(t,[r],n,o,i)});if(null!=l)return Array.isArray(l)?f.push.apply(f,function(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}(l)):(console.warn("WARNING: Selector handlers should return an array of rules.Returning a string containing multiple rules is deprecated.",u),f.push("@media all {"+String(l)+"}")),!0})||l.set(a,r,!0)});var s=Je(t,l,o,i,n);return s&&f.unshift(s),f},qe=function(e,t,r){return String("m"===(n=e.replace(We,Te))[0]&&"s"===n[1]&&"-"===n[2]?"-"+String(n):n)+":"+String(r(e,t))+";";var n},Ze=function(e,t){return e[t]=!0,e},Je=function(e,t,r,n,o){!function(e,t,r){if(t)for(var n=Object.keys(t),o=0;o<n.length;o++){var i=n[o];e.has(i)&&e.set(i,t[i](e.get(i),r),!1)}}(t,r,o);var i=Object.keys(t.elements).reduce(Ze,Object.create(null)),a=Le(t.elements),u=Object.keys(a);if(u.length!==t.keyOrder.length)for(var l=0;l<u.length;l++)if(!i[u[l]]){var f=void 0;if((f="W"===u[l][0]?u[l][6].toLowerCase()+u[l].slice(7):"o"===u[l][1]?u[l][3].toLowerCase()+u[l].slice(4):u[l][2].toLowerCase()+u[l].slice(3))&&i[f]){var s=t.keyOrder.indexOf(f);t.keyOrder.splice(s,0,u[l])}else t.keyOrder.unshift(u[l])}for(var c=!1===n?Re:Be,d=[],p=0;p<t.keyOrder.length;p++){var m=t.keyOrder[p],y=a[m];if(Array.isArray(y))for(var h=0;h<y.length;h++)d.push(qe(m,y[h],c));else d.push(qe(m,y,c))}return d.length?String(e)+"{"+String(d.join(""))+"}":""},Ke=Xe;function Xe(e){Ve.length||Ye(),Ve[Ve.length]=e}var Ye,Ve=[],$e=0,Qe=1024;function et(){for(;$e<Ve.length;){var e=$e;if($e+=1,Ve[e].call(),$e>Qe){for(var t=0,r=Ve.length-$e;t<r;t++)Ve[t]=Ve[t+$e];Ve.length-=$e,$e=0}}Ve.length=0,$e=0}var tt,rt,nt,ot=void 0!==t?t:self,it=ot.MutationObserver||ot.WebKitMutationObserver;function at(e){return function(){var t=setTimeout(n,0),r=setInterval(n,50);function n(){clearTimeout(t),clearInterval(r),e()}}}"function"==typeof it?(tt=1,rt=new it(et),nt=document.createTextNode(""),rt.observe(nt,{characterData:!0}),Ye=function(){tt=-tt,nt.data=tt}):Ye=at(et),Xe.requestFlush=Ye,Xe.makeRequestCallFromTimer=at;var ut=Object.freeze({default:Ke,__moduleExports:Ke}),lt=ut&&Ke||ut,ft=[],st=[],ct=lt.makeRequestCallFromTimer(function(){if(st.length)throw st.shift()});var dt=pt;function pt(e){var t;(t=ft.length?ft.pop():new mt).task=e,lt(t)}function mt(){this.task=null}mt.prototype.call=function(){try{this.task.call()}catch(e){pt.onerror?pt.onerror(e):(st.push(e),ct())}finally{this.task=null,ft[ft.length]=this}};var yt="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};var ht=null,gt={fontFamily:function(){return function e(t){return Array.isArray(t)?t.map(e).join(","):"object"===(void 0===t?"undefined":yt(t))?(_t(t.src,"@font-face",[t],!1),'"'+String(t.fontFamily)+'"'):t}}(),animationName:function(){return function e(t,r){if(Array.isArray(t))return t.map(function(t){return e(t,r)}).join(",");if("object"===(void 0===t?"undefined":yt(t))){var n="keyframe_"+String(Ne(t)),o="@keyframes "+n+"{";return t instanceof Ee?t.forEach(function(e,t){o+=Ue(t,[e],r,gt,!1).join("")}):Object.keys(t).forEach(function(e){o+=Ue(e,[t[e]],r,gt,!1).join("")}),Ot(n,[o+="}"]),n}return t}}()},bt={},vt=[],xt=!1,Ot=function(e,t){var r;if(!bt[e]){if(!xt){if("undefined"==typeof document)throw new Error("Cannot automatically buffer without a document");xt=!0,dt(Mt)}(r=vt).push.apply(r,function(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}(t)),bt[e]=!0}},_t=function(e,t,r,n){var o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[];if(!bt[e]){var i=Ue(t,r,o,gt,n);Ot(e,i)}},kt=function(){vt=[],bt={},xt=!1,ht=null},St=function(){if(xt)throw new Error("Cannot buffer while already buffering");xt=!0},jt=function(){xt=!1;var e=vt;return vt=[],e},wt=function(){return jt().join("")},Mt=function(){var e=jt();e.length>0&&function(e){if(null==ht&&null==(ht=document.querySelector("style[data-aphrodite]"))){var t=document.head||document.getElementsByTagName("head")[0];(ht=document.createElement("style")).type="text/css",ht.setAttribute("data-aphrodite",""),t.appendChild(ht)}var r=ht.styleSheet||ht.sheet;if(r.insertRule){var n=r.cssRules.length;e.forEach(function(e){try{r.insertRule(e,n),n+=1}catch(e){}})}else ht.innerText=(ht.innerText||"")+e.join("")}(e)},Pt=function(){return Object.keys(bt)},zt=function(e){e.forEach(function(e){bt[e]=!0})},At=function(e,t,r){var n=[],o=[],i=function e(t,r,n,o){for(var i=0;i<t.length;i+=1)t[i]&&(Array.isArray(t[i])?o+=e(t[i],r,n,o):(r.push(t[i]._name),n.push(t[i]._definition),o+=t[i]._len));return o}(t,n,o,0);if(0===n.length)return"";var a;return a=1===n.length?"_"+String(n[0]):"_"+String(De(n.join()))+String((i%36).toString(36)),_t(a,"."+String(a),o,e,r),a},Et=function(e,t){return String(t)+"_"+String(De(e))},Ct=De,Wt={create:function(){return function(e){for(var t={},r=Object.keys(e),n=0;n<r.length;n+=1){var o=r[n],i=e[o],a=JSON.stringify(i);t[o]={_len:a.length,_name:Ct(a,o),_definition:i}}return t}}(),rehydrate:function(){return function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];zt(e)}}()},Tt="undefined"!=typeof window?null:{renderStatic:function(){return function(e){return kt(),St(),{html:e(),css:{content:wt(),renderedClassNames:Pt()}}}}()},Ft=null;var It=function e(t,r){return{StyleSheet:Object.assign({},Wt,{extend:function(n){var o=n.map(function(e){return e.selectorHandler}).filter(function(e){return e});return e(t,r.concat(o))}}),StyleSheetServer:Tt,StyleSheetTestUtils:Ft,minify:function(e){Ct=e?De:Et},css:function(){for(var e=arguments.length,n=Array(e),o=0;o<e;o++)n[o]=arguments[o];return At(t,n,r)}}}(!0,He),Rt=It.StyleSheet,Bt=It.StyleSheetServer,Dt=It.StyleSheetTestUtils,Nt=It.css,Gt=It.minify;e.StyleSheet=Rt,e.StyleSheetServer=Bt,e.StyleSheetTestUtils=Dt,e.css=Nt,e.minify=Gt,e.flushToStyleTag=Mt,e.injectAndGetClassName=At,e.defaultSelectorHandlers=He,Object.defineProperty(e,"__esModule",{value:!0})});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.aphrodite={})}(this,function(e){"use strict";var t=function(e){for(var t=5381,r=e.length;r;)t=33*t^e.charCodeAt(--r);return t>>>0},r=/([A-Z])/g,n=function(e){return"-"+String(e.toLowerCase())},o={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridColumn:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0};var i=["Webkit","ms","Moz","O"];Object.keys(o).forEach(function(e){i.forEach(function(t){o[function(e,t){return e+t.charAt(0).toUpperCase()+t.substring(1)}(t,e)]=o[e]})});var a=function(e,t){return"number"==typeof t?o[e]?""+t:t+"px":""+t},u=function(e,t){return s(a(e,t))},l=function(e,r){return t(e).toString(36)},f=function(e){return l(JSON.stringify(e))},s=function(e){return"!"===e[e.length-10]&&" !important"===e.slice(-11)?e:String(e)+" !important"},c="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function d(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function p(e,t){return e(t={exports:{}},t.exports),t.exports}var m=y;function y(e){g.length||h(),g[g.length]=e}var h,g=[],b=0,v=1024;function x(){for(;b<g.length;){var e=b;if(b+=1,g[e].call(),b>v){for(var t=0,r=g.length-b;t<r;t++)g[t]=g[t+b];g.length-=b,b=0}}g.length=0,b=0}var O,_,k,S=void 0!==c?c:self,j=S.MutationObserver||S.WebKitMutationObserver;function w(e){return function(){var t=setTimeout(n,0),r=setInterval(n,50);function n(){clearTimeout(t),clearInterval(r),e()}}}"function"==typeof j?(O=1,_=new j(x),k=document.createTextNode(""),_.observe(k,{characterData:!0}),h=function(){O=-O,k.data=O}):h=w(x),y.requestFlush=h,y.makeRequestCallFromTimer=w;var M=Object.freeze({default:m,__moduleExports:m}),P=M&&m||M,z=[],A=[],E=P.makeRequestCallFromTimer(function(){if(A.length)throw A.shift()});var C=T;function T(e){var t;(t=z.length?z.pop():new W).task=e,P(t)}function W(){this.task=null}W.prototype.call=function(){try{this.task.call()}catch(e){T.onerror?T.onerror(e):(A.push(e),E())}finally{this.task=null,z[z.length]=this}};var F="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},I=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}();var R="undefined"!=typeof Map,B=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.elements={},this.keyOrder=[]}return I(e,[{key:"forEach",value:function(){return function(e){for(var t=0;t<this.keyOrder.length;t++)e(this.elements[this.keyOrder[t]],this.keyOrder[t])}}()},{key:"set",value:function(){return function(t,r,n){if(this.elements.hasOwnProperty(t)){if(n){var o=this.keyOrder.indexOf(t);this.keyOrder.splice(o,1),this.keyOrder.push(t)}}else this.keyOrder.push(t);if(null!=r){if(R&&r instanceof Map||r instanceof e){var i=this.elements.hasOwnProperty(t)?this.elements[t]:new e;return r.forEach(function(e,t){i.set(t,e,n)}),void(this.elements[t]=i)}if(Array.isArray(r)||"object"!==(void 0===r?"undefined":F(r)))this.elements[t]=r;else{for(var a=this.elements.hasOwnProperty(t)?this.elements[t]:new e,u=Object.keys(r),l=0;l<u.length;l+=1)a.set(u[l],r[u[l]],n);this.elements[t]=a}}else this.elements[t]=r}}()},{key:"get",value:function(){return function(e){return this.elements[e]}}()},{key:"has",value:function(){return function(e){return this.elements.hasOwnProperty(e)}}()},{key:"addStyleType",value:function(){return function(t){var r=this;if(R&&t instanceof Map||t instanceof e)t.forEach(function(e,t){r.set(t,e,!0)});else for(var n=Object.keys(t),o=0;o<n.length;o++)this.set(n[o],t[n[o]],!0)}}()}]),e}(),D=p(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return e.charAt(0).toUpperCase()+e.slice(1)},e.exports=t.default}),N=d(D),G=Object.freeze({default:N,__moduleExports:D}),L=G&&N||G,H=p(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r){if(e.hasOwnProperty(t)){for(var o={},i=e[t],a=(0,n.default)(t),u=Object.keys(r),l=0;l<u.length;l++){var f=u[l];if(f===t)for(var s=0;s<i.length;s++)o[i[s]+a]=r[t];o[f]=r[f]}return o}return r};var r,n=(r=L)&&r.__esModule?r:{default:r};e.exports=t.default}),U=d(H),q=Object.freeze({default:U,__moduleExports:H}),Z=p(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r,n,o){for(var i=0,a=e.length;i<a;++i){var u=e[i](t,r,n,o);if(u)return u}},e.exports=t.default}),J=d(Z),K=Object.freeze({default:J,__moduleExports:Z}),X=p(function(e,t){function r(e,t){-1===e.indexOf(t)&&e.push(t)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if(Array.isArray(t))for(var n=0,o=t.length;n<o;++n)r(e,t[n]);else r(e,t)},e.exports=t.default}),Y=d(X),V=Object.freeze({default:Y,__moduleExports:X}),$=p(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return e instanceof Object&&!Array.isArray(e)},e.exports=t.default}),Q=d($),ee=Object.freeze({default:Q,__moduleExports:$}),te=q&&U||q,re=K&&J||K,ne=V&&Y||V,oe=ee&&Q||ee,ie=d(p(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){var t=e.prefixMap,a=e.plugins;return function e(u){for(var l in u){var f=u[l];if((0,i.default)(f))u[l]=e(f);else if(Array.isArray(f)){for(var s=[],c=0,d=f.length;c<d;++c){var p=(0,n.default)(a,l,f[c],u,t);(0,o.default)(s,p||f[c])}s.length>0&&(u[l]=s)}else{var m=(0,n.default)(a,l,f,u,t);m&&(u[l]=m),u=(0,r.default)(t,l,u)}}return u}};var r=a(te),n=a(re),o=a(ne),i=a(oe);function a(e){return e&&e.__esModule?e:{default:e}}e.exports=t.default})),ae=p(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return"string"==typeof e&&r.test(e)};var r=/-webkit-|-moz-|-ms-/;e.exports=t.default}),ue=d(ae),le=Object.freeze({default:ue,__moduleExports:ae}),fe=le&&ue||le,se=p(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("string"==typeof t&&!(0,n.default)(t)&&t.indexOf("calc(")>-1)return o.map(function(e){return t.replace(/calc\(/g,e+"calc(")})};var r,n=(r=fe)&&r.__esModule?r:{default:r};var o=["-webkit-","-moz-",""];e.exports=t.default}),ce=d(se),de=Object.freeze({default:ce,__moduleExports:se}),pe=p(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("string"==typeof t&&!(0,n.default)(t)&&t.indexOf("cross-fade(")>-1)return o.map(function(e){return t.replace(/cross-fade\(/g,e+"cross-fade(")})};var r,n=(r=fe)&&r.__esModule?r:{default:r};var o=["-webkit-",""];e.exports=t.default}),me=d(pe),ye=Object.freeze({default:me,__moduleExports:pe}),he=p(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("cursor"===e&&n.hasOwnProperty(t))return r.map(function(e){return e+t})};var r=["-webkit-","-moz-",""],n={"zoom-in":!0,"zoom-out":!0,grab:!0,grabbing:!0};e.exports=t.default}),ge=d(he),be=Object.freeze({default:ge,__moduleExports:he}),ve=p(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("string"==typeof t&&!(0,n.default)(t)&&t.indexOf("filter(")>-1)return o.map(function(e){return t.replace(/filter\(/g,e+"filter(")})};var r,n=(r=fe)&&r.__esModule?r:{default:r};var o=["-webkit-",""];e.exports=t.default}),xe=d(ve),Oe=Object.freeze({default:xe,__moduleExports:ve}),_e=p(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("display"===e&&r.hasOwnProperty(t))return r[t]};var r={flex:["-webkit-box","-moz-box","-ms-flexbox","-webkit-flex","flex"],"inline-flex":["-webkit-inline-box","-moz-inline-box","-ms-inline-flexbox","-webkit-inline-flex","inline-flex"]};e.exports=t.default}),ke=d(_e),Se=Object.freeze({default:ke,__moduleExports:_e}),je=p(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,o){n.hasOwnProperty(e)&&(o[n[e]]=r[t]||t)};var r={"space-around":"distribute","space-between":"justify","flex-start":"start","flex-end":"end"},n={alignContent:"msFlexLinePack",alignSelf:"msFlexItemAlign",alignItems:"msFlexAlign",justifyContent:"msFlexPack",order:"msFlexOrder",flexGrow:"msFlexPositive",flexShrink:"msFlexNegative",flexBasis:"msFlexPreferredSize"};e.exports=t.default}),we=d(je),Me=Object.freeze({default:we,__moduleExports:je}),Pe=p(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,o){"flexDirection"===e&&"string"==typeof t&&(t.indexOf("column")>-1?o.WebkitBoxOrient="vertical":o.WebkitBoxOrient="horizontal",t.indexOf("reverse")>-1?o.WebkitBoxDirection="reverse":o.WebkitBoxDirection="normal");n.hasOwnProperty(e)&&(o[n[e]]=r[t]||t)};var r={"space-around":"justify","space-between":"justify","flex-start":"start","flex-end":"end","wrap-reverse":"multiple",wrap:"multiple"},n={alignItems:"WebkitBoxAlign",justifyContent:"WebkitBoxPack",flexWrap:"WebkitBoxLines"};e.exports=t.default}),ze=d(Pe),Ae=Object.freeze({default:ze,__moduleExports:Pe}),Ee=p(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("string"==typeof t&&!(0,n.default)(t)&&i.test(t))return o.map(function(e){return e+t})};var r,n=(r=fe)&&r.__esModule?r:{default:r};var o=["-webkit-","-moz-",""],i=/linear-gradient|radial-gradient|repeating-linear-gradient|repeating-radial-gradient/;e.exports=t.default}),Ce=d(Ee),Te=Object.freeze({default:Ce,__moduleExports:Ee}),We=p(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("string"==typeof t&&!(0,n.default)(t)&&t.indexOf("image-set(")>-1)return o.map(function(e){return t.replace(/image-set\(/g,e+"image-set(")})};var r,n=(r=fe)&&r.__esModule?r:{default:r};var o=["-webkit-",""];e.exports=t.default}),Fe=d(We),Ie=Object.freeze({default:Fe,__moduleExports:We}),Re=p(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("position"===e&&"sticky"===t)return["-webkit-sticky","sticky"]},e.exports=t.default}),Be=d(Re),De=Object.freeze({default:Be,__moduleExports:Re}),Ne=p(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if(n.hasOwnProperty(e)&&o.hasOwnProperty(t))return r.map(function(e){return e+t})};var r=["-webkit-","-moz-",""],n={maxHeight:!0,maxWidth:!0,width:!0,height:!0,columnWidth:!0,minWidth:!0,minHeight:!0},o={"min-content":!0,"max-content":!0,"fill-available":!0,"fit-content":!0,"contain-floats":!0};e.exports=t.default}),Ge=d(Ne),Le=Object.freeze({default:Ge,__moduleExports:Ne}),He=/[A-Z]/g,Ue=/^ms-/,qe={};var Ze=function(e){return e in qe?qe[e]:qe[e]=e.replace(He,"-$&").toLowerCase().replace(Ue,"-ms-")},Je=Object.freeze({default:Ze,__moduleExports:Ze}),Ke=Je&&Ze||Je,Xe=p(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return(0,n.default)(e)};var r,n=(r=Ke)&&r.__esModule?r:{default:r};e.exports=t.default}),Ye=d(Xe),Ve=Object.freeze({default:Ye,__moduleExports:Xe}),$e=Ve&&Ye||Ve,Qe=p(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,i,l){if("string"==typeof t&&a.hasOwnProperty(e)){var f=function(e,t){if((0,n.default)(e))return e;for(var o=e.split(/,(?![^()]*(?:\([^()]*\))?\))/g),i=0,a=o.length;i<a;++i){var l=o[i],f=[l];for(var s in t){var c=(0,r.default)(s);if(l.indexOf(c)>-1&&"order"!==c)for(var d=t[s],p=0,m=d.length;p<m;++p)f.unshift(l.replace(c,u[d[p]]+c))}o[i]=f.join(",")}return o.join(",")}(t,l),s=f.split(/,(?![^()]*(?:\([^()]*\))?\))/g).filter(function(e){return!/-moz-|-ms-/.test(e)}).join(",");if(e.indexOf("Webkit")>-1)return s;var c=f.split(/,(?![^()]*(?:\([^()]*\))?\))/g).filter(function(e){return!/-webkit-|-ms-/.test(e)}).join(",");return e.indexOf("Moz")>-1?c:(i["Webkit"+(0,o.default)(e)]=s,i["Moz"+(0,o.default)(e)]=c,f)}};var r=i($e),n=i(fe),o=i(L);function i(e){return e&&e.__esModule?e:{default:e}}var a={transition:!0,transitionProperty:!0,WebkitTransition:!0,WebkitTransitionProperty:!0,MozTransition:!0,MozTransitionProperty:!0},u={Webkit:"-webkit-",Moz:"-moz-",ms:"-ms-"};e.exports=t.default}),et=d(Qe),tt=Object.freeze({default:et,__moduleExports:Qe}),rt=["Webkit"],nt=["Moz"],ot=["ms"],it=["Webkit","Moz"],at=["Webkit","ms"],ut=["Webkit","Moz","ms"];var lt=ie({plugins:[de&&ce||de,ye&&me||ye,be&&ge||be,Oe&&xe||Oe,Se&&ke||Se,Me&&we||Me,Ae&&ze||Ae,Te&&Ce||Te,Ie&&Fe||Ie,De&&Be||De,Le&&Ge||Le,tt&&et||tt],prefixMap:{transform:at,transformOrigin:at,transformOriginX:at,transformOriginY:at,backfaceVisibility:rt,perspective:rt,perspectiveOrigin:rt,transformStyle:rt,transformOriginZ:rt,animation:rt,animationDelay:rt,animationDirection:rt,animationFillMode:rt,animationDuration:rt,animationIterationCount:rt,animationName:rt,animationPlayState:rt,animationTimingFunction:rt,appearance:it,userSelect:ut,fontKerning:rt,textEmphasisPosition:rt,textEmphasis:rt,textEmphasisStyle:rt,textEmphasisColor:rt,boxDecorationBreak:rt,clipPath:rt,maskImage:rt,maskMode:rt,maskRepeat:rt,maskPosition:rt,maskClip:rt,maskOrigin:rt,maskSize:rt,maskComposite:rt,mask:rt,maskBorderSource:rt,maskBorderMode:rt,maskBorderSlice:rt,maskBorderWidth:rt,maskBorderOutset:rt,maskBorderRepeat:rt,maskBorder:rt,maskType:rt,textDecorationStyle:it,textDecorationSkip:it,textDecorationLine:it,textDecorationColor:it,filter:rt,fontFeatureSettings:it,breakAfter:ut,breakBefore:ut,breakInside:ut,columnCount:it,columnFill:it,columnGap:it,columnRule:it,columnRuleColor:it,columnRuleStyle:it,columnRuleWidth:it,columns:it,columnSpan:it,columnWidth:it,writingMode:at,flex:at,flexBasis:rt,flexDirection:at,flexGrow:rt,flexFlow:at,flexShrink:rt,flexWrap:at,alignContent:rt,alignItems:rt,alignSelf:rt,justifyContent:rt,order:rt,transitionDelay:rt,transitionDuration:rt,transitionProperty:rt,transitionTimingFunction:rt,backdropFilter:rt,scrollSnapType:at,scrollSnapPointsX:at,scrollSnapPointsY:at,scrollSnapDestination:at,scrollSnapCoordinate:at,shapeImageThreshold:rt,shapeImageMargin:rt,shapeImageOutside:rt,hyphens:ut,flowInto:at,flowFrom:at,regionFragment:at,boxSizing:nt,textAlignLast:nt,tabSize:nt,wrapFlow:ot,wrapThrough:ot,wrapMargin:ot,touchAction:ot,gridTemplateColumns:ot,gridTemplateRows:ot,gridTemplateAreas:ot,gridTemplate:ot,gridAutoColumns:ot,gridAutoRows:ot,gridAutoFlow:ot,grid:ot,gridRowStart:ot,gridColumnStart:ot,gridRowEnd:ot,gridRow:ot,gridColumn:ot,gridColumnEnd:ot,gridColumnGap:ot,gridRowGap:ot,gridArea:ot,gridGap:ot,textSizeAdjust:at,borderImage:rt,borderImageOutset:rt,borderImageRepeat:rt,borderImageSlice:rt,borderImageSource:rt,borderImageWidth:rt}}),ft=[function(){return function(e,t,r){return":"!==e[0]?null:r(t+e)}}(),function(){return function(e,t,r){if("@"!==e[0])return null;var n=r(t);return[String(e)+"{"+String(n.join(""))+"}"]}}()],st=function e(t,r,n,o,i){for(var a=new B,u=0;u<r.length;u++)a.addStyleType(r[u]);var l=new B,f=[];a.forEach(function(r,a){n.some(function(u){var l=u(a,t,function(t){return e(t,[r],n,o,i)});if(null!=l)return Array.isArray(l)?f.push.apply(f,function(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}(l)):(console.warn("WARNING: Selector handlers should return an array of rules.Returning a string containing multiple rules is deprecated.",u),f.push("@media all {"+String(l)+"}")),!0})||l.set(a,r,!0)});var s=pt(t,l,o,i,n);return s&&f.unshift(s),f},ct=function(e,t,o){return String("m"===(i=e.replace(r,n))[0]&&"s"===i[1]&&"-"===i[2]?"-"+String(i):i)+":"+String(o(e,t))+";";var i},dt=function(e,t){return e[t]=!0,e},pt=function(e,t,r,n,o){!function(e,t,r){if(t)for(var n=Object.keys(t),o=0;o<n.length;o++){var i=n[o];e.has(i)&&e.set(i,t[i](e.get(i),r),!1)}}(t,r,o);var i=Object.keys(t.elements).reduce(dt,Object.create(null)),l=lt(t.elements),f=Object.keys(l);if(f.length!==t.keyOrder.length)for(var s=0;s<f.length;s++)if(!i[f[s]]){var c=void 0;if((c="W"===f[s][0]?f[s][6].toLowerCase()+f[s].slice(7):"o"===f[s][1]?f[s][3].toLowerCase()+f[s].slice(4):f[s][2].toLowerCase()+f[s].slice(3))&&i[c]){var d=t.keyOrder.indexOf(c);t.keyOrder.splice(d,0,f[s])}else t.keyOrder.unshift(f[s])}for(var p=!1===n?a:u,m=[],y=0;y<t.keyOrder.length;y++){var h=t.keyOrder[y],g=l[h];if(Array.isArray(g))for(var b=0;b<g.length;b++)m.push(ct(h,g[b],p));else m.push(ct(h,g,p))}return m.length?String(e)+"{"+String(m.join(""))+"}":""},mt="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};var yt=null,ht={fontFamily:function(){return function e(t){return Array.isArray(t)?t.map(e).join(","):"object"===(void 0===t?"undefined":mt(t))?(Ot(t.src,"@font-face",[t],!1),'"'+String(t.fontFamily)+'"'):t}}(),animationName:function(){return function e(t,r){if(Array.isArray(t))return t.map(function(t){return e(t,r)}).join(",");if("object"===(void 0===t?"undefined":mt(t))){var n="keyframe_"+String(f(t)),o="@keyframes "+n+"{";return t instanceof B?t.forEach(function(e,t){o+=st(t,[e],r,ht,!1).join("")}):Object.keys(t).forEach(function(e){o+=st(e,[t[e]],r,ht,!1).join("")}),xt(n,[o+="}"]),n}return t}}()},gt={},bt=[],vt=!1,xt=function(e,t){var r;if(!gt[e]){if(!vt){if("undefined"==typeof document)throw new Error("Cannot automatically buffer without a document");vt=!0,C(wt)}(r=bt).push.apply(r,function(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}(t)),gt[e]=!0}},Ot=function(e,t,r,n){var o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[];if(!gt[e]){var i=st(t,r,o,ht,n);xt(e,i)}},_t=function(){bt=[],gt={},vt=!1,yt=null},kt=function(){if(vt)throw new Error("Cannot buffer while already buffering");vt=!0},St=function(){vt=!1;var e=bt;return bt=[],e},jt=function(){return St().join("")},wt=function(){var e=St();e.length>0&&function(e){if(null==yt&&null==(yt=document.querySelector("style[data-aphrodite]"))){var t=document.head||document.getElementsByTagName("head")[0];(yt=document.createElement("style")).type="text/css",yt.setAttribute("data-aphrodite",""),t.appendChild(yt)}var r=yt.styleSheet||yt.sheet;if(r.insertRule){var n=r.cssRules.length;e.forEach(function(e){try{r.insertRule(e,n),n+=1}catch(e){}})}else yt.innerText=(yt.innerText||"")+e.join("")}(e)},Mt=function(){return Object.keys(gt)},Pt=function(e){e.forEach(function(e){gt[e]=!0})},zt=function(e,t,r){var n=[],o=[],i=function e(t,r,n,o){for(var i=0;i<t.length;i+=1)t[i]&&(Array.isArray(t[i])?o+=e(t[i],r,n,o):(r.push(t[i]._name),n.push(t[i]._definition),o+=t[i]._len));return o}(t,n,o,0);if(0===n.length)return"";var a;return a=1===n.length?"_"+String(n[0]):"_"+String(l(n.join()))+String((i%36).toString(36)),Ot(a,"."+String(a),o,e,r),a},At=function(e,t){return String(t)+"_"+String(l(e))},Et=l,Ct={create:function(){return function(e){for(var t={},r=Object.keys(e),n=0;n<r.length;n+=1){var o=r[n],i=e[o],a=JSON.stringify(i);t[o]={_len:a.length,_name:Et(a,o),_definition:i}}return t}}(),rehydrate:function(){return function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];Pt(e)}}()},Tt="undefined"!=typeof window?null:{renderStatic:function(){return function(e){return _t(),kt(),{html:e(),css:{content:jt(),renderedClassNames:Mt()}}}}()},Wt=null;var Ft=function e(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:ft;return{StyleSheet:Object.assign({},Ct,{extend:function(n){var o=n.map(function(e){return e.selectorHandler}).filter(function(e){return e});return e(t,r.concat(o))}}),StyleSheetServer:Tt,StyleSheetTestUtils:Wt,minify:function(e){Et=e?l:At},css:function(){for(var e=arguments.length,n=Array(e),o=0;o<e;o++)n[o]=arguments[o];return zt(t,n,r)},flushToStyleTag:wt,injectAndGetClassName:zt,defaultSelectorHandlers:ft}}(!0),It=Ft.StyleSheet,Rt=Ft.StyleSheetServer,Bt=Ft.StyleSheetTestUtils,Dt=Ft.css,Nt=Ft.minify,Gt=Ft.flushToStyleTag,Lt=Ft.injectAndGetClassName,Ht=Ft.defaultSelectorHandlers;e.StyleSheet=It,e.StyleSheetServer=Rt,e.StyleSheetTestUtils=Bt,e.css=Dt,e.minify=Nt,e.flushToStyleTag=Gt,e.injectAndGetClassName=Lt,e.defaultSelectorHandlers=Ht,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=aphrodite.umd.min.js.map

1184

es/index.js

@@ -1,1165 +0,31 @@

import calc from 'inline-style-prefixer/static/plugins/calc';
import crossFade from 'inline-style-prefixer/static/plugins/crossFade';
import cursor from 'inline-style-prefixer/static/plugins/cursor';
import filter from 'inline-style-prefixer/static/plugins/filter';
import flex from 'inline-style-prefixer/static/plugins/flex';
import flexboxIE from 'inline-style-prefixer/static/plugins/flexboxIE';
import flexboxOld from 'inline-style-prefixer/static/plugins/flexboxOld';
import gradient from 'inline-style-prefixer/static/plugins/gradient';
import imageSet from 'inline-style-prefixer/static/plugins/imageSet';
import position from 'inline-style-prefixer/static/plugins/position';
import sizing from 'inline-style-prefixer/static/plugins/sizing';
import transition from 'inline-style-prefixer/static/plugins/transition';
import stringHash from 'string-hash';
import createPrefixer from 'inline-style-prefixer/static/createPrefixer';
import asap from 'asap';
import { a as makeExports } from './chunk-957f2f88.js';
import 'string-hash';
import 'inline-style-prefixer/static/plugins/calc';
import 'inline-style-prefixer/static/plugins/crossFade';
import 'inline-style-prefixer/static/plugins/cursor';
import 'inline-style-prefixer/static/plugins/filter';
import 'inline-style-prefixer/static/plugins/flex';
import 'inline-style-prefixer/static/plugins/flexboxIE';
import 'inline-style-prefixer/static/plugins/flexboxOld';
import 'inline-style-prefixer/static/plugins/gradient';
import 'inline-style-prefixer/static/plugins/imageSet';
import 'inline-style-prefixer/static/plugins/position';
import 'inline-style-prefixer/static/plugins/sizing';
import 'inline-style-prefixer/static/plugins/transition';
import 'inline-style-prefixer/static/createPrefixer';
import 'asap';
var w = ["Webkit"];
var m = ["Moz"];
var ms = ["ms"];
var wm = ["Webkit", "Moz"];
var wms = ["Webkit", "ms"];
var wmms = ["Webkit", "Moz", "ms"];
var staticPrefixData = {
plugins: [calc, crossFade, cursor, filter, flex, flexboxIE, flexboxOld, gradient, imageSet, position, sizing, transition],
prefixMap: { "transform": wms, "transformOrigin": wms, "transformOriginX": wms, "transformOriginY": wms, "backfaceVisibility": w, "perspective": w, "perspectiveOrigin": w, "transformStyle": w, "transformOriginZ": w, "animation": w, "animationDelay": w, "animationDirection": w, "animationFillMode": w, "animationDuration": w, "animationIterationCount": w, "animationName": w, "animationPlayState": w, "animationTimingFunction": w, "appearance": wm, "userSelect": wmms, "fontKerning": w, "textEmphasisPosition": w, "textEmphasis": w, "textEmphasisStyle": w, "textEmphasisColor": w, "boxDecorationBreak": w, "clipPath": w, "maskImage": w, "maskMode": w, "maskRepeat": w, "maskPosition": w, "maskClip": w, "maskOrigin": w, "maskSize": w, "maskComposite": w, "mask": w, "maskBorderSource": w, "maskBorderMode": w, "maskBorderSlice": w, "maskBorderWidth": w, "maskBorderOutset": w, "maskBorderRepeat": w, "maskBorder": w, "maskType": w, "textDecorationStyle": wm, "textDecorationSkip": wm, "textDecorationLine": wm, "textDecorationColor": wm, "filter": w, "fontFeatureSettings": wm, "breakAfter": wmms, "breakBefore": wmms, "breakInside": wmms, "columnCount": wm, "columnFill": wm, "columnGap": wm, "columnRule": wm, "columnRuleColor": wm, "columnRuleStyle": wm, "columnRuleWidth": wm, "columns": wm, "columnSpan": wm, "columnWidth": wm, "writingMode": wms, "flex": wms, "flexBasis": w, "flexDirection": wms, "flexGrow": w, "flexFlow": wms, "flexShrink": w, "flexWrap": wms, "alignContent": w, "alignItems": w, "alignSelf": w, "justifyContent": w, "order": w, "transitionDelay": w, "transitionDuration": w, "transitionProperty": w, "transitionTimingFunction": w, "backdropFilter": w, "scrollSnapType": wms, "scrollSnapPointsX": wms, "scrollSnapPointsY": wms, "scrollSnapDestination": wms, "scrollSnapCoordinate": wms, "shapeImageThreshold": w, "shapeImageMargin": w, "shapeImageOutside": w, "hyphens": wmms, "flowInto": wms, "flowFrom": wms, "regionFragment": wms, "boxSizing": m, "textAlignLast": m, "tabSize": m, "wrapFlow": ms, "wrapThrough": ms, "wrapMargin": ms, "touchAction": ms, "gridTemplateColumns": ms, "gridTemplateRows": ms, "gridTemplateAreas": ms, "gridTemplate": ms, "gridAutoColumns": ms, "gridAutoRows": ms, "gridAutoFlow": ms, "grid": ms, "gridRowStart": ms, "gridColumnStart": ms, "gridRowEnd": ms, "gridRow": ms, "gridColumn": ms, "gridColumnEnd": ms, "gridColumnGap": ms, "gridRowGap": ms, "gridArea": ms, "gridGap": ms, "textSizeAdjust": wms, "borderImage": w, "borderImageOutset": w, "borderImageRepeat": w, "borderImageSlice": w, "borderImageSource": w, "borderImageWidth": w }
};
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var MAP_EXISTS = typeof Map !== 'undefined';
var OrderedElements = function () {
/* ::
elements: {[string]: any};
keyOrder: string[];
*/
function OrderedElements() {
_classCallCheck(this, OrderedElements);
this.elements = {};
this.keyOrder = [];
}
_createClass(OrderedElements, [{
key: 'forEach',
value: function () {
function forEach(callback /* : (string, any) => void */) {
for (var i = 0; i < this.keyOrder.length; i++) {
// (value, key) to match Map's API
callback(this.elements[this.keyOrder[i]], this.keyOrder[i]);
}
}
return forEach;
}()
}, {
key: 'set',
value: function () {
function set(key /* : string */, value /* : any */, shouldReorder /* : ?boolean */) {
if (!this.elements.hasOwnProperty(key)) {
this.keyOrder.push(key);
} else if (shouldReorder) {
var index = this.keyOrder.indexOf(key);
this.keyOrder.splice(index, 1);
this.keyOrder.push(key);
}
if (value == null) {
this.elements[key] = value;
return;
}
if (MAP_EXISTS && value instanceof Map || value instanceof OrderedElements) {
// We have found a nested Map, so we need to recurse so that all
// of the nested objects and Maps are merged properly.
var nested = this.elements.hasOwnProperty(key) ? this.elements[key] : new OrderedElements();
value.forEach(function (value, key) {
nested.set(key, value, shouldReorder);
});
this.elements[key] = nested;
return;
}
if (!Array.isArray(value) && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object') {
// We have found a nested object, so we need to recurse so that all
// of the nested objects and Maps are merged properly.
var _nested = this.elements.hasOwnProperty(key) ? this.elements[key] : new OrderedElements();
var keys = Object.keys(value);
for (var i = 0; i < keys.length; i += 1) {
_nested.set(keys[i], value[keys[i]], shouldReorder);
}
this.elements[key] = _nested;
return;
}
this.elements[key] = value;
}
return set;
}()
}, {
key: 'get',
value: function () {
function get(key /* : string */) /* : any */{
return this.elements[key];
}
return get;
}()
}, {
key: 'has',
value: function () {
function has(key /* : string */) /* : boolean */{
return this.elements.hasOwnProperty(key);
}
return has;
}()
}, {
key: 'addStyleType',
value: function () {
function addStyleType(styleType /* : any */) /* : void */{
var _this = this;
if (MAP_EXISTS && styleType instanceof Map || styleType instanceof OrderedElements) {
styleType.forEach(function (value, key) {
_this.set(key, value, true);
});
} else {
var keys = Object.keys(styleType);
for (var i = 0; i < keys.length; i++) {
this.set(keys[i], styleType[keys[i]], true);
}
}
}
return addStyleType;
}()
}]);
return OrderedElements;
}();
/* ::
type ObjectMap = { [id:string]: any };
*/
var UPPERCASE_RE = /([A-Z])/g;
var UPPERCASE_RE_TO_KEBAB = function UPPERCASE_RE_TO_KEBAB(match /* : string */) {
return (/* : string */'-' + String(match.toLowerCase())
);
};
var kebabifyStyleName = function kebabifyStyleName(string /* : string */) /* : string */{
var result = string.replace(UPPERCASE_RE, UPPERCASE_RE_TO_KEBAB);
if (result[0] === 'm' && result[1] === 's' && result[2] === '-') {
return '-' + String(result);
}
return result;
};
/**
* CSS properties which accept numbers but are not in units of "px".
* Taken from React's CSSProperty.js
*/
var isUnitlessNumber = {
animationIterationCount: true,
borderImageOutset: true,
borderImageSlice: true,
borderImageWidth: true,
boxFlex: true,
boxFlexGroup: true,
boxOrdinalGroup: true,
columnCount: true,
flex: true,
flexGrow: true,
flexPositive: true,
flexShrink: true,
flexNegative: true,
flexOrder: true,
gridRow: true,
gridColumn: true,
fontWeight: true,
lineClamp: true,
lineHeight: true,
opacity: true,
order: true,
orphans: true,
tabSize: true,
widows: true,
zIndex: true,
zoom: true,
// SVG-related properties
fillOpacity: true,
floodOpacity: true,
stopOpacity: true,
strokeDasharray: true,
strokeDashoffset: true,
strokeMiterlimit: true,
strokeOpacity: true,
strokeWidth: true
};
/**
* Taken from React's CSSProperty.js
*
* @param {string} prefix vendor-specific prefix, eg: Webkit
* @param {string} key style name, eg: transitionDuration
* @return {string} style name prefixed with `prefix`, properly camelCased, eg:
* WebkitTransitionDuration
*/
function prefixKey(prefix, key) {
return prefix + key.charAt(0).toUpperCase() + key.substring(1);
}
/**
* Support style names that may come passed in prefixed by adding permutations
* of vendor prefixes.
* Taken from React's CSSProperty.js
*/
var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
// Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
// infinite loop, because it iterates over the newly added props too.
// Taken from React's CSSProperty.js
Object.keys(isUnitlessNumber).forEach(function (prop) {
prefixes.forEach(function (prefix) {
isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
});
});
var stringifyValue = function stringifyValue(key /* : string */
, prop /* : any */
) /* : string */{
if (typeof prop === "number") {
if (isUnitlessNumber[key]) {
return "" + prop;
} else {
return prop + "px";
}
} else {
return '' + prop;
}
};
var stringifyAndImportantifyValue = function stringifyAndImportantifyValue(key /* : string */
, prop /* : any */
) {
return (/* : string */importantify(stringifyValue(key, prop))
);
};
// Turn a string into a hash string of base-36 values (using letters and numbers)
// eslint-disable-next-line no-unused-vars
var hashString = function hashString(string /* : string */, key /* : ?string */) {
return (/* string */stringHash(string).toString(36)
);
};
// Hash a javascript object using JSON.stringify. This is very fast, about 3
// microseconds on my computer for a sample object:
// http://jsperf.com/test-hashfnv32a-hash/5
//
// Note that this uses JSON.stringify to stringify the objects so in order for
// this to produce consistent hashes browsers need to have a consistent
// ordering of objects. Ben Alpert says that Facebook depends on this, so we
// can probably depend on this too.
var hashObject = function hashObject(object /* : ObjectMap */) {
return (/* : string */hashString(JSON.stringify(object))
);
};
// Given a single style value string like the "b" from "a: b;", adds !important
// to generate "b !important".
var importantify = function importantify(string /* : string */) {
return (/* : string */
// Bracket string character access is very fast, and in the default case we
// normally don't expect there to be "!important" at the end of the string
// so we can use this simple check to take an optimized path. If there
// happens to be a "!" in this position, we follow up with a more thorough
// check.
string[string.length - 10] === '!' && string.slice(-11) === ' !important' ? string : String(string) + ' !important'
);
};
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
var prefixAll = createPrefixer(staticPrefixData);
/* ::
import type { SheetDefinition } from './index.js';
type StringHandlers = { [id:string]: Function };
type SelectorCallback = (selector: string) => string[];
export type SelectorHandler = (
selector: string,
baseSelector: string,
callback: SelectorCallback
) => string[] | string | null;
*/
/**
* `selectorHandlers` are functions which handle special selectors which act
* differently than normal style definitions. These functions look at the
* current selector and can generate CSS for the styles in their subtree by
* calling the callback with a new selector.
*
* For example, when generating styles with a base selector of '.foo' and the
* following styles object:
*
* {
* ':nth-child(2n)': {
* ':hover': {
* color: 'red'
* }
* }
* }
*
* when we reach the ':hover' style, we would call our selector handlers like
*
* handler(':hover', '.foo:nth-child(2n)', callback)
*
* Since our `pseudoSelectors` handles ':hover' styles, that handler would call
* the callback like
*
* callback('.foo:nth-child(2n):hover')
*
* to generate its subtree `{ color: 'red' }` styles with a
* '.foo:nth-child(2n):hover' selector. The callback would return an array of CSS
* rules like
*
* ['.foo:nth-child(2n):hover{color:red !important;}']
*
* and the handler would then return that resulting CSS.
*
* `defaultSelectorHandlers` is the list of default handlers used in a call to
* `generateCSS`.
*
* @name SelectorHandler
* @function
* @param {string} selector: The currently inspected selector. ':hover' in the
* example above.
* @param {string} baseSelector: The selector of the parent styles.
* '.foo:nth-child(2n)' in the example above.
* @param {function} generateSubtreeStyles: A function which can be called to
* generate CSS for the subtree of styles corresponding to the selector.
* Accepts a new baseSelector to use for generating those styles.
* @returns {string[] | string | null} The generated CSS for this selector, or
* null if we don't handle this selector.
*/
var defaultSelectorHandlers /* : SelectorHandler[] */ = [
// Handle pseudo-selectors, like :hover and :nth-child(3n)
function () {
function pseudoSelectors(selector, baseSelector, generateSubtreeStyles) {
if (selector[0] !== ":") {
return null;
}
return generateSubtreeStyles(baseSelector + selector);
}
return pseudoSelectors;
}(),
// Handle media queries (or font-faces)
function () {
function mediaQueries(selector, baseSelector, generateSubtreeStyles) {
if (selector[0] !== "@") {
return null;
}
// Generate the styles normally, and then wrap them in the media query.
var generated = generateSubtreeStyles(baseSelector);
return [String(selector) + '{' + String(generated.join('')) + '}'];
}
return mediaQueries;
}()];
/**
* Generate CSS for a selector and some styles.
*
* This function handles the media queries and pseudo selectors that can be used
* in aphrodite styles.
*
* @param {string} selector: A base CSS selector for the styles to be generated
* with.
* @param {Object} styleTypes: A list of properties of the return type of
* StyleSheet.create, e.g. [styles.red, styles.blue].
* @param {Array.<SelectorHandler>} selectorHandlers: A list of selector
* handlers to use for handling special selectors. See
* `defaultSelectorHandlers`.
* @param stringHandlers: See `generateCSSRuleset`
* @param useImportant: See `generateCSSRuleset`
*
* To actually generate the CSS special-construct-less styles are passed to
* `generateCSSRuleset`.
*
* For instance, a call to
*
* generateCSS(".foo", [{
* color: "red",
* "@media screen": {
* height: 20,
* ":hover": {
* backgroundColor: "black"
* }
* },
* ":active": {
* fontWeight: "bold"
* }
* }], defaultSelectorHandlers);
*
* with the default `selectorHandlers` will make 5 calls to
* `generateCSSRuleset`:
*
* generateCSSRuleset(".foo", { color: "red" }, ...)
* generateCSSRuleset(".foo:active", { fontWeight: "bold" }, ...)
* // These 2 will be wrapped in @media screen {}
* generateCSSRuleset(".foo", { height: 20 }, ...)
* generateCSSRuleset(".foo:hover", { backgroundColor: "black" }, ...)
*/
var generateCSS = function generateCSS(selector /* : string */
, styleTypes /* : SheetDefinition[] */
, selectorHandlers /* : SelectorHandler[] */
, stringHandlers /* : StringHandlers */
, useImportant /* : boolean */
) /* : string[] */{
var merged = new OrderedElements();
for (var i = 0; i < styleTypes.length; i++) {
merged.addStyleType(styleTypes[i]);
}
var plainDeclarations = new OrderedElements();
var generatedStyles = [];
// TODO(emily): benchmark this to see if a plain for loop would be faster.
merged.forEach(function (val, key) {
// For each key, see if one of the selector handlers will handle these
// styles.
var foundHandler = selectorHandlers.some(function (handler) {
var result = handler(key, selector, function (newSelector) {
return generateCSS(newSelector, [val], selectorHandlers, stringHandlers, useImportant);
});
if (result != null) {
// If the handler returned something, add it to the generated
// CSS and stop looking for another handler.
if (Array.isArray(result)) {
generatedStyles.push.apply(generatedStyles, _toConsumableArray(result));
} else {
// eslint-disable-next-line
console.warn('WARNING: Selector handlers should return an array of rules.' + 'Returning a string containing multiple rules is deprecated.', handler);
generatedStyles.push('@media all {' + String(result) + '}');
}
return true;
}
});
// If none of the handlers handled it, add it to the list of plain
// style declarations.
if (!foundHandler) {
plainDeclarations.set(key, val, true);
}
});
var generatedRuleset = generateCSSRuleset(selector, plainDeclarations, stringHandlers, useImportant, selectorHandlers);
if (generatedRuleset) {
generatedStyles.unshift(generatedRuleset);
}
return generatedStyles;
};
/**
* Helper method of generateCSSRuleset to facilitate custom handling of certain
* CSS properties. Used for e.g. font families.
*
* See generateCSSRuleset for usage and documentation of paramater types.
*/
var runStringHandlers = function runStringHandlers(declarations /* : OrderedElements */
, stringHandlers /* : StringHandlers */
, selectorHandlers /* : SelectorHandler[] */
) /* : void */{
if (!stringHandlers) {
return;
}
var stringHandlerKeys = Object.keys(stringHandlers);
for (var i = 0; i < stringHandlerKeys.length; i++) {
var key = stringHandlerKeys[i];
if (declarations.has(key)) {
// A declaration exists for this particular string handler, so we
// need to let the string handler interpret the declaration first
// before proceeding.
//
// TODO(emily): Pass in a callback which generates CSS, similar to
// how our selector handlers work, instead of passing in
// `selectorHandlers` and have them make calls to `generateCSS`
// themselves. Right now, this is impractical because our string
// handlers are very specialized and do complex things.
declarations.set(key, stringHandlers[key](declarations.get(key), selectorHandlers),
// Preserve order here, since we are really replacing an
// unprocessed style with a processed style, not overriding an
// earlier style
false);
}
}
};
var transformRule = function transformRule(key /* : string */
, value /* : string */
, transformValue /* : function */
) {
return (/* : string */String(kebabifyStyleName(key)) + ':' + String(transformValue(key, value)) + ';'
);
};
var arrayToObjectKeysReducer = function arrayToObjectKeysReducer(acc, val) {
acc[val] = true;
return acc;
};
/**
* Generate a CSS ruleset with the selector and containing the declarations.
*
* This function assumes that the given declarations don't contain any special
* children (such as media queries, pseudo-selectors, or descendant styles).
*
* Note that this method does not deal with nesting used for e.g.
* psuedo-selectors or media queries. That responsibility is left to the
* `generateCSS` function.
*
* @param {string} selector: the selector associated with the ruleset
* @param {Object} declarations: a map from camelCased CSS property name to CSS
* property value.
* @param {Object.<string, function>} stringHandlers: a map from camelCased CSS
* property name to a function which will map the given value to the value
* that is output.
* @param {bool} useImportant: A boolean saying whether to append "!important"
* to each of the CSS declarations.
* @returns {string} A string of raw CSS.
*
* Examples:
*
* generateCSSRuleset(".blah", { color: "red" })
* -> ".blah{color: red !important;}"
* generateCSSRuleset(".blah", { color: "red" }, {}, false)
* -> ".blah{color: red}"
* generateCSSRuleset(".blah", { color: "red" }, {color: c => c.toUpperCase})
* -> ".blah{color: RED}"
* generateCSSRuleset(".blah:hover", { color: "red" })
* -> ".blah:hover{color: red}"
*/
var generateCSSRuleset = function generateCSSRuleset(selector /* : string */
, declarations /* : OrderedElements */
, stringHandlers /* : StringHandlers */
, useImportant /* : boolean */
, selectorHandlers /* : SelectorHandler[] */
) /* : string */{
// Mutates declarations
runStringHandlers(declarations, stringHandlers, selectorHandlers);
var originalElements = Object.keys(declarations.elements).reduce(arrayToObjectKeysReducer, Object.create(null));
// NOTE(emily): This mutates handledDeclarations.elements.
var prefixedElements = prefixAll(declarations.elements);
var elementNames = Object.keys(prefixedElements);
if (elementNames.length !== declarations.keyOrder.length) {
// There are some prefixed values, so we need to figure out how to sort
// them.
//
// Loop through prefixedElements, looking for anything that is not in
// sortOrder, which means it was added by prefixAll. This means that we
// need to figure out where it should appear in the sortOrder.
for (var i = 0; i < elementNames.length; i++) {
if (!originalElements[elementNames[i]]) {
// This element is not in the sortOrder, which means it is a prefixed
// value that was added by prefixAll. Let's try to figure out where it
// goes.
var originalStyle = void 0;
if (elementNames[i][0] === 'W') {
// This is a Webkit-prefixed style, like "WebkitTransition". Let's
// find its original style's sort order.
originalStyle = elementNames[i][6].toLowerCase() + elementNames[i].slice(7);
} else if (elementNames[i][1] === 'o') {
// This is a Moz-prefixed style, like "MozTransition". We check
// the second character to avoid colliding with Ms-prefixed
// styles. Let's find its original style's sort order.
originalStyle = elementNames[i][3].toLowerCase() + elementNames[i].slice(4);
} else {
// if (elementNames[i][1] === 's') {
// This is a Ms-prefixed style, like "MsTransition".
originalStyle = elementNames[i][2].toLowerCase() + elementNames[i].slice(3);
}
if (originalStyle && originalElements[originalStyle]) {
var originalIndex = declarations.keyOrder.indexOf(originalStyle);
declarations.keyOrder.splice(originalIndex, 0, elementNames[i]);
} else {
// We don't know what the original style was, so sort it to
// top. This can happen for styles that are added that don't
// have the same base name as the original style.
declarations.keyOrder.unshift(elementNames[i]);
}
}
}
}
var transformValue = useImportant === false ? stringifyValue : stringifyAndImportantifyValue;
var rules = [];
for (var _i = 0; _i < declarations.keyOrder.length; _i++) {
var key = declarations.keyOrder[_i];
var value = prefixedElements[key];
if (Array.isArray(value)) {
// inline-style-prefixer returns an array when there should be
// multiple rules for the same key. Here we flatten to multiple
// pairs with the same key.
for (var j = 0; j < value.length; j++) {
rules.push(transformRule(key, value[j], transformValue));
}
} else {
rules.push(transformRule(key, value, transformValue));
}
}
if (rules.length) {
return String(selector) + '{' + String(rules.join("")) + '}';
} else {
return "";
}
};
var _typeof$1 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
function _toConsumableArray$1(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
/* ::
import type { SheetDefinition, SheetDefinitions } from './index.js';
import type { MaybeSheetDefinition } from './exports.js';
import type { SelectorHandler } from './generate.js';
*/
// The current <style> tag we are inserting into, or null if we haven't
// inserted anything yet. We could find this each time using
// `document.querySelector("style[data-aphrodite"])`, but holding onto it is
// faster.
var styleTag /* : ?HTMLStyleElement */ = null;
// Inject a set of rules into a <style> tag in the head of the document. This
// will automatically create a style tag and then continue to use it for
// multiple injections. It will also use a style tag with the `data-aphrodite`
// tag on it if that exists in the DOM. This could be used for e.g. reusing the
// same style tag that server-side rendering inserts.
var injectStyleTag = function injectStyleTag(cssRules /* : string[] */) {
if (styleTag == null) {
// Try to find a style tag with the `data-aphrodite` attribute first.
styleTag = document.querySelector("style[data-aphrodite]") /* : any */;
// If that doesn't work, generate a new style tag.
if (styleTag == null) {
// Taken from
// http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
var head = document.head || document.getElementsByTagName('head')[0];
styleTag = document.createElement('style');
styleTag.type = 'text/css';
styleTag.setAttribute("data-aphrodite", "");
head.appendChild(styleTag);
}
}
var sheet = styleTag.styleSheet || styleTag.sheet /* : any */;
if (sheet.insertRule) {
var numRules = sheet.cssRules.length;
cssRules.forEach(function (rule) {
try {
sheet.insertRule(rule, numRules);
numRules += 1;
} catch (e) {
// The selector for this rule wasn't compatible with the browser
}
});
} else {
styleTag.innerText = (styleTag.innerText || '') + cssRules.join('');
}
};
// Custom handlers for stringifying CSS values that have side effects
// (such as fontFamily, which can cause @font-face rules to be injected)
var stringHandlers = {
// With fontFamily we look for objects that are passed in and interpret
// them as @font-face rules that we need to inject. The value of fontFamily
// can either be a string (as normal), an object (a single font face), or
// an array of objects and strings.
fontFamily: function () {
function fontFamily(val) {
if (Array.isArray(val)) {
return val.map(fontFamily).join(",");
} else if ((typeof val === 'undefined' ? 'undefined' : _typeof$1(val)) === "object") {
injectStyleOnce(val.src, "@font-face", [val], false);
return '"' + String(val.fontFamily) + '"';
} else {
return val;
}
}
return fontFamily;
}(),
// With animationName we look for an object that contains keyframes and
// inject them as an `@keyframes` block, returning a uniquely generated
// name. The keyframes object should look like
// animationName: {
// from: {
// left: 0,
// top: 0,
// },
// '50%': {
// left: 15,
// top: 5,
// },
// to: {
// left: 20,
// top: 20,
// }
// }
// TODO(emily): `stringHandlers` doesn't let us rename the key, so I have
// to use `animationName` here. Improve that so we can call this
// `animation` instead of `animationName`.
animationName: function () {
function animationName(val, selectorHandlers) {
if (Array.isArray(val)) {
return val.map(function (v) {
return animationName(v, selectorHandlers);
}).join(",");
} else if ((typeof val === 'undefined' ? 'undefined' : _typeof$1(val)) === "object") {
// Generate a unique name based on the hash of the object. We can't
// just use the hash because the name can't start with a number.
// TODO(emily): this probably makes debugging hard, allow a custom
// name?
var name = 'keyframe_' + String(hashObject(val));
// Since keyframes need 3 layers of nesting, we use `generateCSS` to
// build the inner layers and wrap it in `@keyframes` ourselves.
var finalVal = '@keyframes ' + name + '{';
// TODO see if we can find a way where checking for OrderedElements
// here is not necessary. Alternatively, perhaps we should have a
// utility method that can iterate over either a plain object, an
// instance of OrderedElements, or a Map, and then use that here and
// elsewhere.
if (val instanceof OrderedElements) {
val.forEach(function (valVal, valKey) {
finalVal += generateCSS(valKey, [valVal], selectorHandlers, stringHandlers, false).join('');
});
} else {
Object.keys(val).forEach(function (key) {
finalVal += generateCSS(key, [val[key]], selectorHandlers, stringHandlers, false).join('');
});
}
finalVal += '}';
injectGeneratedCSSOnce(name, [finalVal]);
return name;
} else {
return val;
}
}
return animationName;
}()
};
// This is a map from Aphrodite's generated class names to `true` (acting as a
// set of class names)
var alreadyInjected = {};
// This is the buffer of styles which have not yet been flushed.
var injectionBuffer /* : string[] */ = [];
// A flag to tell if we are already buffering styles. This could happen either
// because we scheduled a flush call already, so newly added styles will
// already be flushed, or because we are statically buffering on the server.
var isBuffering = false;
var injectGeneratedCSSOnce = function injectGeneratedCSSOnce(key, generatedCSS) {
var _injectionBuffer;
if (alreadyInjected[key]) {
return;
}
if (!isBuffering) {
// We should never be automatically buffering on the server (or any
// place without a document), so guard against that.
if (typeof document === "undefined") {
throw new Error("Cannot automatically buffer without a document");
}
// If we're not already buffering, schedule a call to flush the
// current styles.
isBuffering = true;
asap(flushToStyleTag);
}
(_injectionBuffer = injectionBuffer).push.apply(_injectionBuffer, _toConsumableArray$1(generatedCSS));
alreadyInjected[key] = true;
};
var injectStyleOnce = function injectStyleOnce(key /* : string */
, selector /* : string */
, definitions /* : SheetDefinition[] */
, useImportant /* : boolean */
) {
var selectorHandlers /* : SelectorHandler[] */ = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
if (alreadyInjected[key]) {
return;
}
var generated = generateCSS(selector, definitions, selectorHandlers, stringHandlers, useImportant);
injectGeneratedCSSOnce(key, generated);
};
var reset = function reset() {
injectionBuffer = [];
alreadyInjected = {};
isBuffering = false;
styleTag = null;
};
var getBufferedStyles = function getBufferedStyles() {
return injectionBuffer;
};
var startBuffering = function startBuffering() {
if (isBuffering) {
throw new Error("Cannot buffer while already buffering");
}
isBuffering = true;
};
var flushToArray = function flushToArray() {
isBuffering = false;
var ret = injectionBuffer;
injectionBuffer = [];
return ret;
};
var flushToString = function flushToString() {
return flushToArray().join('');
};
var flushToStyleTag = function flushToStyleTag() {
var cssRules = flushToArray();
if (cssRules.length > 0) {
injectStyleTag(cssRules);
}
};
var getRenderedClassNames = function getRenderedClassNames() {
return Object.keys(alreadyInjected);
};
var addRenderedClassNames = function addRenderedClassNames(classNames /* : string[] */) {
classNames.forEach(function (className) {
alreadyInjected[className] = true;
});
};
var processStyleDefinitions = function processStyleDefinitions(styleDefinitions /* : any[] */
, classNameBits /* : string[] */
, definitionBits /* : Object[] */
, length /* : number */
) /* : number */{
for (var i = 0; i < styleDefinitions.length; i += 1) {
// Filter out falsy values from the input, to allow for
// `css(a, test && c)`
if (styleDefinitions[i]) {
if (Array.isArray(styleDefinitions[i])) {
// We've encountered an array, so let's recurse
length += processStyleDefinitions(styleDefinitions[i], classNameBits, definitionBits, length);
} else {
classNameBits.push(styleDefinitions[i]._name);
definitionBits.push(styleDefinitions[i]._definition);
length += styleDefinitions[i]._len;
}
}
}
return length;
};
/**
* Inject styles associated with the passed style definition objects, and return
* an associated CSS class name.
*
* @param {boolean} useImportant If true, will append !important to generated
* CSS output. e.g. {color: red} -> "color: red !important".
* @param {(Object|Object[])[]} styleDefinitions style definition objects, or
* arbitrarily nested arrays of them, as returned as properties of the
* return value of StyleSheet.create().
*/
var injectAndGetClassName = function injectAndGetClassName(useImportant /* : boolean */
, styleDefinitions /* : MaybeSheetDefinition[] */
, selectorHandlers /* : SelectorHandler[] */
) /* : string */{
var classNameBits = [];
var definitionBits = [];
// Mutates classNameBits and definitionBits and returns a length which we
// will append to the hash to decrease the chance of hash collisions.
var length = processStyleDefinitions(styleDefinitions, classNameBits, definitionBits, 0);
// Break if there aren't any valid styles.
if (classNameBits.length === 0) {
return "";
}
var className = void 0;
if (process.env.NODE_ENV === 'production') {
className = classNameBits.length === 1 ? '_' + String(classNameBits[0]) : '_' + String(hashString(classNameBits.join())) + String((length % 36).toString(36));
} else {
className = classNameBits.join("-o_O-");
}
injectStyleOnce(className, '.' + String(className), definitionBits, useImportant, selectorHandlers);
return className;
};
/* ::
import type { SelectorHandler } from './generate.js';
export type SheetDefinition = { [id:string]: any };
export type SheetDefinitions = SheetDefinition | SheetDefinition[];
type RenderFunction = () => string;
type Extension = {
selectorHandler: SelectorHandler
};
export type MaybeSheetDefinition = SheetDefinition | false | null | void
*/
var unminifiedHashFn = function unminifiedHashFn(str /* : string */, key /* : string */) {
return String(key) + '_' + String(hashString(str));
};
// StyleSheet.create is in a hot path so we want to keep as much logic out of it
// as possible. So, we figure out which hash function to use once, and only
// switch it out via minify() as necessary.
//
// This is in an exported function to make it easier to test.
var initialHashFn = function initialHashFn() {
return process.env.NODE_ENV === 'production' ? hashString : unminifiedHashFn;
};
var hashFn = initialHashFn();
var StyleSheet = {
create: function () {
function create(sheetDefinition /* : SheetDefinition */) /* : Object */{
var mappedSheetDefinition = {};
var keys = Object.keys(sheetDefinition);
for (var i = 0; i < keys.length; i += 1) {
var key = keys[i];
var val = sheetDefinition[key];
var stringVal = JSON.stringify(val);
mappedSheetDefinition[key] = {
_len: stringVal.length,
_name: hashFn(stringVal, key),
_definition: val
};
}
return mappedSheetDefinition;
}
return create;
}(),
rehydrate: function () {
function rehydrate() {
var renderedClassNames /* : string[] */ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
addRenderedClassNames(renderedClassNames);
}
return rehydrate;
}()
};
/**
* Utilities for using Aphrodite server-side.
*
* This can be minified out in client-only bundles by replacing `typeof window`
* with `"object"`, e.g. via Webpack's DefinePlugin:
*
* new webpack.DefinePlugin({
* "typeof window": JSON.stringify("object")
* })
*/
var StyleSheetServer = typeof window !== 'undefined' ? null : {
renderStatic: function () {
function renderStatic(renderFunc /* : RenderFunction */) {
reset();
startBuffering();
var html = renderFunc();
var cssContent = flushToString();
return {
html: html,
css: {
content: cssContent,
renderedClassNames: getRenderedClassNames()
}
};
}
return renderStatic;
}()
};
/**
* Utilities for using Aphrodite in tests.
*
* Not meant to be used in production.
*/
var StyleSheetTestUtils = process.env.NODE_ENV === 'production' ? null : {
/**
* Prevent styles from being injected into the DOM.
*
* This is useful in situations where you'd like to test rendering UI
* components which use Aphrodite without any of the side-effects of
* Aphrodite happening. Particularly useful for testing the output of
* components when you have no DOM, e.g. testing in Node without a fake DOM.
*
* Should be paired with a subsequent call to
* clearBufferAndResumeStyleInjection.
*/
suppressStyleInjection: function () {
function suppressStyleInjection() {
reset();
startBuffering();
}
return suppressStyleInjection;
}(),
/**
* Opposite method of preventStyleInject.
*/
clearBufferAndResumeStyleInjection: function () {
function clearBufferAndResumeStyleInjection() {
reset();
}
return clearBufferAndResumeStyleInjection;
}(),
/**
* Returns a string of buffered styles which have not been flushed
*
* @returns {string} Buffer of styles which have not yet been flushed.
*/
getBufferedStyles: function () {
function getBufferedStyles$$1() {
return getBufferedStyles();
}
return getBufferedStyles$$1;
}()
};
/**
* Generate the Aphrodite API exports, with given `selectorHandlers` and
* `useImportant` state.
*/
function makeExports(useImportant /* : boolean */
, selectorHandlers /* : SelectorHandler[] */
) {
return {
StyleSheet: Object.assign({}, StyleSheet, {
/**
* Returns a version of the exports of Aphrodite (i.e. an object
* with `css` and `StyleSheet` properties) which have some
* extensions included.
*
* @param {Array.<Object>} extensions: An array of extensions to
* add to this instance of Aphrodite. Each object should have a
* single property on it, defining which kind of extension to
* add.
* @param {SelectorHandler} [extensions[].selectorHandler]: A
* selector handler extension. See `defaultSelectorHandlers` in
* generate.js.
*
* @returns {Object} An object containing the exports of the new
* instance of Aphrodite.
*/
extend: function () {
function extend(extensions /* : Extension[] */) {
var extensionSelectorHandlers = extensions
// Pull out extensions with a selectorHandler property
.map(function (extension) {
return extension.selectorHandler;
})
// Remove nulls (i.e. extensions without a selectorHandler
// property).
.filter(function (handler) {
return handler;
});
return makeExports(useImportant, selectorHandlers.concat(extensionSelectorHandlers));
}
return extend;
}()
}),
StyleSheetServer: StyleSheetServer,
StyleSheetTestUtils: StyleSheetTestUtils,
minify: function () {
function minify(shouldMinify /* : boolean */) {
hashFn = shouldMinify ? hashString : unminifiedHashFn;
}
return minify;
}(),
css: function () {
function css() /* : MaybeSheetDefinition[] */{
for (var _len = arguments.length, styleDefinitions = Array(_len), _key = 0; _key < _len; _key++) {
styleDefinitions[_key] = arguments[_key];
}
return injectAndGetClassName(useImportant, styleDefinitions, selectorHandlers);
}
return css;
}()
};
}
var useImportant = true; // Add !important to all style definitions
var Aphrodite = makeExports(useImportant, defaultSelectorHandlers);
var Aphrodite = makeExports(useImportant);
var StyleSheet$1 = Aphrodite.StyleSheet,
StyleSheetServer$1 = Aphrodite.StyleSheetServer,
StyleSheetTestUtils$1 = Aphrodite.StyleSheetTestUtils,
var StyleSheet = Aphrodite.StyleSheet,
StyleSheetServer = Aphrodite.StyleSheetServer,
StyleSheetTestUtils = Aphrodite.StyleSheetTestUtils,
css = Aphrodite.css,
minify = Aphrodite.minify;
minify = Aphrodite.minify,
flushToStyleTag = Aphrodite.flushToStyleTag,
injectAndGetClassName = Aphrodite.injectAndGetClassName,
defaultSelectorHandlers = Aphrodite.defaultSelectorHandlers;
export { StyleSheet$1 as StyleSheet, StyleSheetServer$1 as StyleSheetServer, StyleSheetTestUtils$1 as StyleSheetTestUtils, css, minify, flushToStyleTag, injectAndGetClassName, defaultSelectorHandlers };
export { StyleSheet, StyleSheetServer, StyleSheetTestUtils, css, minify, flushToStyleTag, injectAndGetClassName, defaultSelectorHandlers };

1184

es/no-important.js

@@ -1,1165 +0,31 @@

import calc from 'inline-style-prefixer/static/plugins/calc';
import crossFade from 'inline-style-prefixer/static/plugins/crossFade';
import cursor from 'inline-style-prefixer/static/plugins/cursor';
import filter from 'inline-style-prefixer/static/plugins/filter';
import flex from 'inline-style-prefixer/static/plugins/flex';
import flexboxIE from 'inline-style-prefixer/static/plugins/flexboxIE';
import flexboxOld from 'inline-style-prefixer/static/plugins/flexboxOld';
import gradient from 'inline-style-prefixer/static/plugins/gradient';
import imageSet from 'inline-style-prefixer/static/plugins/imageSet';
import position from 'inline-style-prefixer/static/plugins/position';
import sizing from 'inline-style-prefixer/static/plugins/sizing';
import transition from 'inline-style-prefixer/static/plugins/transition';
import stringHash from 'string-hash';
import createPrefixer from 'inline-style-prefixer/static/createPrefixer';
import asap from 'asap';
import { a as makeExports } from './chunk-957f2f88.js';
import 'string-hash';
import 'inline-style-prefixer/static/plugins/calc';
import 'inline-style-prefixer/static/plugins/crossFade';
import 'inline-style-prefixer/static/plugins/cursor';
import 'inline-style-prefixer/static/plugins/filter';
import 'inline-style-prefixer/static/plugins/flex';
import 'inline-style-prefixer/static/plugins/flexboxIE';
import 'inline-style-prefixer/static/plugins/flexboxOld';
import 'inline-style-prefixer/static/plugins/gradient';
import 'inline-style-prefixer/static/plugins/imageSet';
import 'inline-style-prefixer/static/plugins/position';
import 'inline-style-prefixer/static/plugins/sizing';
import 'inline-style-prefixer/static/plugins/transition';
import 'inline-style-prefixer/static/createPrefixer';
import 'asap';
var w = ["Webkit"];
var m = ["Moz"];
var ms = ["ms"];
var wm = ["Webkit", "Moz"];
var wms = ["Webkit", "ms"];
var wmms = ["Webkit", "Moz", "ms"];
var staticPrefixData = {
plugins: [calc, crossFade, cursor, filter, flex, flexboxIE, flexboxOld, gradient, imageSet, position, sizing, transition],
prefixMap: { "transform": wms, "transformOrigin": wms, "transformOriginX": wms, "transformOriginY": wms, "backfaceVisibility": w, "perspective": w, "perspectiveOrigin": w, "transformStyle": w, "transformOriginZ": w, "animation": w, "animationDelay": w, "animationDirection": w, "animationFillMode": w, "animationDuration": w, "animationIterationCount": w, "animationName": w, "animationPlayState": w, "animationTimingFunction": w, "appearance": wm, "userSelect": wmms, "fontKerning": w, "textEmphasisPosition": w, "textEmphasis": w, "textEmphasisStyle": w, "textEmphasisColor": w, "boxDecorationBreak": w, "clipPath": w, "maskImage": w, "maskMode": w, "maskRepeat": w, "maskPosition": w, "maskClip": w, "maskOrigin": w, "maskSize": w, "maskComposite": w, "mask": w, "maskBorderSource": w, "maskBorderMode": w, "maskBorderSlice": w, "maskBorderWidth": w, "maskBorderOutset": w, "maskBorderRepeat": w, "maskBorder": w, "maskType": w, "textDecorationStyle": wm, "textDecorationSkip": wm, "textDecorationLine": wm, "textDecorationColor": wm, "filter": w, "fontFeatureSettings": wm, "breakAfter": wmms, "breakBefore": wmms, "breakInside": wmms, "columnCount": wm, "columnFill": wm, "columnGap": wm, "columnRule": wm, "columnRuleColor": wm, "columnRuleStyle": wm, "columnRuleWidth": wm, "columns": wm, "columnSpan": wm, "columnWidth": wm, "writingMode": wms, "flex": wms, "flexBasis": w, "flexDirection": wms, "flexGrow": w, "flexFlow": wms, "flexShrink": w, "flexWrap": wms, "alignContent": w, "alignItems": w, "alignSelf": w, "justifyContent": w, "order": w, "transitionDelay": w, "transitionDuration": w, "transitionProperty": w, "transitionTimingFunction": w, "backdropFilter": w, "scrollSnapType": wms, "scrollSnapPointsX": wms, "scrollSnapPointsY": wms, "scrollSnapDestination": wms, "scrollSnapCoordinate": wms, "shapeImageThreshold": w, "shapeImageMargin": w, "shapeImageOutside": w, "hyphens": wmms, "flowInto": wms, "flowFrom": wms, "regionFragment": wms, "boxSizing": m, "textAlignLast": m, "tabSize": m, "wrapFlow": ms, "wrapThrough": ms, "wrapMargin": ms, "touchAction": ms, "gridTemplateColumns": ms, "gridTemplateRows": ms, "gridTemplateAreas": ms, "gridTemplate": ms, "gridAutoColumns": ms, "gridAutoRows": ms, "gridAutoFlow": ms, "grid": ms, "gridRowStart": ms, "gridColumnStart": ms, "gridRowEnd": ms, "gridRow": ms, "gridColumn": ms, "gridColumnEnd": ms, "gridColumnGap": ms, "gridRowGap": ms, "gridArea": ms, "gridGap": ms, "textSizeAdjust": wms, "borderImage": w, "borderImageOutset": w, "borderImageRepeat": w, "borderImageSlice": w, "borderImageSource": w, "borderImageWidth": w }
};
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var MAP_EXISTS = typeof Map !== 'undefined';
var OrderedElements = function () {
/* ::
elements: {[string]: any};
keyOrder: string[];
*/
function OrderedElements() {
_classCallCheck(this, OrderedElements);
this.elements = {};
this.keyOrder = [];
}
_createClass(OrderedElements, [{
key: 'forEach',
value: function () {
function forEach(callback /* : (string, any) => void */) {
for (var i = 0; i < this.keyOrder.length; i++) {
// (value, key) to match Map's API
callback(this.elements[this.keyOrder[i]], this.keyOrder[i]);
}
}
return forEach;
}()
}, {
key: 'set',
value: function () {
function set(key /* : string */, value /* : any */, shouldReorder /* : ?boolean */) {
if (!this.elements.hasOwnProperty(key)) {
this.keyOrder.push(key);
} else if (shouldReorder) {
var index = this.keyOrder.indexOf(key);
this.keyOrder.splice(index, 1);
this.keyOrder.push(key);
}
if (value == null) {
this.elements[key] = value;
return;
}
if (MAP_EXISTS && value instanceof Map || value instanceof OrderedElements) {
// We have found a nested Map, so we need to recurse so that all
// of the nested objects and Maps are merged properly.
var nested = this.elements.hasOwnProperty(key) ? this.elements[key] : new OrderedElements();
value.forEach(function (value, key) {
nested.set(key, value, shouldReorder);
});
this.elements[key] = nested;
return;
}
if (!Array.isArray(value) && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object') {
// We have found a nested object, so we need to recurse so that all
// of the nested objects and Maps are merged properly.
var _nested = this.elements.hasOwnProperty(key) ? this.elements[key] : new OrderedElements();
var keys = Object.keys(value);
for (var i = 0; i < keys.length; i += 1) {
_nested.set(keys[i], value[keys[i]], shouldReorder);
}
this.elements[key] = _nested;
return;
}
this.elements[key] = value;
}
return set;
}()
}, {
key: 'get',
value: function () {
function get(key /* : string */) /* : any */{
return this.elements[key];
}
return get;
}()
}, {
key: 'has',
value: function () {
function has(key /* : string */) /* : boolean */{
return this.elements.hasOwnProperty(key);
}
return has;
}()
}, {
key: 'addStyleType',
value: function () {
function addStyleType(styleType /* : any */) /* : void */{
var _this = this;
if (MAP_EXISTS && styleType instanceof Map || styleType instanceof OrderedElements) {
styleType.forEach(function (value, key) {
_this.set(key, value, true);
});
} else {
var keys = Object.keys(styleType);
for (var i = 0; i < keys.length; i++) {
this.set(keys[i], styleType[keys[i]], true);
}
}
}
return addStyleType;
}()
}]);
return OrderedElements;
}();
/* ::
type ObjectMap = { [id:string]: any };
*/
var UPPERCASE_RE = /([A-Z])/g;
var UPPERCASE_RE_TO_KEBAB = function UPPERCASE_RE_TO_KEBAB(match /* : string */) {
return (/* : string */'-' + String(match.toLowerCase())
);
};
var kebabifyStyleName = function kebabifyStyleName(string /* : string */) /* : string */{
var result = string.replace(UPPERCASE_RE, UPPERCASE_RE_TO_KEBAB);
if (result[0] === 'm' && result[1] === 's' && result[2] === '-') {
return '-' + String(result);
}
return result;
};
/**
* CSS properties which accept numbers but are not in units of "px".
* Taken from React's CSSProperty.js
*/
var isUnitlessNumber = {
animationIterationCount: true,
borderImageOutset: true,
borderImageSlice: true,
borderImageWidth: true,
boxFlex: true,
boxFlexGroup: true,
boxOrdinalGroup: true,
columnCount: true,
flex: true,
flexGrow: true,
flexPositive: true,
flexShrink: true,
flexNegative: true,
flexOrder: true,
gridRow: true,
gridColumn: true,
fontWeight: true,
lineClamp: true,
lineHeight: true,
opacity: true,
order: true,
orphans: true,
tabSize: true,
widows: true,
zIndex: true,
zoom: true,
// SVG-related properties
fillOpacity: true,
floodOpacity: true,
stopOpacity: true,
strokeDasharray: true,
strokeDashoffset: true,
strokeMiterlimit: true,
strokeOpacity: true,
strokeWidth: true
};
/**
* Taken from React's CSSProperty.js
*
* @param {string} prefix vendor-specific prefix, eg: Webkit
* @param {string} key style name, eg: transitionDuration
* @return {string} style name prefixed with `prefix`, properly camelCased, eg:
* WebkitTransitionDuration
*/
function prefixKey(prefix, key) {
return prefix + key.charAt(0).toUpperCase() + key.substring(1);
}
/**
* Support style names that may come passed in prefixed by adding permutations
* of vendor prefixes.
* Taken from React's CSSProperty.js
*/
var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
// Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
// infinite loop, because it iterates over the newly added props too.
// Taken from React's CSSProperty.js
Object.keys(isUnitlessNumber).forEach(function (prop) {
prefixes.forEach(function (prefix) {
isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
});
});
var stringifyValue = function stringifyValue(key /* : string */
, prop /* : any */
) /* : string */{
if (typeof prop === "number") {
if (isUnitlessNumber[key]) {
return "" + prop;
} else {
return prop + "px";
}
} else {
return '' + prop;
}
};
var stringifyAndImportantifyValue = function stringifyAndImportantifyValue(key /* : string */
, prop /* : any */
) {
return (/* : string */importantify(stringifyValue(key, prop))
);
};
// Turn a string into a hash string of base-36 values (using letters and numbers)
// eslint-disable-next-line no-unused-vars
var hashString = function hashString(string /* : string */, key /* : ?string */) {
return (/* string */stringHash(string).toString(36)
);
};
// Hash a javascript object using JSON.stringify. This is very fast, about 3
// microseconds on my computer for a sample object:
// http://jsperf.com/test-hashfnv32a-hash/5
//
// Note that this uses JSON.stringify to stringify the objects so in order for
// this to produce consistent hashes browsers need to have a consistent
// ordering of objects. Ben Alpert says that Facebook depends on this, so we
// can probably depend on this too.
var hashObject = function hashObject(object /* : ObjectMap */) {
return (/* : string */hashString(JSON.stringify(object))
);
};
// Given a single style value string like the "b" from "a: b;", adds !important
// to generate "b !important".
var importantify = function importantify(string /* : string */) {
return (/* : string */
// Bracket string character access is very fast, and in the default case we
// normally don't expect there to be "!important" at the end of the string
// so we can use this simple check to take an optimized path. If there
// happens to be a "!" in this position, we follow up with a more thorough
// check.
string[string.length - 10] === '!' && string.slice(-11) === ' !important' ? string : String(string) + ' !important'
);
};
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
var prefixAll = createPrefixer(staticPrefixData);
/* ::
import type { SheetDefinition } from './index.js';
type StringHandlers = { [id:string]: Function };
type SelectorCallback = (selector: string) => string[];
export type SelectorHandler = (
selector: string,
baseSelector: string,
callback: SelectorCallback
) => string[] | string | null;
*/
/**
* `selectorHandlers` are functions which handle special selectors which act
* differently than normal style definitions. These functions look at the
* current selector and can generate CSS for the styles in their subtree by
* calling the callback with a new selector.
*
* For example, when generating styles with a base selector of '.foo' and the
* following styles object:
*
* {
* ':nth-child(2n)': {
* ':hover': {
* color: 'red'
* }
* }
* }
*
* when we reach the ':hover' style, we would call our selector handlers like
*
* handler(':hover', '.foo:nth-child(2n)', callback)
*
* Since our `pseudoSelectors` handles ':hover' styles, that handler would call
* the callback like
*
* callback('.foo:nth-child(2n):hover')
*
* to generate its subtree `{ color: 'red' }` styles with a
* '.foo:nth-child(2n):hover' selector. The callback would return an array of CSS
* rules like
*
* ['.foo:nth-child(2n):hover{color:red !important;}']
*
* and the handler would then return that resulting CSS.
*
* `defaultSelectorHandlers` is the list of default handlers used in a call to
* `generateCSS`.
*
* @name SelectorHandler
* @function
* @param {string} selector: The currently inspected selector. ':hover' in the
* example above.
* @param {string} baseSelector: The selector of the parent styles.
* '.foo:nth-child(2n)' in the example above.
* @param {function} generateSubtreeStyles: A function which can be called to
* generate CSS for the subtree of styles corresponding to the selector.
* Accepts a new baseSelector to use for generating those styles.
* @returns {string[] | string | null} The generated CSS for this selector, or
* null if we don't handle this selector.
*/
var defaultSelectorHandlers /* : SelectorHandler[] */ = [
// Handle pseudo-selectors, like :hover and :nth-child(3n)
function () {
function pseudoSelectors(selector, baseSelector, generateSubtreeStyles) {
if (selector[0] !== ":") {
return null;
}
return generateSubtreeStyles(baseSelector + selector);
}
return pseudoSelectors;
}(),
// Handle media queries (or font-faces)
function () {
function mediaQueries(selector, baseSelector, generateSubtreeStyles) {
if (selector[0] !== "@") {
return null;
}
// Generate the styles normally, and then wrap them in the media query.
var generated = generateSubtreeStyles(baseSelector);
return [String(selector) + '{' + String(generated.join('')) + '}'];
}
return mediaQueries;
}()];
/**
* Generate CSS for a selector and some styles.
*
* This function handles the media queries and pseudo selectors that can be used
* in aphrodite styles.
*
* @param {string} selector: A base CSS selector for the styles to be generated
* with.
* @param {Object} styleTypes: A list of properties of the return type of
* StyleSheet.create, e.g. [styles.red, styles.blue].
* @param {Array.<SelectorHandler>} selectorHandlers: A list of selector
* handlers to use for handling special selectors. See
* `defaultSelectorHandlers`.
* @param stringHandlers: See `generateCSSRuleset`
* @param useImportant: See `generateCSSRuleset`
*
* To actually generate the CSS special-construct-less styles are passed to
* `generateCSSRuleset`.
*
* For instance, a call to
*
* generateCSS(".foo", [{
* color: "red",
* "@media screen": {
* height: 20,
* ":hover": {
* backgroundColor: "black"
* }
* },
* ":active": {
* fontWeight: "bold"
* }
* }], defaultSelectorHandlers);
*
* with the default `selectorHandlers` will make 5 calls to
* `generateCSSRuleset`:
*
* generateCSSRuleset(".foo", { color: "red" }, ...)
* generateCSSRuleset(".foo:active", { fontWeight: "bold" }, ...)
* // These 2 will be wrapped in @media screen {}
* generateCSSRuleset(".foo", { height: 20 }, ...)
* generateCSSRuleset(".foo:hover", { backgroundColor: "black" }, ...)
*/
var generateCSS = function generateCSS(selector /* : string */
, styleTypes /* : SheetDefinition[] */
, selectorHandlers /* : SelectorHandler[] */
, stringHandlers /* : StringHandlers */
, useImportant /* : boolean */
) /* : string[] */{
var merged = new OrderedElements();
for (var i = 0; i < styleTypes.length; i++) {
merged.addStyleType(styleTypes[i]);
}
var plainDeclarations = new OrderedElements();
var generatedStyles = [];
// TODO(emily): benchmark this to see if a plain for loop would be faster.
merged.forEach(function (val, key) {
// For each key, see if one of the selector handlers will handle these
// styles.
var foundHandler = selectorHandlers.some(function (handler) {
var result = handler(key, selector, function (newSelector) {
return generateCSS(newSelector, [val], selectorHandlers, stringHandlers, useImportant);
});
if (result != null) {
// If the handler returned something, add it to the generated
// CSS and stop looking for another handler.
if (Array.isArray(result)) {
generatedStyles.push.apply(generatedStyles, _toConsumableArray(result));
} else {
// eslint-disable-next-line
console.warn('WARNING: Selector handlers should return an array of rules.' + 'Returning a string containing multiple rules is deprecated.', handler);
generatedStyles.push('@media all {' + String(result) + '}');
}
return true;
}
});
// If none of the handlers handled it, add it to the list of plain
// style declarations.
if (!foundHandler) {
plainDeclarations.set(key, val, true);
}
});
var generatedRuleset = generateCSSRuleset(selector, plainDeclarations, stringHandlers, useImportant, selectorHandlers);
if (generatedRuleset) {
generatedStyles.unshift(generatedRuleset);
}
return generatedStyles;
};
/**
* Helper method of generateCSSRuleset to facilitate custom handling of certain
* CSS properties. Used for e.g. font families.
*
* See generateCSSRuleset for usage and documentation of paramater types.
*/
var runStringHandlers = function runStringHandlers(declarations /* : OrderedElements */
, stringHandlers /* : StringHandlers */
, selectorHandlers /* : SelectorHandler[] */
) /* : void */{
if (!stringHandlers) {
return;
}
var stringHandlerKeys = Object.keys(stringHandlers);
for (var i = 0; i < stringHandlerKeys.length; i++) {
var key = stringHandlerKeys[i];
if (declarations.has(key)) {
// A declaration exists for this particular string handler, so we
// need to let the string handler interpret the declaration first
// before proceeding.
//
// TODO(emily): Pass in a callback which generates CSS, similar to
// how our selector handlers work, instead of passing in
// `selectorHandlers` and have them make calls to `generateCSS`
// themselves. Right now, this is impractical because our string
// handlers are very specialized and do complex things.
declarations.set(key, stringHandlers[key](declarations.get(key), selectorHandlers),
// Preserve order here, since we are really replacing an
// unprocessed style with a processed style, not overriding an
// earlier style
false);
}
}
};
var transformRule = function transformRule(key /* : string */
, value /* : string */
, transformValue /* : function */
) {
return (/* : string */String(kebabifyStyleName(key)) + ':' + String(transformValue(key, value)) + ';'
);
};
var arrayToObjectKeysReducer = function arrayToObjectKeysReducer(acc, val) {
acc[val] = true;
return acc;
};
/**
* Generate a CSS ruleset with the selector and containing the declarations.
*
* This function assumes that the given declarations don't contain any special
* children (such as media queries, pseudo-selectors, or descendant styles).
*
* Note that this method does not deal with nesting used for e.g.
* psuedo-selectors or media queries. That responsibility is left to the
* `generateCSS` function.
*
* @param {string} selector: the selector associated with the ruleset
* @param {Object} declarations: a map from camelCased CSS property name to CSS
* property value.
* @param {Object.<string, function>} stringHandlers: a map from camelCased CSS
* property name to a function which will map the given value to the value
* that is output.
* @param {bool} useImportant: A boolean saying whether to append "!important"
* to each of the CSS declarations.
* @returns {string} A string of raw CSS.
*
* Examples:
*
* generateCSSRuleset(".blah", { color: "red" })
* -> ".blah{color: red !important;}"
* generateCSSRuleset(".blah", { color: "red" }, {}, false)
* -> ".blah{color: red}"
* generateCSSRuleset(".blah", { color: "red" }, {color: c => c.toUpperCase})
* -> ".blah{color: RED}"
* generateCSSRuleset(".blah:hover", { color: "red" })
* -> ".blah:hover{color: red}"
*/
var generateCSSRuleset = function generateCSSRuleset(selector /* : string */
, declarations /* : OrderedElements */
, stringHandlers /* : StringHandlers */
, useImportant /* : boolean */
, selectorHandlers /* : SelectorHandler[] */
) /* : string */{
// Mutates declarations
runStringHandlers(declarations, stringHandlers, selectorHandlers);
var originalElements = Object.keys(declarations.elements).reduce(arrayToObjectKeysReducer, Object.create(null));
// NOTE(emily): This mutates handledDeclarations.elements.
var prefixedElements = prefixAll(declarations.elements);
var elementNames = Object.keys(prefixedElements);
if (elementNames.length !== declarations.keyOrder.length) {
// There are some prefixed values, so we need to figure out how to sort
// them.
//
// Loop through prefixedElements, looking for anything that is not in
// sortOrder, which means it was added by prefixAll. This means that we
// need to figure out where it should appear in the sortOrder.
for (var i = 0; i < elementNames.length; i++) {
if (!originalElements[elementNames[i]]) {
// This element is not in the sortOrder, which means it is a prefixed
// value that was added by prefixAll. Let's try to figure out where it
// goes.
var originalStyle = void 0;
if (elementNames[i][0] === 'W') {
// This is a Webkit-prefixed style, like "WebkitTransition". Let's
// find its original style's sort order.
originalStyle = elementNames[i][6].toLowerCase() + elementNames[i].slice(7);
} else if (elementNames[i][1] === 'o') {
// This is a Moz-prefixed style, like "MozTransition". We check
// the second character to avoid colliding with Ms-prefixed
// styles. Let's find its original style's sort order.
originalStyle = elementNames[i][3].toLowerCase() + elementNames[i].slice(4);
} else {
// if (elementNames[i][1] === 's') {
// This is a Ms-prefixed style, like "MsTransition".
originalStyle = elementNames[i][2].toLowerCase() + elementNames[i].slice(3);
}
if (originalStyle && originalElements[originalStyle]) {
var originalIndex = declarations.keyOrder.indexOf(originalStyle);
declarations.keyOrder.splice(originalIndex, 0, elementNames[i]);
} else {
// We don't know what the original style was, so sort it to
// top. This can happen for styles that are added that don't
// have the same base name as the original style.
declarations.keyOrder.unshift(elementNames[i]);
}
}
}
}
var transformValue = useImportant === false ? stringifyValue : stringifyAndImportantifyValue;
var rules = [];
for (var _i = 0; _i < declarations.keyOrder.length; _i++) {
var key = declarations.keyOrder[_i];
var value = prefixedElements[key];
if (Array.isArray(value)) {
// inline-style-prefixer returns an array when there should be
// multiple rules for the same key. Here we flatten to multiple
// pairs with the same key.
for (var j = 0; j < value.length; j++) {
rules.push(transformRule(key, value[j], transformValue));
}
} else {
rules.push(transformRule(key, value, transformValue));
}
}
if (rules.length) {
return String(selector) + '{' + String(rules.join("")) + '}';
} else {
return "";
}
};
var _typeof$1 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
function _toConsumableArray$1(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
/* ::
import type { SheetDefinition, SheetDefinitions } from './index.js';
import type { MaybeSheetDefinition } from './exports.js';
import type { SelectorHandler } from './generate.js';
*/
// The current <style> tag we are inserting into, or null if we haven't
// inserted anything yet. We could find this each time using
// `document.querySelector("style[data-aphrodite"])`, but holding onto it is
// faster.
var styleTag /* : ?HTMLStyleElement */ = null;
// Inject a set of rules into a <style> tag in the head of the document. This
// will automatically create a style tag and then continue to use it for
// multiple injections. It will also use a style tag with the `data-aphrodite`
// tag on it if that exists in the DOM. This could be used for e.g. reusing the
// same style tag that server-side rendering inserts.
var injectStyleTag = function injectStyleTag(cssRules /* : string[] */) {
if (styleTag == null) {
// Try to find a style tag with the `data-aphrodite` attribute first.
styleTag = document.querySelector("style[data-aphrodite]") /* : any */;
// If that doesn't work, generate a new style tag.
if (styleTag == null) {
// Taken from
// http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
var head = document.head || document.getElementsByTagName('head')[0];
styleTag = document.createElement('style');
styleTag.type = 'text/css';
styleTag.setAttribute("data-aphrodite", "");
head.appendChild(styleTag);
}
}
var sheet = styleTag.styleSheet || styleTag.sheet /* : any */;
if (sheet.insertRule) {
var numRules = sheet.cssRules.length;
cssRules.forEach(function (rule) {
try {
sheet.insertRule(rule, numRules);
numRules += 1;
} catch (e) {
// The selector for this rule wasn't compatible with the browser
}
});
} else {
styleTag.innerText = (styleTag.innerText || '') + cssRules.join('');
}
};
// Custom handlers for stringifying CSS values that have side effects
// (such as fontFamily, which can cause @font-face rules to be injected)
var stringHandlers = {
// With fontFamily we look for objects that are passed in and interpret
// them as @font-face rules that we need to inject. The value of fontFamily
// can either be a string (as normal), an object (a single font face), or
// an array of objects and strings.
fontFamily: function () {
function fontFamily(val) {
if (Array.isArray(val)) {
return val.map(fontFamily).join(",");
} else if ((typeof val === 'undefined' ? 'undefined' : _typeof$1(val)) === "object") {
injectStyleOnce(val.src, "@font-face", [val], false);
return '"' + String(val.fontFamily) + '"';
} else {
return val;
}
}
return fontFamily;
}(),
// With animationName we look for an object that contains keyframes and
// inject them as an `@keyframes` block, returning a uniquely generated
// name. The keyframes object should look like
// animationName: {
// from: {
// left: 0,
// top: 0,
// },
// '50%': {
// left: 15,
// top: 5,
// },
// to: {
// left: 20,
// top: 20,
// }
// }
// TODO(emily): `stringHandlers` doesn't let us rename the key, so I have
// to use `animationName` here. Improve that so we can call this
// `animation` instead of `animationName`.
animationName: function () {
function animationName(val, selectorHandlers) {
if (Array.isArray(val)) {
return val.map(function (v) {
return animationName(v, selectorHandlers);
}).join(",");
} else if ((typeof val === 'undefined' ? 'undefined' : _typeof$1(val)) === "object") {
// Generate a unique name based on the hash of the object. We can't
// just use the hash because the name can't start with a number.
// TODO(emily): this probably makes debugging hard, allow a custom
// name?
var name = 'keyframe_' + String(hashObject(val));
// Since keyframes need 3 layers of nesting, we use `generateCSS` to
// build the inner layers and wrap it in `@keyframes` ourselves.
var finalVal = '@keyframes ' + name + '{';
// TODO see if we can find a way where checking for OrderedElements
// here is not necessary. Alternatively, perhaps we should have a
// utility method that can iterate over either a plain object, an
// instance of OrderedElements, or a Map, and then use that here and
// elsewhere.
if (val instanceof OrderedElements) {
val.forEach(function (valVal, valKey) {
finalVal += generateCSS(valKey, [valVal], selectorHandlers, stringHandlers, false).join('');
});
} else {
Object.keys(val).forEach(function (key) {
finalVal += generateCSS(key, [val[key]], selectorHandlers, stringHandlers, false).join('');
});
}
finalVal += '}';
injectGeneratedCSSOnce(name, [finalVal]);
return name;
} else {
return val;
}
}
return animationName;
}()
};
// This is a map from Aphrodite's generated class names to `true` (acting as a
// set of class names)
var alreadyInjected = {};
// This is the buffer of styles which have not yet been flushed.
var injectionBuffer /* : string[] */ = [];
// A flag to tell if we are already buffering styles. This could happen either
// because we scheduled a flush call already, so newly added styles will
// already be flushed, or because we are statically buffering on the server.
var isBuffering = false;
var injectGeneratedCSSOnce = function injectGeneratedCSSOnce(key, generatedCSS) {
var _injectionBuffer;
if (alreadyInjected[key]) {
return;
}
if (!isBuffering) {
// We should never be automatically buffering on the server (or any
// place without a document), so guard against that.
if (typeof document === "undefined") {
throw new Error("Cannot automatically buffer without a document");
}
// If we're not already buffering, schedule a call to flush the
// current styles.
isBuffering = true;
asap(flushToStyleTag);
}
(_injectionBuffer = injectionBuffer).push.apply(_injectionBuffer, _toConsumableArray$1(generatedCSS));
alreadyInjected[key] = true;
};
var injectStyleOnce = function injectStyleOnce(key /* : string */
, selector /* : string */
, definitions /* : SheetDefinition[] */
, useImportant /* : boolean */
) {
var selectorHandlers /* : SelectorHandler[] */ = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
if (alreadyInjected[key]) {
return;
}
var generated = generateCSS(selector, definitions, selectorHandlers, stringHandlers, useImportant);
injectGeneratedCSSOnce(key, generated);
};
var reset = function reset() {
injectionBuffer = [];
alreadyInjected = {};
isBuffering = false;
styleTag = null;
};
var getBufferedStyles = function getBufferedStyles() {
return injectionBuffer;
};
var startBuffering = function startBuffering() {
if (isBuffering) {
throw new Error("Cannot buffer while already buffering");
}
isBuffering = true;
};
var flushToArray = function flushToArray() {
isBuffering = false;
var ret = injectionBuffer;
injectionBuffer = [];
return ret;
};
var flushToString = function flushToString() {
return flushToArray().join('');
};
var flushToStyleTag = function flushToStyleTag() {
var cssRules = flushToArray();
if (cssRules.length > 0) {
injectStyleTag(cssRules);
}
};
var getRenderedClassNames = function getRenderedClassNames() {
return Object.keys(alreadyInjected);
};
var addRenderedClassNames = function addRenderedClassNames(classNames /* : string[] */) {
classNames.forEach(function (className) {
alreadyInjected[className] = true;
});
};
var processStyleDefinitions = function processStyleDefinitions(styleDefinitions /* : any[] */
, classNameBits /* : string[] */
, definitionBits /* : Object[] */
, length /* : number */
) /* : number */{
for (var i = 0; i < styleDefinitions.length; i += 1) {
// Filter out falsy values from the input, to allow for
// `css(a, test && c)`
if (styleDefinitions[i]) {
if (Array.isArray(styleDefinitions[i])) {
// We've encountered an array, so let's recurse
length += processStyleDefinitions(styleDefinitions[i], classNameBits, definitionBits, length);
} else {
classNameBits.push(styleDefinitions[i]._name);
definitionBits.push(styleDefinitions[i]._definition);
length += styleDefinitions[i]._len;
}
}
}
return length;
};
/**
* Inject styles associated with the passed style definition objects, and return
* an associated CSS class name.
*
* @param {boolean} useImportant If true, will append !important to generated
* CSS output. e.g. {color: red} -> "color: red !important".
* @param {(Object|Object[])[]} styleDefinitions style definition objects, or
* arbitrarily nested arrays of them, as returned as properties of the
* return value of StyleSheet.create().
*/
var injectAndGetClassName = function injectAndGetClassName(useImportant /* : boolean */
, styleDefinitions /* : MaybeSheetDefinition[] */
, selectorHandlers /* : SelectorHandler[] */
) /* : string */{
var classNameBits = [];
var definitionBits = [];
// Mutates classNameBits and definitionBits and returns a length which we
// will append to the hash to decrease the chance of hash collisions.
var length = processStyleDefinitions(styleDefinitions, classNameBits, definitionBits, 0);
// Break if there aren't any valid styles.
if (classNameBits.length === 0) {
return "";
}
var className = void 0;
if (process.env.NODE_ENV === 'production') {
className = classNameBits.length === 1 ? '_' + String(classNameBits[0]) : '_' + String(hashString(classNameBits.join())) + String((length % 36).toString(36));
} else {
className = classNameBits.join("-o_O-");
}
injectStyleOnce(className, '.' + String(className), definitionBits, useImportant, selectorHandlers);
return className;
};
/* ::
import type { SelectorHandler } from './generate.js';
export type SheetDefinition = { [id:string]: any };
export type SheetDefinitions = SheetDefinition | SheetDefinition[];
type RenderFunction = () => string;
type Extension = {
selectorHandler: SelectorHandler
};
export type MaybeSheetDefinition = SheetDefinition | false | null | void
*/
var unminifiedHashFn = function unminifiedHashFn(str /* : string */, key /* : string */) {
return String(key) + '_' + String(hashString(str));
};
// StyleSheet.create is in a hot path so we want to keep as much logic out of it
// as possible. So, we figure out which hash function to use once, and only
// switch it out via minify() as necessary.
//
// This is in an exported function to make it easier to test.
var initialHashFn = function initialHashFn() {
return process.env.NODE_ENV === 'production' ? hashString : unminifiedHashFn;
};
var hashFn = initialHashFn();
var StyleSheet = {
create: function () {
function create(sheetDefinition /* : SheetDefinition */) /* : Object */{
var mappedSheetDefinition = {};
var keys = Object.keys(sheetDefinition);
for (var i = 0; i < keys.length; i += 1) {
var key = keys[i];
var val = sheetDefinition[key];
var stringVal = JSON.stringify(val);
mappedSheetDefinition[key] = {
_len: stringVal.length,
_name: hashFn(stringVal, key),
_definition: val
};
}
return mappedSheetDefinition;
}
return create;
}(),
rehydrate: function () {
function rehydrate() {
var renderedClassNames /* : string[] */ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
addRenderedClassNames(renderedClassNames);
}
return rehydrate;
}()
};
/**
* Utilities for using Aphrodite server-side.
*
* This can be minified out in client-only bundles by replacing `typeof window`
* with `"object"`, e.g. via Webpack's DefinePlugin:
*
* new webpack.DefinePlugin({
* "typeof window": JSON.stringify("object")
* })
*/
var StyleSheetServer = typeof window !== 'undefined' ? null : {
renderStatic: function () {
function renderStatic(renderFunc /* : RenderFunction */) {
reset();
startBuffering();
var html = renderFunc();
var cssContent = flushToString();
return {
html: html,
css: {
content: cssContent,
renderedClassNames: getRenderedClassNames()
}
};
}
return renderStatic;
}()
};
/**
* Utilities for using Aphrodite in tests.
*
* Not meant to be used in production.
*/
var StyleSheetTestUtils = process.env.NODE_ENV === 'production' ? null : {
/**
* Prevent styles from being injected into the DOM.
*
* This is useful in situations where you'd like to test rendering UI
* components which use Aphrodite without any of the side-effects of
* Aphrodite happening. Particularly useful for testing the output of
* components when you have no DOM, e.g. testing in Node without a fake DOM.
*
* Should be paired with a subsequent call to
* clearBufferAndResumeStyleInjection.
*/
suppressStyleInjection: function () {
function suppressStyleInjection() {
reset();
startBuffering();
}
return suppressStyleInjection;
}(),
/**
* Opposite method of preventStyleInject.
*/
clearBufferAndResumeStyleInjection: function () {
function clearBufferAndResumeStyleInjection() {
reset();
}
return clearBufferAndResumeStyleInjection;
}(),
/**
* Returns a string of buffered styles which have not been flushed
*
* @returns {string} Buffer of styles which have not yet been flushed.
*/
getBufferedStyles: function () {
function getBufferedStyles$$1() {
return getBufferedStyles();
}
return getBufferedStyles$$1;
}()
};
/**
* Generate the Aphrodite API exports, with given `selectorHandlers` and
* `useImportant` state.
*/
function makeExports(useImportant /* : boolean */
, selectorHandlers /* : SelectorHandler[] */
) {
return {
StyleSheet: Object.assign({}, StyleSheet, {
/**
* Returns a version of the exports of Aphrodite (i.e. an object
* with `css` and `StyleSheet` properties) which have some
* extensions included.
*
* @param {Array.<Object>} extensions: An array of extensions to
* add to this instance of Aphrodite. Each object should have a
* single property on it, defining which kind of extension to
* add.
* @param {SelectorHandler} [extensions[].selectorHandler]: A
* selector handler extension. See `defaultSelectorHandlers` in
* generate.js.
*
* @returns {Object} An object containing the exports of the new
* instance of Aphrodite.
*/
extend: function () {
function extend(extensions /* : Extension[] */) {
var extensionSelectorHandlers = extensions
// Pull out extensions with a selectorHandler property
.map(function (extension) {
return extension.selectorHandler;
})
// Remove nulls (i.e. extensions without a selectorHandler
// property).
.filter(function (handler) {
return handler;
});
return makeExports(useImportant, selectorHandlers.concat(extensionSelectorHandlers));
}
return extend;
}()
}),
StyleSheetServer: StyleSheetServer,
StyleSheetTestUtils: StyleSheetTestUtils,
minify: function () {
function minify(shouldMinify /* : boolean */) {
hashFn = shouldMinify ? hashString : unminifiedHashFn;
}
return minify;
}(),
css: function () {
function css() /* : MaybeSheetDefinition[] */{
for (var _len = arguments.length, styleDefinitions = Array(_len), _key = 0; _key < _len; _key++) {
styleDefinitions[_key] = arguments[_key];
}
return injectAndGetClassName(useImportant, styleDefinitions, selectorHandlers);
}
return css;
}()
};
}
var useImportant = false; // Don't add !important to style definitions
var Aphrodite = makeExports(useImportant, defaultSelectorHandlers);
var Aphrodite = makeExports(useImportant);
var StyleSheet$1 = Aphrodite.StyleSheet,
StyleSheetServer$1 = Aphrodite.StyleSheetServer,
StyleSheetTestUtils$1 = Aphrodite.StyleSheetTestUtils,
var StyleSheet = Aphrodite.StyleSheet,
StyleSheetServer = Aphrodite.StyleSheetServer,
StyleSheetTestUtils = Aphrodite.StyleSheetTestUtils,
css = Aphrodite.css,
minify = Aphrodite.minify;
minify = Aphrodite.minify,
flushToStyleTag = Aphrodite.flushToStyleTag,
injectAndGetClassName = Aphrodite.injectAndGetClassName,
defaultSelectorHandlers = Aphrodite.defaultSelectorHandlers;
export { StyleSheet$1 as StyleSheet, StyleSheetServer$1 as StyleSheetServer, StyleSheetTestUtils$1 as StyleSheetTestUtils, css, minify, flushToStyleTag, injectAndGetClassName, defaultSelectorHandlers };
export { StyleSheet, StyleSheetServer, StyleSheetTestUtils, css, minify, flushToStyleTag, injectAndGetClassName, defaultSelectorHandlers };

1190

lib/index.js

@@ -5,1171 +5,35 @@ 'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var __chunk_1 = require('./chunk-901a259f.js');
require('string-hash');
require('inline-style-prefixer/static/plugins/calc');
require('inline-style-prefixer/static/plugins/crossFade');
require('inline-style-prefixer/static/plugins/cursor');
require('inline-style-prefixer/static/plugins/filter');
require('inline-style-prefixer/static/plugins/flex');
require('inline-style-prefixer/static/plugins/flexboxIE');
require('inline-style-prefixer/static/plugins/flexboxOld');
require('inline-style-prefixer/static/plugins/gradient');
require('inline-style-prefixer/static/plugins/imageSet');
require('inline-style-prefixer/static/plugins/position');
require('inline-style-prefixer/static/plugins/sizing');
require('inline-style-prefixer/static/plugins/transition');
require('inline-style-prefixer/static/createPrefixer');
require('asap');
var calc = _interopDefault(require('inline-style-prefixer/static/plugins/calc'));
var crossFade = _interopDefault(require('inline-style-prefixer/static/plugins/crossFade'));
var cursor = _interopDefault(require('inline-style-prefixer/static/plugins/cursor'));
var filter = _interopDefault(require('inline-style-prefixer/static/plugins/filter'));
var flex = _interopDefault(require('inline-style-prefixer/static/plugins/flex'));
var flexboxIE = _interopDefault(require('inline-style-prefixer/static/plugins/flexboxIE'));
var flexboxOld = _interopDefault(require('inline-style-prefixer/static/plugins/flexboxOld'));
var gradient = _interopDefault(require('inline-style-prefixer/static/plugins/gradient'));
var imageSet = _interopDefault(require('inline-style-prefixer/static/plugins/imageSet'));
var position = _interopDefault(require('inline-style-prefixer/static/plugins/position'));
var sizing = _interopDefault(require('inline-style-prefixer/static/plugins/sizing'));
var transition = _interopDefault(require('inline-style-prefixer/static/plugins/transition'));
var stringHash = _interopDefault(require('string-hash'));
var createPrefixer = _interopDefault(require('inline-style-prefixer/static/createPrefixer'));
var asap = _interopDefault(require('asap'));
var w = ["Webkit"];
var m = ["Moz"];
var ms = ["ms"];
var wm = ["Webkit", "Moz"];
var wms = ["Webkit", "ms"];
var wmms = ["Webkit", "Moz", "ms"];
var staticPrefixData = {
plugins: [calc, crossFade, cursor, filter, flex, flexboxIE, flexboxOld, gradient, imageSet, position, sizing, transition],
prefixMap: { "transform": wms, "transformOrigin": wms, "transformOriginX": wms, "transformOriginY": wms, "backfaceVisibility": w, "perspective": w, "perspectiveOrigin": w, "transformStyle": w, "transformOriginZ": w, "animation": w, "animationDelay": w, "animationDirection": w, "animationFillMode": w, "animationDuration": w, "animationIterationCount": w, "animationName": w, "animationPlayState": w, "animationTimingFunction": w, "appearance": wm, "userSelect": wmms, "fontKerning": w, "textEmphasisPosition": w, "textEmphasis": w, "textEmphasisStyle": w, "textEmphasisColor": w, "boxDecorationBreak": w, "clipPath": w, "maskImage": w, "maskMode": w, "maskRepeat": w, "maskPosition": w, "maskClip": w, "maskOrigin": w, "maskSize": w, "maskComposite": w, "mask": w, "maskBorderSource": w, "maskBorderMode": w, "maskBorderSlice": w, "maskBorderWidth": w, "maskBorderOutset": w, "maskBorderRepeat": w, "maskBorder": w, "maskType": w, "textDecorationStyle": wm, "textDecorationSkip": wm, "textDecorationLine": wm, "textDecorationColor": wm, "filter": w, "fontFeatureSettings": wm, "breakAfter": wmms, "breakBefore": wmms, "breakInside": wmms, "columnCount": wm, "columnFill": wm, "columnGap": wm, "columnRule": wm, "columnRuleColor": wm, "columnRuleStyle": wm, "columnRuleWidth": wm, "columns": wm, "columnSpan": wm, "columnWidth": wm, "writingMode": wms, "flex": wms, "flexBasis": w, "flexDirection": wms, "flexGrow": w, "flexFlow": wms, "flexShrink": w, "flexWrap": wms, "alignContent": w, "alignItems": w, "alignSelf": w, "justifyContent": w, "order": w, "transitionDelay": w, "transitionDuration": w, "transitionProperty": w, "transitionTimingFunction": w, "backdropFilter": w, "scrollSnapType": wms, "scrollSnapPointsX": wms, "scrollSnapPointsY": wms, "scrollSnapDestination": wms, "scrollSnapCoordinate": wms, "shapeImageThreshold": w, "shapeImageMargin": w, "shapeImageOutside": w, "hyphens": wmms, "flowInto": wms, "flowFrom": wms, "regionFragment": wms, "boxSizing": m, "textAlignLast": m, "tabSize": m, "wrapFlow": ms, "wrapThrough": ms, "wrapMargin": ms, "touchAction": ms, "gridTemplateColumns": ms, "gridTemplateRows": ms, "gridTemplateAreas": ms, "gridTemplate": ms, "gridAutoColumns": ms, "gridAutoRows": ms, "gridAutoFlow": ms, "grid": ms, "gridRowStart": ms, "gridColumnStart": ms, "gridRowEnd": ms, "gridRow": ms, "gridColumn": ms, "gridColumnEnd": ms, "gridColumnGap": ms, "gridRowGap": ms, "gridArea": ms, "gridGap": ms, "textSizeAdjust": wms, "borderImage": w, "borderImageOutset": w, "borderImageRepeat": w, "borderImageSlice": w, "borderImageSource": w, "borderImageWidth": w }
};
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var MAP_EXISTS = typeof Map !== 'undefined';
var OrderedElements = function () {
/* ::
elements: {[string]: any};
keyOrder: string[];
*/
function OrderedElements() {
_classCallCheck(this, OrderedElements);
this.elements = {};
this.keyOrder = [];
}
_createClass(OrderedElements, [{
key: 'forEach',
value: function () {
function forEach(callback /* : (string, any) => void */) {
for (var i = 0; i < this.keyOrder.length; i++) {
// (value, key) to match Map's API
callback(this.elements[this.keyOrder[i]], this.keyOrder[i]);
}
}
return forEach;
}()
}, {
key: 'set',
value: function () {
function set(key /* : string */, value /* : any */, shouldReorder /* : ?boolean */) {
if (!this.elements.hasOwnProperty(key)) {
this.keyOrder.push(key);
} else if (shouldReorder) {
var index = this.keyOrder.indexOf(key);
this.keyOrder.splice(index, 1);
this.keyOrder.push(key);
}
if (value == null) {
this.elements[key] = value;
return;
}
if (MAP_EXISTS && value instanceof Map || value instanceof OrderedElements) {
// We have found a nested Map, so we need to recurse so that all
// of the nested objects and Maps are merged properly.
var nested = this.elements.hasOwnProperty(key) ? this.elements[key] : new OrderedElements();
value.forEach(function (value, key) {
nested.set(key, value, shouldReorder);
});
this.elements[key] = nested;
return;
}
if (!Array.isArray(value) && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object') {
// We have found a nested object, so we need to recurse so that all
// of the nested objects and Maps are merged properly.
var _nested = this.elements.hasOwnProperty(key) ? this.elements[key] : new OrderedElements();
var keys = Object.keys(value);
for (var i = 0; i < keys.length; i += 1) {
_nested.set(keys[i], value[keys[i]], shouldReorder);
}
this.elements[key] = _nested;
return;
}
this.elements[key] = value;
}
return set;
}()
}, {
key: 'get',
value: function () {
function get(key /* : string */) /* : any */{
return this.elements[key];
}
return get;
}()
}, {
key: 'has',
value: function () {
function has(key /* : string */) /* : boolean */{
return this.elements.hasOwnProperty(key);
}
return has;
}()
}, {
key: 'addStyleType',
value: function () {
function addStyleType(styleType /* : any */) /* : void */{
var _this = this;
if (MAP_EXISTS && styleType instanceof Map || styleType instanceof OrderedElements) {
styleType.forEach(function (value, key) {
_this.set(key, value, true);
});
} else {
var keys = Object.keys(styleType);
for (var i = 0; i < keys.length; i++) {
this.set(keys[i], styleType[keys[i]], true);
}
}
}
return addStyleType;
}()
}]);
return OrderedElements;
}();
/* ::
type ObjectMap = { [id:string]: any };
*/
var UPPERCASE_RE = /([A-Z])/g;
var UPPERCASE_RE_TO_KEBAB = function UPPERCASE_RE_TO_KEBAB(match /* : string */) {
return (/* : string */'-' + String(match.toLowerCase())
);
};
var kebabifyStyleName = function kebabifyStyleName(string /* : string */) /* : string */{
var result = string.replace(UPPERCASE_RE, UPPERCASE_RE_TO_KEBAB);
if (result[0] === 'm' && result[1] === 's' && result[2] === '-') {
return '-' + String(result);
}
return result;
};
/**
* CSS properties which accept numbers but are not in units of "px".
* Taken from React's CSSProperty.js
*/
var isUnitlessNumber = {
animationIterationCount: true,
borderImageOutset: true,
borderImageSlice: true,
borderImageWidth: true,
boxFlex: true,
boxFlexGroup: true,
boxOrdinalGroup: true,
columnCount: true,
flex: true,
flexGrow: true,
flexPositive: true,
flexShrink: true,
flexNegative: true,
flexOrder: true,
gridRow: true,
gridColumn: true,
fontWeight: true,
lineClamp: true,
lineHeight: true,
opacity: true,
order: true,
orphans: true,
tabSize: true,
widows: true,
zIndex: true,
zoom: true,
// SVG-related properties
fillOpacity: true,
floodOpacity: true,
stopOpacity: true,
strokeDasharray: true,
strokeDashoffset: true,
strokeMiterlimit: true,
strokeOpacity: true,
strokeWidth: true
};
/**
* Taken from React's CSSProperty.js
*
* @param {string} prefix vendor-specific prefix, eg: Webkit
* @param {string} key style name, eg: transitionDuration
* @return {string} style name prefixed with `prefix`, properly camelCased, eg:
* WebkitTransitionDuration
*/
function prefixKey(prefix, key) {
return prefix + key.charAt(0).toUpperCase() + key.substring(1);
}
/**
* Support style names that may come passed in prefixed by adding permutations
* of vendor prefixes.
* Taken from React's CSSProperty.js
*/
var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
// Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
// infinite loop, because it iterates over the newly added props too.
// Taken from React's CSSProperty.js
Object.keys(isUnitlessNumber).forEach(function (prop) {
prefixes.forEach(function (prefix) {
isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
});
});
var stringifyValue = function stringifyValue(key /* : string */
, prop /* : any */
) /* : string */{
if (typeof prop === "number") {
if (isUnitlessNumber[key]) {
return "" + prop;
} else {
return prop + "px";
}
} else {
return '' + prop;
}
};
var stringifyAndImportantifyValue = function stringifyAndImportantifyValue(key /* : string */
, prop /* : any */
) {
return (/* : string */importantify(stringifyValue(key, prop))
);
};
// Turn a string into a hash string of base-36 values (using letters and numbers)
// eslint-disable-next-line no-unused-vars
var hashString = function hashString(string /* : string */, key /* : ?string */) {
return (/* string */stringHash(string).toString(36)
);
};
// Hash a javascript object using JSON.stringify. This is very fast, about 3
// microseconds on my computer for a sample object:
// http://jsperf.com/test-hashfnv32a-hash/5
//
// Note that this uses JSON.stringify to stringify the objects so in order for
// this to produce consistent hashes browsers need to have a consistent
// ordering of objects. Ben Alpert says that Facebook depends on this, so we
// can probably depend on this too.
var hashObject = function hashObject(object /* : ObjectMap */) {
return (/* : string */hashString(JSON.stringify(object))
);
};
// Given a single style value string like the "b" from "a: b;", adds !important
// to generate "b !important".
var importantify = function importantify(string /* : string */) {
return (/* : string */
// Bracket string character access is very fast, and in the default case we
// normally don't expect there to be "!important" at the end of the string
// so we can use this simple check to take an optimized path. If there
// happens to be a "!" in this position, we follow up with a more thorough
// check.
string[string.length - 10] === '!' && string.slice(-11) === ' !important' ? string : String(string) + ' !important'
);
};
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
var prefixAll = createPrefixer(staticPrefixData);
/* ::
import type { SheetDefinition } from './index.js';
type StringHandlers = { [id:string]: Function };
type SelectorCallback = (selector: string) => string[];
export type SelectorHandler = (
selector: string,
baseSelector: string,
callback: SelectorCallback
) => string[] | string | null;
*/
/**
* `selectorHandlers` are functions which handle special selectors which act
* differently than normal style definitions. These functions look at the
* current selector and can generate CSS for the styles in their subtree by
* calling the callback with a new selector.
*
* For example, when generating styles with a base selector of '.foo' and the
* following styles object:
*
* {
* ':nth-child(2n)': {
* ':hover': {
* color: 'red'
* }
* }
* }
*
* when we reach the ':hover' style, we would call our selector handlers like
*
* handler(':hover', '.foo:nth-child(2n)', callback)
*
* Since our `pseudoSelectors` handles ':hover' styles, that handler would call
* the callback like
*
* callback('.foo:nth-child(2n):hover')
*
* to generate its subtree `{ color: 'red' }` styles with a
* '.foo:nth-child(2n):hover' selector. The callback would return an array of CSS
* rules like
*
* ['.foo:nth-child(2n):hover{color:red !important;}']
*
* and the handler would then return that resulting CSS.
*
* `defaultSelectorHandlers` is the list of default handlers used in a call to
* `generateCSS`.
*
* @name SelectorHandler
* @function
* @param {string} selector: The currently inspected selector. ':hover' in the
* example above.
* @param {string} baseSelector: The selector of the parent styles.
* '.foo:nth-child(2n)' in the example above.
* @param {function} generateSubtreeStyles: A function which can be called to
* generate CSS for the subtree of styles corresponding to the selector.
* Accepts a new baseSelector to use for generating those styles.
* @returns {string[] | string | null} The generated CSS for this selector, or
* null if we don't handle this selector.
*/
var defaultSelectorHandlers /* : SelectorHandler[] */ = [
// Handle pseudo-selectors, like :hover and :nth-child(3n)
function () {
function pseudoSelectors(selector, baseSelector, generateSubtreeStyles) {
if (selector[0] !== ":") {
return null;
}
return generateSubtreeStyles(baseSelector + selector);
}
return pseudoSelectors;
}(),
// Handle media queries (or font-faces)
function () {
function mediaQueries(selector, baseSelector, generateSubtreeStyles) {
if (selector[0] !== "@") {
return null;
}
// Generate the styles normally, and then wrap them in the media query.
var generated = generateSubtreeStyles(baseSelector);
return [String(selector) + '{' + String(generated.join('')) + '}'];
}
return mediaQueries;
}()];
/**
* Generate CSS for a selector and some styles.
*
* This function handles the media queries and pseudo selectors that can be used
* in aphrodite styles.
*
* @param {string} selector: A base CSS selector for the styles to be generated
* with.
* @param {Object} styleTypes: A list of properties of the return type of
* StyleSheet.create, e.g. [styles.red, styles.blue].
* @param {Array.<SelectorHandler>} selectorHandlers: A list of selector
* handlers to use for handling special selectors. See
* `defaultSelectorHandlers`.
* @param stringHandlers: See `generateCSSRuleset`
* @param useImportant: See `generateCSSRuleset`
*
* To actually generate the CSS special-construct-less styles are passed to
* `generateCSSRuleset`.
*
* For instance, a call to
*
* generateCSS(".foo", [{
* color: "red",
* "@media screen": {
* height: 20,
* ":hover": {
* backgroundColor: "black"
* }
* },
* ":active": {
* fontWeight: "bold"
* }
* }], defaultSelectorHandlers);
*
* with the default `selectorHandlers` will make 5 calls to
* `generateCSSRuleset`:
*
* generateCSSRuleset(".foo", { color: "red" }, ...)
* generateCSSRuleset(".foo:active", { fontWeight: "bold" }, ...)
* // These 2 will be wrapped in @media screen {}
* generateCSSRuleset(".foo", { height: 20 }, ...)
* generateCSSRuleset(".foo:hover", { backgroundColor: "black" }, ...)
*/
var generateCSS = function generateCSS(selector /* : string */
, styleTypes /* : SheetDefinition[] */
, selectorHandlers /* : SelectorHandler[] */
, stringHandlers /* : StringHandlers */
, useImportant /* : boolean */
) /* : string[] */{
var merged = new OrderedElements();
for (var i = 0; i < styleTypes.length; i++) {
merged.addStyleType(styleTypes[i]);
}
var plainDeclarations = new OrderedElements();
var generatedStyles = [];
// TODO(emily): benchmark this to see if a plain for loop would be faster.
merged.forEach(function (val, key) {
// For each key, see if one of the selector handlers will handle these
// styles.
var foundHandler = selectorHandlers.some(function (handler) {
var result = handler(key, selector, function (newSelector) {
return generateCSS(newSelector, [val], selectorHandlers, stringHandlers, useImportant);
});
if (result != null) {
// If the handler returned something, add it to the generated
// CSS and stop looking for another handler.
if (Array.isArray(result)) {
generatedStyles.push.apply(generatedStyles, _toConsumableArray(result));
} else {
// eslint-disable-next-line
console.warn('WARNING: Selector handlers should return an array of rules.' + 'Returning a string containing multiple rules is deprecated.', handler);
generatedStyles.push('@media all {' + String(result) + '}');
}
return true;
}
});
// If none of the handlers handled it, add it to the list of plain
// style declarations.
if (!foundHandler) {
plainDeclarations.set(key, val, true);
}
});
var generatedRuleset = generateCSSRuleset(selector, plainDeclarations, stringHandlers, useImportant, selectorHandlers);
if (generatedRuleset) {
generatedStyles.unshift(generatedRuleset);
}
return generatedStyles;
};
/**
* Helper method of generateCSSRuleset to facilitate custom handling of certain
* CSS properties. Used for e.g. font families.
*
* See generateCSSRuleset for usage and documentation of paramater types.
*/
var runStringHandlers = function runStringHandlers(declarations /* : OrderedElements */
, stringHandlers /* : StringHandlers */
, selectorHandlers /* : SelectorHandler[] */
) /* : void */{
if (!stringHandlers) {
return;
}
var stringHandlerKeys = Object.keys(stringHandlers);
for (var i = 0; i < stringHandlerKeys.length; i++) {
var key = stringHandlerKeys[i];
if (declarations.has(key)) {
// A declaration exists for this particular string handler, so we
// need to let the string handler interpret the declaration first
// before proceeding.
//
// TODO(emily): Pass in a callback which generates CSS, similar to
// how our selector handlers work, instead of passing in
// `selectorHandlers` and have them make calls to `generateCSS`
// themselves. Right now, this is impractical because our string
// handlers are very specialized and do complex things.
declarations.set(key, stringHandlers[key](declarations.get(key), selectorHandlers),
// Preserve order here, since we are really replacing an
// unprocessed style with a processed style, not overriding an
// earlier style
false);
}
}
};
var transformRule = function transformRule(key /* : string */
, value /* : string */
, transformValue /* : function */
) {
return (/* : string */String(kebabifyStyleName(key)) + ':' + String(transformValue(key, value)) + ';'
);
};
var arrayToObjectKeysReducer = function arrayToObjectKeysReducer(acc, val) {
acc[val] = true;
return acc;
};
/**
* Generate a CSS ruleset with the selector and containing the declarations.
*
* This function assumes that the given declarations don't contain any special
* children (such as media queries, pseudo-selectors, or descendant styles).
*
* Note that this method does not deal with nesting used for e.g.
* psuedo-selectors or media queries. That responsibility is left to the
* `generateCSS` function.
*
* @param {string} selector: the selector associated with the ruleset
* @param {Object} declarations: a map from camelCased CSS property name to CSS
* property value.
* @param {Object.<string, function>} stringHandlers: a map from camelCased CSS
* property name to a function which will map the given value to the value
* that is output.
* @param {bool} useImportant: A boolean saying whether to append "!important"
* to each of the CSS declarations.
* @returns {string} A string of raw CSS.
*
* Examples:
*
* generateCSSRuleset(".blah", { color: "red" })
* -> ".blah{color: red !important;}"
* generateCSSRuleset(".blah", { color: "red" }, {}, false)
* -> ".blah{color: red}"
* generateCSSRuleset(".blah", { color: "red" }, {color: c => c.toUpperCase})
* -> ".blah{color: RED}"
* generateCSSRuleset(".blah:hover", { color: "red" })
* -> ".blah:hover{color: red}"
*/
var generateCSSRuleset = function generateCSSRuleset(selector /* : string */
, declarations /* : OrderedElements */
, stringHandlers /* : StringHandlers */
, useImportant /* : boolean */
, selectorHandlers /* : SelectorHandler[] */
) /* : string */{
// Mutates declarations
runStringHandlers(declarations, stringHandlers, selectorHandlers);
var originalElements = Object.keys(declarations.elements).reduce(arrayToObjectKeysReducer, Object.create(null));
// NOTE(emily): This mutates handledDeclarations.elements.
var prefixedElements = prefixAll(declarations.elements);
var elementNames = Object.keys(prefixedElements);
if (elementNames.length !== declarations.keyOrder.length) {
// There are some prefixed values, so we need to figure out how to sort
// them.
//
// Loop through prefixedElements, looking for anything that is not in
// sortOrder, which means it was added by prefixAll. This means that we
// need to figure out where it should appear in the sortOrder.
for (var i = 0; i < elementNames.length; i++) {
if (!originalElements[elementNames[i]]) {
// This element is not in the sortOrder, which means it is a prefixed
// value that was added by prefixAll. Let's try to figure out where it
// goes.
var originalStyle = void 0;
if (elementNames[i][0] === 'W') {
// This is a Webkit-prefixed style, like "WebkitTransition". Let's
// find its original style's sort order.
originalStyle = elementNames[i][6].toLowerCase() + elementNames[i].slice(7);
} else if (elementNames[i][1] === 'o') {
// This is a Moz-prefixed style, like "MozTransition". We check
// the second character to avoid colliding with Ms-prefixed
// styles. Let's find its original style's sort order.
originalStyle = elementNames[i][3].toLowerCase() + elementNames[i].slice(4);
} else {
// if (elementNames[i][1] === 's') {
// This is a Ms-prefixed style, like "MsTransition".
originalStyle = elementNames[i][2].toLowerCase() + elementNames[i].slice(3);
}
if (originalStyle && originalElements[originalStyle]) {
var originalIndex = declarations.keyOrder.indexOf(originalStyle);
declarations.keyOrder.splice(originalIndex, 0, elementNames[i]);
} else {
// We don't know what the original style was, so sort it to
// top. This can happen for styles that are added that don't
// have the same base name as the original style.
declarations.keyOrder.unshift(elementNames[i]);
}
}
}
}
var transformValue = useImportant === false ? stringifyValue : stringifyAndImportantifyValue;
var rules = [];
for (var _i = 0; _i < declarations.keyOrder.length; _i++) {
var key = declarations.keyOrder[_i];
var value = prefixedElements[key];
if (Array.isArray(value)) {
// inline-style-prefixer returns an array when there should be
// multiple rules for the same key. Here we flatten to multiple
// pairs with the same key.
for (var j = 0; j < value.length; j++) {
rules.push(transformRule(key, value[j], transformValue));
}
} else {
rules.push(transformRule(key, value, transformValue));
}
}
if (rules.length) {
return String(selector) + '{' + String(rules.join("")) + '}';
} else {
return "";
}
};
var _typeof$1 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
function _toConsumableArray$1(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
/* ::
import type { SheetDefinition, SheetDefinitions } from './index.js';
import type { MaybeSheetDefinition } from './exports.js';
import type { SelectorHandler } from './generate.js';
*/
// The current <style> tag we are inserting into, or null if we haven't
// inserted anything yet. We could find this each time using
// `document.querySelector("style[data-aphrodite"])`, but holding onto it is
// faster.
var styleTag /* : ?HTMLStyleElement */ = null;
// Inject a set of rules into a <style> tag in the head of the document. This
// will automatically create a style tag and then continue to use it for
// multiple injections. It will also use a style tag with the `data-aphrodite`
// tag on it if that exists in the DOM. This could be used for e.g. reusing the
// same style tag that server-side rendering inserts.
var injectStyleTag = function injectStyleTag(cssRules /* : string[] */) {
if (styleTag == null) {
// Try to find a style tag with the `data-aphrodite` attribute first.
styleTag = document.querySelector("style[data-aphrodite]") /* : any */;
// If that doesn't work, generate a new style tag.
if (styleTag == null) {
// Taken from
// http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
var head = document.head || document.getElementsByTagName('head')[0];
styleTag = document.createElement('style');
styleTag.type = 'text/css';
styleTag.setAttribute("data-aphrodite", "");
head.appendChild(styleTag);
}
}
var sheet = styleTag.styleSheet || styleTag.sheet /* : any */;
if (sheet.insertRule) {
var numRules = sheet.cssRules.length;
cssRules.forEach(function (rule) {
try {
sheet.insertRule(rule, numRules);
numRules += 1;
} catch (e) {
// The selector for this rule wasn't compatible with the browser
}
});
} else {
styleTag.innerText = (styleTag.innerText || '') + cssRules.join('');
}
};
// Custom handlers for stringifying CSS values that have side effects
// (such as fontFamily, which can cause @font-face rules to be injected)
var stringHandlers = {
// With fontFamily we look for objects that are passed in and interpret
// them as @font-face rules that we need to inject. The value of fontFamily
// can either be a string (as normal), an object (a single font face), or
// an array of objects and strings.
fontFamily: function () {
function fontFamily(val) {
if (Array.isArray(val)) {
return val.map(fontFamily).join(",");
} else if ((typeof val === 'undefined' ? 'undefined' : _typeof$1(val)) === "object") {
injectStyleOnce(val.src, "@font-face", [val], false);
return '"' + String(val.fontFamily) + '"';
} else {
return val;
}
}
return fontFamily;
}(),
// With animationName we look for an object that contains keyframes and
// inject them as an `@keyframes` block, returning a uniquely generated
// name. The keyframes object should look like
// animationName: {
// from: {
// left: 0,
// top: 0,
// },
// '50%': {
// left: 15,
// top: 5,
// },
// to: {
// left: 20,
// top: 20,
// }
// }
// TODO(emily): `stringHandlers` doesn't let us rename the key, so I have
// to use `animationName` here. Improve that so we can call this
// `animation` instead of `animationName`.
animationName: function () {
function animationName(val, selectorHandlers) {
if (Array.isArray(val)) {
return val.map(function (v) {
return animationName(v, selectorHandlers);
}).join(",");
} else if ((typeof val === 'undefined' ? 'undefined' : _typeof$1(val)) === "object") {
// Generate a unique name based on the hash of the object. We can't
// just use the hash because the name can't start with a number.
// TODO(emily): this probably makes debugging hard, allow a custom
// name?
var name = 'keyframe_' + String(hashObject(val));
// Since keyframes need 3 layers of nesting, we use `generateCSS` to
// build the inner layers and wrap it in `@keyframes` ourselves.
var finalVal = '@keyframes ' + name + '{';
// TODO see if we can find a way where checking for OrderedElements
// here is not necessary. Alternatively, perhaps we should have a
// utility method that can iterate over either a plain object, an
// instance of OrderedElements, or a Map, and then use that here and
// elsewhere.
if (val instanceof OrderedElements) {
val.forEach(function (valVal, valKey) {
finalVal += generateCSS(valKey, [valVal], selectorHandlers, stringHandlers, false).join('');
});
} else {
Object.keys(val).forEach(function (key) {
finalVal += generateCSS(key, [val[key]], selectorHandlers, stringHandlers, false).join('');
});
}
finalVal += '}';
injectGeneratedCSSOnce(name, [finalVal]);
return name;
} else {
return val;
}
}
return animationName;
}()
};
// This is a map from Aphrodite's generated class names to `true` (acting as a
// set of class names)
var alreadyInjected = {};
// This is the buffer of styles which have not yet been flushed.
var injectionBuffer /* : string[] */ = [];
// A flag to tell if we are already buffering styles. This could happen either
// because we scheduled a flush call already, so newly added styles will
// already be flushed, or because we are statically buffering on the server.
var isBuffering = false;
var injectGeneratedCSSOnce = function injectGeneratedCSSOnce(key, generatedCSS) {
var _injectionBuffer;
if (alreadyInjected[key]) {
return;
}
if (!isBuffering) {
// We should never be automatically buffering on the server (or any
// place without a document), so guard against that.
if (typeof document === "undefined") {
throw new Error("Cannot automatically buffer without a document");
}
// If we're not already buffering, schedule a call to flush the
// current styles.
isBuffering = true;
asap(flushToStyleTag);
}
(_injectionBuffer = injectionBuffer).push.apply(_injectionBuffer, _toConsumableArray$1(generatedCSS));
alreadyInjected[key] = true;
};
var injectStyleOnce = function injectStyleOnce(key /* : string */
, selector /* : string */
, definitions /* : SheetDefinition[] */
, useImportant /* : boolean */
) {
var selectorHandlers /* : SelectorHandler[] */ = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
if (alreadyInjected[key]) {
return;
}
var generated = generateCSS(selector, definitions, selectorHandlers, stringHandlers, useImportant);
injectGeneratedCSSOnce(key, generated);
};
var reset = function reset() {
injectionBuffer = [];
alreadyInjected = {};
isBuffering = false;
styleTag = null;
};
var getBufferedStyles = function getBufferedStyles() {
return injectionBuffer;
};
var startBuffering = function startBuffering() {
if (isBuffering) {
throw new Error("Cannot buffer while already buffering");
}
isBuffering = true;
};
var flushToArray = function flushToArray() {
isBuffering = false;
var ret = injectionBuffer;
injectionBuffer = [];
return ret;
};
var flushToString = function flushToString() {
return flushToArray().join('');
};
var flushToStyleTag = function flushToStyleTag() {
var cssRules = flushToArray();
if (cssRules.length > 0) {
injectStyleTag(cssRules);
}
};
var getRenderedClassNames = function getRenderedClassNames() {
return Object.keys(alreadyInjected);
};
var addRenderedClassNames = function addRenderedClassNames(classNames /* : string[] */) {
classNames.forEach(function (className) {
alreadyInjected[className] = true;
});
};
var processStyleDefinitions = function processStyleDefinitions(styleDefinitions /* : any[] */
, classNameBits /* : string[] */
, definitionBits /* : Object[] */
, length /* : number */
) /* : number */{
for (var i = 0; i < styleDefinitions.length; i += 1) {
// Filter out falsy values from the input, to allow for
// `css(a, test && c)`
if (styleDefinitions[i]) {
if (Array.isArray(styleDefinitions[i])) {
// We've encountered an array, so let's recurse
length += processStyleDefinitions(styleDefinitions[i], classNameBits, definitionBits, length);
} else {
classNameBits.push(styleDefinitions[i]._name);
definitionBits.push(styleDefinitions[i]._definition);
length += styleDefinitions[i]._len;
}
}
}
return length;
};
/**
* Inject styles associated with the passed style definition objects, and return
* an associated CSS class name.
*
* @param {boolean} useImportant If true, will append !important to generated
* CSS output. e.g. {color: red} -> "color: red !important".
* @param {(Object|Object[])[]} styleDefinitions style definition objects, or
* arbitrarily nested arrays of them, as returned as properties of the
* return value of StyleSheet.create().
*/
var injectAndGetClassName = function injectAndGetClassName(useImportant /* : boolean */
, styleDefinitions /* : MaybeSheetDefinition[] */
, selectorHandlers /* : SelectorHandler[] */
) /* : string */{
var classNameBits = [];
var definitionBits = [];
// Mutates classNameBits and definitionBits and returns a length which we
// will append to the hash to decrease the chance of hash collisions.
var length = processStyleDefinitions(styleDefinitions, classNameBits, definitionBits, 0);
// Break if there aren't any valid styles.
if (classNameBits.length === 0) {
return "";
}
var className = void 0;
if (process.env.NODE_ENV === 'production') {
className = classNameBits.length === 1 ? '_' + String(classNameBits[0]) : '_' + String(hashString(classNameBits.join())) + String((length % 36).toString(36));
} else {
className = classNameBits.join("-o_O-");
}
injectStyleOnce(className, '.' + String(className), definitionBits, useImportant, selectorHandlers);
return className;
};
/* ::
import type { SelectorHandler } from './generate.js';
export type SheetDefinition = { [id:string]: any };
export type SheetDefinitions = SheetDefinition | SheetDefinition[];
type RenderFunction = () => string;
type Extension = {
selectorHandler: SelectorHandler
};
export type MaybeSheetDefinition = SheetDefinition | false | null | void
*/
var unminifiedHashFn = function unminifiedHashFn(str /* : string */, key /* : string */) {
return String(key) + '_' + String(hashString(str));
};
// StyleSheet.create is in a hot path so we want to keep as much logic out of it
// as possible. So, we figure out which hash function to use once, and only
// switch it out via minify() as necessary.
//
// This is in an exported function to make it easier to test.
var initialHashFn = function initialHashFn() {
return process.env.NODE_ENV === 'production' ? hashString : unminifiedHashFn;
};
var hashFn = initialHashFn();
var StyleSheet = {
create: function () {
function create(sheetDefinition /* : SheetDefinition */) /* : Object */{
var mappedSheetDefinition = {};
var keys = Object.keys(sheetDefinition);
for (var i = 0; i < keys.length; i += 1) {
var key = keys[i];
var val = sheetDefinition[key];
var stringVal = JSON.stringify(val);
mappedSheetDefinition[key] = {
_len: stringVal.length,
_name: hashFn(stringVal, key),
_definition: val
};
}
return mappedSheetDefinition;
}
return create;
}(),
rehydrate: function () {
function rehydrate() {
var renderedClassNames /* : string[] */ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
addRenderedClassNames(renderedClassNames);
}
return rehydrate;
}()
};
/**
* Utilities for using Aphrodite server-side.
*
* This can be minified out in client-only bundles by replacing `typeof window`
* with `"object"`, e.g. via Webpack's DefinePlugin:
*
* new webpack.DefinePlugin({
* "typeof window": JSON.stringify("object")
* })
*/
var StyleSheetServer = typeof window !== 'undefined' ? null : {
renderStatic: function () {
function renderStatic(renderFunc /* : RenderFunction */) {
reset();
startBuffering();
var html = renderFunc();
var cssContent = flushToString();
return {
html: html,
css: {
content: cssContent,
renderedClassNames: getRenderedClassNames()
}
};
}
return renderStatic;
}()
};
/**
* Utilities for using Aphrodite in tests.
*
* Not meant to be used in production.
*/
var StyleSheetTestUtils = process.env.NODE_ENV === 'production' ? null : {
/**
* Prevent styles from being injected into the DOM.
*
* This is useful in situations where you'd like to test rendering UI
* components which use Aphrodite without any of the side-effects of
* Aphrodite happening. Particularly useful for testing the output of
* components when you have no DOM, e.g. testing in Node without a fake DOM.
*
* Should be paired with a subsequent call to
* clearBufferAndResumeStyleInjection.
*/
suppressStyleInjection: function () {
function suppressStyleInjection() {
reset();
startBuffering();
}
return suppressStyleInjection;
}(),
/**
* Opposite method of preventStyleInject.
*/
clearBufferAndResumeStyleInjection: function () {
function clearBufferAndResumeStyleInjection() {
reset();
}
return clearBufferAndResumeStyleInjection;
}(),
/**
* Returns a string of buffered styles which have not been flushed
*
* @returns {string} Buffer of styles which have not yet been flushed.
*/
getBufferedStyles: function () {
function getBufferedStyles$$1() {
return getBufferedStyles();
}
return getBufferedStyles$$1;
}()
};
/**
* Generate the Aphrodite API exports, with given `selectorHandlers` and
* `useImportant` state.
*/
function makeExports(useImportant /* : boolean */
, selectorHandlers /* : SelectorHandler[] */
) {
return {
StyleSheet: Object.assign({}, StyleSheet, {
/**
* Returns a version of the exports of Aphrodite (i.e. an object
* with `css` and `StyleSheet` properties) which have some
* extensions included.
*
* @param {Array.<Object>} extensions: An array of extensions to
* add to this instance of Aphrodite. Each object should have a
* single property on it, defining which kind of extension to
* add.
* @param {SelectorHandler} [extensions[].selectorHandler]: A
* selector handler extension. See `defaultSelectorHandlers` in
* generate.js.
*
* @returns {Object} An object containing the exports of the new
* instance of Aphrodite.
*/
extend: function () {
function extend(extensions /* : Extension[] */) {
var extensionSelectorHandlers = extensions
// Pull out extensions with a selectorHandler property
.map(function (extension) {
return extension.selectorHandler;
})
// Remove nulls (i.e. extensions without a selectorHandler
// property).
.filter(function (handler) {
return handler;
});
return makeExports(useImportant, selectorHandlers.concat(extensionSelectorHandlers));
}
return extend;
}()
}),
StyleSheetServer: StyleSheetServer,
StyleSheetTestUtils: StyleSheetTestUtils,
minify: function () {
function minify(shouldMinify /* : boolean */) {
hashFn = shouldMinify ? hashString : unminifiedHashFn;
}
return minify;
}(),
css: function () {
function css() /* : MaybeSheetDefinition[] */{
for (var _len = arguments.length, styleDefinitions = Array(_len), _key = 0; _key < _len; _key++) {
styleDefinitions[_key] = arguments[_key];
}
return injectAndGetClassName(useImportant, styleDefinitions, selectorHandlers);
}
return css;
}()
};
}
var useImportant = true; // Add !important to all style definitions
var Aphrodite = makeExports(useImportant, defaultSelectorHandlers);
var Aphrodite = __chunk_1.makeExports(useImportant);
var StyleSheet$1 = Aphrodite.StyleSheet,
StyleSheetServer$1 = Aphrodite.StyleSheetServer,
StyleSheetTestUtils$1 = Aphrodite.StyleSheetTestUtils,
var StyleSheet = Aphrodite.StyleSheet,
StyleSheetServer = Aphrodite.StyleSheetServer,
StyleSheetTestUtils = Aphrodite.StyleSheetTestUtils,
css = Aphrodite.css,
minify = Aphrodite.minify;
minify = Aphrodite.minify,
flushToStyleTag = Aphrodite.flushToStyleTag,
injectAndGetClassName = Aphrodite.injectAndGetClassName,
defaultSelectorHandlers = Aphrodite.defaultSelectorHandlers;
exports.StyleSheet = StyleSheet$1;
exports.StyleSheetServer = StyleSheetServer$1;
exports.StyleSheetTestUtils = StyleSheetTestUtils$1;
exports.StyleSheet = StyleSheet;
exports.StyleSheetServer = StyleSheetServer;
exports.StyleSheetTestUtils = StyleSheetTestUtils;
exports.css = css;

@@ -1176,0 +40,0 @@ exports.minify = minify;

1190

lib/no-important.js

@@ -5,1171 +5,35 @@ 'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var __chunk_1 = require('./chunk-901a259f.js');
require('string-hash');
require('inline-style-prefixer/static/plugins/calc');
require('inline-style-prefixer/static/plugins/crossFade');
require('inline-style-prefixer/static/plugins/cursor');
require('inline-style-prefixer/static/plugins/filter');
require('inline-style-prefixer/static/plugins/flex');
require('inline-style-prefixer/static/plugins/flexboxIE');
require('inline-style-prefixer/static/plugins/flexboxOld');
require('inline-style-prefixer/static/plugins/gradient');
require('inline-style-prefixer/static/plugins/imageSet');
require('inline-style-prefixer/static/plugins/position');
require('inline-style-prefixer/static/plugins/sizing');
require('inline-style-prefixer/static/plugins/transition');
require('inline-style-prefixer/static/createPrefixer');
require('asap');
var calc = _interopDefault(require('inline-style-prefixer/static/plugins/calc'));
var crossFade = _interopDefault(require('inline-style-prefixer/static/plugins/crossFade'));
var cursor = _interopDefault(require('inline-style-prefixer/static/plugins/cursor'));
var filter = _interopDefault(require('inline-style-prefixer/static/plugins/filter'));
var flex = _interopDefault(require('inline-style-prefixer/static/plugins/flex'));
var flexboxIE = _interopDefault(require('inline-style-prefixer/static/plugins/flexboxIE'));
var flexboxOld = _interopDefault(require('inline-style-prefixer/static/plugins/flexboxOld'));
var gradient = _interopDefault(require('inline-style-prefixer/static/plugins/gradient'));
var imageSet = _interopDefault(require('inline-style-prefixer/static/plugins/imageSet'));
var position = _interopDefault(require('inline-style-prefixer/static/plugins/position'));
var sizing = _interopDefault(require('inline-style-prefixer/static/plugins/sizing'));
var transition = _interopDefault(require('inline-style-prefixer/static/plugins/transition'));
var stringHash = _interopDefault(require('string-hash'));
var createPrefixer = _interopDefault(require('inline-style-prefixer/static/createPrefixer'));
var asap = _interopDefault(require('asap'));
var w = ["Webkit"];
var m = ["Moz"];
var ms = ["ms"];
var wm = ["Webkit", "Moz"];
var wms = ["Webkit", "ms"];
var wmms = ["Webkit", "Moz", "ms"];
var staticPrefixData = {
plugins: [calc, crossFade, cursor, filter, flex, flexboxIE, flexboxOld, gradient, imageSet, position, sizing, transition],
prefixMap: { "transform": wms, "transformOrigin": wms, "transformOriginX": wms, "transformOriginY": wms, "backfaceVisibility": w, "perspective": w, "perspectiveOrigin": w, "transformStyle": w, "transformOriginZ": w, "animation": w, "animationDelay": w, "animationDirection": w, "animationFillMode": w, "animationDuration": w, "animationIterationCount": w, "animationName": w, "animationPlayState": w, "animationTimingFunction": w, "appearance": wm, "userSelect": wmms, "fontKerning": w, "textEmphasisPosition": w, "textEmphasis": w, "textEmphasisStyle": w, "textEmphasisColor": w, "boxDecorationBreak": w, "clipPath": w, "maskImage": w, "maskMode": w, "maskRepeat": w, "maskPosition": w, "maskClip": w, "maskOrigin": w, "maskSize": w, "maskComposite": w, "mask": w, "maskBorderSource": w, "maskBorderMode": w, "maskBorderSlice": w, "maskBorderWidth": w, "maskBorderOutset": w, "maskBorderRepeat": w, "maskBorder": w, "maskType": w, "textDecorationStyle": wm, "textDecorationSkip": wm, "textDecorationLine": wm, "textDecorationColor": wm, "filter": w, "fontFeatureSettings": wm, "breakAfter": wmms, "breakBefore": wmms, "breakInside": wmms, "columnCount": wm, "columnFill": wm, "columnGap": wm, "columnRule": wm, "columnRuleColor": wm, "columnRuleStyle": wm, "columnRuleWidth": wm, "columns": wm, "columnSpan": wm, "columnWidth": wm, "writingMode": wms, "flex": wms, "flexBasis": w, "flexDirection": wms, "flexGrow": w, "flexFlow": wms, "flexShrink": w, "flexWrap": wms, "alignContent": w, "alignItems": w, "alignSelf": w, "justifyContent": w, "order": w, "transitionDelay": w, "transitionDuration": w, "transitionProperty": w, "transitionTimingFunction": w, "backdropFilter": w, "scrollSnapType": wms, "scrollSnapPointsX": wms, "scrollSnapPointsY": wms, "scrollSnapDestination": wms, "scrollSnapCoordinate": wms, "shapeImageThreshold": w, "shapeImageMargin": w, "shapeImageOutside": w, "hyphens": wmms, "flowInto": wms, "flowFrom": wms, "regionFragment": wms, "boxSizing": m, "textAlignLast": m, "tabSize": m, "wrapFlow": ms, "wrapThrough": ms, "wrapMargin": ms, "touchAction": ms, "gridTemplateColumns": ms, "gridTemplateRows": ms, "gridTemplateAreas": ms, "gridTemplate": ms, "gridAutoColumns": ms, "gridAutoRows": ms, "gridAutoFlow": ms, "grid": ms, "gridRowStart": ms, "gridColumnStart": ms, "gridRowEnd": ms, "gridRow": ms, "gridColumn": ms, "gridColumnEnd": ms, "gridColumnGap": ms, "gridRowGap": ms, "gridArea": ms, "gridGap": ms, "textSizeAdjust": wms, "borderImage": w, "borderImageOutset": w, "borderImageRepeat": w, "borderImageSlice": w, "borderImageSource": w, "borderImageWidth": w }
};
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var MAP_EXISTS = typeof Map !== 'undefined';
var OrderedElements = function () {
/* ::
elements: {[string]: any};
keyOrder: string[];
*/
function OrderedElements() {
_classCallCheck(this, OrderedElements);
this.elements = {};
this.keyOrder = [];
}
_createClass(OrderedElements, [{
key: 'forEach',
value: function () {
function forEach(callback /* : (string, any) => void */) {
for (var i = 0; i < this.keyOrder.length; i++) {
// (value, key) to match Map's API
callback(this.elements[this.keyOrder[i]], this.keyOrder[i]);
}
}
return forEach;
}()
}, {
key: 'set',
value: function () {
function set(key /* : string */, value /* : any */, shouldReorder /* : ?boolean */) {
if (!this.elements.hasOwnProperty(key)) {
this.keyOrder.push(key);
} else if (shouldReorder) {
var index = this.keyOrder.indexOf(key);
this.keyOrder.splice(index, 1);
this.keyOrder.push(key);
}
if (value == null) {
this.elements[key] = value;
return;
}
if (MAP_EXISTS && value instanceof Map || value instanceof OrderedElements) {
// We have found a nested Map, so we need to recurse so that all
// of the nested objects and Maps are merged properly.
var nested = this.elements.hasOwnProperty(key) ? this.elements[key] : new OrderedElements();
value.forEach(function (value, key) {
nested.set(key, value, shouldReorder);
});
this.elements[key] = nested;
return;
}
if (!Array.isArray(value) && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object') {
// We have found a nested object, so we need to recurse so that all
// of the nested objects and Maps are merged properly.
var _nested = this.elements.hasOwnProperty(key) ? this.elements[key] : new OrderedElements();
var keys = Object.keys(value);
for (var i = 0; i < keys.length; i += 1) {
_nested.set(keys[i], value[keys[i]], shouldReorder);
}
this.elements[key] = _nested;
return;
}
this.elements[key] = value;
}
return set;
}()
}, {
key: 'get',
value: function () {
function get(key /* : string */) /* : any */{
return this.elements[key];
}
return get;
}()
}, {
key: 'has',
value: function () {
function has(key /* : string */) /* : boolean */{
return this.elements.hasOwnProperty(key);
}
return has;
}()
}, {
key: 'addStyleType',
value: function () {
function addStyleType(styleType /* : any */) /* : void */{
var _this = this;
if (MAP_EXISTS && styleType instanceof Map || styleType instanceof OrderedElements) {
styleType.forEach(function (value, key) {
_this.set(key, value, true);
});
} else {
var keys = Object.keys(styleType);
for (var i = 0; i < keys.length; i++) {
this.set(keys[i], styleType[keys[i]], true);
}
}
}
return addStyleType;
}()
}]);
return OrderedElements;
}();
/* ::
type ObjectMap = { [id:string]: any };
*/
var UPPERCASE_RE = /([A-Z])/g;
var UPPERCASE_RE_TO_KEBAB = function UPPERCASE_RE_TO_KEBAB(match /* : string */) {
return (/* : string */'-' + String(match.toLowerCase())
);
};
var kebabifyStyleName = function kebabifyStyleName(string /* : string */) /* : string */{
var result = string.replace(UPPERCASE_RE, UPPERCASE_RE_TO_KEBAB);
if (result[0] === 'm' && result[1] === 's' && result[2] === '-') {
return '-' + String(result);
}
return result;
};
/**
* CSS properties which accept numbers but are not in units of "px".
* Taken from React's CSSProperty.js
*/
var isUnitlessNumber = {
animationIterationCount: true,
borderImageOutset: true,
borderImageSlice: true,
borderImageWidth: true,
boxFlex: true,
boxFlexGroup: true,
boxOrdinalGroup: true,
columnCount: true,
flex: true,
flexGrow: true,
flexPositive: true,
flexShrink: true,
flexNegative: true,
flexOrder: true,
gridRow: true,
gridColumn: true,
fontWeight: true,
lineClamp: true,
lineHeight: true,
opacity: true,
order: true,
orphans: true,
tabSize: true,
widows: true,
zIndex: true,
zoom: true,
// SVG-related properties
fillOpacity: true,
floodOpacity: true,
stopOpacity: true,
strokeDasharray: true,
strokeDashoffset: true,
strokeMiterlimit: true,
strokeOpacity: true,
strokeWidth: true
};
/**
* Taken from React's CSSProperty.js
*
* @param {string} prefix vendor-specific prefix, eg: Webkit
* @param {string} key style name, eg: transitionDuration
* @return {string} style name prefixed with `prefix`, properly camelCased, eg:
* WebkitTransitionDuration
*/
function prefixKey(prefix, key) {
return prefix + key.charAt(0).toUpperCase() + key.substring(1);
}
/**
* Support style names that may come passed in prefixed by adding permutations
* of vendor prefixes.
* Taken from React's CSSProperty.js
*/
var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
// Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
// infinite loop, because it iterates over the newly added props too.
// Taken from React's CSSProperty.js
Object.keys(isUnitlessNumber).forEach(function (prop) {
prefixes.forEach(function (prefix) {
isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
});
});
var stringifyValue = function stringifyValue(key /* : string */
, prop /* : any */
) /* : string */{
if (typeof prop === "number") {
if (isUnitlessNumber[key]) {
return "" + prop;
} else {
return prop + "px";
}
} else {
return '' + prop;
}
};
var stringifyAndImportantifyValue = function stringifyAndImportantifyValue(key /* : string */
, prop /* : any */
) {
return (/* : string */importantify(stringifyValue(key, prop))
);
};
// Turn a string into a hash string of base-36 values (using letters and numbers)
// eslint-disable-next-line no-unused-vars
var hashString = function hashString(string /* : string */, key /* : ?string */) {
return (/* string */stringHash(string).toString(36)
);
};
// Hash a javascript object using JSON.stringify. This is very fast, about 3
// microseconds on my computer for a sample object:
// http://jsperf.com/test-hashfnv32a-hash/5
//
// Note that this uses JSON.stringify to stringify the objects so in order for
// this to produce consistent hashes browsers need to have a consistent
// ordering of objects. Ben Alpert says that Facebook depends on this, so we
// can probably depend on this too.
var hashObject = function hashObject(object /* : ObjectMap */) {
return (/* : string */hashString(JSON.stringify(object))
);
};
// Given a single style value string like the "b" from "a: b;", adds !important
// to generate "b !important".
var importantify = function importantify(string /* : string */) {
return (/* : string */
// Bracket string character access is very fast, and in the default case we
// normally don't expect there to be "!important" at the end of the string
// so we can use this simple check to take an optimized path. If there
// happens to be a "!" in this position, we follow up with a more thorough
// check.
string[string.length - 10] === '!' && string.slice(-11) === ' !important' ? string : String(string) + ' !important'
);
};
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
var prefixAll = createPrefixer(staticPrefixData);
/* ::
import type { SheetDefinition } from './index.js';
type StringHandlers = { [id:string]: Function };
type SelectorCallback = (selector: string) => string[];
export type SelectorHandler = (
selector: string,
baseSelector: string,
callback: SelectorCallback
) => string[] | string | null;
*/
/**
* `selectorHandlers` are functions which handle special selectors which act
* differently than normal style definitions. These functions look at the
* current selector and can generate CSS for the styles in their subtree by
* calling the callback with a new selector.
*
* For example, when generating styles with a base selector of '.foo' and the
* following styles object:
*
* {
* ':nth-child(2n)': {
* ':hover': {
* color: 'red'
* }
* }
* }
*
* when we reach the ':hover' style, we would call our selector handlers like
*
* handler(':hover', '.foo:nth-child(2n)', callback)
*
* Since our `pseudoSelectors` handles ':hover' styles, that handler would call
* the callback like
*
* callback('.foo:nth-child(2n):hover')
*
* to generate its subtree `{ color: 'red' }` styles with a
* '.foo:nth-child(2n):hover' selector. The callback would return an array of CSS
* rules like
*
* ['.foo:nth-child(2n):hover{color:red !important;}']
*
* and the handler would then return that resulting CSS.
*
* `defaultSelectorHandlers` is the list of default handlers used in a call to
* `generateCSS`.
*
* @name SelectorHandler
* @function
* @param {string} selector: The currently inspected selector. ':hover' in the
* example above.
* @param {string} baseSelector: The selector of the parent styles.
* '.foo:nth-child(2n)' in the example above.
* @param {function} generateSubtreeStyles: A function which can be called to
* generate CSS for the subtree of styles corresponding to the selector.
* Accepts a new baseSelector to use for generating those styles.
* @returns {string[] | string | null} The generated CSS for this selector, or
* null if we don't handle this selector.
*/
var defaultSelectorHandlers /* : SelectorHandler[] */ = [
// Handle pseudo-selectors, like :hover and :nth-child(3n)
function () {
function pseudoSelectors(selector, baseSelector, generateSubtreeStyles) {
if (selector[0] !== ":") {
return null;
}
return generateSubtreeStyles(baseSelector + selector);
}
return pseudoSelectors;
}(),
// Handle media queries (or font-faces)
function () {
function mediaQueries(selector, baseSelector, generateSubtreeStyles) {
if (selector[0] !== "@") {
return null;
}
// Generate the styles normally, and then wrap them in the media query.
var generated = generateSubtreeStyles(baseSelector);
return [String(selector) + '{' + String(generated.join('')) + '}'];
}
return mediaQueries;
}()];
/**
* Generate CSS for a selector and some styles.
*
* This function handles the media queries and pseudo selectors that can be used
* in aphrodite styles.
*
* @param {string} selector: A base CSS selector for the styles to be generated
* with.
* @param {Object} styleTypes: A list of properties of the return type of
* StyleSheet.create, e.g. [styles.red, styles.blue].
* @param {Array.<SelectorHandler>} selectorHandlers: A list of selector
* handlers to use for handling special selectors. See
* `defaultSelectorHandlers`.
* @param stringHandlers: See `generateCSSRuleset`
* @param useImportant: See `generateCSSRuleset`
*
* To actually generate the CSS special-construct-less styles are passed to
* `generateCSSRuleset`.
*
* For instance, a call to
*
* generateCSS(".foo", [{
* color: "red",
* "@media screen": {
* height: 20,
* ":hover": {
* backgroundColor: "black"
* }
* },
* ":active": {
* fontWeight: "bold"
* }
* }], defaultSelectorHandlers);
*
* with the default `selectorHandlers` will make 5 calls to
* `generateCSSRuleset`:
*
* generateCSSRuleset(".foo", { color: "red" }, ...)
* generateCSSRuleset(".foo:active", { fontWeight: "bold" }, ...)
* // These 2 will be wrapped in @media screen {}
* generateCSSRuleset(".foo", { height: 20 }, ...)
* generateCSSRuleset(".foo:hover", { backgroundColor: "black" }, ...)
*/
var generateCSS = function generateCSS(selector /* : string */
, styleTypes /* : SheetDefinition[] */
, selectorHandlers /* : SelectorHandler[] */
, stringHandlers /* : StringHandlers */
, useImportant /* : boolean */
) /* : string[] */{
var merged = new OrderedElements();
for (var i = 0; i < styleTypes.length; i++) {
merged.addStyleType(styleTypes[i]);
}
var plainDeclarations = new OrderedElements();
var generatedStyles = [];
// TODO(emily): benchmark this to see if a plain for loop would be faster.
merged.forEach(function (val, key) {
// For each key, see if one of the selector handlers will handle these
// styles.
var foundHandler = selectorHandlers.some(function (handler) {
var result = handler(key, selector, function (newSelector) {
return generateCSS(newSelector, [val], selectorHandlers, stringHandlers, useImportant);
});
if (result != null) {
// If the handler returned something, add it to the generated
// CSS and stop looking for another handler.
if (Array.isArray(result)) {
generatedStyles.push.apply(generatedStyles, _toConsumableArray(result));
} else {
// eslint-disable-next-line
console.warn('WARNING: Selector handlers should return an array of rules.' + 'Returning a string containing multiple rules is deprecated.', handler);
generatedStyles.push('@media all {' + String(result) + '}');
}
return true;
}
});
// If none of the handlers handled it, add it to the list of plain
// style declarations.
if (!foundHandler) {
plainDeclarations.set(key, val, true);
}
});
var generatedRuleset = generateCSSRuleset(selector, plainDeclarations, stringHandlers, useImportant, selectorHandlers);
if (generatedRuleset) {
generatedStyles.unshift(generatedRuleset);
}
return generatedStyles;
};
/**
* Helper method of generateCSSRuleset to facilitate custom handling of certain
* CSS properties. Used for e.g. font families.
*
* See generateCSSRuleset for usage and documentation of paramater types.
*/
var runStringHandlers = function runStringHandlers(declarations /* : OrderedElements */
, stringHandlers /* : StringHandlers */
, selectorHandlers /* : SelectorHandler[] */
) /* : void */{
if (!stringHandlers) {
return;
}
var stringHandlerKeys = Object.keys(stringHandlers);
for (var i = 0; i < stringHandlerKeys.length; i++) {
var key = stringHandlerKeys[i];
if (declarations.has(key)) {
// A declaration exists for this particular string handler, so we
// need to let the string handler interpret the declaration first
// before proceeding.
//
// TODO(emily): Pass in a callback which generates CSS, similar to
// how our selector handlers work, instead of passing in
// `selectorHandlers` and have them make calls to `generateCSS`
// themselves. Right now, this is impractical because our string
// handlers are very specialized and do complex things.
declarations.set(key, stringHandlers[key](declarations.get(key), selectorHandlers),
// Preserve order here, since we are really replacing an
// unprocessed style with a processed style, not overriding an
// earlier style
false);
}
}
};
var transformRule = function transformRule(key /* : string */
, value /* : string */
, transformValue /* : function */
) {
return (/* : string */String(kebabifyStyleName(key)) + ':' + String(transformValue(key, value)) + ';'
);
};
var arrayToObjectKeysReducer = function arrayToObjectKeysReducer(acc, val) {
acc[val] = true;
return acc;
};
/**
* Generate a CSS ruleset with the selector and containing the declarations.
*
* This function assumes that the given declarations don't contain any special
* children (such as media queries, pseudo-selectors, or descendant styles).
*
* Note that this method does not deal with nesting used for e.g.
* psuedo-selectors or media queries. That responsibility is left to the
* `generateCSS` function.
*
* @param {string} selector: the selector associated with the ruleset
* @param {Object} declarations: a map from camelCased CSS property name to CSS
* property value.
* @param {Object.<string, function>} stringHandlers: a map from camelCased CSS
* property name to a function which will map the given value to the value
* that is output.
* @param {bool} useImportant: A boolean saying whether to append "!important"
* to each of the CSS declarations.
* @returns {string} A string of raw CSS.
*
* Examples:
*
* generateCSSRuleset(".blah", { color: "red" })
* -> ".blah{color: red !important;}"
* generateCSSRuleset(".blah", { color: "red" }, {}, false)
* -> ".blah{color: red}"
* generateCSSRuleset(".blah", { color: "red" }, {color: c => c.toUpperCase})
* -> ".blah{color: RED}"
* generateCSSRuleset(".blah:hover", { color: "red" })
* -> ".blah:hover{color: red}"
*/
var generateCSSRuleset = function generateCSSRuleset(selector /* : string */
, declarations /* : OrderedElements */
, stringHandlers /* : StringHandlers */
, useImportant /* : boolean */
, selectorHandlers /* : SelectorHandler[] */
) /* : string */{
// Mutates declarations
runStringHandlers(declarations, stringHandlers, selectorHandlers);
var originalElements = Object.keys(declarations.elements).reduce(arrayToObjectKeysReducer, Object.create(null));
// NOTE(emily): This mutates handledDeclarations.elements.
var prefixedElements = prefixAll(declarations.elements);
var elementNames = Object.keys(prefixedElements);
if (elementNames.length !== declarations.keyOrder.length) {
// There are some prefixed values, so we need to figure out how to sort
// them.
//
// Loop through prefixedElements, looking for anything that is not in
// sortOrder, which means it was added by prefixAll. This means that we
// need to figure out where it should appear in the sortOrder.
for (var i = 0; i < elementNames.length; i++) {
if (!originalElements[elementNames[i]]) {
// This element is not in the sortOrder, which means it is a prefixed
// value that was added by prefixAll. Let's try to figure out where it
// goes.
var originalStyle = void 0;
if (elementNames[i][0] === 'W') {
// This is a Webkit-prefixed style, like "WebkitTransition". Let's
// find its original style's sort order.
originalStyle = elementNames[i][6].toLowerCase() + elementNames[i].slice(7);
} else if (elementNames[i][1] === 'o') {
// This is a Moz-prefixed style, like "MozTransition". We check
// the second character to avoid colliding with Ms-prefixed
// styles. Let's find its original style's sort order.
originalStyle = elementNames[i][3].toLowerCase() + elementNames[i].slice(4);
} else {
// if (elementNames[i][1] === 's') {
// This is a Ms-prefixed style, like "MsTransition".
originalStyle = elementNames[i][2].toLowerCase() + elementNames[i].slice(3);
}
if (originalStyle && originalElements[originalStyle]) {
var originalIndex = declarations.keyOrder.indexOf(originalStyle);
declarations.keyOrder.splice(originalIndex, 0, elementNames[i]);
} else {
// We don't know what the original style was, so sort it to
// top. This can happen for styles that are added that don't
// have the same base name as the original style.
declarations.keyOrder.unshift(elementNames[i]);
}
}
}
}
var transformValue = useImportant === false ? stringifyValue : stringifyAndImportantifyValue;
var rules = [];
for (var _i = 0; _i < declarations.keyOrder.length; _i++) {
var key = declarations.keyOrder[_i];
var value = prefixedElements[key];
if (Array.isArray(value)) {
// inline-style-prefixer returns an array when there should be
// multiple rules for the same key. Here we flatten to multiple
// pairs with the same key.
for (var j = 0; j < value.length; j++) {
rules.push(transformRule(key, value[j], transformValue));
}
} else {
rules.push(transformRule(key, value, transformValue));
}
}
if (rules.length) {
return String(selector) + '{' + String(rules.join("")) + '}';
} else {
return "";
}
};
var _typeof$1 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
function _toConsumableArray$1(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
/* ::
import type { SheetDefinition, SheetDefinitions } from './index.js';
import type { MaybeSheetDefinition } from './exports.js';
import type { SelectorHandler } from './generate.js';
*/
// The current <style> tag we are inserting into, or null if we haven't
// inserted anything yet. We could find this each time using
// `document.querySelector("style[data-aphrodite"])`, but holding onto it is
// faster.
var styleTag /* : ?HTMLStyleElement */ = null;
// Inject a set of rules into a <style> tag in the head of the document. This
// will automatically create a style tag and then continue to use it for
// multiple injections. It will also use a style tag with the `data-aphrodite`
// tag on it if that exists in the DOM. This could be used for e.g. reusing the
// same style tag that server-side rendering inserts.
var injectStyleTag = function injectStyleTag(cssRules /* : string[] */) {
if (styleTag == null) {
// Try to find a style tag with the `data-aphrodite` attribute first.
styleTag = document.querySelector("style[data-aphrodite]") /* : any */;
// If that doesn't work, generate a new style tag.
if (styleTag == null) {
// Taken from
// http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
var head = document.head || document.getElementsByTagName('head')[0];
styleTag = document.createElement('style');
styleTag.type = 'text/css';
styleTag.setAttribute("data-aphrodite", "");
head.appendChild(styleTag);
}
}
var sheet = styleTag.styleSheet || styleTag.sheet /* : any */;
if (sheet.insertRule) {
var numRules = sheet.cssRules.length;
cssRules.forEach(function (rule) {
try {
sheet.insertRule(rule, numRules);
numRules += 1;
} catch (e) {
// The selector for this rule wasn't compatible with the browser
}
});
} else {
styleTag.innerText = (styleTag.innerText || '') + cssRules.join('');
}
};
// Custom handlers for stringifying CSS values that have side effects
// (such as fontFamily, which can cause @font-face rules to be injected)
var stringHandlers = {
// With fontFamily we look for objects that are passed in and interpret
// them as @font-face rules that we need to inject. The value of fontFamily
// can either be a string (as normal), an object (a single font face), or
// an array of objects and strings.
fontFamily: function () {
function fontFamily(val) {
if (Array.isArray(val)) {
return val.map(fontFamily).join(",");
} else if ((typeof val === 'undefined' ? 'undefined' : _typeof$1(val)) === "object") {
injectStyleOnce(val.src, "@font-face", [val], false);
return '"' + String(val.fontFamily) + '"';
} else {
return val;
}
}
return fontFamily;
}(),
// With animationName we look for an object that contains keyframes and
// inject them as an `@keyframes` block, returning a uniquely generated
// name. The keyframes object should look like
// animationName: {
// from: {
// left: 0,
// top: 0,
// },
// '50%': {
// left: 15,
// top: 5,
// },
// to: {
// left: 20,
// top: 20,
// }
// }
// TODO(emily): `stringHandlers` doesn't let us rename the key, so I have
// to use `animationName` here. Improve that so we can call this
// `animation` instead of `animationName`.
animationName: function () {
function animationName(val, selectorHandlers) {
if (Array.isArray(val)) {
return val.map(function (v) {
return animationName(v, selectorHandlers);
}).join(",");
} else if ((typeof val === 'undefined' ? 'undefined' : _typeof$1(val)) === "object") {
// Generate a unique name based on the hash of the object. We can't
// just use the hash because the name can't start with a number.
// TODO(emily): this probably makes debugging hard, allow a custom
// name?
var name = 'keyframe_' + String(hashObject(val));
// Since keyframes need 3 layers of nesting, we use `generateCSS` to
// build the inner layers and wrap it in `@keyframes` ourselves.
var finalVal = '@keyframes ' + name + '{';
// TODO see if we can find a way where checking for OrderedElements
// here is not necessary. Alternatively, perhaps we should have a
// utility method that can iterate over either a plain object, an
// instance of OrderedElements, or a Map, and then use that here and
// elsewhere.
if (val instanceof OrderedElements) {
val.forEach(function (valVal, valKey) {
finalVal += generateCSS(valKey, [valVal], selectorHandlers, stringHandlers, false).join('');
});
} else {
Object.keys(val).forEach(function (key) {
finalVal += generateCSS(key, [val[key]], selectorHandlers, stringHandlers, false).join('');
});
}
finalVal += '}';
injectGeneratedCSSOnce(name, [finalVal]);
return name;
} else {
return val;
}
}
return animationName;
}()
};
// This is a map from Aphrodite's generated class names to `true` (acting as a
// set of class names)
var alreadyInjected = {};
// This is the buffer of styles which have not yet been flushed.
var injectionBuffer /* : string[] */ = [];
// A flag to tell if we are already buffering styles. This could happen either
// because we scheduled a flush call already, so newly added styles will
// already be flushed, or because we are statically buffering on the server.
var isBuffering = false;
var injectGeneratedCSSOnce = function injectGeneratedCSSOnce(key, generatedCSS) {
var _injectionBuffer;
if (alreadyInjected[key]) {
return;
}
if (!isBuffering) {
// We should never be automatically buffering on the server (or any
// place without a document), so guard against that.
if (typeof document === "undefined") {
throw new Error("Cannot automatically buffer without a document");
}
// If we're not already buffering, schedule a call to flush the
// current styles.
isBuffering = true;
asap(flushToStyleTag);
}
(_injectionBuffer = injectionBuffer).push.apply(_injectionBuffer, _toConsumableArray$1(generatedCSS));
alreadyInjected[key] = true;
};
var injectStyleOnce = function injectStyleOnce(key /* : string */
, selector /* : string */
, definitions /* : SheetDefinition[] */
, useImportant /* : boolean */
) {
var selectorHandlers /* : SelectorHandler[] */ = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
if (alreadyInjected[key]) {
return;
}
var generated = generateCSS(selector, definitions, selectorHandlers, stringHandlers, useImportant);
injectGeneratedCSSOnce(key, generated);
};
var reset = function reset() {
injectionBuffer = [];
alreadyInjected = {};
isBuffering = false;
styleTag = null;
};
var getBufferedStyles = function getBufferedStyles() {
return injectionBuffer;
};
var startBuffering = function startBuffering() {
if (isBuffering) {
throw new Error("Cannot buffer while already buffering");
}
isBuffering = true;
};
var flushToArray = function flushToArray() {
isBuffering = false;
var ret = injectionBuffer;
injectionBuffer = [];
return ret;
};
var flushToString = function flushToString() {
return flushToArray().join('');
};
var flushToStyleTag = function flushToStyleTag() {
var cssRules = flushToArray();
if (cssRules.length > 0) {
injectStyleTag(cssRules);
}
};
var getRenderedClassNames = function getRenderedClassNames() {
return Object.keys(alreadyInjected);
};
var addRenderedClassNames = function addRenderedClassNames(classNames /* : string[] */) {
classNames.forEach(function (className) {
alreadyInjected[className] = true;
});
};
var processStyleDefinitions = function processStyleDefinitions(styleDefinitions /* : any[] */
, classNameBits /* : string[] */
, definitionBits /* : Object[] */
, length /* : number */
) /* : number */{
for (var i = 0; i < styleDefinitions.length; i += 1) {
// Filter out falsy values from the input, to allow for
// `css(a, test && c)`
if (styleDefinitions[i]) {
if (Array.isArray(styleDefinitions[i])) {
// We've encountered an array, so let's recurse
length += processStyleDefinitions(styleDefinitions[i], classNameBits, definitionBits, length);
} else {
classNameBits.push(styleDefinitions[i]._name);
definitionBits.push(styleDefinitions[i]._definition);
length += styleDefinitions[i]._len;
}
}
}
return length;
};
/**
* Inject styles associated with the passed style definition objects, and return
* an associated CSS class name.
*
* @param {boolean} useImportant If true, will append !important to generated
* CSS output. e.g. {color: red} -> "color: red !important".
* @param {(Object|Object[])[]} styleDefinitions style definition objects, or
* arbitrarily nested arrays of them, as returned as properties of the
* return value of StyleSheet.create().
*/
var injectAndGetClassName = function injectAndGetClassName(useImportant /* : boolean */
, styleDefinitions /* : MaybeSheetDefinition[] */
, selectorHandlers /* : SelectorHandler[] */
) /* : string */{
var classNameBits = [];
var definitionBits = [];
// Mutates classNameBits and definitionBits and returns a length which we
// will append to the hash to decrease the chance of hash collisions.
var length = processStyleDefinitions(styleDefinitions, classNameBits, definitionBits, 0);
// Break if there aren't any valid styles.
if (classNameBits.length === 0) {
return "";
}
var className = void 0;
if (process.env.NODE_ENV === 'production') {
className = classNameBits.length === 1 ? '_' + String(classNameBits[0]) : '_' + String(hashString(classNameBits.join())) + String((length % 36).toString(36));
} else {
className = classNameBits.join("-o_O-");
}
injectStyleOnce(className, '.' + String(className), definitionBits, useImportant, selectorHandlers);
return className;
};
/* ::
import type { SelectorHandler } from './generate.js';
export type SheetDefinition = { [id:string]: any };
export type SheetDefinitions = SheetDefinition | SheetDefinition[];
type RenderFunction = () => string;
type Extension = {
selectorHandler: SelectorHandler
};
export type MaybeSheetDefinition = SheetDefinition | false | null | void
*/
var unminifiedHashFn = function unminifiedHashFn(str /* : string */, key /* : string */) {
return String(key) + '_' + String(hashString(str));
};
// StyleSheet.create is in a hot path so we want to keep as much logic out of it
// as possible. So, we figure out which hash function to use once, and only
// switch it out via minify() as necessary.
//
// This is in an exported function to make it easier to test.
var initialHashFn = function initialHashFn() {
return process.env.NODE_ENV === 'production' ? hashString : unminifiedHashFn;
};
var hashFn = initialHashFn();
var StyleSheet = {
create: function () {
function create(sheetDefinition /* : SheetDefinition */) /* : Object */{
var mappedSheetDefinition = {};
var keys = Object.keys(sheetDefinition);
for (var i = 0; i < keys.length; i += 1) {
var key = keys[i];
var val = sheetDefinition[key];
var stringVal = JSON.stringify(val);
mappedSheetDefinition[key] = {
_len: stringVal.length,
_name: hashFn(stringVal, key),
_definition: val
};
}
return mappedSheetDefinition;
}
return create;
}(),
rehydrate: function () {
function rehydrate() {
var renderedClassNames /* : string[] */ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
addRenderedClassNames(renderedClassNames);
}
return rehydrate;
}()
};
/**
* Utilities for using Aphrodite server-side.
*
* This can be minified out in client-only bundles by replacing `typeof window`
* with `"object"`, e.g. via Webpack's DefinePlugin:
*
* new webpack.DefinePlugin({
* "typeof window": JSON.stringify("object")
* })
*/
var StyleSheetServer = typeof window !== 'undefined' ? null : {
renderStatic: function () {
function renderStatic(renderFunc /* : RenderFunction */) {
reset();
startBuffering();
var html = renderFunc();
var cssContent = flushToString();
return {
html: html,
css: {
content: cssContent,
renderedClassNames: getRenderedClassNames()
}
};
}
return renderStatic;
}()
};
/**
* Utilities for using Aphrodite in tests.
*
* Not meant to be used in production.
*/
var StyleSheetTestUtils = process.env.NODE_ENV === 'production' ? null : {
/**
* Prevent styles from being injected into the DOM.
*
* This is useful in situations where you'd like to test rendering UI
* components which use Aphrodite without any of the side-effects of
* Aphrodite happening. Particularly useful for testing the output of
* components when you have no DOM, e.g. testing in Node without a fake DOM.
*
* Should be paired with a subsequent call to
* clearBufferAndResumeStyleInjection.
*/
suppressStyleInjection: function () {
function suppressStyleInjection() {
reset();
startBuffering();
}
return suppressStyleInjection;
}(),
/**
* Opposite method of preventStyleInject.
*/
clearBufferAndResumeStyleInjection: function () {
function clearBufferAndResumeStyleInjection() {
reset();
}
return clearBufferAndResumeStyleInjection;
}(),
/**
* Returns a string of buffered styles which have not been flushed
*
* @returns {string} Buffer of styles which have not yet been flushed.
*/
getBufferedStyles: function () {
function getBufferedStyles$$1() {
return getBufferedStyles();
}
return getBufferedStyles$$1;
}()
};
/**
* Generate the Aphrodite API exports, with given `selectorHandlers` and
* `useImportant` state.
*/
function makeExports(useImportant /* : boolean */
, selectorHandlers /* : SelectorHandler[] */
) {
return {
StyleSheet: Object.assign({}, StyleSheet, {
/**
* Returns a version of the exports of Aphrodite (i.e. an object
* with `css` and `StyleSheet` properties) which have some
* extensions included.
*
* @param {Array.<Object>} extensions: An array of extensions to
* add to this instance of Aphrodite. Each object should have a
* single property on it, defining which kind of extension to
* add.
* @param {SelectorHandler} [extensions[].selectorHandler]: A
* selector handler extension. See `defaultSelectorHandlers` in
* generate.js.
*
* @returns {Object} An object containing the exports of the new
* instance of Aphrodite.
*/
extend: function () {
function extend(extensions /* : Extension[] */) {
var extensionSelectorHandlers = extensions
// Pull out extensions with a selectorHandler property
.map(function (extension) {
return extension.selectorHandler;
})
// Remove nulls (i.e. extensions without a selectorHandler
// property).
.filter(function (handler) {
return handler;
});
return makeExports(useImportant, selectorHandlers.concat(extensionSelectorHandlers));
}
return extend;
}()
}),
StyleSheetServer: StyleSheetServer,
StyleSheetTestUtils: StyleSheetTestUtils,
minify: function () {
function minify(shouldMinify /* : boolean */) {
hashFn = shouldMinify ? hashString : unminifiedHashFn;
}
return minify;
}(),
css: function () {
function css() /* : MaybeSheetDefinition[] */{
for (var _len = arguments.length, styleDefinitions = Array(_len), _key = 0; _key < _len; _key++) {
styleDefinitions[_key] = arguments[_key];
}
return injectAndGetClassName(useImportant, styleDefinitions, selectorHandlers);
}
return css;
}()
};
}
var useImportant = false; // Don't add !important to style definitions
var Aphrodite = makeExports(useImportant, defaultSelectorHandlers);
var Aphrodite = __chunk_1.makeExports(useImportant);
var StyleSheet$1 = Aphrodite.StyleSheet,
StyleSheetServer$1 = Aphrodite.StyleSheetServer,
StyleSheetTestUtils$1 = Aphrodite.StyleSheetTestUtils,
var StyleSheet = Aphrodite.StyleSheet,
StyleSheetServer = Aphrodite.StyleSheetServer,
StyleSheetTestUtils = Aphrodite.StyleSheetTestUtils,
css = Aphrodite.css,
minify = Aphrodite.minify;
minify = Aphrodite.minify,
flushToStyleTag = Aphrodite.flushToStyleTag,
injectAndGetClassName = Aphrodite.injectAndGetClassName,
defaultSelectorHandlers = Aphrodite.defaultSelectorHandlers;
exports.StyleSheet = StyleSheet$1;
exports.StyleSheetServer = StyleSheetServer$1;
exports.StyleSheetTestUtils = StyleSheetTestUtils$1;
exports.StyleSheet = StyleSheet;
exports.StyleSheetServer = StyleSheetServer;
exports.StyleSheetTestUtils = StyleSheetTestUtils;
exports.css = css;

@@ -1176,0 +40,0 @@ exports.minify = minify;

2

package.json
{
"name": "aphrodite",
"version": "2.2.0",
"version": "2.2.1",
"description": "Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation",

@@ -5,0 +5,0 @@ "keywords": [

14

rollup.config.js

@@ -38,5 +38,5 @@ import babel from 'rollup-plugin-babel';

function standardBuilds(filename) {
function standardBuilds() {
return {
input: `src/${filename}.js`,
input: ['src/index.js', 'src/no-important.js'],
external: (id /*: string */) => {

@@ -51,4 +51,4 @@ if (externals.has(id)) {

output: [
{ file: `lib/${filename}.js`, format: 'cjs' },
{ file: `es/${filename}.js`, format: 'es' },
{ dir: 'lib', format: 'cjs' },
{ dir: 'es', format: 'es' },
],

@@ -60,3 +60,4 @@ plugins: [

commonjs(), // so rollup can convert node modules to ESM if needed
]
],
experimentalCodeSplitting: true,
};

@@ -69,4 +70,3 @@ }

distBuild({ filename: 'aphrodite.js', format: 'cjs', sourcemap: false, minify: false }),
standardBuilds('index'),
standardBuilds('no-important'),
standardBuilds(),
];

18

src/exports.js

@@ -5,6 +5,11 @@ /* @flow */

injectAndGetClassName,
reset, startBuffering, flushToString,
addRenderedClassNames, getRenderedClassNames,
reset,
startBuffering,
flushToString,
flushToStyleTag,
addRenderedClassNames,
getRenderedClassNames,
getBufferedStyles,
} from './inject';
import {defaultSelectorHandlers} from './generate';

@@ -136,3 +141,3 @@ /* ::

useImportant /* : boolean */,
selectorHandlers /* : SelectorHandler[] */
selectorHandlers /* : SelectorHandler[] */ = defaultSelectorHandlers,
) {

@@ -163,4 +168,3 @@ return {

.map(extension => extension.selectorHandler)
// Remove nulls (i.e. extensions without a selectorHandler
// property).
// Remove nulls (i.e. extensions without a selectorHandler property).
.filter(handler => handler);

@@ -186,3 +190,7 @@

},
flushToStyleTag,
injectAndGetClassName,
defaultSelectorHandlers,
};
}

10

src/index.js

@@ -1,11 +0,6 @@

import {defaultSelectorHandlers} from './generate';
import makeExports from './exports';
import {flushToStyleTag, injectAndGetClassName} from './inject';
const useImportant = true; // Add !important to all style definitions
const Aphrodite = makeExports(
useImportant,
defaultSelectorHandlers
);
const Aphrodite = makeExports(useImportant);

@@ -18,2 +13,5 @@ const {

minify,
flushToStyleTag,
injectAndGetClassName,
defaultSelectorHandlers,
} = Aphrodite;

@@ -20,0 +18,0 @@

12

src/no-important.js

@@ -5,12 +5,7 @@ /* @flow */

// appended to them.
import {defaultSelectorHandlers} from './generate';
import makeExports from './exports';
import {flushToStyleTag, injectAndGetClassName} from './inject';
const useImportant = false; // Don't add !important to style definitions
const Aphrodite = makeExports(
useImportant,
defaultSelectorHandlers
);
const Aphrodite = makeExports(useImportant);

@@ -22,3 +17,6 @@ const {

css,
minify
minify,
flushToStyleTag,
injectAndGetClassName,
defaultSelectorHandlers,
} = Aphrodite;

@@ -25,0 +23,0 @@ 

.nyc_output/44365.json
.eslintcache

Sorry, the diff of this file is not supported yet

dist/aphrodite.js

Sorry, the diff of this file is too big to display

dist/aphrodite.umd.js

Sorry, the diff of this file is too big to display

dist/aphrodite.umd.js.map

Sorry, the diff of this file is not supported yet

dist/aphrodite.umd.min.js.map

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