Socket
Socket
Sign inDemoInstall

aphrodite

Package Overview
Dependencies
Maintainers
3
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 1.1.0 to 1.2.0

.flowconfig
.nyc_output/8444.json
lib/ordered-elements.js
lib/staticPrefixData.js
src/ordered-elements.js
tests/ordered-elements_test.js
tools/generate_prefixer_data.js

2

dist/aphrodite.umd.min.js

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

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.aphrodite=t():e.aphrodite=t()}(this,function(){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){e.exports=r(10)},function(e,t){"use strict";function r(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=function(e,t){var n=arguments.length<=2||void 0===arguments[2]?function(e,t){return e+t}:arguments[2];return r({},e,["-webkit-","-moz-",""].map(function(e){return n(e,t)}))},e.exports=t["default"]},function(e,t){"use strict";function r(e,t){return e+t.charAt(0).toUpperCase()+t.substring(1)}function n(e){for(var t=e.length,r=t,n=0,o=void 0;t>=4;)o=255&e.charCodeAt(n)|(255&e.charCodeAt(++n))<<8|(255&e.charCodeAt(++n))<<16|(255&e.charCodeAt(++n))<<24,o=1540483477*(65535&o)+((1540483477*(o>>>16)&65535)<<16),o^=o>>>24,o=1540483477*(65535&o)+((1540483477*(o>>>16)&65535)<<16),r=1540483477*(65535&r)+((1540483477*(r>>>16)&65535)<<16)^o,t-=4,++n;switch(t){case 3:r^=(255&e.charCodeAt(n+2))<<16;case 2:r^=(255&e.charCodeAt(n+1))<<8;case 1:r^=255&e.charCodeAt(n),r=1540483477*(65535&r)+((1540483477*(r>>>16)&65535)<<16)}return r^=r>>>13,r=1540483477*(65535&r)+((1540483477*(r>>>16)&65535)<<16),r^=r>>>15,(r>>>0).toString(36)}Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){var r=[],n=!0,o=!1,i=void 0;try{for(var a,u=e[Symbol.iterator]();!(n=(a=u.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(l){o=!0,i=l}finally{try{!n&&u["return"]&&u["return"]()}finally{if(o)throw i}}return r}return function(t,r){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},a=function(e){return Object.keys(e).map(function(t){return[t,e[t]]})};t.objectToPairs=a;var u=function(e){var t={};return e.forEach(function(e){var r=o(e,2),n=r[0],i=r[1];t[n]=i}),t},l=function(e,t){return u(a(e).map(t))};t.mapObj=l;var f=function(e){return e.reduce(function(e,t){return e.concat(t)},[])};t.flatten=f;var c=function S(e){return e.reduce(function(e,t){return e.concat(Array.isArray(t)?S(t):t)},[])};t.flattenDeep=c;var s=/([A-Z])/g,d=/^ms-/,p=function(e){return e.replace(s,"-$1").toLowerCase()},m=function(e){return p(e).replace(d,"-ms-")};t.kebabifyStyleName=m;var y=function k(e,t){if("object"!=typeof e)return t;var r=i({},e);return Object.keys(t).forEach(function(n){r.hasOwnProperty(n)?r[n]=k(e[n],t[n]):r[n]=t[n]}),r};t.recursiveMerge=y;var h={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},v=["Webkit","ms","Moz","O"];Object.keys(h).forEach(function(e){v.forEach(function(t){h[r(t,e)]=h[e]})});var b=function(e,t){return"number"==typeof t?h[e]?""+t:t+"px":t};t.stringifyValue=b;var g=function(e){return n(JSON.stringify(e))};t.hashObject=g;var x=/^([^:]+:.*?)( !important)?;$/,O=function(e){return e.replace(x,function(e,t){return t+" !important;"})};t.importantify=O},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=function(e){return Array.isArray(e)&&(e=e.join(",")),null!==e.match(/-webkit-|-moz-|-ms-/)},e.exports=t["default"]},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){var r=[],n=!0,o=!1,i=void 0;try{for(var a,u=e[Symbol.iterator]();!(n=(a=u.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(l){o=!0,i=l}finally{try{!n&&u["return"]&&u["return"]()}finally{if(o)throw i}}return r}return function(t,r){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),i=r(22),a=n(i),u=r(2),l=[function(e,t,r){return":"!==e[0]?null:r(t+e)},function(e,t,r){if("@"!==e[0])return null;var n=r(t);return e+"{"+n+"}"}];t.defaultSelectorHandlers=l;var f=function d(e,t){var r=arguments.length<=2||void 0===arguments[2]?[]:arguments[2],n=arguments.length<=3||void 0===arguments[3]?{}:arguments[3],o=arguments.length<=4||void 0===arguments[4]?!0:arguments[4],i=t.reduce(u.recursiveMerge),a={},l="";return Object.keys(i).forEach(function(t){var u=r.some(function(a){var u=a(t,e,function(e){return d(e,[i[t]],r,n,o)});return null!=u?(l+=u,!0):void 0});u||(a[t]=i[t])}),s(e,a,n,o,r)+l};t.generateCSS=f;var c=function(e,t,r){var n={};return Object.keys(e).forEach(function(o){t&&t.hasOwnProperty(o)?n[o]=t[o](e[o],r):n[o]=e[o]}),n},s=function(e,t,r,n,i){var l=c(t,r,i),f=(0,a["default"])(l),s=(0,u.flatten)((0,u.objectToPairs)(f).map(function(e){var t=o(e,2),r=t[0],n=t[1];if(Array.isArray(n)){var i=function(){var e=[],t=[];return n.forEach(function(r){0===r.indexOf("-")?e.push(r):t.push(r)}),e.sort(),t.sort(),{v:e.concat(t).map(function(e){return[r,e]})}}();if("object"==typeof i)return i.v}return[[r,n]]})),d=s.map(function(e){var t=o(e,2),r=t[0],i=t[1],a=(0,u.stringifyValue)(r,i),l=(0,u.kebabifyStyleName)(r)+":"+a+";";return n===!1?l:(0,u.importantify)(l)}).join("");return d?e+"{"+d+"}":""};t.generateCSSRuleset=s},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t["default"]={Webkit:{transform:!0,transformOrigin:!0,transformOriginX:!0,transformOriginY:!0,backfaceVisibility:!0,perspective:!0,perspectiveOrigin:!0,transformStyle:!0,transformOriginZ:!0,animation:!0,animationDelay:!0,animationDirection:!0,animationFillMode:!0,animationDuration:!0,animationIterationCount:!0,animationName:!0,animationPlayState:!0,animationTimingFunction:!0,appearance:!0,userSelect:!0,fontKerning:!0,textEmphasisPosition:!0,textEmphasis:!0,textEmphasisStyle:!0,textEmphasisColor:!0,boxDecorationBreak:!0,clipPath:!0,maskImage:!0,maskMode:!0,maskRepeat:!0,maskPosition:!0,maskClip:!0,maskOrigin:!0,maskSize:!0,maskComposite:!0,mask:!0,maskBorderSource:!0,maskBorderMode:!0,maskBorderSlice:!0,maskBorderWidth:!0,maskBorderOutset:!0,maskBorderRepeat:!0,maskBorder:!0,maskType:!0,textDecorationStyle:!0,textDecorationSkip:!0,textDecorationLine:!0,textDecorationColor:!0,filter:!0,fontFeatureSettings:!0,breakAfter:!0,breakBefore:!0,breakInside:!0,columnCount:!0,columnFill:!0,columnGap:!0,columnRule:!0,columnRuleColor:!0,columnRuleStyle:!0,columnRuleWidth:!0,columns:!0,columnSpan:!0,columnWidth:!0,flex:!0,flexBasis:!0,flexDirection:!0,flexGrow:!0,flexFlow:!0,flexShrink:!0,flexWrap:!0,alignContent:!0,alignItems:!0,alignSelf:!0,justifyContent:!0,order:!0,transition:!0,transitionDelay:!0,transitionDuration:!0,transitionProperty:!0,transitionTimingFunction:!0,backdropFilter:!0,scrollSnapType:!0,scrollSnapPointsX:!0,scrollSnapPointsY:!0,scrollSnapDestination:!0,scrollSnapCoordinate:!0,shapeImageThreshold:!0,shapeImageMargin:!0,shapeImageOutside:!0,hyphens:!0,flowInto:!0,flowFrom:!0,regionFragment:!0,textSizeAdjust:!0,borderImage:!0,borderImageOutset:!0,borderImageRepeat:!0,borderImageSlice:!0,borderImageSource:!0,borderImageWidth:!0,tabSize:!0,objectFit:!0,objectPosition:!0},Moz:{appearance:!0,userSelect:!0,boxSizing:!0,textAlignLast:!0,textDecorationStyle:!0,textDecorationSkip:!0,textDecorationLine:!0,textDecorationColor:!0,tabSize:!0,hyphens:!0,fontFeatureSettings:!0,breakAfter:!0,breakBefore:!0,breakInside:!0,columnCount:!0,columnFill:!0,columnGap:!0,columnRule:!0,columnRuleColor:!0,columnRuleStyle:!0,columnRuleWidth:!0,columns:!0,columnSpan:!0,columnWidth:!0},ms:{flex:!0,flexBasis:!1,flexDirection:!0,flexGrow:!1,flexFlow:!0,flexShrink:!1,flexWrap:!0,alignContent:!1,alignItems:!1,alignSelf:!1,justifyContent:!1,order:!1,transform:!0,transformOrigin:!0,transformOriginX:!0,transformOriginY:!0,userSelect:!0,wrapFlow:!0,wrapThrough:!0,wrapMargin:!0,scrollSnapType:!0,scrollSnapPointsX:!0,scrollSnapPointsY:!0,scrollSnapDestination:!0,scrollSnapCoordinate:!0,touchAction:!0,hyphens:!0,flowInto:!0,flowFrom:!0,breakBefore:!0,breakAfter:!0,breakInside:!0,regionFragment:!0,gridTemplateColumns:!0,gridTemplateRows:!0,gridTemplateAreas:!0,gridTemplate:!0,gridAutoColumns:!0,gridAutoRows:!0,gridAutoFlow:!0,grid:!0,gridRowStart:!0,gridColumnStart:!0,gridRowEnd:!0,gridRow:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnGap:!0,gridRowGap:!0,gridArea:!0,gridGap:!0,textSizeAdjust:!0}},e.exports=t["default"]},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=function(e){return e.charAt(0).toUpperCase()+e.slice(1)},e.exports=t["default"]},function(e,t,r){"use strict";function n(){if(l.length)throw l.shift()}function o(e){var t;t=u.length?u.pop():new i,t.task=e,a(t)}function i(){this.task=null}var a=r(8),u=[],l=[],f=a.makeRequestCallFromTimer(n);e.exports=o,i.prototype.call=function(){try{this.task.call()}catch(e){o.onerror?o.onerror(e):(l.push(e),f())}finally{this.task=null,u[u.length]=this}}},function(e,t){(function(t){"use strict";function r(e){u.length||(a(),l=!0),u[u.length]=e}function n(){for(;f<u.length;){var e=f;if(f+=1,u[e].call(),f>c){for(var t=0,r=u.length-f;r>t;t++)u[t]=u[t+f];u.length-=f,f=0}}u.length=0,f=0,l=!1}function o(e){var t=1,r=new s(e),n=document.createTextNode("");return r.observe(n,{characterData:!0}),function(){t=-t,n.data=t}}function i(e){return function(){function t(){clearTimeout(r),clearInterval(n),e()}var r=setTimeout(t,0),n=setInterval(t,50)}}e.exports=r;var a,u=[],l=!1,f=0,c=1024,s=t.MutationObserver||t.WebKitMutationObserver;a="function"==typeof s?o(n):i(n),r.requestFlush=a,r.makeRequestCallFromTimer=i}).call(t,function(){return this}())},function(e,t,r){"use strict";var n=function(){function e(e,t){var r=[],n=!0,o=!1,i=void 0;try{for(var a,u=e[Symbol.iterator]();!(n=(a=u.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(l){o=!0,i=l}finally{try{!n&&u["return"]&&u["return"]()}finally{if(o)throw i}}return r}return function(t,r){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},i=r(2),a=r(11),u={create:function(e){return(0,i.mapObj)(e,function(e){var t=n(e,2),r=t[0],o=t[1];return[r,{_name:r+"_"+(0,i.hashObject)(o),_definition:o}]})},rehydrate:function(){var e=arguments.length<=0||void 0===arguments[0]?[]:arguments[0];(0,a.addRenderedClassNames)(e)}},l={renderStatic:function(e){(0,a.reset)(),(0,a.startBuffering)();var t=e(),r=(0,a.flushToString)();return{html:t,css:{content:r,renderedClassNames:(0,a.getRenderedClassNames)()}}}},f={suppressStyleInjection:function(){(0,a.reset)(),(0,a.startBuffering)()},clearBufferAndResumeStyleInjection:function(){(0,a.reset)()}},c=function s(e,t){return{StyleSheet:o({},u,{extend:function(r){var n=r.map(function(e){return e.selectorHandler}).filter(function(e){return e});return s(e,t.concat(n))}}),StyleSheetServer:l,StyleSheetTestUtils:f,css:function(){for(var r=arguments.length,n=Array(r),o=0;r>o;o++)n[o]=arguments[o];return(0,a.injectAndGetClassName)(e,n,t)}}};e.exports=c},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=r(4),i=r(9),a=n(i),u=!0;t["default"]=(0,a["default"])(u,o.defaultSelectorHandlers),e.exports=t["default"]},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=r(7),i=n(o),a=r(4),u=r(2),l=null,f=function(e){if(null==l&&(l=document.querySelector("style[data-aphrodite]"),null==l)){var t=document.head||document.getElementsByTagName("head")[0];l=document.createElement("style"),l.type="text/css",l.setAttribute("data-aphrodite",""),t.appendChild(l)}l.styleSheet?l.styleSheet.cssText+=e:l.appendChild(document.createTextNode(e))},c={fontFamily:function k(e){return Array.isArray(e)?e.map(k).join(","):"object"==typeof e?(y(e.src,"@font-face",[e],!1),'"'+e.fontFamily+'"'):e},animationName:function j(e,t){if(Array.isArray(e))return e.map(function(e){return j(e,t)}).join(",");if("object"==typeof e){var r="keyframe_"+(0,u.hashObject)(e),n="@keyframes "+r+"{";return Object.keys(e).forEach(function(r){n+=(0,a.generateCSS)(r,[e[r]],t,c,!1)}),n+="}",m(r,n),r}return e}},s={},d="",p=!1,m=function(e,t){if(!s[e]){if(!p){if("undefined"==typeof document)throw new Error("Cannot automatically buffer without a document");p=!0,(0,i["default"])(g)}d+=t,s[e]=!0}},y=function(e,t,r,n,o){if(!s[e]){var i=(0,a.generateCSS)(t,r,o,c,n);m(e,i)}};t.injectStyleOnce=y;var h=function(){d="",s={},p=!1,l=null};t.reset=h;var v=function(){if(p)throw new Error("Cannot buffer while already buffering");p=!0};t.startBuffering=v;var b=function(){p=!1;var e=d;return d="",e};t.flushToString=b;var g=function(){var e=b();e.length>0&&f(e)};t.flushToStyleTag=g;var x=function(){return Object.keys(s)};t.getRenderedClassNames=x;var O=function(e){e.forEach(function(e){s[e]=!0})};t.addRenderedClassNames=O;var S=function(e,t,r){t=(0,u.flattenDeep)(t);var n=t.filter(function(e){return e});if(0===n.length)return"";var o=n.map(function(e){return e._name}).join("-o_O-");return y(o,"."+o,n.map(function(e){return e._definition}),e,r),o};t.injectAndGetClassName=S},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){return"string"==typeof t&&!(0,l["default"])(t)&&t.indexOf("calc(")>-1?(0,a["default"])(e,t,function(e,t){return t.replace(/calc\(/g,e+"calc(")}):void 0}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o;var i=r(1),a=n(i),u=r(3),l=n(u);e.exports=t["default"]},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){return"cursor"===e&&u[t]?(0,a["default"])(e,t):void 0}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o;var i=r(1),a=n(i),u={"zoom-in":!0,"zoom-out":!0,grab:!0,grabbing:!0};e.exports=t["default"]},function(e,t){"use strict";function r(e,t){return"display"===e&&n[t]?{display:["-webkit-box","-moz-box","-ms-"+t+"box","-webkit-"+t,t]}:void 0}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=r;var n={flex:!0,"inline-flex":!0};e.exports=t["default"]},function(e,t){"use strict";function r(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function n(e,t){return i[e]?r({},i[e],o[t]||t):void 0}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n;var o={"space-around":"distribute","space-between":"justify","flex-start":"start","flex-end":"end"},i={alignContent:"msFlexLinePack",alignSelf:"msFlexItemAlign",alignItems:"msFlexAlign",justifyContent:"msFlexPack",order:"msFlexOrder",flexGrow:"msFlexPositive",flexShrink:"msFlexNegative",flexBasis:"msPreferredSize"};e.exports=t["default"]},function(e,t){"use strict";function r(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function n(e,t){return"flexDirection"===e?{WebkitBoxOrient:t.indexOf("column")>-1?"vertical":"horizontal",WebkitBoxDirection:t.indexOf("reverse")>-1?"reverse":"normal"}:i[e]?r({},i[e],o[t]||t):void 0}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n;var o={"space-around":"justify","space-between":"justify","flex-start":"start","flex-end":"end","wrap-reverse":"multiple",wrap:"multiple"},i={alignItems:"WebkitBoxAlign",justifyContent:"WebkitBoxPack",flexWrap:"WebkitBoxLines"};e.exports=t["default"]},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){return"string"!=typeof t||(0,l["default"])(t)||null===t.match(f)?void 0:(0,a["default"])(e,t)}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o;var i=r(1),a=n(i),u=r(3),l=n(u),f=/linear-gradient|radial-gradient|repeating-linear-gradient|repeating-radial-gradient/;e.exports=t["default"]},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){return u[e]&&l[t]?(0,a["default"])(e,t):void 0}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o;var i=r(1),a=n(i),u={maxHeight:!0,maxWidth:!0,width:!0,height:!0,columnWidth:!0,minWidth:!0,minHeight:!0},l={"min-content":!0,"max-content":!0,"fill-available":!0,"fit-content":!0,"contain-floats":!0};e.exports=t["default"]},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){if("string"==typeof t&&y[e]){var r,n=a(t),i=n.split(/,(?![^()]*(?:\([^()]*\))?\))/g).filter(function(e){return null===e.match(/-moz-|-ms-/)}).join(",");return e.indexOf("Webkit")>-1?o({},e,i):(r={},o(r,"Webkit"+(0,c["default"])(e),i),o(r,e,n),r)}}function a(e){if((0,d["default"])(e))return e;var t=e.split(/,(?![^()]*(?:\([^()]*\))?\))/g);return t.forEach(function(e,r){t[r]=Object.keys(m["default"]).reduce(function(t,r){var n="-"+r.toLowerCase()+"-";return Object.keys(m["default"][r]).forEach(function(r){var o=(0,l["default"])(r);e.indexOf(o)>-1&&"order"!==o&&(t=e.replace(o,n+o)+","+t)}),t},e)}),t.join(",")}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=i;var u=r(21),l=n(u),f=r(6),c=n(f),s=r(3),d=n(s),p=r(5),m=n(p),y={transition:!0,transitionProperty:!0,WebkitTransition:!0,WebkitTransitionProperty:!0};e.exports=t["default"]},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e){return Object.keys(e).forEach(function(t){var r=e[t];r instanceof Object&&!Array.isArray(r)?e[t]=o(r):Object.keys(u["default"]).forEach(function(n){var o=u["default"][n];o[t]&&(e[n+(0,f["default"])(t)]=r)})}),Object.keys(e).forEach(function(t){[].concat(e[t]).forEach(function(r,n){_.forEach(function(n){return i(e,n(t,r))})})}),e}function i(e){var t=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];Object.keys(t).forEach(function(r){var n=e[r];Array.isArray(n)?[].concat(t[r]).forEach(function(t){var o=n.indexOf(t);o>-1&&e[r].splice(o,1),e[r].push(t)}):e[r]=t[r]})}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o;var a=r(5),u=n(a),l=r(6),f=n(l),c=r(12),s=n(c),d=r(13),p=n(d),m=r(14),y=n(m),h=r(18),v=n(h),b=r(17),g=n(b),x=r(19),O=n(x),S=r(15),k=n(S),j=r(16),w=n(j),_=[s["default"],p["default"],v["default"],g["default"],O["default"],k["default"],w["default"],y["default"]];e.exports=t["default"]},function(e,t){"use strict";function r(e){return e.replace(n,"-$&").toLowerCase().replace(o,"-ms-")}var n=/[A-Z]/g,o=/^ms-/;e.exports=r},function(e,t,r){e.exports=r(20)}])});
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.aphrodite=t():e.aphrodite=t()}(this,function(){return function(e){function t(n){if(r[n])return r[n].exports;var i=r[n]={exports:{},id:n,loaded:!1};return e[n].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){e.exports=r(10)},function(e,t){"use strict";function r(e){return"string"==typeof e&&n.test(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r;var n=/-webkit-|-moz-|-ms-/;e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e,t){return e+t.charAt(0).toUpperCase()+t.substring(1)}Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){var r=[],n=!0,i=!1,o=void 0;try{for(var a,u=e[Symbol.iterator]();!(n=(a=u.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(e){i=!0,o=e}finally{try{!n&&u.return&&u.return()}finally{if(i)throw o}}return r}return function(t,r){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),a=r(31),u=n(a),s=r(4),f=n(s),l=function(e){return Object.keys(e).map(function(t){return[t,e[t]]})};t.objectToPairs=l;var c=function(e,t){for(var r=Object.keys(e),n={},i=0;i<r.length;i+=1){var a=t([r[i],e[r[i]]]),u=o(a,2),s=u[0],f=u[1];n[s]=f}return n};t.mapObj=c;var d=function(e){return e.reduce(function(e,t){return e.concat(t)},[])};t.flatten=d;var m=function e(t){return t.reduce(function(t,r){return t.concat(Array.isArray(r)?e(r):r)},[])};t.flattenDeep=m;var p=/([A-Z])/g,b=function(e){return"-"+e.toLowerCase()},y=function(e){var t=e.replace(p,b);return"m"===t[0]&&"s"===t[1]&&"-"===t[2]?"-"+t:t};t.kebabifyStyleName=y;var k=function(e){return"object"==typeof e&&!Array.isArray(e)&&null!==e},h=function e(t,r){if(!k(t)||!k(r))return k(r)?f.default.from(r):r;var n=f.default.from(t),i=f.default.from(r);return i.forEach(function(t,r){n.has(t)?n.set(t,e(n.get(t),r)):n.set(t,r)}),n};t.recursiveMerge=h;var v={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},g=["Webkit","ms","Moz","O"];Object.keys(v).forEach(function(e){g.forEach(function(t){v[i(t,e)]=v[e]})});var W=function(e,t){return"number"==typeof t?v[e]?""+t:t+"px":""+t};t.stringifyValue=W;var x=function(e){return(0,u.default)(JSON.stringify(e)).toString(36)};t.hashObject=x;var O=function(e){return"!"===e[e.length-10]&&" !important"===e.slice(-11)?e:e+" !important"};t.importantify=O},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){var r=[],n=!0,i=!1,o=void 0;try{for(var a,u=e[Symbol.iterator]();!(n=(a=u.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(e){i=!0,o=e}finally{try{!n&&u.return&&u.return()}finally{if(i)throw o}}return r}return function(t,r){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},a=r(14),u=n(a),s=r(6),f=n(s),l=r(4),c=n(l),d=r(2),m=(0,u.default)(f.default),p=[function(e,t,r){return":"!==e[0]?null:r(t+e)},function(e,t,r){if("@"!==e[0])return null;var n=r(t);return e+"{"+n+"}"}];t.defaultSelectorHandlers=p;var b=function e(t,r,n,i,o){var a=r.reduce(d.recursiveMerge,new c.default),u=new c.default,s="";return a.forEach(function(r,a){var f=n.some(function(u){var f=u(r,t,function(t){return e(t,[a],n,i,o)});if(null!=f)return s+=f,!0});f||u.set(r,a)}),k(t,u,i,o,n)+s};t.generateCSS=b;var y=function(e,t,r){var n=!!t;return e.map(function(e,i){return n&&t.hasOwnProperty(e)?t[e](i,r):i})},k=function(e,t,r,n,a){function u(e){var t=i(e,2),r=t[0],n=t[1];return p.hasOwnProperty(r)?f.hasOwnProperty(r)&&f[r]!==n?p[r]-.25:p[r]:-1}for(var s=y(t,r,a),f=o({},s.elements),l=m(s.elements),c=(0,d.flatten)((0,d.objectToPairs)(l).map(function(e){var t=i(e,2),r=t[0],n=t[1];return Array.isArray(n)?n.map(function(e){return[r,e]}):[[r,n]]})),p={},b=0;b<s.keyOrder.length;b++){var k=s.keyOrder[b];p[k]=b;for(var h=""+k[0].toUpperCase()+k.slice(1),v=["Webkit"+h,"Moz"+h,"ms"+h],g=0;g<v.length;++g)f.hasOwnProperty(v[g])||(p[v[g]]=b-.5,f[v[g]]=f[k])}c.sort(function(e,t){return u(e)-u(t)});var W=n===!1?d.stringifyValue:function(e,t){return(0,d.importantify)((0,d.stringifyValue)(e,t))},x=c.map(function(e){var t=i(e,2),r=t[0],n=t[1];return(0,d.kebabifyStyleName)(r)+":"+W(r,n)+";"}).join("");return x?e+"{"+x+"}":""};t.generateCSSRuleset=k},function(e,t){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},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}}(),o=function(){function e(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],n=arguments.length<=1||void 0===arguments[1]?[]:arguments[1];r(this,e),this.elements=t,this.keyOrder=n}return i(e,[{key:"forEach",value:function(e){for(var t=0;t<this.keyOrder.length;t++)e(this.keyOrder[t],this.elements[this.keyOrder[t]])}},{key:"map",value:function(t){for(var r=new e,n=0;n<this.keyOrder.length;n++)r.set(this.keyOrder[n],t(this.keyOrder[n],this.elements[this.keyOrder[n]]));return r}},{key:"set",value:function(e,t){this.elements.hasOwnProperty(e)||this.keyOrder.push(e),this.elements[e]=t}},{key:"get",value:function(e){return this.elements[e]}},{key:"has",value:function(e){return this.elements.hasOwnProperty(e)}}]),e}();t.default=o,o.fromObject=function(e){return new o(e,Object.keys(e))},o.fromMap=function(e){var t=new o;return e.forEach(function(e,r){t.set(r,e)}),t},o.from=function(e){return e instanceof o?new o(n({},e.elements),e.keyOrder.slice()):"undefined"!=typeof Map&&e instanceof Map?o.fromMap(e):o.fromObject(e)},e.exports=t.default},function(e,t){"use strict";function r(e){return e.charAt(0).toUpperCase()+e.slice(1)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r,e.exports=t.default},function(e,t,r){var n=r(15),i=r(16),o=r(17),a=r(18),u=r(19),s=r(20),f=r(21),l=r(22),c=r(23),d=r(24),m=r(25),p=r(26);e.exports={plugins:[n,i,o,a,u,s,f,l,c,d,m,p],prefixMap:{transform:["Webkit","ms"],transformOrigin:["Webkit","ms"],transformOriginX:["Webkit","ms"],transformOriginY:["Webkit","ms"],backfaceVisibility:["Webkit"],perspective:["Webkit"],perspectiveOrigin:["Webkit"],transformStyle:["Webkit"],transformOriginZ:["Webkit"],animation:["Webkit"],animationDelay:["Webkit"],animationDirection:["Webkit"],animationFillMode:["Webkit"],animationDuration:["Webkit"],animationIterationCount:["Webkit"],animationName:["Webkit"],animationPlayState:["Webkit"],animationTimingFunction:["Webkit"],appearance:["Webkit","Moz"],userSelect:["Webkit","Moz","ms"],fontKerning:["Webkit"],textEmphasisPosition:["Webkit"],textEmphasis:["Webkit"],textEmphasisStyle:["Webkit"],textEmphasisColor:["Webkit"],boxDecorationBreak:["Webkit"],clipPath:["Webkit"],maskImage:["Webkit"],maskMode:["Webkit"],maskRepeat:["Webkit"],maskPosition:["Webkit"],maskClip:["Webkit"],maskOrigin:["Webkit"],maskSize:["Webkit"],maskComposite:["Webkit"],mask:["Webkit"],maskBorderSource:["Webkit"],maskBorderMode:["Webkit"],maskBorderSlice:["Webkit"],maskBorderWidth:["Webkit"],maskBorderOutset:["Webkit"],maskBorderRepeat:["Webkit"],maskBorder:["Webkit"],maskType:["Webkit"],textDecorationStyle:["Webkit","Moz"],textDecorationSkip:["Webkit","Moz"],textDecorationLine:["Webkit","Moz"],textDecorationColor:["Webkit","Moz"],filter:["Webkit"],fontFeatureSettings:["Webkit","Moz"],breakAfter:["Webkit","Moz","ms"],breakBefore:["Webkit","Moz","ms"],breakInside:["Webkit","Moz","ms"],columnCount:["Webkit","Moz"],columnFill:["Webkit","Moz"],columnGap:["Webkit","Moz"],columnRule:["Webkit","Moz"],columnRuleColor:["Webkit","Moz"],columnRuleStyle:["Webkit","Moz"],columnRuleWidth:["Webkit","Moz"],columns:["Webkit","Moz"],columnSpan:["Webkit","Moz"],columnWidth:["Webkit","Moz"],flex:["Webkit","ms"],flexBasis:["Webkit"],flexDirection:["Webkit","ms"],flexGrow:["Webkit"],flexFlow:["Webkit","ms"],flexShrink:["Webkit"],flexWrap:["Webkit","ms"],alignContent:["Webkit"],alignItems:["Webkit"],alignSelf:["Webkit"],justifyContent:["Webkit"],order:["Webkit"],transitionDelay:["Webkit"],transitionDuration:["Webkit"],transitionProperty:["Webkit"],transitionTimingFunction:["Webkit"],backdropFilter:["Webkit"],scrollSnapType:["Webkit","ms"],scrollSnapPointsX:["Webkit","ms"],scrollSnapPointsY:["Webkit","ms"],scrollSnapDestination:["Webkit","ms"],scrollSnapCoordinate:["Webkit","ms"],shapeImageThreshold:["Webkit"],shapeImageMargin:["Webkit"],shapeImageOutside:["Webkit"],hyphens:["Webkit","Moz","ms"],flowInto:["Webkit","ms"],flowFrom:["Webkit","ms"],regionFragment:["Webkit","ms"],boxSizing:["Moz"],textAlignLast:["Moz"],tabSize:["Moz"],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:["Webkit","ms"],borderImage:["Webkit"],borderImageOutset:["Webkit"],borderImageRepeat:["Webkit"],borderImageSlice:["Webkit"],borderImageSource:["Webkit"],borderImageWidth:["Webkit"]}}},function(e,t,r){"use strict";function n(){if(s.length)throw s.shift()}function i(e){var t;t=u.length?u.pop():new o,t.task=e,a(t)}function o(){this.task=null}var a=r(8),u=[],s=[],f=a.makeRequestCallFromTimer(n);e.exports=i,o.prototype.call=function(){try{this.task.call()}catch(e){i.onerror?i.onerror(e):(s.push(e),f())}finally{this.task=null,u[u.length]=this}}},function(e,t){(function(t){"use strict";function r(e){u.length||(a(),s=!0),u[u.length]=e}function n(){for(;f<u.length;){var e=f;if(f+=1,u[e].call(),f>l){for(var t=0,r=u.length-f;t<r;t++)u[t]=u[t+f];u.length-=f,f=0}}u.length=0,f=0,s=!1}function i(e){var t=1,r=new d(e),n=document.createTextNode("");return r.observe(n,{characterData:!0}),function(){t=-t,n.data=t}}function o(e){return function(){function t(){clearTimeout(r),clearInterval(n),e()}var r=setTimeout(t,0),n=setInterval(t,50)}}e.exports=r;var a,u=[],s=!1,f=0,l=1024,c="undefined"!=typeof t?t:self,d=c.MutationObserver||c.WebKitMutationObserver;a="function"==typeof d?i(n):o(n),r.requestFlush=a,r.makeRequestCallFromTimer=o}).call(t,function(){return this}())},function(e,t,r){"use strict";var n=function(){function e(e,t){var r=[],n=!0,i=!1,o=void 0;try{for(var a,u=e[Symbol.iterator]();!(n=(a=u.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(e){i=!0,o=e}finally{try{!n&&u.return&&u.return()}finally{if(i)throw o}}return r}return function(t,r){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o=r(2),a=r(11),u={create:function(e){return(0,o.mapObj)(e,function(e){var t=n(e,2),r=t[0],i=t[1];return[r,{_name:r+"_"+(0,o.hashObject)(i),_definition:i}]})},rehydrate:function(){var e=arguments.length<=0||void 0===arguments[0]?[]:arguments[0];(0,a.addRenderedClassNames)(e)}},s={renderStatic:function(e){(0,a.reset)(),(0,a.startBuffering)();var t=e(),r=(0,a.flushToString)();return{html:t,css:{content:r,renderedClassNames:(0,a.getRenderedClassNames)()}}}},f={suppressStyleInjection:function(){(0,a.reset)(),(0,a.startBuffering)()},clearBufferAndResumeStyleInjection:function(){(0,a.reset)()}},l=function e(t,r){return{StyleSheet:i({},u,{extend:function(n){var i=n.map(function(e){return e.selectorHandler}).filter(function(e){return e});return e(t,r.concat(i))}}),StyleSheetServer:s,StyleSheetTestUtils:f,css:function(){for(var e=arguments.length,n=Array(e),i=0;i<e;i++)n[i]=arguments[i];return(0,a.injectAndGetClassName)(t,n,r)}}};e.exports=l},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=r(3),o=r(9),a=n(o),u=!0;t.default=(0,a.default)(u,i.defaultSelectorHandlers),e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=r(7),o=n(i),a=r(3),u=r(2),s=null,f=function(e){if(null==s&&(s=document.querySelector("style[data-aphrodite]"),null==s)){var t=document.head||document.getElementsByTagName("head")[0];s=document.createElement("style"),s.type="text/css",s.setAttribute("data-aphrodite",""),t.appendChild(s)}s.styleSheet?s.styleSheet.cssText+=e:s.appendChild(document.createTextNode(e))},l={fontFamily:function e(t){return Array.isArray(t)?t.map(e).join(","):"object"==typeof t?(b(t.src,"@font-face",[t],!1),'"'+t.fontFamily+'"'):t},animationName:function e(t,r){if(Array.isArray(t))return t.map(function(t){return e(t,r)}).join(",");if("object"==typeof t){var n="keyframe_"+(0,u.hashObject)(t),i="@keyframes "+n+"{";return Object.keys(t).forEach(function(e){i+=(0,a.generateCSS)(e,[t[e]],r,l,!1)}),i+="}",p(n,i),n}return t}},c={},d="",m=!1,p=function(e,t){if(!c[e]){if(!m){if("undefined"==typeof document)throw new Error("Cannot automatically buffer without a document");m=!0,(0,o.default)(v)}d+=t,c[e]=!0}},b=function(e,t,r,n){var i=arguments.length<=4||void 0===arguments[4]?[]:arguments[4];if(!c[e]){var o=(0,a.generateCSS)(t,r,i,l,n);p(e,o)}};t.injectStyleOnce=b;var y=function(){d="",c={},m=!1,s=null};t.reset=y;var k=function(){if(m)throw new Error("Cannot buffer while already buffering");m=!0};t.startBuffering=k;var h=function(){m=!1;var e=d;return d="",e};t.flushToString=h;var v=function(){var e=h();e.length>0&&f(e)};t.flushToStyleTag=v;var g=function(){return Object.keys(c)};t.getRenderedClassNames=g;var W=function(e){e.forEach(function(e){c[e]=!0})};t.addRenderedClassNames=W;var x=function(e,t,r){t=(0,u.flattenDeep)(t);for(var n=[],i=[],o=0;o<t.length;o+=1)t[o]&&(n.push(t[o]._name),i.push(t[o]._definition));if(0===n.length)return"";var a=n.join("-o_O-");return b(a,"."+a,i,e,r),a};t.injectAndGetClassName=x},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e){return(0,a.default)(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=i;var o=r(13),a=n(o);e.exports=t.default},function(e,t){"use strict";function r(e){return e in o?o[e]:o[e]=e.replace(n,"-$&").toLowerCase().replace(i,"-ms-")}var n=/[A-Z]/g,i=/^ms-/,o={};e.exports=r},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e){function t(e){for(var i in e){var o=e[i];if((0,d.default)(o))e[i]=t(o);else if(Array.isArray(o)){for(var u=[],f=0,c=o.length;f<c;++f){var m=(0,s.default)(n,i,o[f],e,r);(0,l.default)(u,m||o[f])}u.length>0&&(e[i]=u)}else{var p=(0,s.default)(n,i,o,e,r);p&&(e[i]=p),e=(0,a.default)(r,i,e)}}return e}var r=e.prefixMap,n=e.plugins;return t}Object.defineProperty(t,"__esModule",{value:!0}),t.default=i;var o=r(29),a=n(o),u=r(30),s=n(u),f=r(27),l=n(f),c=r(28),d=n(c);e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if("string"==typeof t&&!(0,a.default)(t)&&t.indexOf("calc(")>-1)return u.map(function(e){return t.replace(/calc\(/g,e+"calc(")})}Object.defineProperty(t,"__esModule",{value:!0}),t.default=i;var o=r(1),a=n(o),u=["-webkit-","-moz-",""];e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if("string"==typeof t&&!(0,a.default)(t)&&t.indexOf("cross-fade(")>-1)return u.map(function(e){return t.replace(/cross-fade\(/g,e+"cross-fade(")})}Object.defineProperty(t,"__esModule",{value:!0}),t.default=i;var o=r(1),a=n(o),u=["-webkit-",""];e.exports=t.default},function(e,t){"use strict";function r(e,t){if("cursor"===e&&i.hasOwnProperty(t))return n.map(function(e){return e+t})}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r;var n=["-webkit-","-moz-",""],i={"zoom-in":!0,"zoom-out":!0,grab:!0,grabbing:!0};e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if("string"==typeof t&&!(0,a.default)(t)&&t.indexOf("filter(")>-1)return u.map(function(e){return t.replace(/filter\(/g,e+"filter(")})}Object.defineProperty(t,"__esModule",{value:!0}),t.default=i;var o=r(1),a=n(o),u=["-webkit-",""];e.exports=t.default},function(e,t){"use strict";function r(e,t){if("display"===e&&n.hasOwnProperty(t))return["-webkit-box","-moz-box","-ms-"+t+"box","-webkit-"+t,t]}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r;var n={flex:!0,"inline-flex":!0};e.exports=t.default},function(e,t){"use strict";function r(e,t,r){i.hasOwnProperty(e)&&(r[i[e]]=n[t]||t)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r;var n={"space-around":"distribute","space-between":"justify","flex-start":"start","flex-end":"end"},i={alignContent:"msFlexLinePack",alignSelf:"msFlexItemAlign",alignItems:"msFlexAlign",justifyContent:"msFlexPack",order:"msFlexOrder",flexGrow:"msFlexPositive",flexShrink:"msFlexNegative",flexBasis:"msPreferredSize"};e.exports=t.default},function(e,t){"use strict";function r(e,t,r){"flexDirection"===e&&"string"==typeof t&&(t.indexOf("column")>-1?r.WebkitBoxOrient="vertical":r.WebkitBoxOrient="horizontal",t.indexOf("reverse")>-1?r.WebkitBoxDirection="reverse":r.WebkitBoxDirection="normal"),i.hasOwnProperty(e)&&(r[i[e]]=n[t]||t)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r;var n={"space-around":"justify","space-between":"justify","flex-start":"start","flex-end":"end","wrap-reverse":"multiple",wrap:"multiple"},i={alignItems:"WebkitBoxAlign",justifyContent:"WebkitBoxPack",flexWrap:"WebkitBoxLines"};e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if("string"==typeof t&&!(0,a.default)(t)&&s.test(t))return u.map(function(e){return e+t})}Object.defineProperty(t,"__esModule",{value:!0}),t.default=i;var o=r(1),a=n(o),u=["-webkit-","-moz-",""],s=/linear-gradient|radial-gradient|repeating-linear-gradient|repeating-radial-gradient/;e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if("string"==typeof t&&!(0,a.default)(t)&&t.indexOf("image-set(")>-1)return u.map(function(e){return t.replace(/image-set\(/g,e+"image-set(")})}Object.defineProperty(t,"__esModule",{value:!0}),t.default=i;var o=r(1),a=n(o),u=["-webkit-",""];e.exports=t.default},function(e,t){"use strict";function r(e,t){if("position"===e&&"sticky"===t)return["-webkit-sticky","sticky"]}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r,e.exports=t.default},function(e,t){"use strict";function r(e,t){if(i.hasOwnProperty(e)&&o.hasOwnProperty(t))return n.map(function(e){return e+t})}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r;var n=["-webkit-","-moz-",""],i={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},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if((0,f.default)(e))return e;for(var r=e.split(/,(?![^()]*(?:\([^()]*\))?\))/g),n=0,i=r.length;n<i;++n){var o=r[n],a=[o];for(var s in t){var l=(0,u.default)(s);if(o.indexOf(l)>-1&&"order"!==l)for(var c=t[s],d=0,p=c.length;d<p;++d)a.unshift(o.replace(l,m[c[d]]+l))}r[n]=a.join(",")}return r.join(",")}function o(e,t,r,n){if("string"==typeof t&&d.hasOwnProperty(e)){var o=i(t,n),a=o.split(/,(?![^()]*(?:\([^()]*\))?\))/g).filter(function(e){return!/-moz-|-ms-/.test(e)}).join(",");if(e.indexOf("Webkit")>-1)return a;var u=o.split(/,(?![^()]*(?:\([^()]*\))?\))/g).filter(function(e){return!/-webkit-|-ms-/.test(e)}).join(",");return e.indexOf("Moz")>-1?u:(r["Webkit"+(0,c.default)(e)]=a,r["Moz"+(0,c.default)(e)]=u,o)}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o;var a=r(12),u=n(a),s=r(1),f=n(s),l=r(5),c=n(l),d={transition:!0,transitionProperty:!0,WebkitTransition:!0,WebkitTransitionProperty:!0,MozTransition:!0,MozTransitionProperty:!0},m={Webkit:"-webkit-",Moz:"-moz-",ms:"-ms-"};e.exports=t.default},function(e,t){"use strict";function r(e,t){e.indexOf(t)===-1&&e.push(t)}function n(e,t){if(Array.isArray(t))for(var n=0,i=t.length;n<i;++n)r(e,t[n]);else r(e,t)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=n,e.exports=t.default},function(e,t){"use strict";function r(e){return e instanceof Object&&!Array.isArray(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r,e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e,t,r){if(!e.hasOwnProperty(t))return r;var n={};return Object.keys(r).forEach(function(i){if(i===t)for(var o=e[t],u=0,s=o.length;u<s;++u)n[o[u]+(0,a.default)(t)]=r[t];n[i]=r[i]}),n}Object.defineProperty(t,"__esModule",{value:!0}),t.default=i;var o=r(5),a=n(o);e.exports=t.default},function(e,t){"use strict";function r(e,t,r,n,i){for(var o=0,a=e.length;o<a;++o){var u=e[o](t,r,n,i);if(u)return u}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r,e.exports=t.default},function(e,t){"use strict";function r(e){for(var t=5381,r=e.length;r;)t=33*t^e.charCodeAt(--r);return t>>>0}e.exports=r}])});
//# sourceMappingURL=aphrodite.umd.min.js.map

1

examples/src/examples-ssr.js

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

/* @flow */
import ReactDOMServer from 'react-dom/server';

@@ -2,0 +3,0 @@ import React from 'react';

1

examples/src/examples.js

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

/* @flow */
import ReactDOM from 'react-dom';

@@ -2,0 +3,0 @@ import React from 'react';

1

examples/src/StyleTester.js

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

/* @flow */
import React from 'react';

@@ -2,0 +3,0 @@ import { StyleSheet, css } from '../../src/index.js';

25

lib/exports.js

@@ -11,4 +11,15 @@ 'use strict';

/* ::
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 StyleSheet = {
create: function create(sheetDefinition) {
create: function create(sheetDefinition /* : SheetDefinition */) {
return (0, _util.mapObj)(sheetDefinition, function (_ref) {

@@ -30,3 +41,3 @@ var _ref2 = _slicedToArray(_ref, 2);

rehydrate: function rehydrate() {
var renderedClassNames = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0];
var renderedClassNames /* : string[] */ = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0];

@@ -41,3 +52,3 @@ (0, _inject.addRenderedClassNames)(renderedClassNames);

var StyleSheetServer = {
renderStatic: function renderStatic(renderFunc) {
renderStatic: function renderStatic(renderFunc /* : RenderFunction */) {
(0, _inject.reset)();

@@ -92,3 +103,5 @@ (0, _inject.startBuffering)();

*/
var makeExports = function makeExports(useImportant, selectorHandlers) {
var makeExports = function makeExports(useImportant, /* : boolean */
selectorHandlers /* : SelectorHandler[] */
) {
return {

@@ -113,3 +126,3 @@ StyleSheet: _extends({}, StyleSheet, {

*/
extend: function extend(extensions) {
extend: function extend(extensions /* : Extension[] */) {
var extensionSelectorHandlers = extensions

@@ -133,3 +146,3 @@ // Pull out extensions with a selectorHandler property

css: function css() {
css: function css() /* : MaybeSheetDefinition[] */{
for (var _len = arguments.length, styleDefinitions = Array(_len), _key = 0; _key < _len; _key++) {

@@ -136,0 +149,0 @@ styleDefinitions[_key] = arguments[_key];

199

lib/generate.js

@@ -9,10 +9,33 @@ 'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _inlineStylePrefixerStatic = require('inline-style-prefixer/static');
var _inlineStylePrefixerStaticCreatePrefixer = require('inline-style-prefixer/static/createPrefixer');
var _inlineStylePrefixerStatic2 = _interopRequireDefault(_inlineStylePrefixerStatic);
var _inlineStylePrefixerStaticCreatePrefixer2 = _interopRequireDefault(_inlineStylePrefixerStaticCreatePrefixer);
var _libStaticPrefixData = require('../lib/staticPrefixData');
var _libStaticPrefixData2 = _interopRequireDefault(_libStaticPrefixData);
var _orderedElements = require('./ordered-elements');
var _orderedElements2 = _interopRequireDefault(_orderedElements);
var _util = require('./util');
var prefixAll = (0, _inlineStylePrefixerStaticCreatePrefixer2['default'])(_libStaticPrefixData2['default']);
/* ::
import type { SheetDefinition } from './index.js';
type StringHandlers = { [id:string]: Function };
type SelectorCallback = (selector: string) => any;
export type SelectorHandler = (
selector: string,
baseSelector: string,
callback: SelectorCallback
) => string | null;
*/
/**

@@ -68,3 +91,6 @@ * `selectorHandlers` are functions which handle special selectors which act

// Handle pseudo-selectors, like :hover and :nth-child(3n)
function pseudoSelectors(selector, baseSelector, generateSubtreeStyles) {
function pseudoSelectors(selector, /* : string */
baseSelector, /* : string */
generateSubtreeStyles /* : Function */
) /* */{
if (selector[0] !== ":") {

@@ -77,3 +103,6 @@ return null;

// Handle media queries (or font-faces)
function mediaQueries(selector, baseSelector, generateSubtreeStyles) {
function mediaQueries(selector, /* : string */
baseSelector, /* : string */
generateSubtreeStyles /* : Function */
) /* */{
if (selector[0] !== "@") {

@@ -91,4 +120,4 @@ return null;

*
* This function handles the media queries, pseudo selectors, and descendant
* styles that can be used in aphrodite styles.
* This function handles the media queries and pseudo selectors that can be used
* in aphrodite styles.
*

@@ -110,3 +139,3 @@ * @param {string} selector: A base CSS selector for the styles to be generated

*
* generateCSS(".foo", {
* generateCSS(".foo", [{
* color: "red",

@@ -120,9 +149,5 @@ * "@media screen": {

* ":active": {
* fontWeight: "bold",
* ">>bar": {
* _names: { "foo_bar": true },
* height: 10,
* }
* fontWeight: "bold"
* }
* });
* }], defaultSelectorHandlers);
*

@@ -134,3 +159,2 @@ * with the default `selectorHandlers` will make 5 calls to

* generateCSSRuleset(".foo:active", { fontWeight: "bold" }, ...)
* generateCSSRuleset(".foo:active .foo_bar", { height: 10 }, ...)
* // These 2 will be wrapped in @media screen {}

@@ -140,13 +164,15 @@ * generateCSSRuleset(".foo", { height: 20 }, ...)

*/
var generateCSS = function generateCSS(selector, styleTypes) {
var selectorHandlers = arguments.length <= 2 || arguments[2] === undefined ? [] : arguments[2];
var stringHandlers = arguments.length <= 3 || arguments[3] === undefined ? {} : arguments[3];
var useImportant = arguments.length <= 4 || arguments[4] === undefined ? true : arguments[4];
var generateCSS = function generateCSS(selector, /* : string */
styleTypes, /* : SheetDefinition[] */
selectorHandlers, /* : SelectorHandler[] */
stringHandlers, /* : StringHandlers */
useImportant /* : boolean */
) /* : string */{
var merged /* : OrderedElements */ = styleTypes.reduce(_util.recursiveMerge, new _orderedElements2['default']());
var merged = styleTypes.reduce(_util.recursiveMerge);
var plainDeclarations = {};
var plainDeclarations = new _orderedElements2['default']();
var generatedStyles = "";
Object.keys(merged).forEach(function (key) {
// TODO(emily): benchmark this to see if a plain for loop would be faster.
merged.forEach(function (key, val) {
// For each key, see if one of the selector handlers will handle these

@@ -156,3 +182,3 @@ // styles.

var result = handler(key, selector, function (newSelector) {
return generateCSS(newSelector, [merged[key]], selectorHandlers, stringHandlers, useImportant);
return generateCSS(newSelector, [val], selectorHandlers, stringHandlers, useImportant);
});

@@ -169,3 +195,3 @@ if (result != null) {

if (!foundHandler) {
plainDeclarations[key] = merged[key];
plainDeclarations.set(key, val);
}

@@ -184,9 +210,11 @@ });

*/
var runStringHandlers = function runStringHandlers(declarations, stringHandlers, selectorHandlers) {
var result = {};
Object.keys(declarations).forEach(function (key) {
var runStringHandlers = function runStringHandlers(declarations, /* : OrderedElements */
stringHandlers, /* : StringHandlers */
selectorHandlers /* : SelectorHandler[] */
) /* */{
var hasStringHandlers = !!stringHandlers;
return declarations.map(function (key, val) {
// If a handler exists for this particular key, let it interpret
// that value first before continuing
if (stringHandlers && stringHandlers.hasOwnProperty(key)) {
if (hasStringHandlers && stringHandlers.hasOwnProperty(key)) {
// TODO(emily): Pass in a callback which generates CSS, similar to

@@ -197,9 +225,7 @@ // how our selector handlers work, instead of passing in

// handlers are very specialized and do complex things.
result[key] = stringHandlers[key](declarations[key], selectorHandlers);
return stringHandlers[key](val, selectorHandlers);
} else {
result[key] = declarations[key];
return val;
}
});
return result;
};

@@ -238,7 +264,15 @@

*/
var generateCSSRuleset = function generateCSSRuleset(selector, declarations, stringHandlers, useImportant, selectorHandlers) {
var handledDeclarations = runStringHandlers(declarations, stringHandlers, selectorHandlers);
var generateCSSRuleset = function generateCSSRuleset(selector, /* : string */
declarations, /* : OrderedElements */
stringHandlers, /* : StringHandlers */
useImportant, /* : boolean */
selectorHandlers /* : SelectorHandler[] */
) /* : string */{
var handledDeclarations /* : OrderedElements */ = runStringHandlers(declarations, stringHandlers, selectorHandlers);
var prefixedDeclarations = (0, _inlineStylePrefixerStatic2['default'])(handledDeclarations);
var originalElements = _extends({}, handledDeclarations.elements);
// NOTE(emily): This mutates handledDeclarations.elements.
var prefixedDeclarations = prefixAll(handledDeclarations.elements);
var prefixedRules = (0, _util.flatten)((0, _util.objectToPairs)(prefixedDeclarations).map(function (_ref) {

@@ -251,28 +285,8 @@ var _ref2 = _slicedToArray(_ref, 2);

if (Array.isArray(value)) {
var _ret = (function () {
// inline-style-prefix-all returns an array when there should be
// multiple rules, we will flatten to single rules
var prefixedValues = [];
var unprefixedValues = [];
value.forEach(function (v) {
if (v.indexOf('-') === 0) {
prefixedValues.push(v);
} else {
unprefixedValues.push(v);
}
});
prefixedValues.sort();
unprefixedValues.sort();
return {
v: prefixedValues.concat(unprefixedValues).map(function (v) {
return [key, v];
})
};
})();
if (typeof _ret === 'object') return _ret.v;
// 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.
return value.map(function (v) {
return [key, v];
});
}

@@ -282,3 +296,25 @@ return [[key, value]];

var rules = prefixedRules.map(function (_ref3) {
// Calculate the order that we want to each element in `prefixedRules` to
// be in, based on its index in the original key ordering.
var sortOrder = {};
for (var i = 0; i < handledDeclarations.keyOrder.length; i++) {
var key = handledDeclarations.keyOrder[i];
sortOrder[key] = i;
// In order to keep most prefixed versions of keys in about the same
// order that the original keys were in but placed before the
// unprefixed version, we generate the prefixed forms of the keys and
// set their order to the same as the original key minus a little bit.
var capitalizedKey = '' + key[0].toUpperCase() + key.slice(1);
var prefixedKeys = ['Webkit' + capitalizedKey, 'Moz' + capitalizedKey, 'ms' + capitalizedKey];
for (var j = 0; j < prefixedKeys.length; ++j) {
if (!originalElements.hasOwnProperty(prefixedKeys[j])) {
sortOrder[prefixedKeys[j]] = i - 0.5;
originalElements[prefixedKeys[j]] = originalElements[key];
}
}
}
// Calculate the sort order of a given property.
function sortOrderForProperty(_ref3) {
var _ref32 = _slicedToArray(_ref3, 2);

@@ -289,5 +325,36 @@

var stringValue = (0, _util.stringifyValue)(key, value);
var ret = (0, _util.kebabifyStyleName)(key) + ':' + stringValue + ';';
return useImportant === false ? ret : (0, _util.importantify)(ret);
if (sortOrder.hasOwnProperty(key)) {
if (originalElements.hasOwnProperty(key) && originalElements[key] !== value) {
// The value is prefixed. Sort this just before the key with
// the unprefixed value.
return sortOrder[key] - 0.25;
} else {
// Either the key and value are unprefixed here, or this is a
// prefixed key. Either way, this is handled by the sortOrder
// calculation above.
return sortOrder[key];
}
} else {
// If the property isn't in the sort order, it wasn't in the
// original set of unprefixed keys, so it must be a prefixed key.
// Sort at order -1 to put it at the top of the set of styles.
return -1;
}
}
// Actually sort the rules according to the sort order.
prefixedRules.sort(function (a, b) {
return sortOrderForProperty(a) - sortOrderForProperty(b);
});
var transformValue = useImportant === false ? _util.stringifyValue : function (key, value) {
return (0, _util.importantify)((0, _util.stringifyValue)(key, value));
};
var rules = prefixedRules.map(function (_ref4) {
var _ref42 = _slicedToArray(_ref4, 2);
var key = _ref42[0];
var value = _ref42[1];
return (0, _util.kebabifyStyleName)(key) + ':' + transformValue(key, value) + ';';
}).join("");

@@ -294,0 +361,0 @@

50

lib/inject.js

@@ -17,2 +17,8 @@ 'use strict';

/* ::
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

@@ -29,3 +35,3 @@ // inserted anything yet. We could find this each time using

// same style tag that server-side rendering inserts.
var injectStyleTag = function injectStyleTag(cssContents) {
var injectStyleTag = function injectStyleTag(cssContents /* : string */) {
if (styleTag == null) {

@@ -49,2 +55,3 @@ // Try to find a style tag with the `data-aphrodite` attribute first.

if (styleTag.styleSheet) {
// $FlowFixMe: legacy Internet Explorer compatibility
styleTag.styleSheet.cssText += cssContents;

@@ -155,3 +162,9 @@ } else {

var injectStyleOnce = function injectStyleOnce(key, selector, definitions, useImportant, selectorHandlers) {
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]) {

@@ -202,3 +215,3 @@ var generated = (0, _generate.generateCSS)(selector, definitions, selectorHandlers, stringHandlers, useImportant);

exports.getRenderedClassNames = getRenderedClassNames;
var addRenderedClassNames = function addRenderedClassNames(classNames) {
var addRenderedClassNames = function addRenderedClassNames(classNames /* : string[] */) {
classNames.forEach(function (className) {

@@ -220,22 +233,25 @@ alreadyInjected[className] = true;

*/
var injectAndGetClassName = function injectAndGetClassName(useImportant, styleDefinitions, selectorHandlers) {
var injectAndGetClassName = function injectAndGetClassName(useImportant, /* : boolean */
styleDefinitions, /* : MaybeSheetDefinition[] */
selectorHandlers /* : SelectorHandler[] */
) /* : string */{
styleDefinitions = (0, _util.flattenDeep)(styleDefinitions);
// Filter out falsy values from the input, to allow for
// `css(a, test && c)`
var validDefinitions = styleDefinitions.filter(function (def) {
return def;
});
var classNameBits = [];
var definitionBits = [];
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]) {
classNameBits.push(styleDefinitions[i]._name);
definitionBits.push(styleDefinitions[i]._definition);
}
}
// Break if there aren't any valid styles.
if (validDefinitions.length === 0) {
if (classNameBits.length === 0) {
return "";
}
var className = classNameBits.join("-o_O-");
var className = validDefinitions.map(function (s) {
return s._name;
}).join("-o_O-");
injectStyleOnce(className, '.' + className, validDefinitions.map(function (d) {
return d._definition;
}), useImportant, selectorHandlers);
injectStyleOnce(className, '.' + className, definitionBits, useImportant, selectorHandlers);

@@ -242,0 +258,0 @@ return className;

1

lib/no-important.js

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

// Module with the same interface as the core aphrodite module,

@@ -2,0 +3,0 @@ // except that styles injected do not automatically have !important

196

lib/util.js

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

// {K1: V1, K2: V2, ...} -> [[K1, V1], [K2, V2]]
'use strict';

@@ -10,27 +9,44 @@

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var objectToPairs = function objectToPairs(obj) {
return Object.keys(obj).map(function (key) {
return [key, obj[key]];
});
var _stringHash = require('string-hash');
var _stringHash2 = _interopRequireDefault(_stringHash);
var _orderedElements = require('./ordered-elements');
var _orderedElements2 = _interopRequireDefault(_orderedElements);
/* ::
type Pair = [ string, any ];
type Pairs = Pair[];
type PairsMapper = (pair: Pair) => Pair;
type ObjectMap = { [id:string]: any };
*/
// {K1: V1, K2: V2, ...} -> [[K1, V1], [K2, V2]]
var objectToPairs = function objectToPairs(obj /* : ObjectMap */) {
return (/* : Pairs */Object.keys(obj).map(function (key) {
return [key, obj[key]];
})
);
};
exports.objectToPairs = objectToPairs;
// [[K1, V1], [K2, V2]] -> {K1: V1, K2: V2, ...}
var pairsToObject = function pairsToObject(pairs) {
var result = {};
pairs.forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2);
var mapObj = function mapObj(obj, /* : ObjectMap */
fn /* : PairsMapper */
) /* : ObjectMap */{
var keys = Object.keys(obj);
var mappedObj = {};
for (var i = 0; i < keys.length; i += 1) {
var _fn = fn([keys[i], obj[keys[i]]]);
var key = _ref2[0];
var val = _ref2[1];
var _fn2 = _slicedToArray(_fn, 2);
result[key] = val;
});
return result;
};
var newKey = _fn2[0];
var newValue = _fn2[1];
var mapObj = function mapObj(obj, fn) {
return pairsToObject(objectToPairs(obj).map(fn));
mappedObj[newKey] = newValue;
}
return mappedObj;
};

@@ -41,13 +57,15 @@

// [[A], [B, C, [D]]] -> [A, B, C, [D]]
var flatten = function flatten(list) {
return list.reduce(function (memo, x) {
return memo.concat(x);
}, []);
var flatten = function flatten(list /* : any[] */) {
return (/* : any[] */list.reduce(function (memo, x) {
return memo.concat(x);
}, [])
);
};
exports.flatten = flatten;
var flattenDeep = function flattenDeep(list) {
return list.reduce(function (memo, x) {
return memo.concat(Array.isArray(x) ? flattenDeep(x) : x);
}, []);
var flattenDeep = function flattenDeep(list /* : any[] */) {
return (/* : any[] */list.reduce(function (memo, x) {
return memo.concat(Array.isArray(x) ? flattenDeep(x) : x);
}, [])
);
};

@@ -57,27 +75,44 @@

var UPPERCASE_RE = /([A-Z])/g;
var MS_RE = /^ms-/;
var UPPERCASE_RE_TO_KEBAB = function UPPERCASE_RE_TO_KEBAB(match /* : string */) {
return (/* : string */'-' + match.toLowerCase()
);
};
var kebabify = function kebabify(string) {
return string.replace(UPPERCASE_RE, '-$1').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 '-' + result;
}
return result;
};
var kebabifyStyleName = function kebabifyStyleName(string) {
return kebabify(string).replace(MS_RE, '-ms-');
exports.kebabifyStyleName = kebabifyStyleName;
var isPlainObject = function isPlainObject(x /* : ObjectMap | any */
) {
return (/* : boolean */typeof x === 'object' && !Array.isArray(x) && x !== null
);
};
exports.kebabifyStyleName = kebabifyStyleName;
var recursiveMerge = function recursiveMerge(a, b) {
var recursiveMerge = function recursiveMerge(a, /* : OrderedElements | ObjectMap | Map<string,any> | any */
b /* : ObjectMap | Map<string,any> */
) /* : OrderedElements | any */{
// TODO(jlfwong): Handle malformed input where a and b are not the same
// type.
if (typeof a !== 'object') {
return b;
if (!isPlainObject(a) || !isPlainObject(b)) {
if (isPlainObject(b)) {
return _orderedElements2['default'].from(b);
} else {
return b;
}
}
var ret = _extends({}, a);
var ret = _orderedElements2['default'].from(a);
var right = _orderedElements2['default'].from(b);
Object.keys(b).forEach(function (key) {
if (ret.hasOwnProperty(key)) {
ret[key] = recursiveMerge(a[key], b[key]);
right.forEach(function (key, val) {
if (ret.has(key)) {
ret.set(key, recursiveMerge(ret.get(key), val));
} else {
ret[key] = b[key];
ret.set(key, val);
}

@@ -161,3 +196,5 @@ });

var stringifyValue = function stringifyValue(key, prop) {
var stringifyValue = function stringifyValue(key, /* : string */
prop /* : any */
) /* : string */{
if (typeof prop === "number") {

@@ -170,3 +207,3 @@ if (isUnitlessNumber[key]) {

} else {
return prop;
return '' + prop;
}

@@ -176,51 +213,2 @@ };

exports.stringifyValue = stringifyValue;
/**
* JS Implementation of MurmurHash2
*
* @author <a href="mailto:gary.court@gmail.com">Gary Court</a>
* @see http://github.com/garycourt/murmurhash-js
* @author <a href="mailto:aappleby@gmail.com">Austin Appleby</a>
* @see http://sites.google.com/site/murmurhash/
*
* @param {string} str ASCII only
* @return {string} Base 36 encoded hash result
*/
function murmurhash2_32_gc(str) {
var l = str.length;
var h = l;
var i = 0;
var k = undefined;
while (l >= 4) {
k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;
k = (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0x5bd1e995 & 0xffff) << 16);
k ^= k >>> 24;
k = (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0x5bd1e995 & 0xffff) << 16);
h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16) ^ k;
l -= 4;
++i;
}
/* eslint-disable no-fallthrough */ // forgive existing code
switch (l) {
case 3:
h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
case 2:
h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
case 1:
h ^= str.charCodeAt(i) & 0xff;
h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16);
}
/* eslint-enable no-fallthrough */
h ^= h >>> 13;
h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16);
h ^= h >>> 15;
return (h >>> 0).toString(36);
}
// Hash a javascript object using JSON.stringify. This is very fast, about 3

@@ -234,16 +222,20 @@ // microseconds on my computer for a sample object:

// can probably depend on this too.
var hashObject = function hashObject(object) {
return murmurhash2_32_gc(JSON.stringify(object));
var hashObject = function hashObject(object /* : ObjectMap */) {
return (/* : string */(0, _stringHash2['default'])(JSON.stringify(object)).toString(36)
);
};
exports.hashObject = hashObject;
var IMPORTANT_RE = /^([^:]+:.*?)( !important)?;$/;
// Given a single style rule string like "a: b;", adds !important to generate
// "a: b !important;".
var importantify = function importantify(string) {
return string.replace(IMPORTANT_RE, function (_, base) {
return base + " !important;";
});
// 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 + ' !important'
);
};
exports.importantify = importantify;

15

package.json
{
"name": "aphrodite",
"version": "1.1.0",
"version": "1.2.0",
"description": "Inline styles in JS that just work (TM)",

@@ -12,11 +12,13 @@ "keywords": [

"scripts": {
"lint": "eslint --fix --cache .",
"lint": "eslint --fix --cache . && flow check",
"test": "npm run coverage",
"posttest": "npm run lint",
"coverage": "nyc --check-coverage --lines 100 --branches 100 npm run tests",
"pretest": "npm run build:prefixes",
"tests": "mocha --compilers js:babel/register tests",
"tests:watch": "mocha --watch --compilers js:babel/register tests",
"prebuild": "rimraf dist lib",
"prebuild": "rimraf dist/* lib/*",
"build": "npm-run-all --parallel build:*",
"watch:build": "npm-run-all --parallel watch:build:*",
"build:prefixes": "tools/generate_prefixer_data.js",
"build:main": "babel -d lib/ src",

@@ -47,7 +49,11 @@ "watch:build:main": "npm run build:main -- --watch",

"babel-loader": "^5.3.2",
"caniuse-api": "^1.5.3",
"chai": "^3.3.0",
"es6-shim": "^0.35.3",
"eslint": "^3.7.1",
"eslint-config-standard-react": "^4.2.0",
"eslint-plugin-react": "^6.3.0",
"flow-bin": "^0.34.0",
"jsdom": "^6.5.1",
"mkdirp": "^0.5.1",
"mocha": "^2.3.3",

@@ -61,5 +67,6 @@ "npm-run-all": "^1.7.0",

"asap": "^2.0.3",
"inline-style-prefixer": "^2.0.0"
"inline-style-prefixer": "^3.0.1",
"string-hash": "^1.1.3"
},
"tonicExampleFilename": "examples/runkit.js"
}

84

README.md

@@ -137,2 +137,4 @@ # Aphrodite: Inline Styles that work

Rehydrating lets Aphrodite know which styles have already been inserted into the page. If you don't rehydrate, Aphrodite might add duplicate styles to the page.
To perform rehydration, call `StyleSheet.rehydrate` with the list of generated class names returned to you by `StyleSheetServer.renderStatic`.

@@ -431,2 +433,78 @@

## Object key ordering
When styles are specified in Aphrodite, the order that they appear in the
actual stylesheet depends on the order that keys are retrieved from the
objects. This ordering is determined by the JavaScript engine that is being
used to render the styles. Sometimes, the order that the styles appear in the
stylesheet matter for the semantics of the CSS. For instance, depending on the
engine, the styles generated from
```js
const styles = StyleSheet.create({
ordered: {
margin: 0,
marginLeft: 15,
},
});
css(styles.ordered);
```
you might expect the following CSS to be generated:
```css
margin: 0px;
margin-left: 15px;
```
but depending on the ordering of the keys in the style object, the CSS might
appear as
```css
margin-left: 15px;
margin: 0px;
```
which is semantically different, because the style which appears later will
override the style before it.
This might also manifest as a problem when server-side rendering, if the
generated styles appear in a different order on the client and on the server.
If you experience this issue where styles don't appear in the generated CSS in
the order that they appear in your objects, there are two solutions:
1. Don't use shorthand properties. For instance, in the margin example above,
by switching from using a shorthand property and a longhand property in the
same styles to using only longhand properties, the issue could be avoided.
```js
const styles = StyleSheet.create({
ordered: {
marginTop: 0,
marginRight: 0,
marginBottom: 0,
marginLeft: 15,
},
});
```
2. Specify the ordering of your styles by specifying them using a
[`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map).
Since `Map`s preserve their insertion order, Aphrodite is able to place your
styles in the correct order.
```js
const styles = StyleSheet.create({
ordered: new Map([
["margin", 0],
["marginLeft", 15],
]),
});
```
Note that `Map`s are not fully supported in all browsers. It can be
polyfilled by using a package
like [es6-shim](https://www.npmjs.com/package/es6-shim).
## Advanced: Extensions

@@ -478,3 +556,3 @@

StyleSheet.extend([myExtension]);
const { StyleSheet: newStyleSheet, css: newCss } = StyleSheet.extend([myExtension]);
```

@@ -526,3 +604,3 @@

- Animations now support multiple animations per style ([see section on Animations](https://github.com/khan/aphrodite#animations)) ([PR #167](https://github.com/Khan/aphrodite/pull/167))
- Animations now support multiple animations per style ([see section on Animations](https://github.com/Khan/aphrodite#animations)) ([PR #167](https://github.com/Khan/aphrodite/pull/167))

@@ -542,3 +620,2 @@ ## 1.0.0

- Add Flow annotations
- Add JSdoc

@@ -552,2 +629,3 @@ - Consider removing !important from everything.

- [martinandert/react-inline](https://github.com/martinandert/react-inline)
- [milesj/aesthetic](https://github.com/milesj/aesthetic) - a React style abstraction layer with theme support

@@ -554,0 +632,0 @@ # License (MIT)

27

src/exports.js

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

/* @flow */
import {mapObj, hashObject} from './util';

@@ -8,4 +9,15 @@ import {

/* ::
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
*/
const StyleSheet = {
create(sheetDefinition) {
create(sheetDefinition /* : SheetDefinition */) {
return mapObj(sheetDefinition, ([key, val]) => {

@@ -21,3 +33,3 @@ return [key, {

rehydrate(renderedClassNames=[]) {
rehydrate(renderedClassNames /* : string[] */ =[]) {
addRenderedClassNames(renderedClassNames);

@@ -31,3 +43,3 @@ },

const StyleSheetServer = {
renderStatic(renderFunc) {
renderStatic(renderFunc /* : RenderFunction */) {
reset();

@@ -82,3 +94,6 @@ startBuffering();

*/
const makeExports = (useImportant, selectorHandlers) => {
const makeExports = (
useImportant /* : boolean */,
selectorHandlers /* : SelectorHandler[] */
) => {
return {

@@ -104,3 +119,3 @@ StyleSheet: {

*/
extend(extensions) {
extend(extensions /* : Extension[] */) {
const extensionSelectorHandlers = extensions

@@ -123,3 +138,3 @@ // Pull out extensions with a selectorHandler property

css(...styleDefinitions) {
css(...styleDefinitions /* : MaybeSheetDefinition[] */) {
return injectAndGetClassName(

@@ -126,0 +141,0 @@ useImportant, styleDefinitions, selectorHandlers);

190

src/generate.js

@@ -1,3 +0,6 @@

import prefixAll from 'inline-style-prefixer/static';
/* @flow */
import createPrefixer from 'inline-style-prefixer/static/createPrefixer';
import staticData from '../lib/staticPrefixData';
import OrderedElements from './ordered-elements';
import {

@@ -8,2 +11,15 @@ objectToPairs, kebabifyStyleName, recursiveMerge, stringifyValue,

const prefixAll = createPrefixer(staticData);
/* ::
import type { SheetDefinition } from './index.js';
type StringHandlers = { [id:string]: Function };
type SelectorCallback = (selector: string) => any;
export type SelectorHandler = (
selector: string,
baseSelector: string,
callback: SelectorCallback
) => string | null;
*/
/**

@@ -59,3 +75,7 @@ * `selectorHandlers` are functions which handle special selectors which act

// Handle pseudo-selectors, like :hover and :nth-child(3n)
function pseudoSelectors(selector, baseSelector, generateSubtreeStyles) {
function pseudoSelectors(
selector /* : string */,
baseSelector /* : string */,
generateSubtreeStyles /* : Function */
) /* */ {
if (selector[0] !== ":") {

@@ -68,3 +88,7 @@ return null;

// Handle media queries (or font-faces)
function mediaQueries(selector, baseSelector, generateSubtreeStyles) {
function mediaQueries(
selector /* : string */,
baseSelector /* : string */,
generateSubtreeStyles /* : Function */
) /* */ {
if (selector[0] !== "@") {

@@ -82,4 +106,4 @@ return null;

*
* This function handles the media queries, pseudo selectors, and descendant
* styles that can be used in aphrodite styles.
* This function handles the media queries and pseudo selectors that can be used
* in aphrodite styles.
*

@@ -101,3 +125,3 @@ * @param {string} selector: A base CSS selector for the styles to be generated

*
* generateCSS(".foo", {
* generateCSS(".foo", [{
* color: "red",

@@ -111,9 +135,5 @@ * "@media screen": {

* ":active": {
* fontWeight: "bold",
* ">>bar": {
* _names: { "foo_bar": true },
* height: 10,
* }
* fontWeight: "bold"
* }
* });
* }], defaultSelectorHandlers);
*

@@ -125,3 +145,2 @@ * with the default `selectorHandlers` will make 5 calls to

* generateCSSRuleset(".foo:active", { fontWeight: "bold" }, ...)
* generateCSSRuleset(".foo:active .foo_bar", { height: 10 }, ...)
* // These 2 will be wrapped in @media screen {}

@@ -131,10 +150,18 @@ * generateCSSRuleset(".foo", { height: 20 }, ...)

*/
export const generateCSS = (selector, styleTypes, selectorHandlers=[],
stringHandlers={}, useImportant=true) => {
const merged = styleTypes.reduce(recursiveMerge);
export const generateCSS = (
selector /* : string */,
styleTypes /* : SheetDefinition[] */,
selectorHandlers /* : SelectorHandler[] */,
stringHandlers /* : StringHandlers */,
useImportant /* : boolean */
) /* : string */ => {
const merged /* : OrderedElements */ = styleTypes.reduce(
recursiveMerge,
new OrderedElements());
const plainDeclarations = {};
const plainDeclarations = new OrderedElements();
let generatedStyles = "";
Object.keys(merged).forEach(key => {
// TODO(emily): benchmark this to see if a plain for loop would be faster.
merged.forEach((key, val) => {
// For each key, see if one of the selector handlers will handle these

@@ -145,3 +172,3 @@ // styles.

return generateCSS(
newSelector, [merged[key]], selectorHandlers,
newSelector, [val], selectorHandlers,
stringHandlers, useImportant);

@@ -159,3 +186,3 @@ });

if (!foundHandler) {
plainDeclarations[key] = merged[key];
plainDeclarations.set(key, val);
}

@@ -178,9 +205,12 @@ });

*/
const runStringHandlers = (declarations, stringHandlers, selectorHandlers) => {
const result = {};
Object.keys(declarations).forEach(key => {
const runStringHandlers = (
declarations /* : OrderedElements */,
stringHandlers /* : StringHandlers */,
selectorHandlers /* : SelectorHandler[] */
) /* */ => {
const hasStringHandlers = !!stringHandlers;
return declarations.map((key, val) => {
// If a handler exists for this particular key, let it interpret
// that value first before continuing
if (stringHandlers && stringHandlers.hasOwnProperty(key)) {
if (hasStringHandlers && stringHandlers.hasOwnProperty(key)) {
// TODO(emily): Pass in a callback which generates CSS, similar to

@@ -191,10 +221,7 @@ // how our selector handlers work, instead of passing in

// handlers are very specialized and do complex things.
result[key] = stringHandlers[key](
declarations[key], selectorHandlers);
return stringHandlers[key](val, selectorHandlers);
} else {
result[key] = declarations[key];
return val;
}
});
return result;
};

@@ -233,32 +260,24 @@

*/
export const generateCSSRuleset = (selector, declarations, stringHandlers,
useImportant, selectorHandlers) => {
const handledDeclarations = runStringHandlers(
export const generateCSSRuleset = (
selector /* : string */,
declarations /* : OrderedElements */,
stringHandlers /* : StringHandlers */,
useImportant /* : boolean */,
selectorHandlers /* : SelectorHandler[] */
) /* : string */ => {
const handledDeclarations /* : OrderedElements */ = runStringHandlers(
declarations, stringHandlers, selectorHandlers);
const prefixedDeclarations = prefixAll(handledDeclarations);
const originalElements = {...handledDeclarations.elements};
// NOTE(emily): This mutates handledDeclarations.elements.
const prefixedDeclarations = prefixAll(handledDeclarations.elements);
const prefixedRules = flatten(
objectToPairs(prefixedDeclarations).map(([key, value]) => {
if (Array.isArray(value)) {
// inline-style-prefix-all returns an array when there should be
// multiple rules, we will flatten to single rules
const prefixedValues = [];
const unprefixedValues = [];
value.forEach(v => {
if (v.indexOf('-') === 0) {
prefixedValues.push(v);
} else {
unprefixedValues.push(v);
}
});
prefixedValues.sort();
unprefixedValues.sort();
return prefixedValues
.concat(unprefixedValues)
.map(v => [key, v]);
// 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.
return value.map(v => [key, v]);
}

@@ -269,8 +288,61 @@ return [[key, value]];

const rules = prefixedRules.map(([key, value]) => {
const stringValue = stringifyValue(key, value);
const ret = `${kebabifyStyleName(key)}:${stringValue};`;
return useImportant === false ? ret : importantify(ret);
}).join("");
// Calculate the order that we want to each element in `prefixedRules` to
// be in, based on its index in the original key ordering.
const sortOrder = {};
for (let i = 0; i < handledDeclarations.keyOrder.length; i++) {
const key = handledDeclarations.keyOrder[i];
sortOrder[key] = i;
// In order to keep most prefixed versions of keys in about the same
// order that the original keys were in but placed before the
// unprefixed version, we generate the prefixed forms of the keys and
// set their order to the same as the original key minus a little bit.
const capitalizedKey = `${key[0].toUpperCase()}${key.slice(1)}`;
const prefixedKeys = [
`Webkit${capitalizedKey}`,
`Moz${capitalizedKey}`,
`ms${capitalizedKey}`,
];
for (let j = 0; j < prefixedKeys.length; ++j) {
if (!originalElements.hasOwnProperty(prefixedKeys[j])) {
sortOrder[prefixedKeys[j]] = i - 0.5;
originalElements[prefixedKeys[j]] = originalElements[key];
}
}
}
// Calculate the sort order of a given property.
function sortOrderForProperty([key, value]) {
if (sortOrder.hasOwnProperty(key)) {
if (originalElements.hasOwnProperty(key) &&
originalElements[key] !== value) {
// The value is prefixed. Sort this just before the key with
// the unprefixed value.
return sortOrder[key] - 0.25;
} else {
// Either the key and value are unprefixed here, or this is a
// prefixed key. Either way, this is handled by the sortOrder
// calculation above.
return sortOrder[key];
}
} else {
// If the property isn't in the sort order, it wasn't in the
// original set of unprefixed keys, so it must be a prefixed key.
// Sort at order -1 to put it at the top of the set of styles.
return -1;
}
}
// Actually sort the rules according to the sort order.
prefixedRules.sort(
(a, b) => sortOrderForProperty(a) - sortOrderForProperty(b));
const transformValue = (useImportant === false)
? stringifyValue
: (key, value) => importantify(stringifyValue(key, value));
const rules = prefixedRules
.map(([key, value]) => `${kebabifyStyleName(key)}:${transformValue(key, value)};`)
.join("");
if (rules) {

@@ -277,0 +349,0 @@ return `${selector}{${rules}}`;

57

src/inject.js

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

/* @flow */
import asap from 'asap';

@@ -6,2 +7,8 @@

/* ::
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

@@ -18,3 +25,3 @@ // inserted anything yet. We could find this each time using

// same style tag that server-side rendering inserts.
const injectStyleTag = (cssContents) => {
const injectStyleTag = (cssContents /* : string */) => {
if (styleTag == null) {

@@ -37,3 +44,5 @@ // Try to find a style tag with the `data-aphrodite` attribute first.

if (styleTag.styleSheet) {
// $FlowFixMe: legacy Internet Explorer compatibility
styleTag.styleSheet.cssText += cssContents;

@@ -144,4 +153,9 @@ } else {

export const injectStyleOnce = (key, selector, definitions, useImportant,
selectorHandlers) => {
export const injectStyleOnce = (
key /* : string */,
selector /* : string */,
definitions /* : SheetDefinition[] */,
useImportant /* : boolean */,
selectorHandlers /* : SelectorHandler[] */ = []
) => {
if (!alreadyInjected[key]) {

@@ -189,3 +203,3 @@ const generated = generateCSS(

export const addRenderedClassNames = (classNames) => {
export const addRenderedClassNames = (classNames /* : string[] */) => {
classNames.forEach(className => {

@@ -206,21 +220,34 @@ alreadyInjected[className] = true;

*/
export const injectAndGetClassName = (useImportant, styleDefinitions,
selectorHandlers) => {
export const injectAndGetClassName = (
useImportant /* : boolean */,
styleDefinitions /* : MaybeSheetDefinition[] */,
selectorHandlers /* : SelectorHandler[] */
) /* : string */ => {
styleDefinitions = flattenDeep(styleDefinitions);
// Filter out falsy values from the input, to allow for
// `css(a, test && c)`
const validDefinitions = styleDefinitions.filter((def) => def);
const classNameBits = [];
const definitionBits = [];
for (let i = 0; i < styleDefinitions.length; i += 1) {
// Filter out falsy values from the input, to allow for
// `css(a, test && c)`
if (styleDefinitions[i]) {
classNameBits.push(styleDefinitions[i]._name);
definitionBits.push(styleDefinitions[i]._definition);
}
}
// Break if there aren't any valid styles.
if (validDefinitions.length === 0) {
if (classNameBits.length === 0) {
return "";
}
const className = classNameBits.join("-o_O-");
const className = validDefinitions.map(s => s._name).join("-o_O-");
injectStyleOnce(className, `.${className}`,
validDefinitions.map(d => d._definition),
useImportant, selectorHandlers);
injectStyleOnce(
className,
`.${className}`,
definitionBits,
useImportant,
selectorHandlers
);
return className;
}

1

src/no-important.js

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

/* @flow */
// Module with the same interface as the core aphrodite module,

@@ -2,0 +3,0 @@ // except that styles injected do not automatically have !important

157

src/util.js

@@ -0,43 +1,74 @@

/* @flow */
import stringHash from 'string-hash';
import OrderedElements from './ordered-elements';
/* ::
type Pair = [ string, any ];
type Pairs = Pair[];
type PairsMapper = (pair: Pair) => Pair;
type ObjectMap = { [id:string]: any };
*/
// {K1: V1, K2: V2, ...} -> [[K1, V1], [K2, V2]]
export const objectToPairs = (obj) => Object.keys(obj).map(key => [key, obj[key]]);
export const objectToPairs = (obj /* : ObjectMap */) /* : Pairs */ => Object.keys(obj).map(key => [key, obj[key]]);
// [[K1, V1], [K2, V2]] -> {K1: V1, K2: V2, ...}
const pairsToObject = (pairs) => {
const result = {};
pairs.forEach(([key, val]) => {
result[key] = val;
});
return result;
};
export const mapObj = (
obj /* : ObjectMap */,
fn /* : PairsMapper */
) /* : ObjectMap */ => {
const keys = Object.keys(obj);
const mappedObj = {};
for (let i = 0; i < keys.length; i += 1) {
const [newKey, newValue] = fn([keys[i], obj[keys[i]]]);
mappedObj[newKey] = newValue;
}
return mappedObj;
}
export const mapObj = (obj, fn) => pairsToObject(objectToPairs(obj).map(fn))
// Flattens an array one level
// [[A], [B, C, [D]]] -> [A, B, C, [D]]
export const flatten = (list) => list.reduce((memo, x) => memo.concat(x), []);
export const flatten = (list /* : any[] */) /* : any[] */ => list.reduce((memo, x) => memo.concat(x), []);
export const flattenDeep = (list) =>
export const flattenDeep = (list /* : any[] */) /* : any[] */ =>
list.reduce((memo, x) => memo.concat(Array.isArray(x) ? flattenDeep(x) : x), []);
const UPPERCASE_RE = /([A-Z])/g;
const MS_RE = /^ms-/;
const UPPERCASE_RE_TO_KEBAB = (match /* : string */) /* : string */ => `-${match.toLowerCase()}`;
const kebabify = (string) => string.replace(UPPERCASE_RE, '-$1').toLowerCase();
export const kebabifyStyleName = (string) => kebabify(string).replace(MS_RE, '-ms-');
export const kebabifyStyleName = (string /* : string */) /* : string */ => {
const result = string.replace(UPPERCASE_RE, UPPERCASE_RE_TO_KEBAB);
if (result[0] === 'm' && result[1] === 's' && result[2] === '-') {
return `-${result}`;
}
return result;
};
export const recursiveMerge = (a, b) => {
const isPlainObject = (
x/* : ObjectMap | any */
) /* : boolean */ => typeof x === 'object' && !Array.isArray(x) && x !== null;
export const recursiveMerge = (
a /* : OrderedElements | ObjectMap | Map<string,any> | any */,
b /* : ObjectMap | Map<string,any> */
) /* : OrderedElements | any */ => {
// TODO(jlfwong): Handle malformed input where a and b are not the same
// type.
if (typeof a !== 'object') {
return b;
if (!isPlainObject(a) || !isPlainObject(b)) {
if (isPlainObject(b)) {
return OrderedElements.from(b);
} else {
return b;
}
}
const ret = {...a};
const ret = OrderedElements.from(a);
const right = OrderedElements.from(b);
Object.keys(b).forEach(key => {
if (ret.hasOwnProperty(key)) {
ret[key] = recursiveMerge(a[key], b[key]);
right.forEach((key, val) => {
if (ret.has(key)) {
ret.set(key, recursiveMerge(ret.get(key), val));
} else {
ret[key] = b[key];
ret.set(key, val)
}

@@ -120,3 +151,6 @@ });

export const stringifyValue = (key, prop) => {
export const stringifyValue = (
key /* : string */,
prop /* : any */
) /* : string */ => {
if (typeof prop === "number") {

@@ -129,55 +163,6 @@ if (isUnitlessNumber[key]) {

} else {
return prop;
return '' + prop;
}
};
/**
* JS Implementation of MurmurHash2
*
* @author <a href="mailto:gary.court@gmail.com">Gary Court</a>
* @see http://github.com/garycourt/murmurhash-js
* @author <a href="mailto:aappleby@gmail.com">Austin Appleby</a>
* @see http://sites.google.com/site/murmurhash/
*
* @param {string} str ASCII only
* @return {string} Base 36 encoded hash result
*/
function murmurhash2_32_gc(str) {
let l = str.length;
let h = l;
let i = 0;
let k;
while (l >= 4) {
k = ((str.charCodeAt(i) & 0xff)) |
((str.charCodeAt(++i) & 0xff) << 8) |
((str.charCodeAt(++i) & 0xff) << 16) |
((str.charCodeAt(++i) & 0xff) << 24);
k = (((k & 0xffff) * 0x5bd1e995) + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16));
k ^= k >>> 24;
k = (((k & 0xffff) * 0x5bd1e995) + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16));
h = (((h & 0xffff) * 0x5bd1e995) + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)) ^ k;
l -= 4;
++i;
}
/* eslint-disable no-fallthrough */ // forgive existing code
switch (l) {
case 3: h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
case 2: h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
case 1: h ^= (str.charCodeAt(i) & 0xff);
h = (((h & 0xffff) * 0x5bd1e995) + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16));
}
/* eslint-enable no-fallthrough */
h ^= h >>> 13;
h = (((h & 0xffff) * 0x5bd1e995) + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16));
h ^= h >>> 15;
return (h >>> 0).toString(36);
}
// Hash a javascript object using JSON.stringify. This is very fast, about 3

@@ -191,12 +176,16 @@ // microseconds on my computer for a sample object:

// can probably depend on this too.
export const hashObject = (object) => murmurhash2_32_gc(JSON.stringify(object));
export const hashObject = (object /* : ObjectMap */) /* : string */ => stringHash(JSON.stringify(object)).toString(36);
const IMPORTANT_RE = /^([^:]+:.*?)( !important)?;$/;
// Given a single style rule string like "a: b;", adds !important to generate
// "a: b !important;".
export const importantify = (string) =>
string.replace(
IMPORTANT_RE,
(_, base) => base + " !important;");
// Given a single style value string like the "b" from "a: b;", adds !important
// to generate "b !important".
export const importantify = (string /* : string */) /* : 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} !important`
);

88

tests/generate_test.js
import {assert} from 'chai';
import OrderedElements from '../src/ordered-elements';
import {

@@ -9,4 +10,20 @@ generateCSSRuleset, generateCSS, defaultSelectorHandlers

const assertCSSRuleset = (selector, declarations, expected) => {
const actual = generateCSSRuleset(selector, declarations);
assert.equal(actual, expected.split('\n').map(x => x.trim()).join(''));
const actual = generateCSSRuleset(
selector,
OrderedElements.from(declarations));
const expectedNormalized = expected.split('\n').map(x => x.trim()).join('');
const formatStyles = (styles) => styles.replace(/(;|{|})/g, '$1\n');
assert.equal(
actual,
expectedNormalized,
`
Expected:
${formatStyles(expectedNormalized)}
Actual:
${formatStyles(actual)}
`
);
};

@@ -38,4 +55,5 @@ it('returns a CSS string for a single property', () => {

transition: 'none'
}, '.foo{transition:none !important;'+
'-webkit-transition:none !important;' +
}, '.foo{-webkit-transition:none !important;' +
'-moz-transition:none !important;' +
'transition:none !important;' +
'}');

@@ -86,7 +104,21 @@ });

describe('generateCSS', () => {
const assertCSS = (className, styleTypes, expected, selectorHandlers,
stringHandlers, useImportant) => {
const assertCSS = (className, styleTypes, expected, selectorHandlers = [],
stringHandlers = {}, useImportant = true) => {
const actual = generateCSS(className, styleTypes, selectorHandlers,
stringHandlers, useImportant);
assert.equal(actual, expected.split('\n').map(x => x.trim()).join(''));
const expectedNormalized = expected.split('\n').map(x => x.trim()).join('');
const formatStyles = (styles) => styles.replace(/(;|{|})/g, '$1\n');
assert.equal(
actual,
expectedNormalized,
`
Expected:
${formatStyles(expectedNormalized)}
Actual:
${formatStyles(actual)}
`
);
};

@@ -159,4 +191,25 @@

display: 'flex',
}], '.foo{display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-box !important;display:-webkit-flex !important;display:flex !important;}',
defaultSelectorHandlers);
transition: 'all 0s',
alignItems: 'center',
WebkitAlignItems: 'center',
justifyContent: 'center',
}], '.foo{' +
'-webkit-box-pack:center !important;' +
'-ms-flex-pack:center !important;' +
'-webkit-box-align:center !important;' +
'-ms-flex-align:center !important;' +
'display:-webkit-box !important;' +
'display:-ms-flexbox !important;' +
'display:-webkit-flex !important;' +
'display:-moz-box !important;' +
'display:flex !important;' +
'-webkit-transition:all 0s !important;' +
'-moz-transition:all 0s !important;' +
'transition:all 0s !important;' +
'align-items:center !important;' +
'-webkit-align-items:center !important;' +
'-webkit-justify-content:center !important;' +
'justify-content:center !important;' +
'}',
defaultSelectorHandlers);
});

@@ -183,4 +236,19 @@

'transition': 'border-color 200ms linear'
}], '.foo{transition:border-color 200ms linear !important;-webkit-transition:border-color 200ms linear !important;}');
}], '.foo{' +
'-webkit-transition:border-color 200ms linear !important;' +
'-moz-transition:border-color 200ms linear !important;' +
'transition:border-color 200ms linear !important;' +
'}');
});
// TODO(emily): In the future, filter out null values.
it('handles nullish values', () => {
assertCSS('.foo', [{
'color': null,
'margin': undefined,
}], '.foo{' +
'color:null !important;' +
'margin:undefined !important;' +
'}');
});
});

2

tests/index_test.js

@@ -218,3 +218,3 @@ import asap from 'asap';

assert.equal(sheet.test._name, 'test_y60qhp');
assert.equal(sheet.test._name, 'test_j5rvvh');
});

@@ -221,0 +221,0 @@

16

tests/inject_test.js

@@ -372,7 +372,7 @@ import asap from 'asap';

assertStylesInclude('@keyframes keyframe_1ptfkz1');
assertStylesInclude('@keyframes keyframe_1kmnkfo');
assertStylesInclude('from{left:10px;}');
assertStylesInclude('50%{left:20px;}');
assertStylesInclude('to{left:40px;}');
assertStylesInclude('animation-name:keyframe_1ptfkz1');
assertStylesInclude('animation-name:keyframe_1kmnkfo');
});

@@ -410,3 +410,3 @@

assert.include(styles, '@keyframes keyframe_1ptfkz1');
assert.include(styles, '@keyframes keyframe_1kmnkfo');
assert.equal(styles.match(/@keyframes/g).length, 1);

@@ -444,5 +444,5 @@ });

assertStylesInclude('@keyframes keyframe_1q5qq7q');
assertStylesInclude('@keyframes keyframe_1sbxkmr');
assertStylesInclude('animation-name:keyframe_1q5qq7q,keyframe_1sbxkmr')
assertStylesInclude('@keyframes keyframe_1a8sduu');
assertStylesInclude('@keyframes keyframe_1wnshbu');
assertStylesInclude('animation-name:keyframe_1a8sduu,keyframe_1wnshbu')
});

@@ -470,6 +470,6 @@

assertStylesInclude('@keyframes keyframe_1q5qq7q');
assertStylesInclude('animation-name:keyframe_1q5qq7q,hoo')
assertStylesInclude('@keyframes keyframe_1a8sduu');
assertStylesInclude('animation-name:keyframe_1a8sduu,hoo')
});
});
});

126

tests/util_test.js

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

/* global Map */
import {assert} from 'chai';
import {flattenDeep, recursiveMerge} from '../src/util.js';
import {flattenDeep, kebabifyStyleName, recursiveMerge} from '../src/util.js';
import "es6-shim";
describe('Utils', () => {

@@ -23,3 +26,6 @@ describe('flattenDeep', () => {

{
a: 2,
elements: {
a: 2,
},
keyOrder: ["a"],
});

@@ -34,7 +40,119 @@

{
a: 1,
b: 2,
elements: {
a: 1,
b: 2,
},
keyOrder: ["a", "b"],
});
});
it('merges maps together', () => {
assert.deepEqual(
recursiveMerge(
new Map([['a', 1], ['b', 2]]),
new Map([['a', 3], ['c', 4]])
),
{
elements: {
a: 3,
b: 2,
c: 4,
},
keyOrder: ["a", "b", "c"],
});
});
it('merges maps and objects together', () => {
assert.deepEqual(
[
new Map([['a', 1]]),
{a: 2, b: 3},
new Map([['b', 4], ['c', 5]]),
].reduce(recursiveMerge),
{
elements: {
a: 2,
b: 4,
c: 5,
},
keyOrder: ["a", "b", "c"],
});
});
it('generates OrderedElements from merging an object into a non-object', () => {
assert.deepEqual(
recursiveMerge(
1,
{a: 1},
),
{
elements: {
a: 1,
},
keyOrder: ["a"],
});
});
it('replaces arrays rather than merging them', () => {
assert.deepEqual(
recursiveMerge({
a: [1],
}, {
a: [2],
}),
{
elements: {
a: [2],
},
keyOrder: ["a"],
});
});
it('prefers the value from the override object if either property is not a true object', () => {
assert.deepEqual(
recursiveMerge({
a: { b: 2 },
}, {
a: null,
}),
{
elements: {
a: null,
},
keyOrder: ["a"],
});
assert.deepEqual(
recursiveMerge({
a: null,
}, {
a: { b: 2 },
}),
{
elements: {
a: {
elements: {
b: 2,
},
keyOrder: ["b"],
},
},
keyOrder: ["a"],
});
});
});
describe('kebabifyStyleName', () => {
it('kebabifies camelCase', () => {
assert.equal(kebabifyStyleName('fooBarBaz'), 'foo-bar-baz');
});
it('kebabifies PascalCase', () => {
assert.equal(kebabifyStyleName('FooBarBaz'), '-foo-bar-baz');
});
it('does not force -webkit-', () => {
assert.equal(kebabifyStyleName('webkitFooBarBaz'), 'webkit-foo-bar-baz');
});
it('forces -ms-', () => {
assert.equal(kebabifyStyleName('msFooBarBaz'), '-ms-foo-bar-baz');
});
});
});
.nyc_output/22718.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