use-styled-system/dist/use-styled-system.modern.js

React hook to implement styled-system functionality within styled-jsx

import e,{useState as r,useEffect as o}from"react";import t from"autoprefixer";import i from"postcss-js";const a={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"]},n={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:""},d={justifyContent:"",justify:["justifyContent"],alignItems:"",align:["alignItems"],alignContent:"",flexDirection:"",direction:["flexDirection"],flex:"",flexWrap:"",wrap:["flexWrap"],flexBasis:"",flexGrow:"",flexShrink:"",alignSelf:"",justifySelf:"",order:""},s={gridGap:"space",gridRowGap:"space",gridColumnGap:"space",gridColumn:"",gridRow:"",gridArea:"",gridAutoFlow:"",gridAutoRows:"",gridAutoColumns:"",gridTemplateRows:"",gridTemplateColumns:"",gridTemplateAreas:""},p={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"]},c={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"]},m={position:"",top:"space",right:"space",bottom:"space",left:"space",overflowX:"",overflowY:"",zIndex:""},l={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=(e,r=Object.keys({...g,...p,...l,...m,...d,...s,...a,...n,...b,...c}))=>Object.keys(e).reduce(({cssProps:o,nonCssProps:t},i)=>r.includes(i)?{cssProps:{...o,[i]:e[i]},nonCssProps:{...t}}:{cssProps:{...o},nonCssProps:{...t,[i]:e[i]}},{cssProps:{},nonCssProps:{}}),f=(e,{remBase:r,fontSizes:o,spaceSizes:f,breakPointIndex:u,...y})=>{let S;(function(e){for(const r in e)return!1;return!0})(y)&&(S={...g,...p,...l,...m,...d,...s,...a,...n,...b,...c}),S=Object.entries(y).reduce((e,[r,o])=>o?("Padding"===r&&(e={...e,...g}),"Margin"===r&&(e={...e,...p}),"Size"===r&&(e={...e,...l}),"Space"===r&&(e={...e,...g,...p,...l}),"Position"===r&&(e={...e,...m}),"Flex"===r&&(e={...e,...d}),"Grid"===r&&(e={...e,...s}),"Layout"===r&&(e={...e,...m,...d,...s}),"Border"===r&&(e={...e,...a}),"Color"===r&&(e={...e,...n}),"Typography"===r&&(e={...e,...b}),"Decor"===r&&(e={...e,...a,...n,...b}),"other"===r&&(e={...e,...c}),"All"===r&&(e={...e,...g,...p,...l,...m,...d,...s,...a,...n,...b,...c}),e):e,{});const{cssProps:x}=h(e,Object.keys(S)),w=e=>e.toString().replace(/^--.+/,e=>`var(${e})`),C=(e,t)=>`${e.replace(/([A-Z])/g,e=>"-"+e.toLowerCase())}: ${((e,t)=>{let i="";return""===S[e]?w(t):(Array.isArray(S[e])?[i]=S[e]:i=S[e],"number"==typeof t&&t>=0&&t<=o.length&&"fontSize"===i?o[t]/r+"rem":"number"==typeof t&&t>=0&&t<=f.length&&"space"===i?f[t]/r+"rem":"number"==typeof t&&t>8?t/r+"rem":"string"==typeof t&&t.match(/(px)$/)?+t.replace("px","")/r+"rem":w(t))})(e,t)};\n`,k=(e,r)=>Array.isArray(S[e])?S[e].map(o=>C(""===o||"space"===o||"fontSize"===o?e:o,r)).join(""):(i.sync([t]),C(e,r));return Object.entries(x).reduce((e,[r,o])=>(Array.isArray(o)&&"undefined"!=typeof window?e.push(k(r,o[u]||0===o[u]?o[u]:o[o.length-1])):e.push(k(r,Array.isArray(o)?o[0]:o)),e),[]).join("")},u=e.createContext(0),y=({children:t,breakPoints:i})=>{const[a,n]=r(0);return o(()=>{const e=[];let r=!1;const o=()=>{const r=i.reduce((r,o,t)=>e[t]&&e[t].matches?t:r,0);n(r)};if(window&&window.matchMedia){let t=0;i.forEach((r,o)=>{e.push(window.matchMedia(`screen and (min-width: ${r}px)${i[o+1]?` and (max-width: ${i[o+1]-1}px`:""}`)),t=e[o].matches?o:t}),n(t),r=!0,i.forEach((r,t)=>{e[t].addListener(o)})}return()=>{r&&i.forEach((r,t)=>{e[t].removeListener(o)})}},[i]),e.createElement(u.Provider,{value:a},t)},S=(t,{remBase:i=10,fontSizes:a=[12,14,16,20,24,32,48,64,72],spaceSizes:n=[0,4,8,16,32,64,128,256,512],...d})=>{const s=e.useContext(u),{cssProps:p,nonCssProps:c}=h(t),[g,m]=r("");return o(()=>{m(f(p,{remBase:i,fontSizes:a,spaceSizes:n,breakPointIndex:s,...d}))},[s,d,p,a,i,n]),{styleJsx:g||f(t,{remBase:i,fontSizes:a,spaceSizes:n,breakPointIndex:s,...d}),nonCssProps:c}};export{u as BreakpointContext,y as BreakpointProvider,S as useStyledSystem};