system-props - npm Package Compare versions

Comparing version 0.11.0 to 0.12.0

dist/system-props.cjs.development.js

@@ -1171,3 +1171,3 @@ 'use strict';
 
-var allProps = /*#__PURE__*/_extends({}, pseudoSelectors, background, border, color, grid, flexbox, layout, position, shadow, space);
+var allProps = /*#__PURE__*/_extends({}, pseudoSelectors, background, border, color, grid, flexbox, layout, position, shadow, space, typography);
 
@@ -1177,2 +1177,5 @@ var propNames = /*#__PURE__*/Object.keys(allProps);
 var allPropNames = /*#__PURE__*/new Set(propNames);
+console.log({
+  allPropNames: allPropNames
+});
 var shouldForwardProp = function shouldForwardProp(prop) {
@@ -1179,0 +1182,0 @@ return !allPropNames.has(prop);

dist/system-props.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=function(r,e,o){if(!r)return o;for(var t="string"==typeof e?e.split("."):[e],a=r,i=0;i<t.length;i++){var s=t[i];a=!a||"number"!=typeof s&&"string"!=typeof s?void 0:a[s]}return void 0===a?o:a},e=function(e,o,t){var a=r(e,o);return!a&&"string"==typeof o&&o.startsWith("$")&&(a=r(e,o.slice(1))),void 0===a?t:a},o=function(r){var e=new WeakMap;return function(o,t,a){if(void 0===o)return r(o,t,a);e.has(o)||e.set(o,new Map);var i=e.get(o);if(i.has(t))return i.get(t);var s=r(o,t,a);return i.set(t,s),s}}(e);function t(){return(t=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&(r[t]=o[t])}return r}).apply(this,arguments)}var a=function(r,e,t,a){return o(e,r,!0===a?void 0:r)},i=function(r){var e=r.transform,o=void 0===e?a:e,t=r.properties||[r.property],i=function(r,e,a,i){var s,n={};return null===(s=o(r,e,a,i.strict))||t.forEach((function(r){r&&(n[r]=s)})),n};return Object.assign(i,{scale:r.scale,defaultScale:r.defaultScale}),i},s=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"}),n=function(r){var e={};return Object.keys(r).sort((function(r,e){return s.compare(r,e)})).forEach((function(o){e[o]=r[o]})),e};function p(r,e){return t({},r,e)}var d=function(r,e){var o=p(r,e);for(var t in r){var a;r[t]&&"object"==typeof e[t]&&(o=p(o,((a={})[t]=p(r[t],e[t]),a)))}return o},l={_hover:"&:hover",_focus:"&:focus",_focusWithin:"&:focus-within",_focusVisible:"&:focus-visible",_active:"&:active",_visited:"&:visited",_selection:"&::selection",_before:"&::before",_after:"&::after",_placeholder:"&::placeholder",_hoverAndFocus:"&:hover, &:focus",_disabled:"[disabled], [disabled]:hover, [disabled]:focus, [aria-disabled], [aria-disabled]:hover, [aria-disabled]:focus",_readOnly:"[readOnly]",_first:"&:first-child",_last:"&:last-child",_notFirst:"&:not(:first-of-type)",_notLast:"&:not(:last-of-type)",_checked:"&[aria-checked=true], &[checked]",_odd:"&:nth-of-type(odd)",_even:"&:nth-of-type(even)"},c=function(r){return"@media screen and (min-width: "+r+")"},f={background:!0,backgroundImage:!0,backgroundSize:!0,backgroundPosition:!0,backgroundRepeat:!0};f.bgImage=f.backgroundImage,f.bgSize=f.backgroundSize,f.bgPosition=f.backgroundPosition,f.bgRepeat=f.backgroundRepeat;var u,h="",g=0,m=[[]],y=function(r){if(b(),m=[[]],!r)return m;for(var e=r.length,o=0;o<e;o++){var t=r[o];switch(t){case" ":1===u?v():u&&(h+=t);break;case",":g?h+=t:(v(),m[m.length]=[],b());break;case'"':h+=t,g||u?1===g&&2===u&&(g=0,v()):(u=2,g=1);break;case"(":g||(u=3),g++,h+=t;break;case")":h+=t,g--,3!==u||g||v();break;case"[":g||(u=4),h+=t,g++;break;case"]":h+=t,--g||v();break;default:u||(u=1),h+=t}}return h&&v(),m};function b(){g=u=0,h=""}function v(){u&&m[m.length-1].push(h),b()}var R=function(r,e,t,a){var i,s,n,p;if("string"!=typeof r)return r;var d=o((null==t||null==(i=t.theme)?void 0:i.borders)||e,r);if(d)return d;var l=y(r)[0],c=l[0],f=l[1],u=l[2];return[o(null==t||null==(s=t.theme)?void 0:s.borderWidths,c,a?void 0:c),o(null==t||null==(n=t.theme)?void 0:n.borderStyles,f,a?void 0:f),o(null==t||null==(p=t.theme)?void 0:p.colors,u,a?void 0:u)].filter(Boolean).join(" ")},x={border:{property:"border",scale:"borders",transform:R},borderWidth:{property:"borderWidth",scale:"borderWidths"},borderStyle:{property:"borderStyle",scale:"borderStyles"},borderColor:{property:"borderColor",scale:"colors"},borderRadius:{property:"borderRadius",scale:"radii"},borderTop:{property:"borderTop",scale:"borders",transform:R},borderTopLeftRadius:{property:"borderTopLeftRadius",scale:"radii"},borderTopRightRadius:{property:"borderTopRightRadius",scale:"radii"},borderRight:{property:"borderRight",scale:"borders",transform:R},borderBottom:{property:"borderBottom",scale:"borders",transform:R},borderBottomLeftRadius:{property:"borderBottomLeftRadius",scale:"radii"},borderBottomRightRadius:{property:"borderBottomRightRadius",scale:"radii"},borderLeft:{property:"borderLeft",scale:"borders",transform:R},borderX:{properties:["borderLeft","borderRight"],scale:"borders",transform:R},borderY:{properties:["borderTop","borderBottom"],scale:"borders",transform:R},borderTopWidth:{property:"borderTopWidth",scale:"borderWidths"},borderTopColor:{property:"borderTopColor",scale:"colors"},borderTopStyle:{property:"borderTopStyle",scale:"borderStyles"}};x.borderTopLeftRadius={property:"borderTopLeftRadius",scale:"radii"},x.borderTopRightRadius={property:"borderTopRightRadius",scale:"radii"},x.borderBottomWidth={property:"borderBottomWidth",scale:"borderWidths"},x.borderBottomColor={property:"borderBottomColor",scale:"colors"},x.borderBottomStyle={property:"borderBottomStyle",scale:"borderStyles"},x.borderBottomLeftRadius={property:"borderBottomLeftRadius",scale:"radii"},x.borderBottomRightRadius={property:"borderBottomRightRadius",scale:"radii"},x.borderLeftWidth={property:"borderLeftWidth",scale:"borderWidths"},x.borderLeftColor={property:"borderLeftColor",scale:"colors"},x.borderLeftStyle={property:"borderLeftStyle",scale:"borderStyles"},x.borderRightWidth={property:"borderRightWidth",scale:"borderWidths"},x.borderRightColor={property:"borderRightColor",scale:"colors"},x.borderRightStyle={property:"borderRightStyle",scale:"borderStyles"};var k=x,w={color:{property:"color",scale:"colors"},backgroundColor:{property:"backgroundColor",scale:"colors"},fill:{property:"fill",scale:"colors"},stroke:{property:"stroke",scale:"colors"},opacity:!0};w.bg=w.backgroundColor,w.textColor=w.color;var S={alignItems:!0,alignContent:!0,justifyItems:!0,justifyContent:!0,flexWrap:!0,flexDirection:!0,flex:!0,flexGrow:!0,flexShrink:!0,flexBasis:!0,justifySelf:!0,alignSelf:!0,order:!0},W={gap:{property:"gap",scale:"space"},gridGap:{property:"gridGap",scale:"space"},gridColumnGap:{property:"gridColumnGap",scale:"space"},gridRowGap:{property:"gridRowGap",scale:"space"},gridColumn:!0,gridRow:!0,gridAutoFlow:!0,gridAutoColumns:!0,gridAutoRows:!0,gridTemplateColumns:!0,gridTemplateRows:!0,gridTemplateAreas:!0,gridArea:!0},T={width:{property:"width",scale:"sizes"},height:{property:"height",scale:"sizes"},minWidth:{property:"minWidth",scale:"sizes"},minHeight:{property:"minHeight",scale:"sizes"},maxWidth:{property:"maxWidth",scale:"sizes"},maxHeight:{property:"maxHeight",scale:"sizes"},size:{properties:["width","height"],scale:"sizes"},overflow:!0,overflowX:!0,overflowY:!0,display:!0,verticalAlign:!0},B=function(r){return"number"==typeof r&&!isNaN(r)},C=function(r,o,t,a){if(!B(r)){if("string"==typeof r&&r.startsWith("-")){var i=r.slice(1),s=e(o,i,i);return B(s)?-1*s:"-"+s}return e(o,r,a?void 0:r)}var n=r<0,p=Math.abs(r),d=e(o,p,a?void 0:p);return B(d)?d*(n?-1:1):null!=d?n?"-"+d:d:void 0},L={position:!0,zIndex:{property:"zIndex",scale:"zIndices"},top:{property:"top",scale:"space",transform:C},right:{property:"right",scale:"space",transform:C},bottom:{property:"bottom",scale:"space",transform:C},left:{property:"left",scale:"space",transform:C}},_=function(r,e,t){var a;return o(null==t||null==(a=t.theme)?void 0:a.shadows,r)||("string"==typeof r?y(r).map((function(r){return r.map((function(r){var e;return o(null==t||null==(e=t.theme)?void 0:e.colors,r,r)})).join(" ")})).join(", "):r)},z={boxShadow:{property:"boxShadow",scale:"shadows",transform:_},textShadow:{property:"textShadow",scale:"shadows",transform:_}},j=function(r,e,o,t){if("number"==typeof r){var a,i=C(r,null==o||null==(a=o.theme)?void 0:a.space,0,t);if(i)return i}if("string"==typeof r){var s,n=r.split(" ");return 1===n.length?C(r,null==o||null==(s=o.theme)?void 0:s.space,0,t):n.reduce((function(r,e){var a,i=C(e,null==o||null==(a=o.theme)?void 0:a.space,0,t);return"number"==typeof i&&(i+="px"),[].concat(r,[i])}),[]).filter(Boolean).join(" ")}return r},O=function(r,e,t,a){if("number"==typeof r){var i,s=o(null==t||null==(i=t.theme)?void 0:i.space,r);if(s)return s}var n;return"string"==typeof r?1===r.split(" ").length?o(null==t||null==(n=t.theme)?void 0:n.space,r,a?void 0:r):r.split(" ").reduce((function(r,e){var i,s=o(null==t||null==(i=t.theme)?void 0:i.space,e,a?void 0:e);return"number"==typeof s&&(s+="px"),[].concat(r,[s])}),[]).filter(Boolean).join(" "):r},A={margin:{property:"margin",scale:"space",transform:j},marginTop:{property:"marginTop",scale:"space",transform:j},marginRight:{property:"marginRight",scale:"space",transform:j},marginBottom:{property:"marginBottom",scale:"space",transform:j},marginLeft:{property:"marginLeft",scale:"space",transform:j},marginX:{properties:["marginLeft","marginRight"],scale:"space",transform:j},marginY:{properties:["marginTop","marginBottom"],scale:"space",transform:j}};A.m=A.margin,A.mt=A.marginTop,A.mr=A.marginRight,A.mb=A.marginBottom,A.ml=A.marginLeft,A.mx=A.marginX,A.my=A.marginY;var H={padding:{property:"padding",scale:"space",transform:O},paddingTop:{property:"paddingTop",scale:"space",transform:O},paddingRight:{property:"paddingRight",scale:"space",transform:O},paddingBottom:{property:"paddingBottom",scale:"space",transform:O},paddingLeft:{property:"paddingLeft",scale:"space",transform:O},paddingX:{properties:["paddingLeft","paddingRight"],scale:"space",transform:O},paddingY:{properties:["paddingTop","paddingBottom"],scale:"space",transform:O}};H.p=H.padding,H.pt=H.paddingTop,H.pr=H.paddingRight,H.pb=H.paddingBottom,H.pl=H.paddingLeft,H.px=H.paddingX,H.py=H.paddingY;var I=t({},H,A),P={width:{property:"width",scale:"sizes",transform:function(r,o){var t,a=r;return"number"!=typeof(t=r)||isNaN(t)||(a=r>1?r:100*r+"%"),e(o,r,a)}},height:{property:"height",scale:"sizes"},minWidth:{property:"minWidth",scale:"sizes"},minHeight:{property:"minHeight",scale:"sizes"},maxWidth:{property:"maxWidth",scale:"sizes"},maxHeight:{property:"maxHeight",scale:"sizes"},size:{properties:["width","height"],scale:"sizes"},overflow:!0,overflowX:!0,overflowY:!0,display:!0,verticalAlign:!0},G=Object.keys(t({},l,f,k,w,W,S,T,L,z,I)),X=new Set(G);exports.background=f,exports.border=k,exports.borderShorthandTransform=R,exports.color=w,exports.createSystem=function(r){var e=void 0===r?{}:r,a=e.strict,s=void 0!==a&&a,p=e.pseudoSelectors,f=void 0===p?l:p;return function(r){var e={};return Object.keys(r).forEach((function(o){var t=r[o];!0!==t?"function"!=typeof t&&(e[o]=i(t)):e[o]=i({property:o,scale:o})})),function r(e,a,i){void 0===a&&(a={}),void 0===i&&(i=!1);var s={strict:i,key:"__systemprops__"},p=function(r){var i,p={},l=!1,f=!1;void 0!==(null==(i=r.theme)?void 0:i.systemPropsCacheKey)&&r.theme.systemPropsCacheKey!==s.key&&(s.key=r.theme.systemPropsCacheKey,f=!0);var u=function(a,i){var n,p,d=e[i],u=a[i],h=o(r.theme,d.scale);if("function"==typeof u&&(u=u(r.theme)),"object"==typeof u){var g;if(s.breakpoints=!f&&s.breakpoints||(null==r||null==(g=r.theme)?void 0:g.breakpoints),Array.isArray(u)){if(void 0===s.breakpoints)throw new Error("The system props parser could not find a `breakpoints` property in the theme object, which is required for responsive styles to work. Make sure that the theme object has a breakpoints property.");return s.media=!f&&s.media||[null].concat((p=n=s.breakpoints,Array.isArray(n)||(p=Object.values(n)),p.map(c))),function(r){var e=r.cache,o=r.systemConfig,a=r.scale,i=r.props,s={},n=e.media;return r.propValue.slice(0,n.length).forEach((function(r,p){var d,l="function"==typeof r?r(i.theme):r,c=n[p],f=o(l,a,i,e);s=t({},s,c?((d={})[c]=t({},s[c],f),d):f)})),s}({cache:s,systemConfig:d,scale:h,propValue:u,props:a})}if(null!==u)return l=!0,function(r){var e=r.cache,o=r.systemConfig,a=r.scale,i=r.propValue,s=r.props,n=e.breakpoints,p={};for(var d in i){var l=n[d],c=i[d],f=o("function"==typeof c?c(s.theme):c,a,s,e);if(l){var u,h="@media screen and (min-width: "+l+")";p=t({},p,((u={})[h]=t({},p[h],f),u))}else p=t({},p,f)}return p}({cache:s,systemConfig:d,scale:h,propValue:u,props:a})}return d(u,h,r,s)};for(var h in r)if(a[h]){var g=a[h],m=r[h];for(var y in m)p[g]=t({},p[g],u(m,y)),l&&(p[a[h]]=n(p[a[h]]),l=!1)}else e[h]&&(p=d(p,u(r,h)));return l&&(p=n(p)),p};p.config=e,p.propNames=Object.keys(e),p.cache=s;var l=Object.keys(e).filter((function(r){return"config"!==r}));return l.length>1&&l.forEach((function(o){var t,a;Object.assign(p,((a={})[o]=r(((t={})[o]=e[o],t)),a))})),p}(e,f,s)}},exports.flexbox=S,exports.get=e,exports.getShadow=_,exports.grid=W,exports.layout=T,exports.margin=A,exports.padding=H,exports.position=L,exports.propNames=G,exports.pseudoSelectors=l,exports.shadow=z,exports.shouldForwardProp=function(r){return!X.has(r)},exports.space=I,exports.styledSystemLayout=P,exports.typography={fontFamily:{property:"fontFamily",scale:"fonts"},fontSize:{property:"fontSize",scale:"fontSizes"},fontWeight:{property:"fontWeight",scale:"fontWeights"},lineHeight:{property:"lineHeight",scale:"lineHeights"},letterSpacing:{property:"letterSpacing",scale:"letterSpacings"},textAlign:!0,fontStyle:!0};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=function(r,e,o){if(!r)return o;for(var t="string"==typeof e?e.split("."):[e],a=r,i=0;i<t.length;i++){var s=t[i];a=!a||"number"!=typeof s&&"string"!=typeof s?void 0:a[s]}return void 0===a?o:a},e=function(e,o,t){var a=r(e,o);return!a&&"string"==typeof o&&o.startsWith("$")&&(a=r(e,o.slice(1))),void 0===a?t:a},o=function(r){var e=new WeakMap;return function(o,t,a){if(void 0===o)return r(o,t,a);e.has(o)||e.set(o,new Map);var i=e.get(o);if(i.has(t))return i.get(t);var s=r(o,t,a);return i.set(t,s),s}}(e);function t(){return(t=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&(r[t]=o[t])}return r}).apply(this,arguments)}var a=function(r,e,t,a){return o(e,r,!0===a?void 0:r)},i=function(r){var e=r.transform,o=void 0===e?a:e,t=r.properties||[r.property],i=function(r,e,a,i){var s,n={};return null===(s=o(r,e,a,i.strict))||t.forEach((function(r){r&&(n[r]=s)})),n};return Object.assign(i,{scale:r.scale,defaultScale:r.defaultScale}),i},s=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"}),n=function(r){var e={};return Object.keys(r).sort((function(r,e){return s.compare(r,e)})).forEach((function(o){e[o]=r[o]})),e};function p(r,e){return t({},r,e)}var d=function(r,e){var o=p(r,e);for(var t in r){var a;r[t]&&"object"==typeof e[t]&&(o=p(o,((a={})[t]=p(r[t],e[t]),a)))}return o},l={_hover:"&:hover",_focus:"&:focus",_focusWithin:"&:focus-within",_focusVisible:"&:focus-visible",_active:"&:active",_visited:"&:visited",_selection:"&::selection",_before:"&::before",_after:"&::after",_placeholder:"&::placeholder",_hoverAndFocus:"&:hover, &:focus",_disabled:"[disabled], [disabled]:hover, [disabled]:focus, [aria-disabled], [aria-disabled]:hover, [aria-disabled]:focus",_readOnly:"[readOnly]",_first:"&:first-child",_last:"&:last-child",_notFirst:"&:not(:first-of-type)",_notLast:"&:not(:last-of-type)",_checked:"&[aria-checked=true], &[checked]",_odd:"&:nth-of-type(odd)",_even:"&:nth-of-type(even)"},c=function(r){return"@media screen and (min-width: "+r+")"},f={background:!0,backgroundImage:!0,backgroundSize:!0,backgroundPosition:!0,backgroundRepeat:!0};f.bgImage=f.backgroundImage,f.bgSize=f.backgroundSize,f.bgPosition=f.backgroundPosition,f.bgRepeat=f.backgroundRepeat;var u,h="",g=0,m=[[]],y=function(r){if(b(),m=[[]],!r)return m;for(var e=r.length,o=0;o<e;o++){var t=r[o];switch(t){case" ":1===u?v():u&&(h+=t);break;case",":g?h+=t:(v(),m[m.length]=[],b());break;case'"':h+=t,g||u?1===g&&2===u&&(g=0,v()):(u=2,g=1);break;case"(":g||(u=3),g++,h+=t;break;case")":h+=t,g--,3!==u||g||v();break;case"[":g||(u=4),h+=t,g++;break;case"]":h+=t,--g||v();break;default:u||(u=1),h+=t}}return h&&v(),m};function b(){g=u=0,h=""}function v(){u&&m[m.length-1].push(h),b()}var R=function(r,e,t,a){var i,s,n,p;if("string"!=typeof r)return r;var d=o((null==t||null==(i=t.theme)?void 0:i.borders)||e,r);if(d)return d;var l=y(r)[0],c=l[0],f=l[1],u=l[2];return[o(null==t||null==(s=t.theme)?void 0:s.borderWidths,c,a?void 0:c),o(null==t||null==(n=t.theme)?void 0:n.borderStyles,f,a?void 0:f),o(null==t||null==(p=t.theme)?void 0:p.colors,u,a?void 0:u)].filter(Boolean).join(" ")},x={border:{property:"border",scale:"borders",transform:R},borderWidth:{property:"borderWidth",scale:"borderWidths"},borderStyle:{property:"borderStyle",scale:"borderStyles"},borderColor:{property:"borderColor",scale:"colors"},borderRadius:{property:"borderRadius",scale:"radii"},borderTop:{property:"borderTop",scale:"borders",transform:R},borderTopLeftRadius:{property:"borderTopLeftRadius",scale:"radii"},borderTopRightRadius:{property:"borderTopRightRadius",scale:"radii"},borderRight:{property:"borderRight",scale:"borders",transform:R},borderBottom:{property:"borderBottom",scale:"borders",transform:R},borderBottomLeftRadius:{property:"borderBottomLeftRadius",scale:"radii"},borderBottomRightRadius:{property:"borderBottomRightRadius",scale:"radii"},borderLeft:{property:"borderLeft",scale:"borders",transform:R},borderX:{properties:["borderLeft","borderRight"],scale:"borders",transform:R},borderY:{properties:["borderTop","borderBottom"],scale:"borders",transform:R},borderTopWidth:{property:"borderTopWidth",scale:"borderWidths"},borderTopColor:{property:"borderTopColor",scale:"colors"},borderTopStyle:{property:"borderTopStyle",scale:"borderStyles"}};x.borderTopLeftRadius={property:"borderTopLeftRadius",scale:"radii"},x.borderTopRightRadius={property:"borderTopRightRadius",scale:"radii"},x.borderBottomWidth={property:"borderBottomWidth",scale:"borderWidths"},x.borderBottomColor={property:"borderBottomColor",scale:"colors"},x.borderBottomStyle={property:"borderBottomStyle",scale:"borderStyles"},x.borderBottomLeftRadius={property:"borderBottomLeftRadius",scale:"radii"},x.borderBottomRightRadius={property:"borderBottomRightRadius",scale:"radii"},x.borderLeftWidth={property:"borderLeftWidth",scale:"borderWidths"},x.borderLeftColor={property:"borderLeftColor",scale:"colors"},x.borderLeftStyle={property:"borderLeftStyle",scale:"borderStyles"},x.borderRightWidth={property:"borderRightWidth",scale:"borderWidths"},x.borderRightColor={property:"borderRightColor",scale:"colors"},x.borderRightStyle={property:"borderRightStyle",scale:"borderStyles"};var k=x,w={color:{property:"color",scale:"colors"},backgroundColor:{property:"backgroundColor",scale:"colors"},fill:{property:"fill",scale:"colors"},stroke:{property:"stroke",scale:"colors"},opacity:!0};w.bg=w.backgroundColor,w.textColor=w.color;var S={alignItems:!0,alignContent:!0,justifyItems:!0,justifyContent:!0,flexWrap:!0,flexDirection:!0,flex:!0,flexGrow:!0,flexShrink:!0,flexBasis:!0,justifySelf:!0,alignSelf:!0,order:!0},W={gap:{property:"gap",scale:"space"},gridGap:{property:"gridGap",scale:"space"},gridColumnGap:{property:"gridColumnGap",scale:"space"},gridRowGap:{property:"gridRowGap",scale:"space"},gridColumn:!0,gridRow:!0,gridAutoFlow:!0,gridAutoColumns:!0,gridAutoRows:!0,gridTemplateColumns:!0,gridTemplateRows:!0,gridTemplateAreas:!0,gridArea:!0},T={width:{property:"width",scale:"sizes"},height:{property:"height",scale:"sizes"},minWidth:{property:"minWidth",scale:"sizes"},minHeight:{property:"minHeight",scale:"sizes"},maxWidth:{property:"maxWidth",scale:"sizes"},maxHeight:{property:"maxHeight",scale:"sizes"},size:{properties:["width","height"],scale:"sizes"},overflow:!0,overflowX:!0,overflowY:!0,display:!0,verticalAlign:!0},B=function(r){return"number"==typeof r&&!isNaN(r)},C=function(r,o,t,a){if(!B(r)){if("string"==typeof r&&r.startsWith("-")){var i=r.slice(1),s=e(o,i,i);return B(s)?-1*s:"-"+s}return e(o,r,a?void 0:r)}var n=r<0,p=Math.abs(r),d=e(o,p,a?void 0:p);return B(d)?d*(n?-1:1):null!=d?n?"-"+d:d:void 0},L={position:!0,zIndex:{property:"zIndex",scale:"zIndices"},top:{property:"top",scale:"space",transform:C},right:{property:"right",scale:"space",transform:C},bottom:{property:"bottom",scale:"space",transform:C},left:{property:"left",scale:"space",transform:C}},_=function(r,e,t){var a;return o(null==t||null==(a=t.theme)?void 0:a.shadows,r)||("string"==typeof r?y(r).map((function(r){return r.map((function(r){var e;return o(null==t||null==(e=t.theme)?void 0:e.colors,r,r)})).join(" ")})).join(", "):r)},z={boxShadow:{property:"boxShadow",scale:"shadows",transform:_},textShadow:{property:"textShadow",scale:"shadows",transform:_}},j=function(r,e,o,t){if("number"==typeof r){var a,i=C(r,null==o||null==(a=o.theme)?void 0:a.space,0,t);if(i)return i}if("string"==typeof r){var s,n=r.split(" ");return 1===n.length?C(r,null==o||null==(s=o.theme)?void 0:s.space,0,t):n.reduce((function(r,e){var a,i=C(e,null==o||null==(a=o.theme)?void 0:a.space,0,t);return"number"==typeof i&&(i+="px"),[].concat(r,[i])}),[]).filter(Boolean).join(" ")}return r},O=function(r,e,t,a){if("number"==typeof r){var i,s=o(null==t||null==(i=t.theme)?void 0:i.space,r);if(s)return s}var n;return"string"==typeof r?1===r.split(" ").length?o(null==t||null==(n=t.theme)?void 0:n.space,r,a?void 0:r):r.split(" ").reduce((function(r,e){var i,s=o(null==t||null==(i=t.theme)?void 0:i.space,e,a?void 0:e);return"number"==typeof s&&(s+="px"),[].concat(r,[s])}),[]).filter(Boolean).join(" "):r},A={margin:{property:"margin",scale:"space",transform:j},marginTop:{property:"marginTop",scale:"space",transform:j},marginRight:{property:"marginRight",scale:"space",transform:j},marginBottom:{property:"marginBottom",scale:"space",transform:j},marginLeft:{property:"marginLeft",scale:"space",transform:j},marginX:{properties:["marginLeft","marginRight"],scale:"space",transform:j},marginY:{properties:["marginTop","marginBottom"],scale:"space",transform:j}};A.m=A.margin,A.mt=A.marginTop,A.mr=A.marginRight,A.mb=A.marginBottom,A.ml=A.marginLeft,A.mx=A.marginX,A.my=A.marginY;var H={padding:{property:"padding",scale:"space",transform:O},paddingTop:{property:"paddingTop",scale:"space",transform:O},paddingRight:{property:"paddingRight",scale:"space",transform:O},paddingBottom:{property:"paddingBottom",scale:"space",transform:O},paddingLeft:{property:"paddingLeft",scale:"space",transform:O},paddingX:{properties:["paddingLeft","paddingRight"],scale:"space",transform:O},paddingY:{properties:["paddingTop","paddingBottom"],scale:"space",transform:O}};H.p=H.padding,H.pt=H.paddingTop,H.pr=H.paddingRight,H.pb=H.paddingBottom,H.pl=H.paddingLeft,H.px=H.paddingX,H.py=H.paddingY;var P=t({},H,A),I={fontFamily:{property:"fontFamily",scale:"fonts"},fontSize:{property:"fontSize",scale:"fontSizes"},fontWeight:{property:"fontWeight",scale:"fontWeights"},lineHeight:{property:"lineHeight",scale:"lineHeights"},letterSpacing:{property:"letterSpacing",scale:"letterSpacings"},textAlign:!0,fontStyle:!0},G={width:{property:"width",scale:"sizes",transform:function(r,o){var t,a=r;return"number"!=typeof(t=r)||isNaN(t)||(a=r>1?r:100*r+"%"),e(o,r,a)}},height:{property:"height",scale:"sizes"},minWidth:{property:"minWidth",scale:"sizes"},minHeight:{property:"minHeight",scale:"sizes"},maxWidth:{property:"maxWidth",scale:"sizes"},maxHeight:{property:"maxHeight",scale:"sizes"},size:{properties:["width","height"],scale:"sizes"},overflow:!0,overflowX:!0,overflowY:!0,display:!0,verticalAlign:!0},N=Object.keys(t({},l,f,k,w,W,S,T,L,z,P,I)),X=new Set(N);console.log({allPropNames:X}),exports.background=f,exports.border=k,exports.borderShorthandTransform=R,exports.color=w,exports.createSystem=function(r){var e=void 0===r?{}:r,a=e.strict,s=void 0!==a&&a,p=e.pseudoSelectors,f=void 0===p?l:p;return function(r){var e={};return Object.keys(r).forEach((function(o){var t=r[o];!0!==t?"function"!=typeof t&&(e[o]=i(t)):e[o]=i({property:o,scale:o})})),function r(e,a,i){void 0===a&&(a={}),void 0===i&&(i=!1);var s={strict:i,key:"__systemprops__"},p=function(r){var i,p={},l=!1,f=!1;void 0!==(null==(i=r.theme)?void 0:i.systemPropsCacheKey)&&r.theme.systemPropsCacheKey!==s.key&&(s.key=r.theme.systemPropsCacheKey,f=!0);var u=function(a,i){var n,p,d=e[i],u=a[i],h=o(r.theme,d.scale);if("function"==typeof u&&(u=u(r.theme)),"object"==typeof u){var g;if(s.breakpoints=!f&&s.breakpoints||(null==r||null==(g=r.theme)?void 0:g.breakpoints),Array.isArray(u)){if(void 0===s.breakpoints)throw new Error("The system props parser could not find a `breakpoints` property in the theme object, which is required for responsive styles to work. Make sure that the theme object has a breakpoints property.");return s.media=!f&&s.media||[null].concat((p=n=s.breakpoints,Array.isArray(n)||(p=Object.values(n)),p.map(c))),function(r){var e=r.cache,o=r.systemConfig,a=r.scale,i=r.props,s={},n=e.media;return r.propValue.slice(0,n.length).forEach((function(r,p){var d,l="function"==typeof r?r(i.theme):r,c=n[p],f=o(l,a,i,e);s=t({},s,c?((d={})[c]=t({},s[c],f),d):f)})),s}({cache:s,systemConfig:d,scale:h,propValue:u,props:a})}if(null!==u)return l=!0,function(r){var e=r.cache,o=r.systemConfig,a=r.scale,i=r.propValue,s=r.props,n=e.breakpoints,p={};for(var d in i){var l=n[d],c=i[d],f=o("function"==typeof c?c(s.theme):c,a,s,e);if(l){var u,h="@media screen and (min-width: "+l+")";p=t({},p,((u={})[h]=t({},p[h],f),u))}else p=t({},p,f)}return p}({cache:s,systemConfig:d,scale:h,propValue:u,props:a})}return d(u,h,r,s)};for(var h in r)if(a[h]){var g=a[h],m=r[h];for(var y in m)p[g]=t({},p[g],u(m,y)),l&&(p[a[h]]=n(p[a[h]]),l=!1)}else e[h]&&(p=d(p,u(r,h)));return l&&(p=n(p)),p};p.config=e,p.propNames=Object.keys(e),p.cache=s;var l=Object.keys(e).filter((function(r){return"config"!==r}));return l.length>1&&l.forEach((function(o){var t,a;Object.assign(p,((a={})[o]=r(((t={})[o]=e[o],t)),a))})),p}(e,f,s)}},exports.flexbox=S,exports.get=e,exports.getShadow=_,exports.grid=W,exports.layout=T,exports.margin=A,exports.padding=H,exports.position=L,exports.propNames=N,exports.pseudoSelectors=l,exports.shadow=z,exports.shouldForwardProp=function(r){return!X.has(r)},exports.space=P,exports.styledSystemLayout=G,exports.typography=I;
 //# sourceMappingURL=system-props.cjs.production.min.js.map

dist/system-props.esm.js

@@ -1167,3 +1167,3 @@ var get = function get(object, path, defaultValue) {
 
-var allProps = /*#__PURE__*/_extends({}, pseudoSelectors, background, border, color, grid, flexbox, layout, position, shadow, space);
+var allProps = /*#__PURE__*/_extends({}, pseudoSelectors, background, border, color, grid, flexbox, layout, position, shadow, space, typography);
 
@@ -1173,2 +1173,5 @@ var propNames = /*#__PURE__*/Object.keys(allProps);
 var allPropNames = /*#__PURE__*/new Set(propNames);
+console.log({
+  allPropNames: allPropNames
+});
 var shouldForwardProp = function shouldForwardProp(prop) {
@@ -1175,0 +1178,0 @@ return !allPropNames.has(prop);

dist/types.d.ts

@@ -186,2 +186,3 @@ import { Property as P, Properties as CSSProperties } from 'csstype';
 }
+export declare type SystemPropsTheme = Partial<Record<TokenScales, Record<string, string | number>>>;
 export {};

package.json

 {
   "name": "system-props",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Inspired by styled-system, a responsive, theme-based style props for building design systems with React.",
@@ -5,0 +5,0 @@ "author": "Rogin Farrer",

src/propNames.ts

@@ -10,2 +10,3 @@ import { background } from './props/background';
 import { space } from './props/space';
+import { typography } from './props/typography';
 import { pseudoSelectors } from './pseudos';
@@ -24,4 +25,5 @@
   ...space,
+  ...typography,
 };
 
 export const propNames = Object.keys(allProps);

src/shouldForwardProp.ts

@@ -5,3 +5,5 @@ import { propNames } from './propNames';
 
+console.log({ allPropNames });
+
 export const shouldForwardProp = (prop: string): boolean =>
   !allPropNames.has(prop);

src/types.ts

@@ -407,1 +407,5 @@ import { Property as P, Properties as CSSProperties } from 'csstype';
 }
+
+export type SystemPropsTheme = Partial<
+  Record<TokenScales, Record<string, string | number>>
+>;

No alert changes

Improved metrics

Total package byte prevSize

350167

increased by0.29%

Lines of code

5397

increased by0.24%

No dependency changes