system-props - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/core/createSystem.d.ts

@@ -7,3 +7,3 @@ import { SystemConfig, PropConfigCollection, Parser } from '@/types';
 }, strict?: boolean) => Parser;
-export declare const createSystem: ({ pseudoSelectors, strict, }?: {
+export declare const createSystem: ({ strict, pseudoSelectors, }?: {
     pseudoSelectors?: {
@@ -10,0 +10,0 @@ [x: string]: string;

dist/system-props.cjs.development.js

@@ -433,5 +433,15 @@ 'use strict';
   var _ref = _temp === void 0 ? {} : _temp,
-      pseudoSelectors = _ref.pseudoSelectors,
       _ref$strict = _ref.strict,
-      strict = _ref$strict === void 0 ? false : _ref$strict;
+      strict = _ref$strict === void 0 ? false : _ref$strict,
+      _ref$pseudoSelectors = _ref.pseudoSelectors,
+      pseudoSelectors = _ref$pseudoSelectors === void 0 ? {
+    _hover: '&:hover',
+    _focus: '&:focus',
+    _hoverAndFocus: '&:hover, &:focus',
+    _disabled: '[disabled]',
+    _first: '&:first-child',
+    _last: '&:last-child',
+    _odd: '&:nth-of-type(odd)',
+    _even: '&:nth-of-type(even)'
+  } : _ref$pseudoSelectors;
 
@@ -438,0 +448,0 @@ var system = function system(args) {

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)}function e(r,e){(null==e||e>r.length)&&(e=r.length);for(var t=0,o=new Array(e);t<e;t++)o[t]=r[t];return o}Object.defineProperty(exports,"__esModule",{value:!0});var t=function(r,e,t,o){if(!r)return t;for(var a="string"==typeof e?e.split("."):[e],n=r,i=0;i<a.length;i++){var p=a[i];n=!n||"number"!=typeof p&&"string"!=typeof p?o:n[p]}return n===o?t:n},o=/\$(\S*)/gi,a=function(r,a,n,i){var p;return(p="string"==typeof a&&a.includes("$")?function(r,a,n){if(r&&a){var i=function(r,a,n){if(a){var i,p=a.match(o);if(!p)return i;for(var s,l=function(r,t){var o;if("undefined"==typeof Symbol||null==r[Symbol.iterator]){if(Array.isArray(r)||(o=function(r,t){if(r){if("string"==typeof r)return e(r,void 0);var o=Object.prototype.toString.call(r).slice(8,-1);return"Object"===o&&r.constructor&&(o=r.constructor.name),"Map"===o||"Set"===o?Array.from(r):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?e(r,void 0):void 0}}(r))){o&&(r=o);var a=0;return function(){return a>=r.length?{done:!0}:{done:!1,value:r[a++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(o=r[Symbol.iterator]()).next.bind(o)}(p);!(s=l()).done;){var d,c=s.value,f=c.split("$")[1];(null==(d=i)?void 0:d[c])||t(r,f)&&((i=i||{})[c]=t(r,f))}return i}}(r,a);if(i){var p=a;for(var s in i)p=p.replace(s,i[s]);return p}}}(r,a):t(r,a))===i?n:p},n=function(r,e,t,o,n){return a(e,r,!0===o?n:r)},i=function(r){var e=r.transform,t=void 0===e?n:e,o=r.properties||[r.property],a=function(r,e,a,n){var i={},p=t(r,e,a,n.strict);return null===p||o.forEach((function(r){r&&(i[r]=p)})),i};return Object.assign(a,{scale:r.scale,defaultScale:r.defaultScale}),a},p=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"}),s=function(r){var e={};return Object.keys(r).sort((function(r,e){return p.compare(r,e)})).forEach((function(t){e[t]=r[t]})),e};function l(e,t){return r({},e,t)}var d=function(r,e){var t=l(r,e);for(var o in r){var a;r[o]&&"object"==typeof e[o]&&(t=l(t,((a={})[o]=l(r[o],e[o]),a)))}return t},c=function(r){return"@media screen and (min-width: "+r+")"},f=function e(o,a,n){void 0===a&&(a={}),void 0===n&&(n=!1);var i={strict:n},p=function(e){var n,p={},l=!1,f=Boolean(null==(n=e.theme)?void 0:n.disableStyledSystemCache),u=function(a,n){var p,s,d=o[n],u=a[n],g=t(e.theme,d.scale,d.defaultScale);if("function"==typeof u&&(u=u(e.theme)),"object"==typeof u){var m;if(i.breakpoints=!f&&i.breakpoints||(null==e||null==(m=e.theme)?void 0:m.breakpoints),Array.isArray(u)){if(void 0===i.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 i.media=!f&&i.media||[null].concat((s=p=i.breakpoints,Array.isArray(p)||(s=Object.values(p)),s.map(c))),function(e){var t=e.cache,o=e.systemConfig,a=e.scale,n=e.props,i={},p=t.media;return e.propValue.slice(0,p.length).forEach((function(e,s){var l,d="function"==typeof e?e(n.theme):e,c=p[s],f=o(d,a,n,t);i=r({},i,c?((l={})[c]=r({},i[c],f),l):f)})),i}({cache:i,systemConfig:d,scale:g,propValue:u,props:a})}if(null!==u)return l=!0,function(e){var t=e.cache,o=e.systemConfig,a=e.scale,n=e.propValue,i=e.props,p=t.breakpoints,s={};for(var l in n){var d=p[l],c=n[l],f=o("function"==typeof c?c(i.theme):c,a,i,t);if(d){var u,g="@media screen and (min-width: "+d+")";s=r({},s,((u={})[g]=r({},s[g],f),u))}else s=r({},s,f)}return s}({cache:i,systemConfig:d,scale:g,propValue:u,props:a})}return d(u,g,e,i)};for(var g in e)if(a[g]){var m=a[g],y=e[g];for(var b in y)p[m]=r({},p[m],u(y,b)),l&&(p[a[g]]=s(p[a[g]]),l=!1)}else o[g]&&(p=d(p,u(e,g)));return l&&(p=s(p)),p};p.config=o,p.propNames=Object.keys(o),p.cache=i;var l=Object.keys(o).filter((function(r){return"config"!==r}));return l.length>1&&l.forEach((function(r){var t,a;Object.assign(p,((a={})[r]=e(((t={})[r]=o[r],t)),a))})),p},u={background:!0,backgroundImage:!0,backgroundSize:!0,backgroundPosition:!0,backgroundRepeat:!0};u.bgImage=u.backgroundImage,u.bgSize=u.backgroundSize,u.bgPosition=u.backgroundPosition,u.bgRepeat=u.backgroundRepeat;var g=function(r,e,t){var o,n,i,p;if("string"!=typeof r)return r;var s=a((null==t||null==(o=t.theme)?void 0:o.borders)||e,r);if(s)return s;var l=r.split(" "),d=l[0],c=l[1],f=l[2];return a(null==t||null==(n=t.theme)?void 0:n.borderWidths,d,d)+" "+a(null==t||null==(i=t.theme)?void 0:i.borderStyles,c,c)+" "+a(null==t||null==(p=t.theme)?void 0:p.colors,f,f)},m={border:{property:"border",scale:"borders",transform:g},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:g},borderTopLeftRadius:{property:"borderTopLeftRadius",scale:"radii"},borderTopRightRadius:{property:"borderTopRightRadius",scale:"radii"},borderRight:{property:"borderRight",scale:"borders",transform:g},borderBottom:{property:"borderBottom",scale:"borders",transform:g},borderBottomLeftRadius:{property:"borderBottomLeftRadius",scale:"radii"},borderBottomRightRadius:{property:"borderBottomRightRadius",scale:"radii"},borderLeft:{property:"borderLeft",scale:"borders",transform:g},borderX:{properties:["borderLeft","borderRight"],scale:"borders",transform:g},borderY:{properties:["borderTop","borderBottom"],scale:"borders",transform:g},borderTopWidth:{property:"borderTopWidth",scale:"borderWidths"},borderTopColor:{property:"borderTopColor",scale:"colors"},borderTopStyle:{property:"borderTopStyle",scale:"borderStyles"}};m.borderTopLeftRadius={property:"borderTopLeftRadius",scale:"radii"},m.borderTopRightRadius={property:"borderTopRightRadius",scale:"radii"},m.borderBottomWidth={property:"borderBottomWidth",scale:"borderWidths"},m.borderBottomColor={property:"borderBottomColor",scale:"colors"},m.borderBottomStyle={property:"borderBottomStyle",scale:"borderStyles"},m.borderBottomLeftRadius={property:"borderBottomLeftRadius",scale:"radii"},m.borderBottomRightRadius={property:"borderBottomRightRadius",scale:"radii"},m.borderLeftWidth={property:"borderLeftWidth",scale:"borderWidths"},m.borderLeftColor={property:"borderLeftColor",scale:"colors"},m.borderLeftStyle={property:"borderLeftStyle",scale:"borderStyles"},m.borderRightWidth={property:"borderRightWidth",scale:"borderWidths"},m.borderRightColor={property:"borderRightColor",scale:"colors"},m.borderRightStyle={property:"borderRightStyle",scale:"borderStyles"};var y=m,b={color:{property:"color",scale:"colors"},backgroundColor:{property:"backgroundColor",scale:"colors"},opacity:!0};b.bg=b.backgroundColor;var h=b,v={width:{property:"width",scale:"sizes",transform:function(r,e){var t,o=r;return"number"!=typeof(t=r)||isNaN(t)||(o=r>1?r:100*r+"%"),a(e,r,o)}},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},R=function(r){return"number"==typeof r&&!isNaN(r)},S=function(r,e){if(!R(r))return a(e,r,r);var t=r<0,o=Math.abs(r),n=a(e,o,o);return R(n)?n*(t?-1:1):t?"-"+n:n},x=function(r,e,t){if("string"==typeof r||"number"==typeof r){var o,a=S(r,null==t||null==(o=t.theme)?void 0:o.space);if(a)return a}return"string"==typeof r?r.split(" ").reduce((function(r,e){var o;return[].concat(r,[S(e,null==t||null==(o=t.theme)?void 0:o.space)])}),[]).join(" "):r},w={position:!0,zIndex:{property:"zIndex",scale:"zIndices"},top:{property:"top",scale:"space",transform:x},right:{property:"right",scale:"space",transform:x},bottom:{property:"bottom",scale:"space",transform:x},left:{property:"left",scale:"space",transform:x}},T=function(r,e,t){var o,n=a(null==t||null==(o=t.theme)?void 0:o.shadows,r);if(n)return n;if("string"==typeof r){var i,p=r.split(" "),s=p.pop(),l=a(null==t||null==(i=t.theme)?void 0:i.colors,s);if(l)return p.join(" ")+" "+l}return r},k={boxShadow:{property:"boxShadow",scale:"shadows",transform:T},textShadow:{property:"textShadow",scale:"shadows",transform:T}},B=function(r){return"number"==typeof r&&!isNaN(r)},C=function(r,e){if(!B(r))return a(e,r,r);var t=r<0,o=Math.abs(r),n=a(e,o,o);return B(n)?n*(t?-1:1):t?"-"+n:n},L=function(r,e,t){if("string"==typeof r||"number"==typeof r){var o,a=C(r,null==t||null==(o=t.theme)?void 0:o.space);if(a)return a}return"string"==typeof r?r.split(" ").reduce((function(r,e){var o;return[].concat(r,[C(e,null==t||null==(o=t.theme)?void 0:o.space)])}),[]).join(" "):r},j=function(r,e,t){if("string"==typeof r||"number"==typeof r){var o,n=a(null==t||null==(o=t.theme)?void 0:o.space,r);if(n)return n}return"string"==typeof r?r.split(" ").reduce((function(r,e){var o;return[].concat(r,[a(null==t||null==(o=t.theme)?void 0:o.space,e)])}),[]).join(" "):r},W={margin:{property:"margin",scale:"space",transform:L},marginTop:{property:"marginTop",scale:"space",transform:L},marginRight:{property:"marginRight",scale:"space",transform:L},marginBottom:{property:"marginBottom",scale:"space",transform:L},marginLeft:{property:"marginLeft",scale:"space",transform:L},marginX:{properties:["marginLeft","marginRight"],scale:"space",transform:L},marginY:{properties:["marginTop","marginBottom"],scale:"space",transform:L}};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 A={padding:{property:"padding",scale:"space",transform:j},paddingTop:{property:"paddingTop",scale:"space",transform:j},paddingRight:{property:"paddingRight",scale:"space",transform:j},paddingBottom:{property:"paddingBottom",scale:"space",transform:j},paddingLeft:{property:"paddingLeft",scale:"space",transform:j},paddingX:{properties:["paddingLeft","paddingRight"],scale:"space",transform:j},paddingY:{properties:["paddingTop","paddingBottom"],scale:"space",transform:j}};A.p=A.padding,A.pt=A.paddingTop,A.pr=A.paddingRight,A.pb=A.paddingBottom,A.pl=A.paddingLeft,A.px=A.paddingX,A.py=A.paddingY;var z=r({},A,W);exports.background=u,exports.border=y,exports.color=h,exports.compose=function(){for(var e=arguments.length,t=new Array(e),o=0;o<e;o++)t[o]=arguments[o];var a=t.reduce((function(e,t){return t&&t.config?r({},e,t.config):e}),{}),n=f(a);return n},exports.createSystem=function(r){var e=void 0===r?{}:r,t=e.pseudoSelectors,o=e.strict,a=void 0!==o&&o;return function(r){var e={};return Object.keys(r).forEach((function(t){var o=r[t];!0!==o?"function"!=typeof o&&(e[t]=i(o)):e[t]=i({property:t,scale:t})})),f(e,t,a)}},exports.flexbox={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},exports.get=a,exports.grid={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},exports.layout=v,exports.position=w,exports.shadow=k,exports.space=z,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";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)}function e(r,e){(null==e||e>r.length)&&(e=r.length);for(var t=0,o=new Array(e);t<e;t++)o[t]=r[t];return o}Object.defineProperty(exports,"__esModule",{value:!0});var t=function(r,e,t,o){if(!r)return t;for(var a="string"==typeof e?e.split("."):[e],n=r,i=0;i<a.length;i++){var s=a[i];n=!n||"number"!=typeof s&&"string"!=typeof s?o:n[s]}return n===o?t:n},o=/\$(\S*)/gi,a=function(r,a,n,i){var s;return(s="string"==typeof a&&a.includes("$")?function(r,a,n){if(r&&a){var i=function(r,a,n){if(a){var i,s=a.match(o);if(!s)return i;for(var p,d=function(r,t){var o;if("undefined"==typeof Symbol||null==r[Symbol.iterator]){if(Array.isArray(r)||(o=function(r,t){if(r){if("string"==typeof r)return e(r,void 0);var o=Object.prototype.toString.call(r).slice(8,-1);return"Object"===o&&r.constructor&&(o=r.constructor.name),"Map"===o||"Set"===o?Array.from(r):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?e(r,void 0):void 0}}(r))){o&&(r=o);var a=0;return function(){return a>=r.length?{done:!0}:{done:!1,value:r[a++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(o=r[Symbol.iterator]()).next.bind(o)}(s);!(p=d()).done;){var l,c=p.value,f=c.split("$")[1];(null==(l=i)?void 0:l[c])||t(r,f)&&((i=i||{})[c]=t(r,f))}return i}}(r,a);if(i){var s=a;for(var p in i)s=s.replace(p,i[p]);return s}}}(r,a):t(r,a))===i?n:s},n=function(r,e,t,o,n){return a(e,r,!0===o?n:r)},i=function(r){var e=r.transform,t=void 0===e?n:e,o=r.properties||[r.property],a=function(r,e,a,n){var i={},s=t(r,e,a,n.strict);return null===s||o.forEach((function(r){r&&(i[r]=s)})),i};return Object.assign(a,{scale:r.scale,defaultScale:r.defaultScale}),a},s=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"}),p=function(r){var e={};return Object.keys(r).sort((function(r,e){return s.compare(r,e)})).forEach((function(t){e[t]=r[t]})),e};function d(e,t){return r({},e,t)}var l=function(r,e){var t=d(r,e);for(var o in r){var a;r[o]&&"object"==typeof e[o]&&(t=d(t,((a={})[o]=d(r[o],e[o]),a)))}return t},c=function(r){return"@media screen and (min-width: "+r+")"},f=function e(o,a,n){void 0===a&&(a={}),void 0===n&&(n=!1);var i={strict:n},s=function(e){var n,s={},d=!1,f=Boolean(null==(n=e.theme)?void 0:n.disableStyledSystemCache),u=function(a,n){var s,p,l=o[n],u=a[n],g=t(e.theme,l.scale,l.defaultScale);if("function"==typeof u&&(u=u(e.theme)),"object"==typeof u){var m;if(i.breakpoints=!f&&i.breakpoints||(null==e||null==(m=e.theme)?void 0:m.breakpoints),Array.isArray(u)){if(void 0===i.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 i.media=!f&&i.media||[null].concat((p=s=i.breakpoints,Array.isArray(s)||(p=Object.values(s)),p.map(c))),function(e){var t=e.cache,o=e.systemConfig,a=e.scale,n=e.props,i={},s=t.media;return e.propValue.slice(0,s.length).forEach((function(e,p){var d,l="function"==typeof e?e(n.theme):e,c=s[p],f=o(l,a,n,t);i=r({},i,c?((d={})[c]=r({},i[c],f),d):f)})),i}({cache:i,systemConfig:l,scale:g,propValue:u,props:a})}if(null!==u)return d=!0,function(e){var t=e.cache,o=e.systemConfig,a=e.scale,n=e.propValue,i=e.props,s=t.breakpoints,p={};for(var d in n){var l=s[d],c=n[d],f=o("function"==typeof c?c(i.theme):c,a,i,t);if(l){var u,g="@media screen and (min-width: "+l+")";p=r({},p,((u={})[g]=r({},p[g],f),u))}else p=r({},p,f)}return p}({cache:i,systemConfig:l,scale:g,propValue:u,props:a})}return l(u,g,e,i)};for(var g in e)if(a[g]){var m=a[g],y=e[g];for(var b in y)s[m]=r({},s[m],u(y,b)),d&&(s[a[g]]=p(s[a[g]]),d=!1)}else o[g]&&(s=l(s,u(e,g)));return d&&(s=p(s)),s};s.config=o,s.propNames=Object.keys(o),s.cache=i;var d=Object.keys(o).filter((function(r){return"config"!==r}));return d.length>1&&d.forEach((function(r){var t,a;Object.assign(s,((a={})[r]=e(((t={})[r]=o[r],t)),a))})),s},u={background:!0,backgroundImage:!0,backgroundSize:!0,backgroundPosition:!0,backgroundRepeat:!0};u.bgImage=u.backgroundImage,u.bgSize=u.backgroundSize,u.bgPosition=u.backgroundPosition,u.bgRepeat=u.backgroundRepeat;var g=function(r,e,t){var o,n,i,s;if("string"!=typeof r)return r;var p=a((null==t||null==(o=t.theme)?void 0:o.borders)||e,r);if(p)return p;var d=r.split(" "),l=d[0],c=d[1],f=d[2];return a(null==t||null==(n=t.theme)?void 0:n.borderWidths,l,l)+" "+a(null==t||null==(i=t.theme)?void 0:i.borderStyles,c,c)+" "+a(null==t||null==(s=t.theme)?void 0:s.colors,f,f)},m={border:{property:"border",scale:"borders",transform:g},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:g},borderTopLeftRadius:{property:"borderTopLeftRadius",scale:"radii"},borderTopRightRadius:{property:"borderTopRightRadius",scale:"radii"},borderRight:{property:"borderRight",scale:"borders",transform:g},borderBottom:{property:"borderBottom",scale:"borders",transform:g},borderBottomLeftRadius:{property:"borderBottomLeftRadius",scale:"radii"},borderBottomRightRadius:{property:"borderBottomRightRadius",scale:"radii"},borderLeft:{property:"borderLeft",scale:"borders",transform:g},borderX:{properties:["borderLeft","borderRight"],scale:"borders",transform:g},borderY:{properties:["borderTop","borderBottom"],scale:"borders",transform:g},borderTopWidth:{property:"borderTopWidth",scale:"borderWidths"},borderTopColor:{property:"borderTopColor",scale:"colors"},borderTopStyle:{property:"borderTopStyle",scale:"borderStyles"}};m.borderTopLeftRadius={property:"borderTopLeftRadius",scale:"radii"},m.borderTopRightRadius={property:"borderTopRightRadius",scale:"radii"},m.borderBottomWidth={property:"borderBottomWidth",scale:"borderWidths"},m.borderBottomColor={property:"borderBottomColor",scale:"colors"},m.borderBottomStyle={property:"borderBottomStyle",scale:"borderStyles"},m.borderBottomLeftRadius={property:"borderBottomLeftRadius",scale:"radii"},m.borderBottomRightRadius={property:"borderBottomRightRadius",scale:"radii"},m.borderLeftWidth={property:"borderLeftWidth",scale:"borderWidths"},m.borderLeftColor={property:"borderLeftColor",scale:"colors"},m.borderLeftStyle={property:"borderLeftStyle",scale:"borderStyles"},m.borderRightWidth={property:"borderRightWidth",scale:"borderWidths"},m.borderRightColor={property:"borderRightColor",scale:"colors"},m.borderRightStyle={property:"borderRightStyle",scale:"borderStyles"};var y=m,b={color:{property:"color",scale:"colors"},backgroundColor:{property:"backgroundColor",scale:"colors"},opacity:!0};b.bg=b.backgroundColor;var h=b,v={width:{property:"width",scale:"sizes",transform:function(r,e){var t,o=r;return"number"!=typeof(t=r)||isNaN(t)||(o=r>1?r:100*r+"%"),a(e,r,o)}},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},R=function(r){return"number"==typeof r&&!isNaN(r)},S=function(r,e){if(!R(r))return a(e,r,r);var t=r<0,o=Math.abs(r),n=a(e,o,o);return R(n)?n*(t?-1:1):t?"-"+n:n},x=function(r,e,t){if("string"==typeof r||"number"==typeof r){var o,a=S(r,null==t||null==(o=t.theme)?void 0:o.space);if(a)return a}return"string"==typeof r?r.split(" ").reduce((function(r,e){var o;return[].concat(r,[S(e,null==t||null==(o=t.theme)?void 0:o.space)])}),[]).join(" "):r},w={position:!0,zIndex:{property:"zIndex",scale:"zIndices"},top:{property:"top",scale:"space",transform:x},right:{property:"right",scale:"space",transform:x},bottom:{property:"bottom",scale:"space",transform:x},left:{property:"left",scale:"space",transform:x}},T=function(r,e,t){var o,n=a(null==t||null==(o=t.theme)?void 0:o.shadows,r);if(n)return n;if("string"==typeof r){var i,s=r.split(" "),p=s.pop(),d=a(null==t||null==(i=t.theme)?void 0:i.colors,p);if(d)return s.join(" ")+" "+d}return r},k={boxShadow:{property:"boxShadow",scale:"shadows",transform:T},textShadow:{property:"textShadow",scale:"shadows",transform:T}},B=function(r){return"number"==typeof r&&!isNaN(r)},C=function(r,e){if(!B(r))return a(e,r,r);var t=r<0,o=Math.abs(r),n=a(e,o,o);return B(n)?n*(t?-1:1):t?"-"+n:n},L=function(r,e,t){if("string"==typeof r||"number"==typeof r){var o,a=C(r,null==t||null==(o=t.theme)?void 0:o.space);if(a)return a}return"string"==typeof r?r.split(" ").reduce((function(r,e){var o;return[].concat(r,[C(e,null==t||null==(o=t.theme)?void 0:o.space)])}),[]).join(" "):r},j=function(r,e,t){if("string"==typeof r||"number"==typeof r){var o,n=a(null==t||null==(o=t.theme)?void 0:o.space,r);if(n)return n}return"string"==typeof r?r.split(" ").reduce((function(r,e){var o;return[].concat(r,[a(null==t||null==(o=t.theme)?void 0:o.space,e)])}),[]).join(" "):r},W={margin:{property:"margin",scale:"space",transform:L},marginTop:{property:"marginTop",scale:"space",transform:L},marginRight:{property:"marginRight",scale:"space",transform:L},marginBottom:{property:"marginBottom",scale:"space",transform:L},marginLeft:{property:"marginLeft",scale:"space",transform:L},marginX:{properties:["marginLeft","marginRight"],scale:"space",transform:L},marginY:{properties:["marginTop","marginBottom"],scale:"space",transform:L}};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 A={padding:{property:"padding",scale:"space",transform:j},paddingTop:{property:"paddingTop",scale:"space",transform:j},paddingRight:{property:"paddingRight",scale:"space",transform:j},paddingBottom:{property:"paddingBottom",scale:"space",transform:j},paddingLeft:{property:"paddingLeft",scale:"space",transform:j},paddingX:{properties:["paddingLeft","paddingRight"],scale:"space",transform:j},paddingY:{properties:["paddingTop","paddingBottom"],scale:"space",transform:j}};A.p=A.padding,A.pt=A.paddingTop,A.pr=A.paddingRight,A.pb=A.paddingBottom,A.pl=A.paddingLeft,A.px=A.paddingX,A.py=A.paddingY;var z=r({},A,W);exports.background=u,exports.border=y,exports.color=h,exports.compose=function(){for(var e=arguments.length,t=new Array(e),o=0;o<e;o++)t[o]=arguments[o];var a=t.reduce((function(e,t){return t&&t.config?r({},e,t.config):e}),{}),n=f(a);return n},exports.createSystem=function(r){var e=void 0===r?{}:r,t=e.strict,o=void 0!==t&&t,a=e.pseudoSelectors,n=void 0===a?{_hover:"&:hover",_focus:"&:focus",_hoverAndFocus:"&:hover, &:focus",_disabled:"[disabled]",_first:"&:first-child",_last:"&:last-child",_odd:"&:nth-of-type(odd)",_even:"&:nth-of-type(even)"}:a;return function(r){var e={};return Object.keys(r).forEach((function(t){var o=r[t];!0!==o?"function"!=typeof o&&(e[t]=i(o)):e[t]=i({property:t,scale:t})})),f(e,n,o)}},exports.flexbox={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},exports.get=a,exports.grid={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},exports.layout=v,exports.position=w,exports.shadow=k,exports.space=z,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};
 //# sourceMappingURL=system-props.cjs.production.min.js.map

dist/system-props.esm.js

@@ -429,5 +429,15 @@ function _extends() {
   var _ref = _temp === void 0 ? {} : _temp,
-      pseudoSelectors = _ref.pseudoSelectors,
       _ref$strict = _ref.strict,
-      strict = _ref$strict === void 0 ? false : _ref$strict;
+      strict = _ref$strict === void 0 ? false : _ref$strict,
+      _ref$pseudoSelectors = _ref.pseudoSelectors,
+      pseudoSelectors = _ref$pseudoSelectors === void 0 ? {
+    _hover: '&:hover',
+    _focus: '&:focus',
+    _hoverAndFocus: '&:hover, &:focus',
+    _disabled: '[disabled]',
+    _first: '&:first-child',
+    _last: '&:last-child',
+    _odd: '&:nth-of-type(odd)',
+    _even: '&:nth-of-type(even)'
+  } : _ref$pseudoSelectors;
 
@@ -434,0 +444,0 @@ var system = function system(args) {

package.json

 {
   "name": "system-props",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "author": "Rogin Farrer",
@@ -5,0 +5,0 @@ "module": "dist/system-props.esm.js",

README.md

@@ -1,99 +0,64 @@
-# TSDX User Guide
+# System Props
 
-Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it.
+Inspired by [styled-system](https://github.com/styled-system), a responsive, theme-based style props for building design systems with React.
 
-> This TSDX setup is meant for developing libraries (not apps!) that can be published to NPM. If you’re looking to build a Node app, you could use `ts-node-dev`, plain `ts-node`, or simple `tsc`.
+Functions almost identically to styled-system, but adds the following features:
 
-> If you’re new to TypeScript, checkout [this handy cheatsheet](https://devhints.io/typescript)
+- Written in TypeScript
+- Chakra's PseudoBox inspired pseudo selector props
+- Access the theme object at any time by using the function syntax
+- Supports common themed shorthand properties, like `border`, `margin`, `padding`, and `box-shadow`
+- Strict mode: allow only values that are present in the theme
+- Visually distinguish theme values by prefixing system prop values with `$`
 
-## Commands
+## Installation
 
-TSDX scaffolds your new library inside `/src`.
-
-To run TSDX, use:
-
-```bash
-npm start # or yarn start
+```sh
+yarn add system-props
 ```
 
-This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
+## Quick Start
 
-To do a one-off build, use `npm run build` or `yarn build`.
+See the [examples](./examples) directory for more.
 
-To run tests, use `npm test` or `yarn test`.
+```tsx
+import { createSystem, color, space } from 'system-props';
+import styled from 'styled-components';
 
-## Configuration
+const system = createSystem({
+  strict, // default: false
+  pseudoSelectors, // default: { _hover: '&:hover', ...etc }
+});
 
-Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
+const Box = styled.div(system({ ...color, ...space }));
 
-### Jest
-
-Jest tests are set up to run with `npm test` or `yarn test`.
-
-#### Setup Files
-
-This is the folder structure we set up for you:
-
-```txt
-/src
-  index.tsx       # EDIT THIS
-/test
-  blah.test.tsx   # EDIT THIS
-.gitignore
-package.json
-README.md         # EDIT THIS
-tsconfig.json
+const App = () => {
+  return (
+    <Box
+      bg="$blue500"
+      margin="$1 $2 $3 $4"
+      border="1px solid $blue200"
+      borderBottom={theme => `3px dotted ${theme.colors.blue200}`}
+      _hover={{
+        bg: 'blue700',
+      }}
+    />
+  );
+};
 ```
 
-### Rollup
+## TODO
 
-TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.
+- [ ] Improve TypeScript support for users
+- [ ] Improve API documentation
+- [ ] Add setting to toggle accessing theme values via `Number` (mainly in `space` and `layout`). Will be disabled by default, but can be enabled to support those migrating from styled-system.
+- [ ] Add `variant` API
 
-### TypeScript
+## Credits
 
-`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
+Many of the concepts here come from so many great, existing open-source projects, and they deserve a shout-out!
 
-## Continuous Integration
-
-### GitHub Actions
-
-A simple action is included that runs these steps on all pushes:
-
-- Installs deps w/ cache
-- Lints, tests, and builds
-
-## Optimizations
-
-Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:
-
-```js
-// ./types/index.d.ts
-declare var __DEV__: boolean;
-
-// inside your code...
-if (__DEV__) {
-  console.log('foo');
-}
-```
-
-You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions.
-
-## Module Formats
-
-CJS, ESModules, and UMD module formats are supported.
-
-The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found.
-
-## Named Exports
-
-Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.
-
-## Including Styles
-
-There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like.
-
-For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader.
-
-## Publishing to NPM
-
-We recommend using [np](https://github.com/sindresorhus/np).
+- [styled-system](https://github.com/styled-system/styled-system), duh
+- [Chakra UI](https://chakra-ui.com/) and the PseudoBox
+- [Stitches](https://github.com/modulz/stitches)
+- [Sprout's System Props documentation](https://seeds.sproutsocial.com/components/system-props/)

src/core/createSystem.ts

@@ -148,4 +148,13 @@ import { parseResponsiveStyle, parseResponsiveObject } from './parseResponsive';
 export const createSystem = ({
-  pseudoSelectors,
   strict = false,
+  pseudoSelectors = {
+    _hover: '&:hover',
+    _focus: '&:focus',
+    _hoverAndFocus: '&:hover, &:focus',
+    _disabled: '[disabled]',
+    _first: '&:first-child',
+    _last: '&:last-child',
+    _odd: '&:nth-of-type(odd)',
+    _even: '&:nth-of-type(even)',
+  },
 }: {
@@ -152,0 +161,0 @@ pseudoSelectors?: { [x: string]: string };

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

277006

increased by0.57%

Lines of code

4243

increased by0.71%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

65

decreased by-35%

No dependency changes