use-styled-system
Version:
React hook to implement styled-system functionality within styled-jsx
2 lines (1 loc) • 7.16 kB
JavaScript
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("autoprefixer"),require("postcss-js")):"function"==typeof define&&define.amd?define(["exports","react","autoprefixer","postcss-js"],r):r((e=e||self).useStyledSystem={},e.react,e.autoprefixer,e.postcssJs)}(this,function(e,r,t,o){var i="default"in r?r.default:r;function n(){return(n=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}function a(e,r){if(null==e)return{};var t,o,i={},n=Object.keys(e);for(o=0;o<n.length;o++)r.indexOf(t=n[o])>=0||(i[t]=e[t]);return i}t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t,o=o&&Object.prototype.hasOwnProperty.call(o,"default")?o.default:o;var d={border:"space",borderWidth:"space",borderColor:"",borderStyle:"",borderRadius:"space",borderTop:"space",borderTopWidth:"space",borderTopColor:"",borderTopStyle:"",borderTopLeftRadius:"space",borderTopRightRadius:"space",borderBottom:"space",borderBottomWidth:"space",borderBottomColor:"",borderBottomStyle:"",borderBottomLeftRadius:"space",borderBottomRightRadius:"space",borderLeft:"space",borderLeftWidth:"space",borderLeftColor:"",borderLeftStyle:"",borderRight:"space",borderRightWidth:"space",borderRightColor:"",borderRightStyle:"",borderX:["borderLeft","borderRight"],borderXWidth:["borderLeftWidth","borderRightWidth"],borderXColor:["borderLeftColor","borderRightColor"],borderXStyle:["borderLeftStyle","borderRightStyle"],borderY:["borderTop","borderBottom"],borderYWidth:["borderTopWidth","borderBottomWidth"],borderYColor:["borderTopColor","borderBottomColor"],borderYStyle:["borderTopStyle","borderBottomStyle"]},s={color:"",background:"",bg:["background"],opacity:"",backgroundAttachment:"",backgroundClip:["","-webkit-background-clip"],"-webkit-background-clip":"",backgroundColor:"",backgroundImage:"",backgroundOrigin:"",backgroundPositionX:"space",backgroundPositionY:"space",backgroundSize:"space",backdropFilter:["","-webkit-backdropFilter"],"-webkit-backdropFilter":"",boxShadow:"",outline:"",outlineColor:"",outlineOffset:"space",outlineStyle:"",outlineWidth:"space",visibility:""},p={justifyContent:"",justify:["justifyContent"],alignItems:"",align:["alignItems"],alignContent:"",flexDirection:"",direction:["flexDirection"],flex:"",flexWrap:"",wrap:["flexWrap"],flexBasis:"",flexGrow:"",flexShrink:"",alignSelf:"",justifySelf:"",order:""},c={gridGap:"space",gridRowGap:"space",gridColumnGap:"space",gridColumn:"",gridRow:"",gridArea:"",gridAutoFlow:"",gridAutoRows:"",gridAutoColumns:"",gridTemplateRows:"",gridTemplateColumns:"",gridTemplateAreas:""},u={margin:"space",marginTop:"space",marginRight:"space",marginBottom:"space",marginLeft:"space",marginX:["marginLeft","marginRight"],marginY:["marginTop","marginBottom"],m:["margin"],mt:["marginTop"],mr:["marginRight"],mb:["marginBottom"],ml:["marginLeft"],mx:["marginLeft","marginRight"],my:["marginTop","marginBottom"]},f={fill:"",stroke:"",transition:"",transform:"",cursor:"",resize:"",objectFit:"",userSelect:"",appearance:"",pointerEvents:""},g={padding:"space",paddingTop:"space",paddingRight:"space",paddingBottom:"space",paddingLeft:"space",paddingX:["paddingLeft","paddingRight"],paddingY:["paddingTop","paddingBottom"],p:["padding"],pt:["paddingTop"],pr:["paddingRight"],pb:["paddingBottom"],pl:["paddingLeft"],px:["paddingLeft","paddingRight"],py:["paddingTop","paddingBottom"]},l={position:"",top:"space",right:"space",bottom:"space",left:"space",overflowX:"",overflowY:"",zIndex:""},m={display:"",d:["display"],width:"space",w:["width"],height:"space",h:["height"],size:["width","height"],minWidth:"space",maxWidth:"space",minHeight:"space",maxHeight:"space",minW:["minWidth"],maxW:["maxWidth"],minH:["minHeight"],maxH:["maxHeight"],verticalAlign:""},b={fontFamily:"",fontSize:"fontSize",fontWeight:"",lineHeight:"",letterSpacing:"",textAlign:"",fontStyle:"",textDecoration:"",textTransform:"",whiteSpace:"",wordWrap:"",wordBreak:""},h=function(e,r){return void 0===r&&(r=Object.keys(n({},g,u,m,l,p,c,d,s,b,f))),Object.keys(e).reduce(function(t,o){var i,a,d=t.cssProps,s=t.nonCssProps;return r.includes(o)?{cssProps:n({},d,(a={},a[o]=e[o],a)),nonCssProps:n({},s)}:{cssProps:n({},d),nonCssProps:n({},s,(i={},i[o]=e[o],i))}},{cssProps:{},nonCssProps:{}})},y=function(e,r){var i,y=r.remBase,S=r.fontSizes,x=r.spaceSizes,w=r.breakPointIndex,k=a(r,["remBase","fontSizes","spaceSizes","breakPointIndex"]);(function(e){for(var r in e)return!1;return!0})(k)&&(i=n({},g,u,m,l,p,c,d,s,b,f)),i=Object.entries(k).reduce(function(e,r){var t=r[0];return r[1]?("Padding"===t&&(e=n({},e,g)),"Margin"===t&&(e=n({},e,u)),"Size"===t&&(e=n({},e,m)),"Space"===t&&(e=n({},e,g,u,m)),"Position"===t&&(e=n({},e,l)),"Flex"===t&&(e=n({},e,p)),"Grid"===t&&(e=n({},e,c)),"Layout"===t&&(e=n({},e,l,p,c)),"Border"===t&&(e=n({},e,d)),"Color"===t&&(e=n({},e,s)),"Typography"===t&&(e=n({},e,b)),"Decor"===t&&(e=n({},e,d,s,b)),"other"===t&&(e=n({},e,f)),"All"===t&&(e=n({},e,g,u,m,l,p,c,d,s,b,f)),e):e},{});var v=h(e,Object.keys(i)),C=function(e){return e.toString().replace(/^--.+/,function(e){return"var("+e+")"})},B=function(e,r){return e.replace(/([A-Z])/g,function(e){return"-"+e.toLowerCase()})+": "+function(e,r){var t="";return""===i[e]?C(r):(t=Array.isArray(i[e])?i[e][0]:i[e],"number"==typeof r&&r>=0&&r<=S.length&&"fontSize"===t?S[r]/y+"rem":"number"==typeof r&&r>=0&&r<=x.length&&"space"===t?x[r]/y+"rem":"number"==typeof r&&r>8?r/y+"rem":"string"==typeof r&&r.match(/(px)$/)?+r.replace("px","")/y+"rem":C(r))}(e,r)+";\n"},R=function(e,r){return Array.isArray(i[e])?i[e].map(function(t){return B(""===t||"space"===t||"fontSize"===t?e:t,r)}).join(""):(o.sync([t]),B(e,r))};return Object.entries(v.cssProps).reduce(function(e,r){var t=r[0],o=r[1];return Array.isArray(o)&&"undefined"!=typeof window?e.push(R(t,o[w]||0===o[w]?o[w]:o[o.length-1])):e.push(R(t,Array.isArray(o)?o[0]:o)),e},[]).join("")},S=i.createContext(0);e.BreakpointContext=S,e.BreakpointProvider=function(e){var t=e.children,o=e.breakPoints,n=r.useState(0),a=n[0],d=n[1];return r.useEffect(function(){var e=[],r=!1,t=function(){var r=o.reduce(function(r,t,o){return e[o]&&e[o].matches?o:r},0);d(r)};if(window&&window.matchMedia){var i=0;o.forEach(function(r,t){e.push(window.matchMedia("screen and (min-width: "+r+"px)"+(o[t+1]?" and (max-width: "+(o[t+1]-1)+"px":""))),i=e[t].matches?t:i}),d(i),r=!0,o.forEach(function(r,o){e[o].addListener(t)})}return function(){r&&o.forEach(function(r,o){e[o].removeListener(t)})}},[o]),i.createElement(S.Provider,{value:a},t)},e.useStyledSystem=function(e,t){var o=t.remBase,d=void 0===o?10:o,s=t.fontSizes,p=void 0===s?[12,14,16,20,24,32,48,64,72]:s,c=t.spaceSizes,u=void 0===c?[0,4,8,16,32,64,128,256,512]:c,f=a(t,["remBase","fontSizes","spaceSizes"]),g=i.useContext(S),l=h(e),m=l.cssProps,b=l.nonCssProps,x=r.useState(""),w=x[0],k=x[1];return r.useEffect(function(){k(y(m,n({remBase:d,fontSizes:p,spaceSizes:u,breakPointIndex:g},f)))},[g,f,m,p,d,u]),{styleJsx:w||y(e,n({remBase:d,fontSizes:p,spaceSizes:u,breakPointIndex:g},f)),nonCssProps:b}}});