use-styled-system
Version:
React hook to implement styled-system functionality within styled-jsx
2 lines (1 loc) • 6.84 kB
JavaScript
function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var r=require("react"),t=e(r),o=e(require("autoprefixer")),i=e(require("postcss-js"));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}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:""},g={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"]},u={fill:"",stroke:"",transition:"",transform:"",cursor:"",resize:"",objectFit:"",userSelect:"",appearance:"",pointerEvents:""},f={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({},f,g,m,l,p,c,d,s,b,u))),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 t,y=r.remBase,S=r.fontSizes,x=r.spaceSizes,k=r.breakPointIndex,w=a(r,["remBase","fontSizes","spaceSizes","breakPointIndex"]);(function(e){for(var r in e)return!1;return!0})(w)&&(t=n({},f,g,m,l,p,c,d,s,b,u)),t=Object.entries(w).reduce(function(e,r){var t=r[0];return r[1]?("Padding"===t&&(e=n({},e,f)),"Margin"===t&&(e=n({},e,g)),"Size"===t&&(e=n({},e,m)),"Space"===t&&(e=n({},e,f,g,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,u)),"All"===t&&(e=n({},e,f,g,m,l,p,c,d,s,b,u)),e):e},{});var v=h(e,Object.keys(t)),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 o="";return""===t[e]?C(r):(o=Array.isArray(t[e])?t[e][0]:t[e],"number"==typeof r&&r>=0&&r<=S.length&&"fontSize"===o?S[r]/y+"rem":"number"==typeof r&&r>=0&&r<=x.length&&"space"===o?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(t[e])?t[e].map(function(t){return B(""===t||"space"===t||"fontSize"===t?e:t,r)}).join(""):(i.sync([o]),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[k]||0===o[k]?o[k]:o[o.length-1])):e.push(R(t,Array.isArray(o)?o[0]:o)),e},[]).join("")},S=t.createContext(0);exports.BreakpointContext=S,exports.BreakpointProvider=function(e){var o=e.children,i=e.breakPoints,n=r.useState(0),a=n[0],d=n[1];return r.useEffect(function(){var e=[],r=!1,t=function(){var r=i.reduce(function(r,t,o){return e[o]&&e[o].matches?o:r},0);d(r)};if(window&&window.matchMedia){var o=0;i.forEach(function(r,t){e.push(window.matchMedia("screen and (min-width: "+r+"px)"+(i[t+1]?" and (max-width: "+(i[t+1]-1)+"px":""))),o=e[t].matches?t:o}),d(o),r=!0,i.forEach(function(r,o){e[o].addListener(t)})}return function(){r&&i.forEach(function(r,o){e[o].removeListener(t)})}},[i]),t.createElement(S.Provider,{value:a},o)},exports.useStyledSystem=function(e,o){var i=o.remBase,d=void 0===i?10:i,s=o.fontSizes,p=void 0===s?[12,14,16,20,24,32,48,64,72]:s,c=o.spaceSizes,g=void 0===c?[0,4,8,16,32,64,128,256,512]:c,u=a(o,["remBase","fontSizes","spaceSizes"]),f=t.useContext(S),l=h(e),m=l.cssProps,b=l.nonCssProps,x=r.useState(""),k=x[0],w=x[1];return r.useEffect(function(){w(y(m,n({remBase:d,fontSizes:p,spaceSizes:g,breakPointIndex:f},u)))},[f,u,m,p,d,g]),{styleJsx:k||y(e,n({remBase:d,fontSizes:p,spaceSizes:g,breakPointIndex:f},u)),nonCssProps:b}};