system-props - npm Package Compare versions

Comparing version 0.19.0 to 0.20.0

dist/system-props.cjs.development.js

@@ -1130,4 +1130,4 @@ 'use strict';
   _hoverAndFocus: '&:hover, &:focus',
-  _disabled: '[disabled], [disabled]:hover, [disabled]:focus, [aria-disabled], [aria-disabled]:hover, [aria-disabled]:focus',
-  _readOnly: '[readOnly]',
+  _disabled: '&[disabled], &[disabled]:hover, &[disabled]:focus, &[aria-disabled], &[aria-disabled]:hover, &[aria-disabled]:focus',
+  _readOnly: '&[readOnly]',
   _first: '&:first-child',
@@ -1134,0 +1134,0 @@ _last: '&:last-child',

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

@@ -1,2 +0,2 @@
-"use strict";function r(){return(r=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(r[o]=t[o])}return r}).apply(this,arguments)}Object.defineProperty(exports,"__esModule",{value:!0});var e={background:!0,backgroundImage:!0,backgroundSize:!0,backgroundPosition:!0,backgroundRepeat:!0};e.bgImage=e.backgroundImage,e.bgSize=e.backgroundSize,e.bgPosition=e.backgroundPosition,e.bgRepeat=e.backgroundRepeat;var t,o="",i=0,a=[[]],n=function(r){if(s(),a=[[]],!r)return a;for(var e=r.length,n=0;n<e;n++){var c=r[n];switch(c){case" ":1===t?p():t&&(o+=c);break;case",":i?o+=c:(p(),a[a.length]=[],s());break;case'"':o+=c,i||t?1===i&&2===t&&(i=0,p()):(t=2,i=1);break;case"(":i||(t=3),i++,o+=c;break;case")":o+=c,i--,3!==t||i||p();break;case"[":i||(t=4),o+=c,i++;break;case"]":o+=c,--i||p();break;default:t||(t=1),o+=c}}return o&&p(),a};function s(){i=t=0,o=""}function p(){t&&a[a.length-1].push(o),s()}var c=function(r){var e,t,o,i,a=r.path,s=r.props,p=r.strict,c=r.get;if("string"!=typeof a)return a;var d=c((null==s||null==(e=s.theme)?void 0:e.borders)||r.object,a);if(d)return d;var l=n(a)[0],f=l[0],u=l[1],g=l[2];return[c(null==s||null==(t=s.theme)?void 0:t.borderWidths,f,p?void 0:f),c(null==s||null==(o=s.theme)?void 0:o.borderStyles,u,p?void 0:u),c(null==s||null==(i=s.theme)?void 0:i.colors,g,p?void 0:g)].filter(Boolean).join(" ")},d={border:{property:"border",scale:"borders",transform:c},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:c},borderTopLeftRadius:{property:"borderTopLeftRadius",scale:"radii"},borderTopRightRadius:{property:"borderTopRightRadius",scale:"radii"},borderRight:{property:"borderRight",scale:"borders",transform:c},borderBottom:{property:"borderBottom",scale:"borders",transform:c},borderBottomLeftRadius:{property:"borderBottomLeftRadius",scale:"radii"},borderBottomRightRadius:{property:"borderBottomRightRadius",scale:"radii"},borderLeft:{property:"borderLeft",scale:"borders",transform:c},borderX:{properties:["borderLeft","borderRight"],scale:"borders",transform:c},borderY:{properties:["borderTop","borderBottom"],scale:"borders",transform:c},borderTopWidth:{property:"borderTopWidth",scale:"borderWidths"},borderTopColor:{property:"borderTopColor",scale:"colors"},borderTopStyle:{property:"borderTopStyle",scale:"borderStyles"}};d.borderTopLeftRadius={property:"borderTopLeftRadius",scale:"radii"},d.borderTopRightRadius={property:"borderTopRightRadius",scale:"radii"},d.borderBottomWidth={property:"borderBottomWidth",scale:"borderWidths"},d.borderBottomColor={property:"borderBottomColor",scale:"colors"},d.borderBottomStyle={property:"borderBottomStyle",scale:"borderStyles"},d.borderBottomLeftRadius={property:"borderBottomLeftRadius",scale:"radii"},d.borderBottomRightRadius={property:"borderBottomRightRadius",scale:"radii"},d.borderLeftWidth={property:"borderLeftWidth",scale:"borderWidths"},d.borderLeftColor={property:"borderLeftColor",scale:"colors"},d.borderLeftStyle={property:"borderLeftStyle",scale:"borderStyles"},d.borderRightWidth={property:"borderRightWidth",scale:"borderWidths"},d.borderRightColor={property:"borderRightColor",scale:"colors"},d.borderRightStyle={property:"borderRightStyle",scale:"borderStyles"};var l=d,f={color:{property:"color",scale:"colors"},backgroundColor:{property:"backgroundColor",scale:"colors"},fill:{property:"fill",scale:"colors"},stroke:{property:"stroke",scale:"colors"},opacity:!0};f.bg=f.backgroundColor,f.textColor=f.color;var u={alignItems:!0,alignContent:!0,justifyItems:!0,justifyContent:!0,flexWrap:!0,flexDirection:!0},g={flex:!0,flexGrow:!0,flexShrink:!0,flexBasis:!0,justifySelf:!0,alignSelf:!0,order:!0},h=r({},u,g),m={gridArea:!0,gridColumnStart:!0,gridColumnEnd:!0,gridRowStart:!0,gridRowEnd:!0,justifySelf:!0,alignSelf:!0,placeSelf:!0},y={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},b=r({},m,y),v={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},x=function(r){return"number"==typeof r&&!isNaN(r)},k=function(r){var e=r.path,t=r.object,o=r.strict,i=r.get;if(!x(e)){if("string"==typeof e&&e.startsWith("-")){var a=e.slice(1),n=i(t,a,a);return x(n)?-1*n:"-"+n}return i(t,e,o?void 0:e)}var s=e<0,p=Math.abs(e),c=i(t,p,o?void 0:p);return x(c)?c*(s?-1:1):null!=c?s?"-"+c:c:void 0},R={position:!0,zIndex:{property:"zIndex",scale:"zIndices"},top:{property:"top",scale:"space",transform:k},right:{property:"right",scale:"space",transform:k},bottom:{property:"bottom",scale:"space",transform:k},left:{property:"left",scale:"space",transform:k}},S=function(r){var e=r.path,t=r.get,o=r.props;return t(r.object,e)||("string"==typeof e?n(e).map((function(r){return r.map((function(r){var e;return t(null==o||null==(e=o.theme)?void 0:e.colors,r,r)})).join(" ")})).join(", "):e)},w={boxShadow:{property:"boxShadow",scale:"shadows",transform:S},textShadow:{property:"textShadow",scale:"shadows",transform:S}},j=function(r){var e=r.path,t=r.object,o=r.props,i=r.strict,a=r.get;if("number"==typeof e){var n=k({path:e,object:t,props:o,strict:i,get:a});if(n)return n}if("string"==typeof e){var s=e.split(" ");return 1===s.length?k({path:e,object:t,props:o,strict:i,get:a}):s.reduce((function(r,e){var n=k({get:a,path:e,object:t,props:o,strict:i});return"number"==typeof n&&(n+="px"),[].concat(r,[n])}),[]).filter(Boolean).join(" ")}return e},C=function(r){var e,t=r.path,o=r.props,i=r.strict,a=r.get;if("number"==typeof t){var n=a(r.object,t);if(n)return n}return"string"==typeof t?1===t.split(" ").length?a(null==o||null==(e=o.theme)?void 0:e.space,t,i?void 0:t):t.split(" ").reduce((function(r,e){var t,n=a(null==o||null==(t=o.theme)?void 0:t.space,e,i?void 0:e);return"number"==typeof n&&(n+="px"),[].concat(r,[n])}),[]).filter(Boolean).join(" "):t},W={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}};W.m=W.margin,W.mt=W.marginTop,W.mr=W.marginRight,W.mb=W.marginBottom,W.ml=W.marginLeft,W.mx=W.marginX,W.my=W.marginY;var T={padding:{property:"padding",scale:"space",transform:C},paddingTop:{property:"paddingTop",scale:"space",transform:C},paddingRight:{property:"paddingRight",scale:"space",transform:C},paddingBottom:{property:"paddingBottom",scale:"space",transform:C},paddingLeft:{property:"paddingLeft",scale:"space",transform:C},paddingX:{properties:["paddingLeft","paddingRight"],scale:"space",transform:C},paddingY:{properties:["paddingTop","paddingBottom"],scale:"space",transform:C}};T.p=T.padding,T.pt=T.paddingTop,T.pr=T.paddingRight,T.pb=T.paddingBottom,T.pl=T.paddingLeft,T.px=T.paddingX,T.py=T.paddingY;var B=r({},T,W),L={transition:{property:"transition",scale:"transitions",transform:function(r){var e=r.path,t=r.object,o=r.get,i=r.strict,a=o(t,e);return a||("string"==typeof e?a=n(e).map((function(r){return 1===r.length?o(t,r[0],i?void 0:r[0]):r.join(" ")})).join(", "):e)}},transitionDuration:{property:"transitionDuration",scale:"transitionDurations"},transitionTimingFunction:{property:"transitionTimingFunction",scale:"transitionTimingFunctions"},transitionProperty:!0,transitionDelay:!0},_={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},z={width:{property:"width",scale:"sizes",transform:function(r){var e,t=r.path,o=r.object,i=r.get,a=t;return"number"!=typeof(e=t)||isNaN(e)||(a=t>1?t:100*t+"%"),i(o,t,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},P=function(r,e,t){if(!r)return t;for(var o="string"==typeof e?e.split("."):[e],i=r,a=0;a<o.length;a++){var n=o[a];i=!i||"number"!=typeof n&&"string"!=typeof n?void 0:i[n]}return void 0===i?t:i},O=function(r,e,t){var o;return"string"==typeof e&&e.startsWith("$")&&(o=P(r,e.slice(1))),void 0===o?t:o},A=function(r){var e=new WeakMap;return function(t,o,i){if(void 0===t)return r(t,o,i);e.has(t)||e.set(t,new Map);var a=e.get(t);if(a.has(o))return a.get(o);var n=r(t,o,i);return a.set(o,n),n}},I={all:A((function(r,e,t){var o=P(r,e);return"string"==typeof e&&e.startsWith("$")&&(o=P(r,e.slice(1))),void 0===o?t:o})),prefix:A(O),noprefix:A(P)},E=function(r){var e=r.path;return(0,r.get)(r.object,e,!0===r.strict?void 0:e)},H=function(r){var e=r.scale,t=r.transform,o=void 0===t?E:t,i=r.defaultScale,a=r.tokenPrefix,n=r.properties||[r.property];if(!a||!["all","noprefix","prefix"].includes(a))throw new Error('Invalid tokenPrefix configuration option. Expected "all", "noprefix" or "prefix". Received: '+a);var s=I[a],p=function(r,e,t,i){var a,p={};return null===(a=o({path:r,object:e,props:t,strict:null==i?void 0:i.strict,get:s}))||n.forEach((function(r){r&&(p[r]=a)})),p};return Object.assign(p,{scale:e,defaultScale:i}),p},F=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"}),G=function(r){var e={};return Object.keys(r).sort((function(r,e){return F.compare(r,e)})).forEach((function(t){e[t]=r[t]})),e};function X(e,t){return r({},e,t)}var Y=function(r,e){var t=X(r,e);for(var o in r){var i;r[o]&&"object"==typeof e[o]&&(t=X(t,((i={})[o]=X(r[o],e[o]),i)))}return t},N={_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)"},D=function(r){return"@media screen and (min-width: "+r+")"},M=function(e,t){void 0===t&&(t={tokenPrefix:"prefix"});var o=t.tokenPrefix,i={};return Object.keys(e).forEach((function(t){var a=e[t];!0!==a?"function"!=typeof a&&(i[t]=H(r({},a,{tokenPrefix:o}))):i[t]=H({property:t,scale:t,tokenPrefix:o})})),function r(e){return function(t){var a=t.theme;if(void 0!==e){var n={},s="function"==typeof e?e(a):e;for(var p in s){var c=s[p];if(c&&"object"==typeof c){var d=c,l=(0,I[o])(a.mediaQueries,p);if(void 0!==l){n[l]=r(d)({theme:a});continue}n[p]=r(d)({theme:a})}else{var f=i[p];if(f){var u=P(a,f.scale);n=Y(n,f(c,u,{theme:a}))}else n[p]=c}}return n}}}},V=Object.keys(r({},N,e,l,f,b,h,v,R,w,B,_)),K=new Set(V),$=M(r({},e,l,f,h,b,v,R,w,B,L,_),{tokenPrefix:"prefix"});exports.background=e,exports.border=l,exports.color=f,exports.createCss=M,exports.createSystem=function(e){var t=void 0===e?{}:e,o=t.strict,i=void 0!==o&&o,a=t.pseudoSelectors,n=void 0===a?N:a,s=t.tokenPrefix,p=void 0===s?"prefix":s;return function(e){var t={};return Object.keys(e).forEach((function(o){var i=e[o];!0!==i?"function"!=typeof i&&(t[o]=H(r({},i,{tokenPrefix:p}))):t[o]=H({property:o,scale:o,tokenPrefix:p})})),function e(t,o,i){void 0===o&&(o={}),void 0===i&&(i=!1);var a={strict:i,key:"__systemprops__"},n=function(e){var i,n={},s=!1,p=!1;void 0!==(null==(i=e.theme)?void 0:i.systemPropsCacheKey)&&e.theme.systemPropsCacheKey!==a.key&&(a.key=e.theme.systemPropsCacheKey,p=!0);var c=function(o,i){var n=t[i],c=o[i];if(void 0===c)return{};var d,l,f=P(e.theme,n.scale);if("function"==typeof c&&(c=c(e.theme)),"object"==typeof c){var u;if(a.breakpoints=!p&&a.breakpoints||(null==e||null==(u=e.theme)?void 0:u.breakpoints),Array.isArray(c)){if(void 0===a.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 a.media=!p&&a.media||[null].concat((l=d=a.breakpoints,Array.isArray(d)||(l=Object.values(d)),l.map(D))),function(e){var t=e.cache,o=e.systemConfig,i=e.scale,a=e.props,n={},s=t.media;return e.propValue.slice(0,s.length).forEach((function(e,p){var c,d="function"==typeof e?e(a.theme):e,l=s[p],f=o(d,i,a,t);n=r({},n,l?((c={})[l]=r({},n[l],f),c):f)})),n}({cache:a,systemConfig:n,scale:f,propValue:c,props:o})}if(null!==c)return s=!0,function(e){var t=e.cache,o=e.systemConfig,i=e.scale,a=e.propValue,n=e.props,s=t.breakpoints,p={};for(var c in a){var d=s[c],l=a[c],f=o("function"==typeof l?l(n.theme):l,i,n,t);if(d){var u,g="@media screen and (min-width: "+d+")";p=r({},p,((u={})[g]=r({},p[g],f),u))}else p=r({},p,f)}return p}({cache:a,systemConfig:n,scale:f,propValue:c,props:o})}return n(c,f,e,a)};for(var d in e)if(o[d]){var l=o[d],f=e[d];for(var u in f)n[l]=r({},n[l],c(f,u)),s&&(n[o[d]]=G(n[o[d]]),s=!1)}else t[d]&&(n=Y(n,c(e,d)));return s&&(n=G(n)),n};n.config=t,n.propNames=Object.keys(t),n.cache=a;var s=Object.keys(t).filter((function(r){return"config"!==r}));return s.length>1&&s.forEach((function(r){var o,i;Object.assign(n,((i={})[r]=e(((o={})[r]=t[r],o)),i))})),n}(t,n,i)}},exports.css=$,exports.flexContainer=u,exports.flexItem=g,exports.flexbox=h,exports.grid=b,exports.gridContainer=y,exports.gridItem=m,exports.layout=v,exports.margin=W,exports.padding=T,exports.position=R,exports.propNames=V,exports.pseudoSelectors=N,exports.shadow=w,exports.shouldForwardProp=function(r){return!K.has(r)},exports.space=B,exports.styledSystemLayout=z,exports.transition=L,exports.typography=_;
+"use strict";function r(){return(r=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(r[o]=t[o])}return r}).apply(this,arguments)}Object.defineProperty(exports,"__esModule",{value:!0});var e={background:!0,backgroundImage:!0,backgroundSize:!0,backgroundPosition:!0,backgroundRepeat:!0};e.bgImage=e.backgroundImage,e.bgSize=e.backgroundSize,e.bgPosition=e.backgroundPosition,e.bgRepeat=e.backgroundRepeat;var t,o="",i=0,a=[[]],n=function(r){if(s(),a=[[]],!r)return a;for(var e=r.length,n=0;n<e;n++){var c=r[n];switch(c){case" ":1===t?p():t&&(o+=c);break;case",":i?o+=c:(p(),a[a.length]=[],s());break;case'"':o+=c,i||t?1===i&&2===t&&(i=0,p()):(t=2,i=1);break;case"(":i||(t=3),i++,o+=c;break;case")":o+=c,i--,3!==t||i||p();break;case"[":i||(t=4),o+=c,i++;break;case"]":o+=c,--i||p();break;default:t||(t=1),o+=c}}return o&&p(),a};function s(){i=t=0,o=""}function p(){t&&a[a.length-1].push(o),s()}var c=function(r){var e,t,o,i,a=r.path,s=r.props,p=r.strict,c=r.get;if("string"!=typeof a)return a;var d=c((null==s||null==(e=s.theme)?void 0:e.borders)||r.object,a);if(d)return d;var l=n(a)[0],f=l[0],u=l[1],g=l[2];return[c(null==s||null==(t=s.theme)?void 0:t.borderWidths,f,p?void 0:f),c(null==s||null==(o=s.theme)?void 0:o.borderStyles,u,p?void 0:u),c(null==s||null==(i=s.theme)?void 0:i.colors,g,p?void 0:g)].filter(Boolean).join(" ")},d={border:{property:"border",scale:"borders",transform:c},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:c},borderTopLeftRadius:{property:"borderTopLeftRadius",scale:"radii"},borderTopRightRadius:{property:"borderTopRightRadius",scale:"radii"},borderRight:{property:"borderRight",scale:"borders",transform:c},borderBottom:{property:"borderBottom",scale:"borders",transform:c},borderBottomLeftRadius:{property:"borderBottomLeftRadius",scale:"radii"},borderBottomRightRadius:{property:"borderBottomRightRadius",scale:"radii"},borderLeft:{property:"borderLeft",scale:"borders",transform:c},borderX:{properties:["borderLeft","borderRight"],scale:"borders",transform:c},borderY:{properties:["borderTop","borderBottom"],scale:"borders",transform:c},borderTopWidth:{property:"borderTopWidth",scale:"borderWidths"},borderTopColor:{property:"borderTopColor",scale:"colors"},borderTopStyle:{property:"borderTopStyle",scale:"borderStyles"}};d.borderTopLeftRadius={property:"borderTopLeftRadius",scale:"radii"},d.borderTopRightRadius={property:"borderTopRightRadius",scale:"radii"},d.borderBottomWidth={property:"borderBottomWidth",scale:"borderWidths"},d.borderBottomColor={property:"borderBottomColor",scale:"colors"},d.borderBottomStyle={property:"borderBottomStyle",scale:"borderStyles"},d.borderBottomLeftRadius={property:"borderBottomLeftRadius",scale:"radii"},d.borderBottomRightRadius={property:"borderBottomRightRadius",scale:"radii"},d.borderLeftWidth={property:"borderLeftWidth",scale:"borderWidths"},d.borderLeftColor={property:"borderLeftColor",scale:"colors"},d.borderLeftStyle={property:"borderLeftStyle",scale:"borderStyles"},d.borderRightWidth={property:"borderRightWidth",scale:"borderWidths"},d.borderRightColor={property:"borderRightColor",scale:"colors"},d.borderRightStyle={property:"borderRightStyle",scale:"borderStyles"};var l=d,f={color:{property:"color",scale:"colors"},backgroundColor:{property:"backgroundColor",scale:"colors"},fill:{property:"fill",scale:"colors"},stroke:{property:"stroke",scale:"colors"},opacity:!0};f.bg=f.backgroundColor,f.textColor=f.color;var u={alignItems:!0,alignContent:!0,justifyItems:!0,justifyContent:!0,flexWrap:!0,flexDirection:!0},g={flex:!0,flexGrow:!0,flexShrink:!0,flexBasis:!0,justifySelf:!0,alignSelf:!0,order:!0},h=r({},u,g),m={gridArea:!0,gridColumnStart:!0,gridColumnEnd:!0,gridRowStart:!0,gridRowEnd:!0,justifySelf:!0,alignSelf:!0,placeSelf:!0},y={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},b=r({},m,y),v={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},x=function(r){return"number"==typeof r&&!isNaN(r)},k=function(r){var e=r.path,t=r.object,o=r.strict,i=r.get;if(!x(e)){if("string"==typeof e&&e.startsWith("-")){var a=e.slice(1),n=i(t,a,a);return x(n)?-1*n:"-"+n}return i(t,e,o?void 0:e)}var s=e<0,p=Math.abs(e),c=i(t,p,o?void 0:p);return x(c)?c*(s?-1:1):null!=c?s?"-"+c:c:void 0},R={position:!0,zIndex:{property:"zIndex",scale:"zIndices"},top:{property:"top",scale:"space",transform:k},right:{property:"right",scale:"space",transform:k},bottom:{property:"bottom",scale:"space",transform:k},left:{property:"left",scale:"space",transform:k}},S=function(r){var e=r.path,t=r.get,o=r.props;return t(r.object,e)||("string"==typeof e?n(e).map((function(r){return r.map((function(r){var e;return t(null==o||null==(e=o.theme)?void 0:e.colors,r,r)})).join(" ")})).join(", "):e)},w={boxShadow:{property:"boxShadow",scale:"shadows",transform:S},textShadow:{property:"textShadow",scale:"shadows",transform:S}},j=function(r){var e=r.path,t=r.object,o=r.props,i=r.strict,a=r.get;if("number"==typeof e){var n=k({path:e,object:t,props:o,strict:i,get:a});if(n)return n}if("string"==typeof e){var s=e.split(" ");return 1===s.length?k({path:e,object:t,props:o,strict:i,get:a}):s.reduce((function(r,e){var n=k({get:a,path:e,object:t,props:o,strict:i});return"number"==typeof n&&(n+="px"),[].concat(r,[n])}),[]).filter(Boolean).join(" ")}return e},C=function(r){var e,t=r.path,o=r.props,i=r.strict,a=r.get;if("number"==typeof t){var n=a(r.object,t);if(n)return n}return"string"==typeof t?1===t.split(" ").length?a(null==o||null==(e=o.theme)?void 0:e.space,t,i?void 0:t):t.split(" ").reduce((function(r,e){var t,n=a(null==o||null==(t=o.theme)?void 0:t.space,e,i?void 0:e);return"number"==typeof n&&(n+="px"),[].concat(r,[n])}),[]).filter(Boolean).join(" "):t},W={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}};W.m=W.margin,W.mt=W.marginTop,W.mr=W.marginRight,W.mb=W.marginBottom,W.ml=W.marginLeft,W.mx=W.marginX,W.my=W.marginY;var T={padding:{property:"padding",scale:"space",transform:C},paddingTop:{property:"paddingTop",scale:"space",transform:C},paddingRight:{property:"paddingRight",scale:"space",transform:C},paddingBottom:{property:"paddingBottom",scale:"space",transform:C},paddingLeft:{property:"paddingLeft",scale:"space",transform:C},paddingX:{properties:["paddingLeft","paddingRight"],scale:"space",transform:C},paddingY:{properties:["paddingTop","paddingBottom"],scale:"space",transform:C}};T.p=T.padding,T.pt=T.paddingTop,T.pr=T.paddingRight,T.pb=T.paddingBottom,T.pl=T.paddingLeft,T.px=T.paddingX,T.py=T.paddingY;var B=r({},T,W),L={transition:{property:"transition",scale:"transitions",transform:function(r){var e=r.path,t=r.object,o=r.get,i=r.strict,a=o(t,e);return a||("string"==typeof e?a=n(e).map((function(r){return 1===r.length?o(t,r[0],i?void 0:r[0]):r.join(" ")})).join(", "):e)}},transitionDuration:{property:"transitionDuration",scale:"transitionDurations"},transitionTimingFunction:{property:"transitionTimingFunction",scale:"transitionTimingFunctions"},transitionProperty:!0,transitionDelay:!0},_={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},z={width:{property:"width",scale:"sizes",transform:function(r){var e,t=r.path,o=r.object,i=r.get,a=t;return"number"!=typeof(e=t)||isNaN(e)||(a=t>1?t:100*t+"%"),i(o,t,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},P=function(r,e,t){if(!r)return t;for(var o="string"==typeof e?e.split("."):[e],i=r,a=0;a<o.length;a++){var n=o[a];i=!i||"number"!=typeof n&&"string"!=typeof n?void 0:i[n]}return void 0===i?t:i},O=function(r,e,t){var o;return"string"==typeof e&&e.startsWith("$")&&(o=P(r,e.slice(1))),void 0===o?t:o},A=function(r){var e=new WeakMap;return function(t,o,i){if(void 0===t)return r(t,o,i);e.has(t)||e.set(t,new Map);var a=e.get(t);if(a.has(o))return a.get(o);var n=r(t,o,i);return a.set(o,n),n}},I={all:A((function(r,e,t){var o=P(r,e);return"string"==typeof e&&e.startsWith("$")&&(o=P(r,e.slice(1))),void 0===o?t:o})),prefix:A(O),noprefix:A(P)},E=function(r){var e=r.path;return(0,r.get)(r.object,e,!0===r.strict?void 0:e)},H=function(r){var e=r.scale,t=r.transform,o=void 0===t?E:t,i=r.defaultScale,a=r.tokenPrefix,n=r.properties||[r.property];if(!a||!["all","noprefix","prefix"].includes(a))throw new Error('Invalid tokenPrefix configuration option. Expected "all", "noprefix" or "prefix". Received: '+a);var s=I[a],p=function(r,e,t,i){var a,p={};return null===(a=o({path:r,object:e,props:t,strict:null==i?void 0:i.strict,get:s}))||n.forEach((function(r){r&&(p[r]=a)})),p};return Object.assign(p,{scale:e,defaultScale:i}),p},F=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"}),G=function(r){var e={};return Object.keys(r).sort((function(r,e){return F.compare(r,e)})).forEach((function(t){e[t]=r[t]})),e};function X(e,t){return r({},e,t)}var Y=function(r,e){var t=X(r,e);for(var o in r){var i;r[o]&&"object"==typeof e[o]&&(t=X(t,((i={})[o]=X(r[o],e[o]),i)))}return t},N={_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)"},D=function(r){return"@media screen and (min-width: "+r+")"},M=function(e,t){void 0===t&&(t={tokenPrefix:"prefix"});var o=t.tokenPrefix,i={};return Object.keys(e).forEach((function(t){var a=e[t];!0!==a?"function"!=typeof a&&(i[t]=H(r({},a,{tokenPrefix:o}))):i[t]=H({property:t,scale:t,tokenPrefix:o})})),function r(e){return function(t){var a=t.theme;if(void 0!==e){var n={},s="function"==typeof e?e(a):e;for(var p in s){var c=s[p];if(c&&"object"==typeof c){var d=c,l=(0,I[o])(a.mediaQueries,p);if(void 0!==l){n[l]=r(d)({theme:a});continue}n[p]=r(d)({theme:a})}else{var f=i[p];if(f){var u=P(a,f.scale);n=Y(n,f(c,u,{theme:a}))}else n[p]=c}}return n}}}},V=Object.keys(r({},N,e,l,f,b,h,v,R,w,B,_)),K=new Set(V),$=M(r({},e,l,f,h,b,v,R,w,B,L,_),{tokenPrefix:"prefix"});exports.background=e,exports.border=l,exports.color=f,exports.createCss=M,exports.createSystem=function(e){var t=void 0===e?{}:e,o=t.strict,i=void 0!==o&&o,a=t.pseudoSelectors,n=void 0===a?N:a,s=t.tokenPrefix,p=void 0===s?"prefix":s;return function(e){var t={};return Object.keys(e).forEach((function(o){var i=e[o];!0!==i?"function"!=typeof i&&(t[o]=H(r({},i,{tokenPrefix:p}))):t[o]=H({property:o,scale:o,tokenPrefix:p})})),function e(t,o,i){void 0===o&&(o={}),void 0===i&&(i=!1);var a={strict:i,key:"__systemprops__"},n=function(e){var i,n={},s=!1,p=!1;void 0!==(null==(i=e.theme)?void 0:i.systemPropsCacheKey)&&e.theme.systemPropsCacheKey!==a.key&&(a.key=e.theme.systemPropsCacheKey,p=!0);var c=function(o,i){var n=t[i],c=o[i];if(void 0===c)return{};var d,l,f=P(e.theme,n.scale);if("function"==typeof c&&(c=c(e.theme)),"object"==typeof c){var u;if(a.breakpoints=!p&&a.breakpoints||(null==e||null==(u=e.theme)?void 0:u.breakpoints),Array.isArray(c)){if(void 0===a.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 a.media=!p&&a.media||[null].concat((l=d=a.breakpoints,Array.isArray(d)||(l=Object.values(d)),l.map(D))),function(e){var t=e.cache,o=e.systemConfig,i=e.scale,a=e.props,n={},s=t.media;return e.propValue.slice(0,s.length).forEach((function(e,p){var c,d="function"==typeof e?e(a.theme):e,l=s[p],f=o(d,i,a,t);n=r({},n,l?((c={})[l]=r({},n[l],f),c):f)})),n}({cache:a,systemConfig:n,scale:f,propValue:c,props:o})}if(null!==c)return s=!0,function(e){var t=e.cache,o=e.systemConfig,i=e.scale,a=e.propValue,n=e.props,s=t.breakpoints,p={};for(var c in a){var d=s[c],l=a[c],f=o("function"==typeof l?l(n.theme):l,i,n,t);if(d){var u,g="@media screen and (min-width: "+d+")";p=r({},p,((u={})[g]=r({},p[g],f),u))}else p=r({},p,f)}return p}({cache:a,systemConfig:n,scale:f,propValue:c,props:o})}return n(c,f,e,a)};for(var d in e)if(o[d]){var l=o[d],f=e[d];for(var u in f)n[l]=r({},n[l],c(f,u)),s&&(n[o[d]]=G(n[o[d]]),s=!1)}else t[d]&&(n=Y(n,c(e,d)));return s&&(n=G(n)),n};n.config=t,n.propNames=Object.keys(t),n.cache=a;var s=Object.keys(t).filter((function(r){return"config"!==r}));return s.length>1&&s.forEach((function(r){var o,i;Object.assign(n,((i={})[r]=e(((o={})[r]=t[r],o)),i))})),n}(t,n,i)}},exports.css=$,exports.flexContainer=u,exports.flexItem=g,exports.flexbox=h,exports.grid=b,exports.gridContainer=y,exports.gridItem=m,exports.layout=v,exports.margin=W,exports.padding=T,exports.position=R,exports.propNames=V,exports.pseudoSelectors=N,exports.shadow=w,exports.shouldForwardProp=function(r){return!K.has(r)},exports.space=B,exports.styledSystemLayout=z,exports.transition=L,exports.typography=_;
 //# sourceMappingURL=system-props.cjs.production.min.js.map

dist/system-props.esm.js

@@ -1126,4 +1126,4 @@ function _extends() {
   _hoverAndFocus: '&:hover, &:focus',
-  _disabled: '[disabled], [disabled]:hover, [disabled]:focus, [aria-disabled], [aria-disabled]:hover, [aria-disabled]:focus',
-  _readOnly: '[readOnly]',
+  _disabled: '&[disabled], &[disabled]:hover, &[disabled]:focus, &[aria-disabled], &[aria-disabled]:hover, &[aria-disabled]:focus',
+  _readOnly: '&[readOnly]',
   _first: '&:first-child',
@@ -1130,0 +1130,0 @@ _last: '&:last-child',

package.json

 {
   "name": "system-props",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "Inspired by styled-system, a responsive, theme-based style props for building design systems with React.",
@@ -19,3 +19,3 @@ "author": "Rogin Farrer",
     "np": "^6.5.0",
-    "prettier": "^2.1.2",
+    "prettier": "^2.3.0",
     "tsdx": "^0.14.1",
@@ -40,7 +40,5 @@ "tslib": "^2.0.1",
     "lint": "tsdx lint src",
-    "lint:examples": "tsdx lint examples/styled-components/{index,Box}.tsx",
     "prepare": "tsdx build",
     "format": "yarn lint --fix",
-    "start-sc": "yarn --cwd ./examples/styled-components start",
-    "clean": "rm -rf node_modules && rm -rf examples/**/node_modules && rm -rf dist",
+    "clean": "rm -rf node_modules example/node_modules dist",
     "release": "np"
@@ -47,0 +45,0 @@ },

src/core/createCss.ts

@@ -49,48 +49,50 @@ import { get, memoizedGet } from './get';
 
-  const css: CSSFunction<typeof tokenPrefix> = (args) => ({ theme }) => {
-    if (typeof args === 'undefined') {
-      return;
-    }
+  const css: CSSFunction<typeof tokenPrefix> =
+    (args) =>
+    ({ theme }) => {
+      if (typeof args === 'undefined') {
+        return;
+      }
 
-    let result: CSSObject = {};
-    const styles = typeof args === 'function' ? args(theme) : args;
+      let result: CSSObject = {};
+      const styles = typeof args === 'function' ? args(theme) : args;
 
-    for (let key in styles) {
-      const x = styles[key];
+      for (let key in styles) {
+        const x = styles[key];
 
-      // Nested selectors (pseudo selectors, media query)
-      if (x && typeof x === 'object') {
-        const nestedStyles = x as SystemPropsCSSObject<typeof tokenPrefix>;
+        // Nested selectors (pseudo selectors, media query)
+        if (x && typeof x === 'object') {
+          const nestedStyles = x as SystemPropsCSSObject<typeof tokenPrefix>;
 
-        // If key is a mediaQueries token value
-        const _get = memoizedGet[tokenPrefix];
-        const maybeQuery = _get(theme.mediaQueries, key);
-        if (typeof maybeQuery !== 'undefined') {
-          result[maybeQuery] = css(nestedStyles)({ theme });
+          // If key is a mediaQueries token value
+          const _get = memoizedGet[tokenPrefix];
+          const maybeQuery = _get(theme.mediaQueries, key);
+          if (typeof maybeQuery !== 'undefined') {
+            result[maybeQuery] = css(nestedStyles)({ theme });
+            continue;
+          }
+
+          result[key] = css(nestedStyles)({ theme });
           continue;
         }
 
-        result[key] = css(nestedStyles)({ theme });
-        continue;
-      }
+        const systemConfig = config[key];
 
-      const systemConfig = config[key];
+        // Not a token in the config, let pass through
+        if (!systemConfig) {
+          result[key] = x;
+          continue;
+        }
 
-      // Not a token in the config, let pass through
-      if (!systemConfig) {
-        result[key] = x;
-        continue;
-      }
+        const scale = get(theme, systemConfig.scale);
 
-      const scale = get(theme, systemConfig.scale);
+        const propValue = x as string | number;
 
-      const propValue = x as string | number;
+        result = merge(result, systemConfig(propValue, scale, { theme }));
+      }
 
-      result = merge(result, systemConfig(propValue, scale, { theme }));
-    }
+      return result;
+    };
 
-    return result;
-  };
-
   return css;
 };

src/pseudos/index.ts

@@ -14,4 +14,4 @@ export const pseudoSelectors = {
   _disabled:
-    '[disabled], [disabled]:hover, [disabled]:focus, [aria-disabled], [aria-disabled]:hover, [aria-disabled]:focus',
-  _readOnly: '[readOnly]',
+    '&[disabled], &[disabled]:hover, &[disabled]:focus, &[aria-disabled], &[aria-disabled]:hover, &[aria-disabled]:focus',
+  _readOnly: '&[readOnly]',
   _first: '&:first-child',
@@ -18,0 +18,0 @@ _last: '&:last-child',

src/types.ts

@@ -57,6 +57,4 @@ import {
 
-type ScaleLookup<
-  Token extends TokenScales,
-  TTheme extends Theme = Theme
-> = KeyOf<TTheme[Token]>;
+type ScaleLookup<Token extends TokenScales, TTheme extends Theme = Theme> =
+  KeyOf<TTheme[Token]>;
 
@@ -63,0 +61,0 @@ export type PrefixToken<

No alert changes

Improved metrics

Total package byte prevSize

423701

increased by0.07%

No dependency changes