system-props - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/system-props.cjs.development.js

@@ -23,44 +23,2 @@ 'use strict';
 
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it;
-
-  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-      if (it) o = it;
-      var i = 0;
-      return function () {
-        if (i >= o.length) return {
-          done: true
-        };
-        return {
-          done: false,
-          value: o[i++]
-        };
-      };
-    }
-
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  it = o[Symbol.iterator]();
-  return it.next.bind(it);
-}
-
 var get = function get(object, path, defaultValue, // Not used, should be undefined
@@ -91,63 +49,7 @@ // To make sure we get a true undefined
 };
-var REGEX_$ = /\$(\S*)/gi;
-
-function getDollaValues(theme, str, undef) {
-  if (!str) {
-    return undef;
-  }
-
-  var results = str.match(REGEX_$);
-  var values;
-
-  if (!results) {
-    return values;
-  }
-
-  for (var _iterator = _createForOfIteratorHelperLoose(results), _step; !(_step = _iterator()).done;) {
-    var _values;
-
-    var result = _step.value;
-
-    var _result$split = result.split('$'),
-        path = _result$split[1]; // If we haven't already get'd the path
-
-
-    if (!((_values = values) == null ? void 0 : _values[result])) {
-      var found = get(theme, path);
-
-      if (found) {
-        values = values || {};
-        values[result] = get(theme, path);
-      }
-    }
-  }
-
-  return values;
-}
-
-var systemValueParser = function systemValueParser(theme, value, undef) {
-  if (!theme || !value) {
-    return undef;
-  }
-
-  var parsedMap = getDollaValues(theme, value);
-
-  if (!parsedMap) {
-    return;
-  }
-
-  var newString = value;
-
-  for (var systemValue in parsedMap) {
-    var replacement = parsedMap[systemValue];
-    newString = newString.replace(systemValue, replacement);
-  }
-
-  return newString;
-};
 var betterGet = function betterGet(scale, value, defaultValue, undef) {
   var result;
 
-  if (typeof value === 'string' && value.includes('$')) {
-    result = systemValueParser(scale, value);
+  if (typeof value === 'string' && value.startsWith('$')) {
+    result = get(scale, value.slice(1));
   } else {
@@ -756,2 +658,14 @@ result = get(scale, value);
   if (!isNumber(n)) {
+    if (typeof n === 'string' && n.startsWith('-')) {
+      var raw = n.slice(1);
+
+      var _value = betterGet(scale, raw, raw);
+
+      if (isNumber(_value)) {
+        return _value * -1;
+      }
+
+      return "-" + _value;
+    }
+
     return betterGet(scale, n, n);
@@ -838,3 +752,4 @@ }
 var getMargin = function getMargin(value, _, props) {
-  if (typeof value === 'string' || typeof value === 'number') {
+  // Not using shorthand, just a theme value, e.g, m={4}
+  if (typeof value === 'number') {
     var _props$theme;
@@ -850,6 +765,24 @@
   if (typeof value === 'string') {
-    return value.split(' ').reduce(function (acc, curr) {
+    var arr = value.split(' '); // applied to all sides, return a number or string
+    // e.g., m="2" or m="$2"
+
+    if (arr.length === 1) {
       var _props$theme2;
 
-      return [].concat(acc, [positiveOrNegative(curr, props == null ? void 0 : (_props$theme2 = props.theme) == null ? void 0 : _props$theme2.space)]);
+      return positiveOrNegative(value, props == null ? void 0 : (_props$theme2 = props.theme) == null ? void 0 : _props$theme2.space);
+    }
+
+    return arr.reduce(function (acc, curr) {
+      var _props$theme3;
+
+      var value = positiveOrNegative(curr, props == null ? void 0 : (_props$theme3 = props.theme) == null ? void 0 : _props$theme3.space);
+
+      if (typeof value === 'number') {
+        // if a number is returned, it's not converted
+        // to a pixel value by the css parser in most libraries
+        // so we need to make it a string with a pixel value
+        value = value + "px";
+      }
+
+      return [].concat(acc, [value]);
     }, []).filter(Boolean).join(' ');
@@ -862,6 +795,7 @@ }
 var getPadding = function getPadding(value, _, props) {
-  if (typeof value === 'string' || typeof value === 'number') {
-    var _props$theme3;
+  // Not using shorthand, just a theme value, e.g, p={4}
+  if (typeof value === 'number') {
+    var _props$theme4;
 
-    var result = betterGet(props == null ? void 0 : (_props$theme3 = props.theme) == null ? void 0 : _props$theme3.space, value);
+    var result = betterGet(props == null ? void 0 : (_props$theme4 = props.theme) == null ? void 0 : _props$theme4.space, value);
 
@@ -874,6 +808,24 @@ if (result) {
   if (typeof value === 'string') {
+    var arr = value.split(' '); // applied to all sides, return a number or string
+    // e.g., m="2" or m="$2"
+
+    if (arr.length === 1) {
+      var _props$theme5;
+
+      return betterGet(props == null ? void 0 : (_props$theme5 = props.theme) == null ? void 0 : _props$theme5.space, value, value);
+    }
+
     return value.split(' ').reduce(function (acc, curr) {
-      var _props$theme4;
+      var _props$theme6;
 
-      return [].concat(acc, [betterGet(props == null ? void 0 : (_props$theme4 = props.theme) == null ? void 0 : _props$theme4.space, curr)]);
+      var value = betterGet(props == null ? void 0 : (_props$theme6 = props.theme) == null ? void 0 : _props$theme6.space, curr, curr);
+
+      if (typeof value === 'number') {
+        // if a number is returned, it's not converted
+        // to a pixel value by the css parser in most libraries
+        // so we need to make it a string with a pixel value
+        value = value + "px";
+      }
+
+      return [].concat(acc, [value]);
     }, []).filter(Boolean).join(' ');
@@ -880,0 +832,0 @@ }

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 o=arguments[e];for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&(r[t]=o[t])}return r}).apply(this,arguments)}function e(r,e){(null==e||e>r.length)&&(e=r.length);for(var o=0,t=new Array(e);o<e;o++)t[o]=r[o];return t}Object.defineProperty(exports,"__esModule",{value:!0});var o=function(r,e,o,t){if(!r)return o;for(var i="string"==typeof e?e.split("."):[e],a=r,n=0;n<i.length;n++){var s=i[n];a=!a||"number"!=typeof s&&"string"!=typeof s?t:a[s]}return a===t?o:a},t=/\$(\S*)/gi,i=function(r,i,a,n){var s;return(s="string"==typeof i&&i.includes("$")?function(r,i,a){if(r&&i){var n=function(r,i,a){if(i){var n,s=i.match(t);if(!s)return n;for(var p,l=function(r,o){var t;if("undefined"==typeof Symbol||null==r[Symbol.iterator]){if(Array.isArray(r)||(t=function(r,o){if(r){if("string"==typeof r)return e(r,void 0);var t=Object.prototype.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?e(r,void 0):void 0}}(r))){t&&(r=t);var i=0;return function(){return i>=r.length?{done:!0}:{done:!1,value:r[i++]}}}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(t=r[Symbol.iterator]()).next.bind(t)}(s);!(p=l()).done;){var d,c=p.value,f=c.split("$")[1];(null==(d=n)?void 0:d[c])||o(r,f)&&((n=n||{})[c]=o(r,f))}return n}}(r,i);if(n){var s=i;for(var p in n)s=s.replace(p,n[p]);return s}}}(r,i):o(r,i))===n?a:s},a=function(r,e,o,t,a){return i(e,r,!0===t?a:r)},n=function(r){var e=r.transform,o=void 0===e?a:e,t=r.properties||[r.property],i=function(r,e,i,a){var n={},s=o(r,e,i,a.strict);return null===s||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"}),p=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 l(e,o){return r({},e,o)}var d=function(r,e){var o=l(r,e);for(var t in r){var i;r[t]&&"object"==typeof e[t]&&(o=l(o,((i={})[t]=l(r[t],e[t]),i)))}return o},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=function(r,e,o){var t,a,n,s;if("string"!=typeof r)return r;var p=i((null==o||null==(t=o.theme)?void 0:t.borders)||e,r);if(p)return p;var l=r.split(" "),d=l[0],c=l[1],f=l[2];return[i(null==o||null==(a=o.theme)?void 0:a.borderWidths,d,d),i(null==o||null==(n=o.theme)?void 0:n.borderStyles,c,c),i(null==o||null==(s=o.theme)?void 0:s.colors,f,f)].filter(Boolean).join(" ")},g={border:{property:"border",scale:"borders",transform:u},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:u},borderTopLeftRadius:{property:"borderTopLeftRadius",scale:"radii"},borderTopRightRadius:{property:"borderTopRightRadius",scale:"radii"},borderRight:{property:"borderRight",scale:"borders",transform:u},borderBottom:{property:"borderBottom",scale:"borders",transform:u},borderBottomLeftRadius:{property:"borderBottomLeftRadius",scale:"radii"},borderBottomRightRadius:{property:"borderBottomRightRadius",scale:"radii"},borderLeft:{property:"borderLeft",scale:"borders",transform:u},borderX:{properties:["borderLeft","borderRight"],scale:"borders",transform:u},borderY:{properties:["borderTop","borderBottom"],scale:"borders",transform:u},borderTopWidth:{property:"borderTopWidth",scale:"borderWidths"},borderTopColor:{property:"borderTopColor",scale:"colors"},borderTopStyle:{property:"borderTopStyle",scale:"borderStyles"}};g.borderTopLeftRadius={property:"borderTopLeftRadius",scale:"radii"},g.borderTopRightRadius={property:"borderTopRightRadius",scale:"radii"},g.borderBottomWidth={property:"borderBottomWidth",scale:"borderWidths"},g.borderBottomColor={property:"borderBottomColor",scale:"colors"},g.borderBottomStyle={property:"borderBottomStyle",scale:"borderStyles"},g.borderBottomLeftRadius={property:"borderBottomLeftRadius",scale:"radii"},g.borderBottomRightRadius={property:"borderBottomRightRadius",scale:"radii"},g.borderLeftWidth={property:"borderLeftWidth",scale:"borderWidths"},g.borderLeftColor={property:"borderLeftColor",scale:"colors"},g.borderLeftStyle={property:"borderLeftStyle",scale:"borderStyles"},g.borderRightWidth={property:"borderRightWidth",scale:"borderWidths"},g.borderRightColor={property:"borderRightColor",scale:"colors"},g.borderRightStyle={property:"borderRightStyle",scale:"borderStyles"};var m=g,y={color:{property:"color",scale:"colors"},backgroundColor:{property:"backgroundColor",scale:"colors"},fill:{property:"fill",scale:"colors"},stroke:{property:"stroke",scale:"colors"},opacity:!0};y.bg=y.backgroundColor;var b=y,h=function(r){return"number"==typeof r&&!isNaN(r)},v=function(r,e){if(!h(r))return i(e,r,r);var o=r<0,t=Math.abs(r),a=i(e,t,t);return h(a)?a*(o?-1:1):o?"-"+a:a},R={position:!0,zIndex:{property:"zIndex",scale:"zIndices"},top:{property:"top",scale:"space",transform:v},right:{property:"right",scale:"space",transform:v},bottom:{property:"bottom",scale:"space",transform:v},left:{property:"left",scale:"space",transform:v}},S=function(r,e,o){var t,a=i(null==o||null==(t=o.theme)?void 0:t.shadows,r);if(a)return a;if("string"==typeof r){var n,s=r.split(" "),p=s.pop(),l=i(null==o||null==(n=o.theme)?void 0:n.colors,p);if(l)return[].concat(s,[l]).join(" ")}return r},x={boxShadow:{property:"boxShadow",scale:"shadows",transform:S},textShadow:{property:"textShadow",scale:"shadows",transform:S}},w=function(r,e,o){if("string"==typeof r||"number"==typeof r){var t,i=v(r,null==o||null==(t=o.theme)?void 0:t.space);if(i)return i}return"string"==typeof r?r.split(" ").reduce((function(r,e){var t;return[].concat(r,[v(e,null==o||null==(t=o.theme)?void 0:t.space)])}),[]).filter(Boolean).join(" "):r},k=function(r,e,o){if("string"==typeof r||"number"==typeof r){var t,a=i(null==o||null==(t=o.theme)?void 0:t.space,r);if(a)return a}return"string"==typeof r?r.split(" ").reduce((function(r,e){var t;return[].concat(r,[i(null==o||null==(t=o.theme)?void 0:t.space,e)])}),[]).filter(Boolean).join(" "):r},B={margin:{property:"margin",scale:"space",transform:w},marginTop:{property:"marginTop",scale:"space",transform:w},marginRight:{property:"marginRight",scale:"space",transform:w},marginBottom:{property:"marginBottom",scale:"space",transform:w},marginLeft:{property:"marginLeft",scale:"space",transform:w},marginX:{properties:["marginLeft","marginRight"],scale:"space",transform:w},marginY:{properties:["marginTop","marginBottom"],scale:"space",transform:w}};B.m=B.margin,B.mt=B.marginTop,B.mr=B.marginRight,B.mb=B.marginBottom,B.ml=B.marginLeft,B.mx=B.marginX,B.my=B.marginY;var T={padding:{property:"padding",scale:"space",transform:k},paddingTop:{property:"paddingTop",scale:"space",transform:k},paddingRight:{property:"paddingRight",scale:"space",transform:k},paddingBottom:{property:"paddingBottom",scale:"space",transform:k},paddingLeft:{property:"paddingLeft",scale:"space",transform:k},paddingX:{properties:["paddingLeft","paddingRight"],scale:"space",transform:k},paddingY:{properties:["paddingTop","paddingBottom"],scale:"space",transform:k}};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 W=r({},T,B);exports.background=f,exports.border=m,exports.color=b,exports.createSystem=function(e){var t=void 0===e?{}:e,i=t.strict,a=void 0!==i&&i,s=t.pseudoSelectors,l=void 0===s?{_hover:"&:hover",_focus:"&:focus",_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",_odd:"&:nth-of-type(odd)",_even:"&:nth-of-type(even)"}:s;return function(e){var t={};return Object.keys(e).forEach((function(r){var o=e[r];!0!==o?"function"!=typeof o&&(t[r]=n(o)):t[r]=n({property:r,scale:r})})),function e(t,i,a){void 0===i&&(i={}),void 0===a&&(a=!1);var n={strict:a},s=function(e){var a,s={},l=!1,f=Boolean(null==(a=e.theme)?void 0:a.disableSystemPropsCache),u=function(i,a){var s,p,d=t[a],u=i[a],g=o(e.theme,d.scale);if("function"==typeof u&&(u=u(e.theme)),"object"==typeof u){var m;if(n.breakpoints=!f&&n.breakpoints||(null==e||null==(m=e.theme)?void 0:m.breakpoints),Array.isArray(u)){if(void 0===n.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 n.media=!f&&n.media||[null].concat((p=s=n.breakpoints,Array.isArray(s)||(p=Object.values(s)),p.map(c))),function(e){var o=e.cache,t=e.systemConfig,i=e.scale,a=e.props,n={},s=o.media;return e.propValue.slice(0,s.length).forEach((function(e,p){var l,d="function"==typeof e?e(a.theme):e,c=s[p],f=t(d,i,a,o);n=r({},n,c?((l={})[c]=r({},n[c],f),l):f)})),n}({cache:n,systemConfig:d,scale:g,propValue:u,props:i})}if(null!==u)return l=!0,function(e){var o=e.cache,t=e.systemConfig,i=e.scale,a=e.propValue,n=e.props,s=o.breakpoints,p={};for(var l in a){var d=s[l],c=a[l],f=t("function"==typeof c?c(n.theme):c,i,n,o);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:n,systemConfig:d,scale:g,propValue:u,props:i})}return d(u,g,e,n)};for(var g in e)if(i[g]){var m=i[g],y=e[g];for(var b in y)s[m]=r({},s[m],u(y,b)),l&&(s[i[g]]=p(s[i[g]]),l=!1)}else t[g]&&(s=d(s,u(e,g)));return l&&(s=p(s)),s};s.config=t,s.propNames=Object.keys(t),s.cache=n;var l=Object.keys(t).filter((function(r){return"config"!==r}));return l.length>1&&l.forEach((function(r){var o,i;Object.assign(s,((i={})[r]=e(((o={})[r]=t[r],o)),i))})),s}(t,l,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=i,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={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},exports.position=R,exports.shadow=x,exports.space=W,exports.styledSystemLayout={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},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 o=arguments[e];for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&(r[t]=o[t])}return r}).apply(this,arguments)}Object.defineProperty(exports,"__esModule",{value:!0});var e=function(r,e,o,t){if(!r)return o;for(var i="string"==typeof e?e.split("."):[e],a=r,s=0;s<i.length;s++){var p=i[s];a=!a||"number"!=typeof p&&"string"!=typeof p?t:a[p]}return a===t?o:a},o=function(r,o,t,i){var a;return(a="string"==typeof o&&o.startsWith("$")?e(r,o.slice(1)):e(r,o))===i?t:a},t=function(r,e,t,i,a){return o(e,r,!0===i?a:r)},i=function(r){var e=r.transform,o=void 0===e?t:e,i=r.properties||[r.property],a=function(r,e,t,a){var s={},p=o(r,e,t,a.strict);return null===p||i.forEach((function(r){r&&(s[r]=p)})),s};return Object.assign(a,{scale:r.scale,defaultScale:r.defaultScale}),a},a=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"}),s=function(r){var e={};return Object.keys(r).sort((function(r,e){return a.compare(r,e)})).forEach((function(o){e[o]=r[o]})),e};function p(e,o){return r({},e,o)}var n=function(r,e){var o=p(r,e);for(var t in r){var i;r[t]&&"object"==typeof e[t]&&(o=p(o,((i={})[t]=p(r[t],e[t]),i)))}return o},l=function(r){return"@media screen and (min-width: "+r+")"},d={background:!0,backgroundImage:!0,backgroundSize:!0,backgroundPosition:!0,backgroundRepeat:!0};d.bgImage=d.backgroundImage,d.bgSize=d.backgroundSize,d.bgPosition=d.backgroundPosition,d.bgRepeat=d.backgroundRepeat;var c=function(r,e,t){var i,a,s,p;if("string"!=typeof r)return r;var n=o((null==t||null==(i=t.theme)?void 0:i.borders)||e,r);if(n)return n;var l=r.split(" "),d=l[0],c=l[1],f=l[2];return[o(null==t||null==(a=t.theme)?void 0:a.borderWidths,d,d),o(null==t||null==(s=t.theme)?void 0:s.borderStyles,c,c),o(null==t||null==(p=t.theme)?void 0:p.colors,f,f)].filter(Boolean).join(" ")},f={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"}};f.borderTopLeftRadius={property:"borderTopLeftRadius",scale:"radii"},f.borderTopRightRadius={property:"borderTopRightRadius",scale:"radii"},f.borderBottomWidth={property:"borderBottomWidth",scale:"borderWidths"},f.borderBottomColor={property:"borderBottomColor",scale:"colors"},f.borderBottomStyle={property:"borderBottomStyle",scale:"borderStyles"},f.borderBottomLeftRadius={property:"borderBottomLeftRadius",scale:"radii"},f.borderBottomRightRadius={property:"borderBottomRightRadius",scale:"radii"},f.borderLeftWidth={property:"borderLeftWidth",scale:"borderWidths"},f.borderLeftColor={property:"borderLeftColor",scale:"colors"},f.borderLeftStyle={property:"borderLeftStyle",scale:"borderStyles"},f.borderRightWidth={property:"borderRightWidth",scale:"borderWidths"},f.borderRightColor={property:"borderRightColor",scale:"colors"},f.borderRightStyle={property:"borderRightStyle",scale:"borderStyles"};var u=f,g={color:{property:"color",scale:"colors"},backgroundColor:{property:"backgroundColor",scale:"colors"},fill:{property:"fill",scale:"colors"},stroke:{property:"stroke",scale:"colors"},opacity:!0};g.bg=g.backgroundColor;var m=g,h=function(r){return"number"==typeof r&&!isNaN(r)},y=function(r,e){if(!h(r)){if("string"==typeof r&&r.startsWith("-")){var t=r.slice(1),i=o(e,t,t);return h(i)?-1*i:"-"+i}return o(e,r,r)}var a=r<0,s=Math.abs(r),p=o(e,s,s);return h(p)?p*(a?-1:1):a?"-"+p:p},b={position:!0,zIndex:{property:"zIndex",scale:"zIndices"},top:{property:"top",scale:"space",transform:y},right:{property:"right",scale:"space",transform:y},bottom:{property:"bottom",scale:"space",transform:y},left:{property:"left",scale:"space",transform:y}},v=function(r,e,t){var i,a=o(null==t||null==(i=t.theme)?void 0:i.shadows,r);if(a)return a;if("string"==typeof r){var s,p=r.split(" "),n=p.pop(),l=o(null==t||null==(s=t.theme)?void 0:s.colors,n);if(l)return[].concat(p,[l]).join(" ")}return r},R={boxShadow:{property:"boxShadow",scale:"shadows",transform:v},textShadow:{property:"textShadow",scale:"shadows",transform:v}},x=function(r,e,o){if("number"==typeof r){var t,i=y(r,null==o||null==(t=o.theme)?void 0:t.space);if(i)return i}if("string"==typeof r){var a,s=r.split(" ");return 1===s.length?y(r,null==o||null==(a=o.theme)?void 0:a.space):s.reduce((function(r,e){var t,i=y(e,null==o||null==(t=o.theme)?void 0:t.space);return"number"==typeof i&&(i+="px"),[].concat(r,[i])}),[]).filter(Boolean).join(" ")}return r},S=function(r,e,t){if("number"==typeof r){var i,a=o(null==t||null==(i=t.theme)?void 0:i.space,r);if(a)return a}var s;return"string"==typeof r?1===r.split(" ").length?o(null==t||null==(s=t.theme)?void 0:s.space,r,r):r.split(" ").reduce((function(r,e){var i,a=o(null==t||null==(i=t.theme)?void 0:i.space,e,e);return"number"==typeof a&&(a+="px"),[].concat(r,[a])}),[]).filter(Boolean).join(" "):r},w={margin:{property:"margin",scale:"space",transform:x},marginTop:{property:"marginTop",scale:"space",transform:x},marginRight:{property:"marginRight",scale:"space",transform:x},marginBottom:{property:"marginBottom",scale:"space",transform:x},marginLeft:{property:"marginLeft",scale:"space",transform:x},marginX:{properties:["marginLeft","marginRight"],scale:"space",transform:x},marginY:{properties:["marginTop","marginBottom"],scale:"space",transform:x}};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 k={padding:{property:"padding",scale:"space",transform:S},paddingTop:{property:"paddingTop",scale:"space",transform:S},paddingRight:{property:"paddingRight",scale:"space",transform:S},paddingBottom:{property:"paddingBottom",scale:"space",transform:S},paddingLeft:{property:"paddingLeft",scale:"space",transform:S},paddingX:{properties:["paddingLeft","paddingRight"],scale:"space",transform:S},paddingY:{properties:["paddingTop","paddingBottom"],scale:"space",transform:S}};k.p=k.padding,k.pt=k.paddingTop,k.pr=k.paddingRight,k.pb=k.paddingBottom,k.pl=k.paddingLeft,k.px=k.paddingX,k.py=k.paddingY;var B=r({},k,w);exports.background=d,exports.border=u,exports.color=m,exports.createSystem=function(o){var t=void 0===o?{}:o,a=t.strict,p=void 0!==a&&a,d=t.pseudoSelectors,c=void 0===d?{_hover:"&:hover",_focus:"&:focus",_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",_odd:"&:nth-of-type(odd)",_even:"&:nth-of-type(even)"}:d;return function(o){var t={};return Object.keys(o).forEach((function(r){var e=o[r];!0!==e?"function"!=typeof e&&(t[r]=i(e)):t[r]=i({property:r,scale:r})})),function o(t,i,a){void 0===i&&(i={}),void 0===a&&(a=!1);var p={strict:a},d=function(o){var a,d={},c=!1,f=Boolean(null==(a=o.theme)?void 0:a.disableSystemPropsCache),u=function(i,a){var s,n,d=t[a],u=i[a],g=e(o.theme,d.scale);if("function"==typeof u&&(u=u(o.theme)),"object"==typeof u){var m;if(p.breakpoints=!f&&p.breakpoints||(null==o||null==(m=o.theme)?void 0:m.breakpoints),Array.isArray(u)){if(void 0===p.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 p.media=!f&&p.media||[null].concat((n=s=p.breakpoints,Array.isArray(s)||(n=Object.values(s)),n.map(l))),function(e){var o=e.cache,t=e.systemConfig,i=e.scale,a=e.props,s={},p=o.media;return e.propValue.slice(0,p.length).forEach((function(e,n){var l,d="function"==typeof e?e(a.theme):e,c=p[n],f=t(d,i,a,o);s=r({},s,c?((l={})[c]=r({},s[c],f),l):f)})),s}({cache:p,systemConfig:d,scale:g,propValue:u,props:i})}if(null!==u)return c=!0,function(e){var o=e.cache,t=e.systemConfig,i=e.scale,a=e.propValue,s=e.props,p=o.breakpoints,n={};for(var l in a){var d=p[l],c=a[l],f=t("function"==typeof c?c(s.theme):c,i,s,o);if(d){var u,g="@media screen and (min-width: "+d+")";n=r({},n,((u={})[g]=r({},n[g],f),u))}else n=r({},n,f)}return n}({cache:p,systemConfig:d,scale:g,propValue:u,props:i})}return d(u,g,o,p)};for(var g in o)if(i[g]){var m=i[g],h=o[g];for(var y in h)d[m]=r({},d[m],u(h,y)),c&&(d[i[g]]=s(d[i[g]]),c=!1)}else t[g]&&(d=n(d,u(o,g)));return c&&(d=s(d)),d};d.config=t,d.propNames=Object.keys(t),d.cache=p;var c=Object.keys(t).filter((function(r){return"config"!==r}));return c.length>1&&c.forEach((function(r){var e,i;Object.assign(d,((i={})[r]=o(((e={})[r]=t[r],e)),i))})),d}(t,c,p)}},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=o,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={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},exports.position=b,exports.shadow=R,exports.space=B,exports.styledSystemLayout={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},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

@@ -19,44 +19,2 @@ function _extends() {
 
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it;
-
-  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-      if (it) o = it;
-      var i = 0;
-      return function () {
-        if (i >= o.length) return {
-          done: true
-        };
-        return {
-          done: false,
-          value: o[i++]
-        };
-      };
-    }
-
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  it = o[Symbol.iterator]();
-  return it.next.bind(it);
-}
-
 var get = function get(object, path, defaultValue, // Not used, should be undefined
@@ -87,63 +45,7 @@ // To make sure we get a true undefined
 };
-var REGEX_$ = /\$(\S*)/gi;
-
-function getDollaValues(theme, str, undef) {
-  if (!str) {
-    return undef;
-  }
-
-  var results = str.match(REGEX_$);
-  var values;
-
-  if (!results) {
-    return values;
-  }
-
-  for (var _iterator = _createForOfIteratorHelperLoose(results), _step; !(_step = _iterator()).done;) {
-    var _values;
-
-    var result = _step.value;
-
-    var _result$split = result.split('$'),
-        path = _result$split[1]; // If we haven't already get'd the path
-
-
-    if (!((_values = values) == null ? void 0 : _values[result])) {
-      var found = get(theme, path);
-
-      if (found) {
-        values = values || {};
-        values[result] = get(theme, path);
-      }
-    }
-  }
-
-  return values;
-}
-
-var systemValueParser = function systemValueParser(theme, value, undef) {
-  if (!theme || !value) {
-    return undef;
-  }
-
-  var parsedMap = getDollaValues(theme, value);
-
-  if (!parsedMap) {
-    return;
-  }
-
-  var newString = value;
-
-  for (var systemValue in parsedMap) {
-    var replacement = parsedMap[systemValue];
-    newString = newString.replace(systemValue, replacement);
-  }
-
-  return newString;
-};
 var betterGet = function betterGet(scale, value, defaultValue, undef) {
   var result;
 
-  if (typeof value === 'string' && value.includes('$')) {
-    result = systemValueParser(scale, value);
+  if (typeof value === 'string' && value.startsWith('$')) {
+    result = get(scale, value.slice(1));
   } else {
@@ -752,2 +654,14 @@ result = get(scale, value);
   if (!isNumber(n)) {
+    if (typeof n === 'string' && n.startsWith('-')) {
+      var raw = n.slice(1);
+
+      var _value = betterGet(scale, raw, raw);
+
+      if (isNumber(_value)) {
+        return _value * -1;
+      }
+
+      return "-" + _value;
+    }
+
     return betterGet(scale, n, n);
@@ -834,3 +748,4 @@ }
 var getMargin = function getMargin(value, _, props) {
-  if (typeof value === 'string' || typeof value === 'number') {
+  // Not using shorthand, just a theme value, e.g, m={4}
+  if (typeof value === 'number') {
     var _props$theme;
@@ -846,6 +761,24 @@
   if (typeof value === 'string') {
-    return value.split(' ').reduce(function (acc, curr) {
+    var arr = value.split(' '); // applied to all sides, return a number or string
+    // e.g., m="2" or m="$2"
+
+    if (arr.length === 1) {
       var _props$theme2;
 
-      return [].concat(acc, [positiveOrNegative(curr, props == null ? void 0 : (_props$theme2 = props.theme) == null ? void 0 : _props$theme2.space)]);
+      return positiveOrNegative(value, props == null ? void 0 : (_props$theme2 = props.theme) == null ? void 0 : _props$theme2.space);
+    }
+
+    return arr.reduce(function (acc, curr) {
+      var _props$theme3;
+
+      var value = positiveOrNegative(curr, props == null ? void 0 : (_props$theme3 = props.theme) == null ? void 0 : _props$theme3.space);
+
+      if (typeof value === 'number') {
+        // if a number is returned, it's not converted
+        // to a pixel value by the css parser in most libraries
+        // so we need to make it a string with a pixel value
+        value = value + "px";
+      }
+
+      return [].concat(acc, [value]);
     }, []).filter(Boolean).join(' ');
@@ -858,6 +791,7 @@ }
 var getPadding = function getPadding(value, _, props) {
-  if (typeof value === 'string' || typeof value === 'number') {
-    var _props$theme3;
+  // Not using shorthand, just a theme value, e.g, p={4}
+  if (typeof value === 'number') {
+    var _props$theme4;
 
-    var result = betterGet(props == null ? void 0 : (_props$theme3 = props.theme) == null ? void 0 : _props$theme3.space, value);
+    var result = betterGet(props == null ? void 0 : (_props$theme4 = props.theme) == null ? void 0 : _props$theme4.space, value);
 
@@ -870,6 +804,24 @@ if (result) {
   if (typeof value === 'string') {
+    var arr = value.split(' '); // applied to all sides, return a number or string
+    // e.g., m="2" or m="$2"
+
+    if (arr.length === 1) {
+      var _props$theme5;
+
+      return betterGet(props == null ? void 0 : (_props$theme5 = props.theme) == null ? void 0 : _props$theme5.space, value, value);
+    }
+
     return value.split(' ').reduce(function (acc, curr) {
-      var _props$theme4;
+      var _props$theme6;
 
-      return [].concat(acc, [betterGet(props == null ? void 0 : (_props$theme4 = props.theme) == null ? void 0 : _props$theme4.space, curr)]);
+      var value = betterGet(props == null ? void 0 : (_props$theme6 = props.theme) == null ? void 0 : _props$theme6.space, curr, curr);
+
+      if (typeof value === 'number') {
+        // if a number is returned, it's not converted
+        // to a pixel value by the css parser in most libraries
+        // so we need to make it a string with a pixel value
+        value = value + "px";
+      }
+
+      return [].concat(acc, [value]);
     }, []).filter(Boolean).join(' ');
@@ -876,0 +828,0 @@ }

package.json

 {
   "name": "system-props",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Inspired by styled-system, a responsive, theme-based style props for building design systems with React.",
@@ -14,4 +14,7 @@ "author": "Rogin Farrer",
     "@rollup/plugin-alias": "^3.1.1",
+    "docz": "^2.3.1",
     "husky": "^4.3.0",
     "np": "^6.5.0",
+    "react": "16",
+    "react-dom": "16",
     "tsdx": "^0.14.0",
@@ -37,2 +40,7 @@ "tslib": "^2.0.1",
     "prepare": "tsdx build",
+    "start-sc": "yarn --cwd ./examples/styled-components start",
+    "docs": "docz dev",
+    "docs:build": "docz build",
+    "docs:serve": "docz build && docz serve",
+    "clean": "rm -rf node_modules && rm -rf examples/**/node_modules && rm -rf .docz && rm -rf dist",
     "release": "np"
@@ -39,0 +47,0 @@ },

src/core/get.ts

@@ -95,4 +95,4 @@ import { Theme } from '@/types';
 
-  if (typeof value === 'string' && value.includes('$')) {
-    result = systemValueParser(scale, value);
+  if (typeof value === 'string' && value.startsWith('$')) {
+    result = get(scale, value.slice(1));
   } else {
@@ -99,0 +99,0 @@ result = get(scale, value);

src/core/tests/get.test.ts

@@ -59,1 +59,6 @@ import { betterGet, systemValueParser } from '../get';
 });
+
+test('returns number values with $', () => {
+  const a = get([0, 4, 8], '$2');
+  expect(a).toBe(8);
+});

src/props/positiveOrNegative.ts

@@ -8,2 +8,10 @@ import { Theme } from '@/types';
   if (!isNumber(n)) {
+    if (typeof n === 'string' && n.startsWith('-')) {
+      const raw = n.slice(1);
+      const value = betterGet(scale, raw, raw);
+      if (isNumber(value)) {
+        return value * -1;
+      }
+      return `-${value}`;
+    }
     return betterGet(scale, n, n);
@@ -10,0 +18,0 @@ }

src/props/space/index.ts

@@ -6,3 +6,4 @@ import { betterGet } from '@/core/get';
 const getMargin: Transform = (value, _, props) => {
-  if (typeof value === 'string' || typeof value === 'number') {
+  // Not using shorthand, just a theme value, e.g, m={4}
+  if (typeof value === 'number') {
     const result = positiveOrNegative(value, props?.theme?.space);
@@ -13,7 +14,22 @@ if (result) {
   }
+
   if (typeof value === 'string') {
-    return value
-      .split(' ')
+    const arr = value.split(' ');
+
+    // applied to all sides, return a number or string
+    // e.g., m="2" or m="$2"
+    if (arr.length === 1) {
+      return positiveOrNegative(value, props?.theme?.space);
+    }
+
+    return arr
       .reduce((acc: string[], curr: string) => {
-        return [...acc, positiveOrNegative(curr, props?.theme?.space)];
+        let value = positiveOrNegative(curr, props?.theme?.space);
+        if (typeof value === 'number') {
+          // if a number is returned, it's not converted
+          // to a pixel value by the css parser in most libraries
+          // so we need to make it a string with a pixel value
+          value = `${value}px`;
+        }
+        return [...acc, value];
       }, [])
@@ -23,2 +39,3 @@ .filter(Boolean)
   }
+
   return value;
@@ -28,3 +45,4 @@ };
 const getPadding: Transform = (value, _, props) => {
-  if (typeof value === 'string' || typeof value === 'number') {
+  // Not using shorthand, just a theme value, e.g, p={4}
+  if (typeof value === 'number') {
     const result = betterGet(props?.theme?.space, value);
@@ -35,7 +53,23 @@ if (result) {
   }
+
   if (typeof value === 'string') {
+    const arr = value.split(' ');
+
+    // applied to all sides, return a number or string
+    // e.g., m="2" or m="$2"
+    if (arr.length === 1) {
+      return betterGet(props?.theme?.space, value, value);
+    }
+
     return value
       .split(' ')
       .reduce((acc: string[], curr: string) => {
-        return [...acc, betterGet(props?.theme?.space, curr)];
+        let value = betterGet(props?.theme?.space, curr, curr);
+        if (typeof value === 'number') {
+          // if a number is returned, it's not converted
+          // to a pixel value by the css parser in most libraries
+          // so we need to make it a string with a pixel value
+          value = `${value}px`;
+        }
+        return [...acc, value];
       }, [])
@@ -45,2 +79,3 @@ .filter(Boolean)
   }
+
   return value;
@@ -47,0 +82,0 @@ };

src/props/space/tests/index.test.ts

@@ -12,3 +12,3 @@ import { space } from '..';
       breakpoints: ['40em', '52em', '64em'],
-      space: ['0px', '4px', '8px', '12px', '16px'],
+      space: [0, 4, 8, 12, 16],
     },
@@ -32,3 +32,3 @@ ...config,
   const styles = themedParser({ m: -2 });
-  expect(styles).toEqual({ margin: '-8px' });
+  expect(styles).toEqual({ margin: -8 });
 });
@@ -68,5 +68,5 @@
   expect(styles).toEqual({
-    margin: '0px',
-    '@media screen and (min-width: 40em)': { margin: '8px' },
-    '@media screen and (min-width: 52em)': { margin: '12px' },
+    margin: 0,
+    '@media screen and (min-width: 40em)': { margin: 8 },
+    '@media screen and (min-width: 52em)': { margin: 12 },
   });
@@ -79,3 +79,3 @@ });
   });
-  expect(styles).toEqual({ paddingLeft: '8px', paddingRight: '8px' });
+  expect(styles).toEqual({ paddingLeft: 8, paddingRight: 8 });
 });
@@ -118,3 +118,3 @@
   const styles = themedParser({ pl: 2 });
-  expect(styles).toEqual({ paddingLeft: '8px' });
+  expect(styles).toEqual({ paddingLeft: 8 });
 });
@@ -124,3 +124,3 @@
   const styles = themedParser({ pl: 0 });
-  expect(styles).toEqual({ paddingLeft: '0px' });
+  expect(styles).toEqual({ paddingLeft: 0 });
 });
@@ -133,3 +133,3 @@
   });
-  expect(styles).toEqual({ paddingLeft: '8px', paddingRight: '8px' });
+  expect(styles).toEqual({ paddingLeft: 8, paddingRight: 8 });
 });
@@ -142,3 +142,3 @@
   });
-  expect(styles).toEqual({ paddingTop: '8px', paddingBottom: '8px' });
+  expect(styles).toEqual({ paddingTop: 8, paddingBottom: 8 });
 });
@@ -151,3 +151,3 @@
   });
-  expect(styles).toEqual({ marginLeft: '8px', marginRight: '8px' });
+  expect(styles).toEqual({ marginLeft: 8, marginRight: 8 });
 });
@@ -160,3 +160,3 @@
   });
-  expect(styles).toEqual({ marginTop: '8px', marginBottom: '8px' });
+  expect(styles).toEqual({ marginTop: 8, marginBottom: 8 });
 });
@@ -169,3 +169,3 @@
   });
-  expect(styles).toEqual({ margin: '8px' });
+  expect(styles).toEqual({ margin: 8 });
 });
@@ -192,8 +192,8 @@
   expect(styles).toEqual({
-    margin: '16px',
-    marginLeft: '12px',
-    marginRight: '8px',
-    padding: '16px',
-    paddingBottom: '12px',
-    paddingTop: '8px',
+    margin: 16,
+    marginLeft: 12,
+    marginRight: 8,
+    padding: 16,
+    paddingBottom: 12,
+    paddingTop: 8,
   });
@@ -212,6 +212,6 @@ });
   expect(styles).toEqual({
-    marginLeft: '4px',
-    marginRight: '8px',
-    paddingLeft: '4px',
-    paddingRight: '8px',
+    marginLeft: 4,
+    marginRight: 8,
+    paddingLeft: 4,
+    paddingRight: 8,
   });
@@ -229,8 +229,8 @@ });
   expect(styles).toEqual({
-    margin: '0px',
+    margin: 0,
     '@media screen and (min-width: 40em)': {
-      margin: '4px',
+      margin: 4,
     },
     '@media screen and (min-width: 52em)': {
-      margin: '8px',
+      margin: 8,
     },
@@ -271,1 +271,26 @@ });
 });
+
+test('handles shorthand values', () => {
+  const styles = themedParser({ m: '2 4', p: '2 4' });
+  expect(styles).toEqual({ margin: '8px 16px', padding: '8px 16px' });
+});
+
+test('handles shorthand negative values', () => {
+  const styles = themedParser({ m: '-2 -4' });
+  expect(styles).toEqual({ margin: '-8px -16px' });
+});
+
+test('handles shorthand values ($)', () => {
+  const styles = themedParser({ m: '$2 $4', p: '$2 $4' });
+  expect(styles).toEqual({ margin: '8px 16px', padding: '8px 16px' });
+});
+
+test('handles shorthand negative values ($)', () => {
+  const styles = themedParser({ p: 2, m: '$2 $4 -$4 -$2' });
+  expect(styles).toEqual({ padding: 8, margin: '8px 16px -16px -8px' });
+});
+
+test('padding does not handle negative values, just passes through', () => {
+  const styles = themedParser({ paddingLeft: -1, p: '1 -2 -$2 $1' });
+  expect(styles).toEqual({ paddingLeft: -1, padding: '4px -2 -$2 4px' });
+});

No alert changes

Improved metrics

Total package byte prevSize

275600

increased by1.03%

Worsened metrics

Dev dependency count

9

increased by50%

Lines of code

4305

decreased by-0.46%

No dependency changes