styled-system - npm Package Compare versions

Comparing version 3.2.1 to 4.0.0-0

CHANGELOG.md

@@ -1,4 +0,22 @@
-
 # Changelog
 
+## Unreleased
+
+- Rewritten core for less code duplication
+- No longer merges returned style object, but returns arrays instead, which appear to work with common CSS-in-JS libraries
+- `space` function has been rewritten with the core `style` and `compose` utilities
+- Adds long-form props for margin and padding (e.g. `marginTop`). Shorthand aliases still work as before.
+- Reintroduced the `alias` argument to `style` utility
+- Removes the `styles` object export
+- Removes the `util` object export
+- Removes `meta` field from propTypes, which was used in system-docs
+- Removes `merge` utility
+- Removes the `mixed` utility since it did not behave as expected
+- The theme "scale" is now passed as the second argument to the `transformValue` option in `style` utility
+- Removes the `ratio` style function
+- The following changes to the `borders` style function
+  - The shorthand border props no longer transform numbers to pixel widths with a `solid` `border-style`
+  - Adds `borderWidth`, `borderStyle`, `borderColor`, and `borderRadius` props
+  - All border props are also available as individual imports
+
 ## v3.2.1 2019-01-02
@@ -174,3 +192,1 @@
 - Legacy `responsiveStyle` arguments API
-
-

dist/index.cjs.js

@@ -6,18 +6,21 @@ "use strict";
 exports.__esModule = true;
-exports.mixed = exports.styles = exports.buttonStyle = exports.colorStyle = exports.textStyle = exports.left = exports.bottom = exports.right = exports.top = exports.zIndex = exports.position = exports.backgroundRepeat = exports.backgroundPosition = exports.backgroundSize = exports.backgroundImage = exports.background = exports.overflow = exports.opacity = exports.boxShadow = exports.borderRadius = exports.borderColor = exports.borders = exports.borderLeft = exports.borderBottom = exports.borderRight = exports.borderTop = exports.border = exports.gridArea = exports.gridTemplateAreas = exports.gridTemplateRows = exports.gridTemplateColumns = exports.gridAutoRows = exports.gridAutoColumns = exports.gridAutoFlow = exports.gridRow = exports.gridColumn = exports.gridRowGap = exports.gridColumnGap = exports.gridGap = exports.order = exports.alignSelf = exports.justifySelf = exports.flex = exports.flexDirection = exports.flexBasis = exports.flexWrap = exports.justifyContent = exports.justifyItems = exports.alignContent = exports.alignItems = exports.verticalAlign = exports.ratio = exports.ratioPadding = exports.size = exports.sizeHeight = exports.sizeWidth = exports.minHeight = exports.maxHeight = exports.height = exports.minWidth = exports.maxWidth = exports.display = exports.letterSpacing = exports.fontStyle = exports.fontWeight = exports.lineHeight = exports.textAlign = exports.fontFamily = exports.color = exports.bgColor = exports.textColor = exports.fontSize = exports.width = exports.space = exports.util = exports.variant = exports.getWidth = exports.style = exports.createMediaQuery = exports.compose = exports.merge = exports.cloneFunc = exports.themeGet = exports.get = exports.isObject = exports.isArray = exports.px = exports.num = exports.is = exports.defaultBreakpoints = exports.propTypes = void 0;
+exports.colorStyle = exports.textStyle = exports.buttonStyle = exports.left = exports.bottom = exports.right = exports.top = exports.zIndex = exports.position = exports.backgroundRepeat = exports.backgroundPosition = exports.backgroundSize = exports.backgroundImage = exports.background = exports.overflow = exports.opacity = exports.boxShadow = exports.borders = exports.borderRadius = exports.borderLeft = exports.borderBottom = exports.borderRight = exports.borderTop = exports.borderColor = exports.borderStyle = exports.borderWidth = exports.border = exports.gridArea = exports.gridTemplateAreas = exports.gridTemplateRows = exports.gridTemplateColumns = exports.gridAutoRows = exports.gridAutoColumns = exports.gridAutoFlow = exports.gridRow = exports.gridColumn = exports.gridRowGap = exports.gridColumnGap = exports.gridGap = exports.order = exports.alignSelf = exports.justifySelf = exports.flex = exports.flexDirection = exports.flexBasis = exports.flexWrap = exports.justifyContent = exports.justifyItems = exports.alignContent = exports.alignItems = exports.verticalAlign = exports.size = exports.minHeight = exports.maxHeight = exports.height = exports.minWidth = exports.maxWidth = exports.display = exports.letterSpacing = exports.fontStyle = exports.textAlign = exports.lineHeight = exports.fontWeight = exports.fontFamily = exports.fontSize = exports.getPx = exports.width = exports.getWidth = exports.color = exports.backgroundColor = exports.textColor = exports.space = exports.paddingRight = exports.paddingLeft = exports.paddingBottom = exports.paddingTop = exports.padding = exports.marginRight = exports.marginLeft = exports.marginBottom = exports.marginTop = exports.margin = exports.variant = exports.mapProps = exports.compose = exports.style = exports.createMediaQuery = exports.px = exports.num = exports.isObject = exports.is = exports.themeGet = exports.get = exports.cloneFunction = exports.propType = exports.defaultBreakpoints = void 0;
 
-var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-// utils
-var noop = function noop(n) {
-  return n;
-};
-
-var propTypes = {
-  numberOrString: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  responsive: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array, _propTypes.default.object])
-};
-exports.propTypes = propTypes;
+//  v4 prototype
+//
+//  - Returns arrays of styles for responsive and composed styles. This should work the same as before when combined with CSS-in-JS libraries like styled-components and emotion
+//  - Refactors `space` function to use core `style` function
+//  - Adds long-hand props for margin and padding. Shorthand aliases still work.
+//  - The get utility works differently, returning the last argument as a fallback.
+//  - Removes the `styles` export
+//  - Removes `meta` field from `propTypes` - this was used by system-docs. An alternative/optional object export for documentation will be added
+//  - Removes the `merge` utility
+//  - Removes `mixed` utility
+//  - The theme scale is passed as the second argument to the `transformValue` option in `style`
+//  - Removes `ratio` function
+//  - Changes to border functions
 var defaultBreakpoints = [40, 52, 64].map(function (n) {
@@ -28,28 +31,14 @@ return n + 'em';
 
-var is = function is(n) {
-  return n !== undefined && n !== null;
-};
+var propType = _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array, _propTypes.default.object]);
 
-exports.is = is;
+exports.propType = propType;
 
-var num = function num(n) {
-  return typeof n === 'number' && !isNaN(n);
+var cloneFunction = function cloneFunction(fn) {
+  return function () {
+    return fn.apply(void 0, arguments);
+  };
 };
 
-exports.num = num;
+exports.cloneFunction = cloneFunction;
 
-var px = function px(n) {
-  return num(n) ? n + 'px' : n;
-};
-
-exports.px = px;
-var isArray = Array.isArray;
-exports.isArray = isArray;
-
-var isObject = function isObject(n) {
-  return typeof n === 'object' && n !== null;
-};
-
-exports.isObject = isObject;
-
 var get = function get(obj) {
@@ -60,5 +49,10 @@ for (var _len = arguments.length, paths = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
 
-  return paths.join('.').split('.').reduce(function (a, b) {
-    return a && a[b] ? a[b] : null;
-  }, obj);
+  var value = paths.reduce(function (a, path) {
+    if (is(a)) return a;
+    var keys = typeof path === 'string' ? path.split('.') : [path];
+    return keys.reduce(function (a, key) {
+      return a && is(a[key]) ? a[key] : null;
+    }, obj);
+  }, null);
+  return is(value) ? value : paths[paths.length - 1];
 };
@@ -68,5 +62,9 @@
 
-var themeGet = function themeGet(paths, fallback) {
+var themeGet = function themeGet(path, fallback) {
+  if (fallback === void 0) {
+    fallback = null;
+  }
+
   return function (props) {
-    return get(props.theme, paths) || fallback;
+    return get(props.theme, path, fallback);
   };
@@ -77,38 +75,25 @@ };
 
-var cloneFunc = function cloneFunc(fn) {
-  return function () {
-    return fn.apply(void 0, arguments);
-  };
+var is = function is(n) {
+  return n !== undefined && n !== null;
 };
 
-exports.cloneFunc = cloneFunc;
+exports.is = is;
 
-var merge = function merge(a, b) {
-  return Object.assign({}, a, b, Object.keys(b || {}).reduce(function (obj, key) {
-    var _Object$assign;
-
-    return Object.assign(obj, (_Object$assign = {}, _Object$assign[key] = a[key] !== null && typeof a[key] === 'object' ? merge(a[key], b[key]) : b[key], _Object$assign));
-  }, {}));
+var isObject = function isObject(n) {
+  return typeof n === 'object' && n !== null;
 };
 
-exports.merge = merge;
+exports.isObject = isObject;
 
-var compose = function compose() {
-  for (var _len2 = arguments.length, funcs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    funcs[_key2] = arguments[_key2];
-  }
+var num = function num(n) {
+  return typeof n === 'number' && !isNaN(n);
+};
 
-  var fn = function fn(props) {
-    return funcs.map(function (fn) {
-      return fn(props);
-    }).filter(Boolean).reduce(merge, {});
-  };
+exports.num = num;
 
-  fn.propTypes = funcs.map(function (fn) {
-    return fn.propTypes;
-  }).reduce(merge, {});
-  return fn;
+var px = function px(n) {
+  return num(n) && n !== 0 ? n + 'px' : n;
 };
 
-exports.compose = compose;
+exports.px = px;
 
@@ -121,86 +106,74 @@ var createMediaQuery = function createMediaQuery(n) {
 
-var getStyles = function getStyles(_ref) {
-  var props = _ref.props,
-      style = _ref.style,
-      value = _ref.value;
+var getValue = function getValue(n, scale) {
+  return get(scale, n);
+};
 
-  if (!isObject(value)) {
-    return style(value);
-  } // how to hoist this up??
+var style = function style(_ref) {
+  var _func$propTypes;
 
+  var prop = _ref.prop,
+      cssProperty = _ref.cssProperty,
+      alias = _ref.alias,
+      key = _ref.key,
+      _ref$transformValue = _ref.transformValue,
+      transformValue = _ref$transformValue === void 0 ? getValue : _ref$transformValue,
+      _ref$scale = _ref.scale,
+      defaultScale = _ref$scale === void 0 ? {} : _ref$scale;
+  var property = cssProperty || prop;
 
-  var breakpoints = get(props.theme, 'breakpoints') || defaultBreakpoints;
+  var func = function func(props) {
+    // TODO write some tests for this
+    var value = get(props, prop, alias, null);
+    if (!is(value)) return null;
+    var scale = get(props.theme, key, defaultScale);
 
-  if (isArray(value)) {
-    var _styles = style(value[0]) || {};
+    var createStyle = function createStyle(n) {
+      var _ref2;
 
-    for (var i = 1; i < value.length; i++) {
-      var rule = style(value[i]);
+      return is(n) ? (_ref2 = {}, _ref2[property] = transformValue(n, scale), _ref2) : null;
+    };
 
-      if (rule) {
-        var media = createMediaQuery(breakpoints[i - 1]);
-        _styles[media] = rule;
-      }
-    }
+    if (!isObject(value)) return createStyle(value);
+    var breakpoints = get(props.theme, 'breakpoints', defaultBreakpoints);
+    var styles = [];
 
-    return _styles;
-  }
+    if (Array.isArray(value)) {
+      styles.push(createStyle(value[0]));
 
-  var styles = {};
+      for (var i = 1; i < value.slice(0, breakpoints.length + 1).length; i++) {
+        var rule = createStyle(value[i]);
 
-  for (var breakpoint in value) {
-    var _minWidth = breakpoints[breakpoint];
+        if (rule) {
+          var _styles$push;
 
-    if (!_minWidth) {
-      Object.assign(styles, style(value[breakpoint]));
+          var media = createMediaQuery(breakpoints[i - 1]);
+          styles.push((_styles$push = {}, _styles$push[media] = rule, _styles$push));
+        }
+      }
     } else {
-      var _rule = style(value[breakpoint]);
+      for (var _key2 in value) {
+        var breakpoint = breakpoints[_key2];
 
-      var _media = createMediaQuery(_minWidth);
+        var _media = createMediaQuery(breakpoint);
 
-      styles[_media] = _rule;
-    }
-  }
+        var _rule = createStyle(value[_key2]);
 
-  return styles;
-};
+        if (!breakpoint) {
+          styles.unshift(_rule);
+        } else {
+          var _styles$push2;
 
-var style = function style(_ref2) {
-  var _fn$propTypes;
+          styles.push((_styles$push2 = {}, _styles$push2[_media] = _rule, _styles$push2));
+        }
+      }
 
-  var prop = _ref2.prop,
-      cssProperty = _ref2.cssProperty,
-      key = _ref2.key,
-      getter = _ref2.getter,
-      transformValue = _ref2.transformValue,
-      _ref2$scale = _ref2.scale,
-      defaultScale = _ref2$scale === void 0 ? {} : _ref2$scale;
-  var css = cssProperty || prop;
-  var transform = transformValue || getter || noop;
+      styles.sort();
+    }
 
-  var fn = function fn(props) {
-    var value = props[prop];
-    if (!is(value)) return null;
-    var scale = get(props.theme, key) || defaultScale;
-
-    var style = function style(n) {
-      var _ref3;
-
-      return is(n) ? (_ref3 = {}, _ref3[css] = transform(get(scale, n) || n), _ref3) : null;
-    };
-
-    return getStyles({
-      props: props,
-      style: style,
-      value: value
-    });
+    return styles;
   };
 
-  fn.propTypes = (_fn$propTypes = {}, _fn$propTypes[prop] = cloneFunc(propTypes.responsive), _fn$propTypes);
-  fn.propTypes[prop].meta = {
-    prop: prop,
-    themeKey: key,
-    styleType: 'responsive'
-  };
-  return fn;
+  func.propTypes = (_func$propTypes = {}, _func$propTypes[prop] = cloneFunction(propType), _func$propTypes);
+  if (alias) func.propTypes[alias] = cloneFunction(propType);
+  return func;
 };
@@ -210,174 +183,199 @@
 
-var getWidth = function getWidth(n) {
-  return !num(n) || n > 1 ? px(n) : n * 100 + '%';
-}; // variant
+var compose = function compose() {
+  for (var _len2 = arguments.length, funcs = new Array(_len2), _key3 = 0; _key3 < _len2; _key3++) {
+    funcs[_key3] = arguments[_key3];
+  }
 
+  var func = function func(props) {
+    var n = funcs.map(function (fn) {
+      return fn(props);
+    }).filter(Boolean);
+    return n;
+  };
 
-exports.getWidth = getWidth;
+  func.propTypes = {};
+  funcs.forEach(function (fn) {
+    func.propTypes = (0, _extends2.default)({}, func.propTypes, fn.propTypes);
+  });
+  return func;
+};
 
-var variant = function variant(_ref4) {
-  var _fn$propTypes2;
+exports.compose = compose;
 
-  var key = _ref4.key,
-      _ref4$prop = _ref4.prop,
-      prop = _ref4$prop === void 0 ? 'variant' : _ref4$prop;
-
-  var fn = function fn(props) {
-    return get(props.theme, key, props[prop]) || null;
+var mapProps = function mapProps(mapper) {
+  return function (func) {
+    return function (props) {
+      return func(mapper(props));
+    };
   };
-
-  fn.propTypes = (_fn$propTypes2 = {}, _fn$propTypes2[prop] = propTypes.numberOrString, _fn$propTypes2);
-  return fn;
 };
 
-exports.variant = variant;
-var util = {
-  propTypes: propTypes,
-  defaultBreakpoints: defaultBreakpoints,
-  is: is,
-  num: num,
-  px: px,
-  get: get,
-  themeGet: themeGet,
-  cloneFunc: cloneFunc,
-  merge: merge,
-  compose: compose,
-  createMediaQuery: createMediaQuery,
-  style: style // space
+exports.mapProps = mapProps;
 
-};
-exports.util = util;
+var variant = function variant(_ref3) {
+  var _fn$propTypes;
 
-var isNegative = function isNegative(n) {
-  return n < 0;
-};
+  var key = _ref3.key,
+      _ref3$prop = _ref3.prop,
+      prop = _ref3$prop === void 0 ? 'variant' : _ref3$prop;
 
-var REG = /^[mp][trblxy]?$/;
-var properties = {
-  m: 'margin',
-  p: 'padding'
-};
-var directions = {
-  t: 'Top',
-  r: 'Right',
-  b: 'Bottom',
-  l: 'Left',
-  x: ['Left', 'Right'],
-  y: ['Top', 'Bottom']
-};
+  var fn = function fn(props) {
+    return get(props.theme, [key, props[prop]].join('.'), null);
+  };
 
-var getProperties = function getProperties(key) {
-  var _key$split = key.split(''),
-      a = _key$split[0],
-      b = _key$split[1];
+  fn.propTypes = (_fn$propTypes = {}, _fn$propTypes[prop] = _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]), _fn$propTypes);
+  return fn;
+}; // space
 
-  var property = properties[a];
-  var direction = directions[b] || '';
-  return Array.isArray(direction) ? direction.map(function (dir) {
-    return property + dir;
-  }) : [property + direction];
-};
 
-var getValue = function getValue(scale) {
-  return function (n) {
-    if (!num(n)) {
-      return px(get(scale, n) || n);
-    }
+exports.variant = variant;
+var spaceScale = [0, 4, 8, 16, 32, 64, 128, 256, 512];
 
-    var abs = Math.abs(n);
-    var neg = isNegative(n);
-    var value = scale[abs] || abs;
+var getSpace = function getSpace(n, scale) {
+  if (!num(n)) return n;
+  var isNegative = n < 0;
+  var absolute = Math.abs(n);
+  var value = get(scale, absolute);
 
-    if (!num(value)) {
-      return neg ? '-' + value : value;
-    }
+  if (!num(value)) {
+    return isNegative ? '-' + value : value;
+  }
 
-    return px(value * (neg ? -1 : 1));
-  };
+  return px(value * (isNegative ? -1 : 1));
 };
 
-var defaultScale = [0, 4, 8, 16, 32, 64, 128, 256, 512];
+var margin = style({
+  prop: 'margin',
+  alias: 'm',
+  key: 'space',
+  transformValue: getSpace,
+  scale: spaceScale
+});
+exports.margin = margin;
+var marginTop = style({
+  prop: 'marginTop',
+  alias: 'mt',
+  key: 'space',
+  transformValue: getSpace,
+  scale: spaceScale
+});
+exports.marginTop = marginTop;
+var marginBottom = style({
+  prop: 'marginBottom',
+  alias: 'mb',
+  key: 'space',
+  transformValue: getSpace,
+  scale: spaceScale
+});
+exports.marginBottom = marginBottom;
+var marginLeft = style({
+  prop: 'marginLeft',
+  alias: 'ml',
+  key: 'space',
+  transformValue: getSpace,
+  scale: spaceScale
+});
+exports.marginLeft = marginLeft;
+var marginRight = style({
+  prop: 'marginRight',
+  alias: 'mr',
+  key: 'space',
+  transformValue: getSpace,
+  scale: spaceScale
+});
+exports.marginRight = marginRight;
+var padding = style({
+  prop: 'padding',
+  alias: 'p',
+  key: 'space',
+  transformValue: getSpace,
+  scale: spaceScale
+});
+exports.padding = padding;
+var paddingTop = style({
+  prop: 'paddingTop',
+  alias: 'pt',
+  key: 'space',
+  transformValue: getSpace,
+  scale: spaceScale
+});
+exports.paddingTop = paddingTop;
+var paddingBottom = style({
+  prop: 'paddingBottom',
+  alias: 'pb',
+  key: 'space',
+  transformValue: getSpace,
+  scale: spaceScale
+});
+exports.paddingBottom = paddingBottom;
+var paddingLeft = style({
+  prop: 'paddingLeft',
+  alias: 'pl',
+  key: 'space',
+  transformValue: getSpace,
+  scale: spaceScale
+});
+exports.paddingLeft = paddingLeft;
+var paddingRight = style({
+  prop: 'paddingRight',
+  alias: 'pr',
+  key: 'space',
+  transformValue: getSpace,
+  scale: spaceScale
+});
+exports.paddingRight = paddingRight;
+var space = mapProps(function (props) {
+  return (0, _extends2.default)({}, props, {
+    mt: is(props.my) ? props.my : props.mt,
+    mb: is(props.my) ? props.my : props.mb,
+    ml: is(props.mx) ? props.mx : props.ml,
+    mr: is(props.mx) ? props.mx : props.mr,
+    pt: is(props.py) ? props.py : props.pt,
+    pb: is(props.py) ? props.py : props.pb,
+    pl: is(props.px) ? props.px : props.pl,
+    pr: is(props.px) ? props.px : props.pr
+  });
+})(compose(margin, marginTop, marginBottom, marginLeft, marginRight, padding, paddingTop, paddingBottom, paddingLeft, paddingRight)); // color
 
-var space = function space(props) {
-  var keys = Object.keys(props).filter(function (key) {
-    return REG.test(key);
-  }).sort();
-  var scale = get(props.theme, 'space') || defaultScale;
-  var getStyle = getValue(scale);
-  return keys.map(function (key) {
-    var value = props[key];
-    var properties = getProperties(key);
+exports.space = space;
+var textColor = style({
+  prop: 'color',
+  key: 'colors'
+});
+exports.textColor = textColor;
+var backgroundColor = style({
+  prop: 'backgroundColor',
+  alias: 'bg',
+  key: 'colors'
+});
+exports.backgroundColor = backgroundColor;
+var color = compose(textColor, backgroundColor); // width
 
-    var style = function style(n) {
-      return is(n) ? properties.reduce(function (a, prop) {
-        var _extends2;
+exports.color = color;
 
-        return (0, _extends3.default)({}, a, (_extends2 = {}, _extends2[prop] = getStyle(n), _extends2));
-      }, {}) : null;
-    };
-
-    return getStyles({
-      props: props,
-      style: style,
-      value: value
-    });
-  }).reduce(merge, {});
+var getWidth = function getWidth(n, scale) {
+  return !num(n) || n > 1 ? px(n) : n * 100 + '%';
 };
 
-exports.space = space;
-space.propTypes = {
-  m: cloneFunc(propTypes.responsive),
-  mt: cloneFunc(propTypes.responsive),
-  mr: cloneFunc(propTypes.responsive),
-  mb: cloneFunc(propTypes.responsive),
-  ml: cloneFunc(propTypes.responsive),
-  mx: cloneFunc(propTypes.responsive),
-  my: cloneFunc(propTypes.responsive),
-  p: cloneFunc(propTypes.responsive),
-  pt: cloneFunc(propTypes.responsive),
-  pr: cloneFunc(propTypes.responsive),
-  pb: cloneFunc(propTypes.responsive),
-  pl: cloneFunc(propTypes.responsive),
-  px: cloneFunc(propTypes.responsive),
-  py: cloneFunc(propTypes.responsive)
-};
-
-var meta = function meta(prop) {
-  return {
-    prop: prop,
-    themeKey: 'space',
-    styleType: 'responsive'
-  };
-};
-
-Object.keys(space.propTypes).forEach(function (prop) {
-  space.propTypes[prop].meta = meta(prop);
-}); // styles
-
+exports.getWidth = getWidth;
 var width = style({
   prop: 'width',
+  key: 'widths',
   transformValue: getWidth
-});
+}); // typography
+
 exports.width = width;
+
+var getPx = function getPx(n, scale) {
+  return px(get(scale, n));
+};
+
+exports.getPx = getPx;
 var fontSize = style({
   prop: 'fontSize',
   key: 'fontSizes',
-  transformValue: px,
+  transformValue: getPx,
   scale: [12, 14, 16, 20, 24, 32, 48, 64, 72]
 });
 exports.fontSize = fontSize;
-var textColor = style({
-  prop: 'color',
-  key: 'colors'
-});
-exports.textColor = textColor;
-var bgColor = style({
-  prop: 'bg',
-  cssProperty: 'backgroundColor',
-  key: 'colors'
-});
-exports.bgColor = bgColor;
-var color = compose(textColor, bgColor); // typography
-
-exports.color = color;
 var fontFamily = style({
@@ -388,6 +386,7 @@ prop: 'fontFamily',
 exports.fontFamily = fontFamily;
-var textAlign = style({
-  prop: 'textAlign'
+var fontWeight = style({
+  prop: 'fontWeight',
+  key: 'fontWeights'
 });
-exports.textAlign = textAlign;
+exports.fontWeight = fontWeight;
 var lineHeight = style({
@@ -398,7 +397,6 @@ prop: 'lineHeight',
 exports.lineHeight = lineHeight;
-var fontWeight = style({
-  prop: 'fontWeight',
-  key: 'fontWeights'
+var textAlign = style({
+  prop: 'textAlign'
 });
-exports.fontWeight = fontWeight;
+exports.textAlign = textAlign;
 var fontStyle = style({
@@ -411,3 +409,3 @@ prop: 'fontStyle'
   key: 'letterSpacings',
-  transformValue: px
+  transformValue: getPx
 }); // layout
@@ -423,3 +421,3 @@
   key: 'maxWidths',
-  transformValue: px
+  transformValue: getPx
 });
@@ -430,3 +428,3 @@ exports.maxWidth = maxWidth;
   key: 'minWidths',
-  transformValue: px
+  transformValue: getPx
 });
@@ -437,3 +435,3 @@ exports.minWidth = minWidth;
   key: 'heights',
-  transformValue: px
+  transformValue: getPx
 });
@@ -444,3 +442,3 @@ exports.height = height;
   key: 'maxHeights',
-  transformValue: px
+  transformValue: getPx
 });
@@ -451,36 +449,12 @@ exports.maxHeight = maxHeight;
   key: 'minHeights',
-  transformValue: px
+  transformValue: getPx
 });
 exports.minHeight = minHeight;
-var sizeWidth = style({
-  prop: 'size',
-  cssProperty: 'width',
-  transformValue: px
-});
-exports.sizeWidth = sizeWidth;
-var sizeHeight = style({
-  prop: 'size',
-  cssProperty: 'height',
-  transformValue: px
-});
-exports.sizeHeight = sizeHeight;
-var size = compose(sizeHeight, sizeWidth);
+var size = mapProps(function (props) {
+  return (0, _extends2.default)({}, props, {
+    width: props.size,
+    height: props.size
+  });
+})(compose(width, height));
 exports.size = size;
-var ratioPadding = style({
-  prop: 'ratio',
-  cssProperty: 'paddingBottom',
-  transformValue: function transformValue(n) {
-    return n * 100 + '%';
-  }
-});
-exports.ratioPadding = ratioPadding;
-
-var ratio = function ratio(props) {
-  return props.ratio ? (0, _extends3.default)({
-    height: 0
-  }, ratioPadding(props)) : null;
-};
-
-exports.ratio = ratio;
-ratio.propTypes = (0, _extends3.default)({}, ratioPadding.propTypes);
 var verticalAlign = style({
@@ -539,4 +513,5 @@ prop: 'verticalAlign'
   prop: 'gridGap',
-  transformValue: px,
-  key: 'space'
+  key: 'space',
+  transformValue: getPx,
+  scale: spaceScale
 });
@@ -546,4 +521,5 @@ exports.gridGap = gridGap;
   prop: 'gridColumnGap',
-  transformValue: px,
-  key: 'space'
+  key: 'space',
+  transformValue: getPx,
+  scale: spaceScale
 });
@@ -553,4 +529,5 @@ exports.gridColumnGap = gridColumnGap;
   prop: 'gridRowGap',
-  transformValue: px,
-  key: 'space'
+  key: 'space',
+  transformValue: getPx,
+  scale: spaceScale
 });
@@ -593,19 +570,29 @@ exports.gridRowGap = gridRowGap;
 }); // borders
+// export const getBorder = (n, scale) =>
 
 exports.gridArea = gridArea;
-
-var getBorder = function getBorder(n) {
-  return num(n) && n > 0 ? n + 'px solid' : n;
-};
-
 var border = style({
   prop: 'border',
-  key: 'borders',
-  transformValue: getBorder
+  key: 'borders'
 });
 exports.border = border;
+var borderWidth = style({
+  prop: 'borderWidth',
+  key: 'borderWidths',
+  transformValue: getPx
+});
+exports.borderWidth = borderWidth;
+var borderStyle = style({
+  prop: 'borderStyle',
+  key: 'borderStyles'
+});
+exports.borderStyle = borderStyle;
+var borderColor = style({
+  prop: 'borderColor',
+  key: 'colors'
+});
+exports.borderColor = borderColor;
 var borderTop = style({
   prop: 'borderTop',
-  key: 'borders',
-  transformValue: getBorder
+  key: 'borders'
 });
@@ -615,4 +602,3 @@ exports.borderTop = borderTop;
   prop: 'borderRight',
-  key: 'borders',
-  transformValue: getBorder
+  key: 'borders'
 });
@@ -622,4 +608,3 @@ exports.borderRight = borderRight;
   prop: 'borderBottom',
-  key: 'borders',
-  transformValue: getBorder
+  key: 'borders'
 });
@@ -629,19 +614,13 @@ exports.borderBottom = borderBottom;
   prop: 'borderLeft',
-  key: 'borders',
-  transformValue: getBorder
+  key: 'borders'
 });
 exports.borderLeft = borderLeft;
-var borders = compose(border, borderTop, borderRight, borderBottom, borderLeft);
-exports.borders = borders;
-var borderColor = style({
-  prop: 'borderColor',
-  key: 'colors'
-});
-exports.borderColor = borderColor;
 var borderRadius = style({
   prop: 'borderRadius',
   key: 'radii',
-  transformValue: px
+  transformValue: getPx
 });
 exports.borderRadius = borderRadius;
+var borders = compose(border, borderStyle, borderWidth, borderColor, borderTop, borderRight, borderBottom, borderLeft, borderRadius);
+exports.borders = borders;
 var boxShadow = style({
@@ -687,3 +666,4 @@ prop: 'boxShadow',
 var zIndex = style({
-  prop: 'zIndex'
+  prop: 'zIndex',
+  key: 'zIndices'
 });
@@ -693,3 +673,3 @@ exports.zIndex = zIndex;
   prop: 'top',
-  transformValue: px
+  transformValue: getPx
 });
@@ -699,3 +679,3 @@ exports.top = top;
   prop: 'right',
-  transformValue: px
+  transformValue: getPx
 });
@@ -705,3 +685,3 @@ exports.right = right;
   prop: 'bottom',
-  transformValue: px
+  transformValue: getPx
 });
@@ -711,7 +691,11 @@ exports.bottom = bottom;
   prop: 'left',
-  transformValue: px
+  transformValue: getPx
+}); // variants
+
+exports.left = left;
+var buttonStyle = variant({
+  key: 'buttons'
 });
-exports.left = left;
+exports.buttonStyle = buttonStyle;
 var textStyle = variant({
-  prop: 'textStyle',
   key: 'textStyles'
@@ -721,114 +705,4 @@ });
 var colorStyle = variant({
-  prop: 'colors',
   key: 'colorStyles'
 });
 exports.colorStyle = colorStyle;
-var buttonStyle = variant({
-  key: 'buttons'
-});
-exports.buttonStyle = buttonStyle;
-var styles = {
-  space: space,
-  width: width,
-  fontSize: fontSize,
-  textColor: textColor,
-  bgColor: bgColor,
-  color: color,
-  fontFamily: fontFamily,
-  textAlign: textAlign,
-  lineHeight: lineHeight,
-  fontWeight: fontWeight,
-  fontStyle: fontStyle,
-  letterSpacing: letterSpacing,
-  display: display,
-  maxWidth: maxWidth,
-  minWidth: minWidth,
-  height: height,
-  maxHeight: maxHeight,
-  minHeight: minHeight,
-  sizeWidth: sizeWidth,
-  sizeHeight: sizeHeight,
-  size: size,
-  ratioPadding: ratioPadding,
-  ratio: ratio,
-  verticalAlign: verticalAlign,
-  alignItems: alignItems,
-  alignContent: alignContent,
-  justifyItems: justifyItems,
-  justifyContent: justifyContent,
-  flexWrap: flexWrap,
-  flexBasis: flexBasis,
-  flexDirection: flexDirection,
-  flex: flex,
-  justifySelf: justifySelf,
-  alignSelf: alignSelf,
-  order: order,
-  gridGap: gridGap,
-  gridColumnGap: gridColumnGap,
-  gridRowGap: gridRowGap,
-  gridColumn: gridColumn,
-  gridRow: gridRow,
-  gridAutoFlow: gridAutoFlow,
-  gridAutoColumns: gridAutoColumns,
-  gridAutoRows: gridAutoRows,
-  gridTemplateColumns: gridTemplateColumns,
-  gridTemplateRows: gridTemplateRows,
-  gridTemplateAreas: gridTemplateAreas,
-  gridArea: gridArea,
-  // borders
-  border: border,
-  borderTop: borderTop,
-  borderRight: borderRight,
-  borderBottom: borderBottom,
-  borderLeft: borderLeft,
-  borders: borders,
-  borderColor: borderColor,
-  borderRadius: borderRadius,
-  boxShadow: boxShadow,
-  opacity: opacity,
-  overflow: overflow,
-  background: background,
-  backgroundImage: backgroundImage,
-  backgroundPosition: backgroundPosition,
-  backgroundRepeat: backgroundRepeat,
-  backgroundSize: backgroundSize,
-  position: position,
-  zIndex: zIndex,
-  top: top,
-  right: right,
-  bottom: bottom,
-  left: left,
-  textStyle: textStyle,
-  colorStyle: colorStyle,
-  buttonStyle: buttonStyle // mixed
-
-};
-exports.styles = styles;
-
-var omit = function omit(obj, blacklist) {
-  var next = {};
-
-  for (var key in obj) {
-    if (blacklist.indexOf(key) > -1) continue;
-    next[key] = obj[key];
-  }
-
-  return next;
-};
-
-var funcs = Object.keys(styles).map(function (key) {
-  return styles[key];
-}).filter(function (fn) {
-  return typeof fn === 'function';
-});
-var blacklist = funcs.reduce(function (a, fn) {
-  return a.concat(Object.keys(fn.propTypes || {}));
-}, ['theme']);
-
-var mixed = function mixed(props) {
-  return funcs.map(function (fn) {
-    return fn(props);
-  }).reduce(merge, omit(props, blacklist));
-};
-
-exports.mixed = mixed;

dist/index.esm.js

 import _extends from "@babel/runtime/helpers/esm/extends";
-import PropTypes from 'prop-types'; // utils
-
-var noop = function noop(n) {
-  return n;
-};
-
-export var propTypes = {
-  numberOrString: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  responsive: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array, PropTypes.object])
-};
+//  v4 prototype
+//
+//  - Returns arrays of styles for responsive and composed styles. This should work the same as before when combined with CSS-in-JS libraries like styled-components and emotion
+//  - Refactors `space` function to use core `style` function
+//  - Adds long-hand props for margin and padding. Shorthand aliases still work.
+//  - The get utility works differently, returning the last argument as a fallback.
+//  - Removes the `styles` export
+//  - Removes `meta` field from `propTypes` - this was used by system-docs. An alternative/optional object export for documentation will be added
+//  - Removes the `merge` utility
+//  - Removes `mixed` utility
+//  - The theme scale is passed as the second argument to the `transformValue` option in `style`
+//  - Removes `ratio` function
+//  - Changes to border functions
+import PropTypes from 'prop-types';
 export var defaultBreakpoints = [40, 52, 64].map(function (n) {
   return n + 'em';
 });
-export var is = function is(n) {
-  return n !== undefined && n !== null;
+export var propType = PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array, PropTypes.object]);
+export var cloneFunction = function cloneFunction(fn) {
+  return function () {
+    return fn.apply(void 0, arguments);
+  };
 };
-export var num = function num(n) {
-  return typeof n === 'number' && !isNaN(n);
-};
-export var px = function px(n) {
-  return num(n) ? n + 'px' : n;
-};
-var isArray = Array.isArray;
-export { isArray };
-export var isObject = function isObject(n) {
-  return typeof n === 'object' && n !== null;
-};
 export var get = function get(obj) {
@@ -34,39 +30,32 @@ for (var _len = arguments.length, paths = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
 
-  return paths.join('.').split('.').reduce(function (a, b) {
-    return a && a[b] ? a[b] : null;
-  }, obj);
+  var value = paths.reduce(function (a, path) {
+    if (is(a)) return a;
+    var keys = typeof path === 'string' ? path.split('.') : [path];
+    return keys.reduce(function (a, key) {
+      return a && is(a[key]) ? a[key] : null;
+    }, obj);
+  }, null);
+  return is(value) ? value : paths[paths.length - 1];
 };
-export var themeGet = function themeGet(paths, fallback) {
+export var themeGet = function themeGet(path, fallback) {
+  if (fallback === void 0) {
+    fallback = null;
+  }
+
   return function (props) {
-    return get(props.theme, paths) || fallback;
+    return get(props.theme, path, fallback);
   };
 };
-export var cloneFunc = function cloneFunc(fn) {
-  return function () {
-    return fn.apply(void 0, arguments);
-  };
+export var is = function is(n) {
+  return n !== undefined && n !== null;
 };
-export var merge = function merge(a, b) {
-  return Object.assign({}, a, b, Object.keys(b || {}).reduce(function (obj, key) {
-    var _Object$assign;
-
-    return Object.assign(obj, (_Object$assign = {}, _Object$assign[key] = a[key] !== null && typeof a[key] === 'object' ? merge(a[key], b[key]) : b[key], _Object$assign));
-  }, {}));
+export var isObject = function isObject(n) {
+  return typeof n === 'object' && n !== null;
 };
-export var compose = function compose() {
-  for (var _len2 = arguments.length, funcs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    funcs[_key2] = arguments[_key2];
-  }
-
-  var fn = function fn(props) {
-    return funcs.map(function (fn) {
-      return fn(props);
-    }).filter(Boolean).reduce(merge, {});
-  };
-
-  fn.propTypes = funcs.map(function (fn) {
-    return fn.propTypes;
-  }).reduce(merge, {});
-  return fn;
+export var num = function num(n) {
+  return typeof n === 'number' && !isNaN(n);
 };
+export var px = function px(n) {
+  return num(n) && n !== 0 ? n + 'px' : n;
+};
 export var createMediaQuery = function createMediaQuery(n) {
@@ -76,245 +65,242 @@ return "@media screen and (min-width: " + px(n) + ")";
 
-var getStyles = function getStyles(_ref) {
-  var props = _ref.props,
-      style = _ref.style,
-      value = _ref.value;
+var getValue = function getValue(n, scale) {
+  return get(scale, n);
+};
 
-  if (!isObject(value)) {
-    return style(value);
-  } // how to hoist this up??
+export var style = function style(_ref) {
+  var _func$propTypes;
 
+  var prop = _ref.prop,
+      cssProperty = _ref.cssProperty,
+      alias = _ref.alias,
+      key = _ref.key,
+      _ref$transformValue = _ref.transformValue,
+      transformValue = _ref$transformValue === void 0 ? getValue : _ref$transformValue,
+      _ref$scale = _ref.scale,
+      defaultScale = _ref$scale === void 0 ? {} : _ref$scale;
+  var property = cssProperty || prop;
 
-  var breakpoints = get(props.theme, 'breakpoints') || defaultBreakpoints;
+  var func = function func(props) {
+    // TODO write some tests for this
+    var value = get(props, prop, alias, null);
+    if (!is(value)) return null;
+    var scale = get(props.theme, key, defaultScale);
 
-  if (isArray(value)) {
-    var _styles = style(value[0]) || {};
+    var createStyle = function createStyle(n) {
+      var _ref2;
 
-    for (var i = 1; i < value.length; i++) {
-      var rule = style(value[i]);
+      return is(n) ? (_ref2 = {}, _ref2[property] = transformValue(n, scale), _ref2) : null;
+    };
 
-      if (rule) {
-        var media = createMediaQuery(breakpoints[i - 1]);
-        _styles[media] = rule;
-      }
-    }
+    if (!isObject(value)) return createStyle(value);
+    var breakpoints = get(props.theme, 'breakpoints', defaultBreakpoints);
+    var styles = [];
 
-    return _styles;
-  }
+    if (Array.isArray(value)) {
+      styles.push(createStyle(value[0]));
 
-  var styles = {};
+      for (var i = 1; i < value.slice(0, breakpoints.length + 1).length; i++) {
+        var rule = createStyle(value[i]);
 
-  for (var breakpoint in value) {
-    var _minWidth = breakpoints[breakpoint];
+        if (rule) {
+          var _styles$push;
 
-    if (!_minWidth) {
-      Object.assign(styles, style(value[breakpoint]));
+          var media = createMediaQuery(breakpoints[i - 1]);
+          styles.push((_styles$push = {}, _styles$push[media] = rule, _styles$push));
+        }
+      }
     } else {
-      var _rule = style(value[breakpoint]);
+      for (var _key2 in value) {
+        var breakpoint = breakpoints[_key2];
 
-      var _media = createMediaQuery(_minWidth);
+        var _media = createMediaQuery(breakpoint);
 
-      styles[_media] = _rule;
-    }
-  }
+        var _rule = createStyle(value[_key2]);
 
-  return styles;
-};
+        if (!breakpoint) {
+          styles.unshift(_rule);
+        } else {
+          var _styles$push2;
 
-export var style = function style(_ref2) {
-  var _fn$propTypes;
+          styles.push((_styles$push2 = {}, _styles$push2[_media] = _rule, _styles$push2));
+        }
+      }
 
-  var prop = _ref2.prop,
-      cssProperty = _ref2.cssProperty,
-      key = _ref2.key,
-      getter = _ref2.getter,
-      transformValue = _ref2.transformValue,
-      _ref2$scale = _ref2.scale,
-      defaultScale = _ref2$scale === void 0 ? {} : _ref2$scale;
-  var css = cssProperty || prop;
-  var transform = transformValue || getter || noop;
+      styles.sort();
+    }
 
-  var fn = function fn(props) {
-    var value = props[prop];
-    if (!is(value)) return null;
-    var scale = get(props.theme, key) || defaultScale;
+    return styles;
+  };
 
-    var style = function style(n) {
-      var _ref3;
+  func.propTypes = (_func$propTypes = {}, _func$propTypes[prop] = cloneFunction(propType), _func$propTypes);
+  if (alias) func.propTypes[alias] = cloneFunction(propType);
+  return func;
+};
+export var compose = function compose() {
+  for (var _len2 = arguments.length, funcs = new Array(_len2), _key3 = 0; _key3 < _len2; _key3++) {
+    funcs[_key3] = arguments[_key3];
+  }
 
-      return is(n) ? (_ref3 = {}, _ref3[css] = transform(get(scale, n) || n), _ref3) : null;
-    };
-
-    return getStyles({
-      props: props,
-      style: style,
-      value: value
-    });
+  var func = function func(props) {
+    var n = funcs.map(function (fn) {
+      return fn(props);
+    }).filter(Boolean);
+    return n;
   };
 
-  fn.propTypes = (_fn$propTypes = {}, _fn$propTypes[prop] = cloneFunc(propTypes.responsive), _fn$propTypes);
-  fn.propTypes[prop].meta = {
-    prop: prop,
-    themeKey: key,
-    styleType: 'responsive'
+  func.propTypes = {};
+  funcs.forEach(function (fn) {
+    func.propTypes = _extends({}, func.propTypes, fn.propTypes);
+  });
+  return func;
+};
+export var mapProps = function mapProps(mapper) {
+  return function (func) {
+    return function (props) {
+      return func(mapper(props));
+    };
   };
-  return fn;
 };
-export var getWidth = function getWidth(n) {
-  return !num(n) || n > 1 ? px(n) : n * 100 + '%';
-}; // variant
+export var variant = function variant(_ref3) {
+  var _fn$propTypes;
 
-export var variant = function variant(_ref4) {
-  var _fn$propTypes2;
+  var key = _ref3.key,
+      _ref3$prop = _ref3.prop,
+      prop = _ref3$prop === void 0 ? 'variant' : _ref3$prop;
 
-  var key = _ref4.key,
-      _ref4$prop = _ref4.prop,
-      prop = _ref4$prop === void 0 ? 'variant' : _ref4$prop;
-
   var fn = function fn(props) {
-    return get(props.theme, key, props[prop]) || null;
+    return get(props.theme, [key, props[prop]].join('.'), null);
   };
 
-  fn.propTypes = (_fn$propTypes2 = {}, _fn$propTypes2[prop] = propTypes.numberOrString, _fn$propTypes2);
+  fn.propTypes = (_fn$propTypes = {}, _fn$propTypes[prop] = PropTypes.oneOfType([PropTypes.number, PropTypes.string]), _fn$propTypes);
   return fn;
-};
-export var util = {
-  propTypes: propTypes,
-  defaultBreakpoints: defaultBreakpoints,
-  is: is,
-  num: num,
-  px: px,
-  get: get,
-  themeGet: themeGet,
-  cloneFunc: cloneFunc,
-  merge: merge,
-  compose: compose,
-  createMediaQuery: createMediaQuery,
-  style: style // space
+}; // space
 
-};
+var spaceScale = [0, 4, 8, 16, 32, 64, 128, 256, 512];
 
-var isNegative = function isNegative(n) {
-  return n < 0;
-};
+var getSpace = function getSpace(n, scale) {
+  if (!num(n)) return n;
+  var isNegative = n < 0;
+  var absolute = Math.abs(n);
+  var value = get(scale, absolute);
 
-var REG = /^[mp][trblxy]?$/;
-var properties = {
-  m: 'margin',
-  p: 'padding'
-};
-var directions = {
-  t: 'Top',
-  r: 'Right',
-  b: 'Bottom',
-  l: 'Left',
-  x: ['Left', 'Right'],
-  y: ['Top', 'Bottom']
-};
+  if (!num(value)) {
+    return isNegative ? '-' + value : value;
+  }
 
-var getProperties = function getProperties(key) {
-  var _key$split = key.split(''),
-      a = _key$split[0],
-      b = _key$split[1];
-
-  var property = properties[a];
-  var direction = directions[b] || '';
-  return Array.isArray(direction) ? direction.map(function (dir) {
-    return property + dir;
-  }) : [property + direction];
+  return px(value * (isNegative ? -1 : 1));
 };
 
-var getValue = function getValue(scale) {
-  return function (n) {
-    if (!num(n)) {
-      return px(get(scale, n) || n);
-    }
+export var margin = style({
+  prop: 'margin',
+  alias: 'm',
+  key: 'space',
+  transformValue: getSpace,
+  scale: spaceScale
+});
+export var marginTop = style({
+  prop: 'marginTop',
+  alias: 'mt',
+  key: 'space',
+  transformValue: getSpace,
+  scale: spaceScale
+});
+export var marginBottom = style({
+  prop: 'marginBottom',
+  alias: 'mb',
+  key: 'space',
+  transformValue: getSpace,
+  scale: spaceScale
+});
+export var marginLeft = style({
+  prop: 'marginLeft',
+  alias: 'ml',
+  key: 'space',
+  transformValue: getSpace,
+  scale: spaceScale
+});
+export var marginRight = style({
+  prop: 'marginRight',
+  alias: 'mr',
+  key: 'space',
+  transformValue: getSpace,
+  scale: spaceScale
+});
+export var padding = style({
+  prop: 'padding',
+  alias: 'p',
+  key: 'space',
+  transformValue: getSpace,
+  scale: spaceScale
+});
+export var paddingTop = style({
+  prop: 'paddingTop',
+  alias: 'pt',
+  key: 'space',
+  transformValue: getSpace,
+  scale: spaceScale
+});
+export var paddingBottom = style({
+  prop: 'paddingBottom',
+  alias: 'pb',
+  key: 'space',
+  transformValue: getSpace,
+  scale: spaceScale
+});
+export var paddingLeft = style({
+  prop: 'paddingLeft',
+  alias: 'pl',
+  key: 'space',
+  transformValue: getSpace,
+  scale: spaceScale
+});
+export var paddingRight = style({
+  prop: 'paddingRight',
+  alias: 'pr',
+  key: 'space',
+  transformValue: getSpace,
+  scale: spaceScale
+});
+export var space = mapProps(function (props) {
+  return _extends({}, props, {
+    mt: is(props.my) ? props.my : props.mt,
+    mb: is(props.my) ? props.my : props.mb,
+    ml: is(props.mx) ? props.mx : props.ml,
+    mr: is(props.mx) ? props.mx : props.mr,
+    pt: is(props.py) ? props.py : props.pt,
+    pb: is(props.py) ? props.py : props.pb,
+    pl: is(props.px) ? props.px : props.pl,
+    pr: is(props.px) ? props.px : props.pr
+  });
+})(compose(margin, marginTop, marginBottom, marginLeft, marginRight, padding, paddingTop, paddingBottom, paddingLeft, paddingRight)); // color
 
-    var abs = Math.abs(n);
-    var neg = isNegative(n);
-    var value = scale[abs] || abs;
+export var textColor = style({
+  prop: 'color',
+  key: 'colors'
+});
+export var backgroundColor = style({
+  prop: 'backgroundColor',
+  alias: 'bg',
+  key: 'colors'
+});
+export var color = compose(textColor, backgroundColor); // width
 
-    if (!num(value)) {
-      return neg ? '-' + value : value;
-    }
-
-    return px(value * (neg ? -1 : 1));
-  };
+export var getWidth = function getWidth(n, scale) {
+  return !num(n) || n > 1 ? px(n) : n * 100 + '%';
 };
-
-var defaultScale = [0, 4, 8, 16, 32, 64, 128, 256, 512];
-export var space = function space(props) {
-  var keys = Object.keys(props).filter(function (key) {
-    return REG.test(key);
-  }).sort();
-  var scale = get(props.theme, 'space') || defaultScale;
-  var getStyle = getValue(scale);
-  return keys.map(function (key) {
-    var value = props[key];
-    var properties = getProperties(key);
-
-    var style = function style(n) {
-      return is(n) ? properties.reduce(function (a, prop) {
-        var _extends2;
-
-        return _extends({}, a, (_extends2 = {}, _extends2[prop] = getStyle(n), _extends2));
-      }, {}) : null;
-    };
-
-    return getStyles({
-      props: props,
-      style: style,
-      value: value
-    });
-  }).reduce(merge, {});
-};
-space.propTypes = {
-  m: cloneFunc(propTypes.responsive),
-  mt: cloneFunc(propTypes.responsive),
-  mr: cloneFunc(propTypes.responsive),
-  mb: cloneFunc(propTypes.responsive),
-  ml: cloneFunc(propTypes.responsive),
-  mx: cloneFunc(propTypes.responsive),
-  my: cloneFunc(propTypes.responsive),
-  p: cloneFunc(propTypes.responsive),
-  pt: cloneFunc(propTypes.responsive),
-  pr: cloneFunc(propTypes.responsive),
-  pb: cloneFunc(propTypes.responsive),
-  pl: cloneFunc(propTypes.responsive),
-  px: cloneFunc(propTypes.responsive),
-  py: cloneFunc(propTypes.responsive)
-};
-
-var meta = function meta(prop) {
-  return {
-    prop: prop,
-    themeKey: 'space',
-    styleType: 'responsive'
-  };
-};
-
-Object.keys(space.propTypes).forEach(function (prop) {
-  space.propTypes[prop].meta = meta(prop);
-}); // styles
-
 export var width = style({
   prop: 'width',
+  key: 'widths',
   transformValue: getWidth
-});
+}); // typography
+
+export var getPx = function getPx(n, scale) {
+  return px(get(scale, n));
+};
 export var fontSize = style({
   prop: 'fontSize',
   key: 'fontSizes',
-  transformValue: px,
+  transformValue: getPx,
   scale: [12, 14, 16, 20, 24, 32, 48, 64, 72]
 });
-export var textColor = style({
-  prop: 'color',
-  key: 'colors'
-});
-export var bgColor = style({
-  prop: 'bg',
-  cssProperty: 'backgroundColor',
-  key: 'colors'
-});
-export var color = compose(textColor, bgColor); // typography
-
 export var fontFamily = style({
@@ -324,4 +310,5 @@ prop: 'fontFamily',
 });
-export var textAlign = style({
-  prop: 'textAlign'
+export var fontWeight = style({
+  prop: 'fontWeight',
+  key: 'fontWeights'
 });
@@ -332,5 +319,4 @@ export var lineHeight = style({
 });
-export var fontWeight = style({
-  prop: 'fontWeight',
-  key: 'fontWeights'
+export var textAlign = style({
+  prop: 'textAlign'
 });
@@ -343,3 +329,3 @@ export var fontStyle = style({
   key: 'letterSpacings',
-  transformValue: px
+  transformValue: getPx
 }); // layout
@@ -353,3 +339,3 @@
   key: 'maxWidths',
-  transformValue: px
+  transformValue: getPx
 });
@@ -359,3 +345,3 @@ export var minWidth = style({
   key: 'minWidths',
-  transformValue: px
+  transformValue: getPx
 });
@@ -365,3 +351,3 @@ export var height = style({
   key: 'heights',
-  transformValue: px
+  transformValue: getPx
 });
@@ -371,3 +357,3 @@ export var maxHeight = style({
   key: 'maxHeights',
-  transformValue: px
+  transformValue: getPx
 });
@@ -377,28 +363,10 @@ export var minHeight = style({
   key: 'minHeights',
-  transformValue: px
+  transformValue: getPx
 });
-export var sizeWidth = style({
-  prop: 'size',
-  cssProperty: 'width',
-  transformValue: px
-});
-export var sizeHeight = style({
-  prop: 'size',
-  cssProperty: 'height',
-  transformValue: px
-});
-export var size = compose(sizeHeight, sizeWidth);
-export var ratioPadding = style({
-  prop: 'ratio',
-  cssProperty: 'paddingBottom',
-  transformValue: function transformValue(n) {
-    return n * 100 + '%';
-  }
-});
-export var ratio = function ratio(props) {
-  return props.ratio ? _extends({
-    height: 0
-  }, ratioPadding(props)) : null;
-};
-ratio.propTypes = _extends({}, ratioPadding.propTypes);
+export var size = mapProps(function (props) {
+  return _extends({}, props, {
+    width: props.size,
+    height: props.size
+  });
+})(compose(width, height));
 export var verticalAlign = style({
@@ -445,14 +413,17 @@ prop: 'verticalAlign'
   prop: 'gridGap',
-  transformValue: px,
-  key: 'space'
+  key: 'space',
+  transformValue: getPx,
+  scale: spaceScale
 });
 export var gridColumnGap = style({
   prop: 'gridColumnGap',
-  transformValue: px,
-  key: 'space'
+  key: 'space',
+  transformValue: getPx,
+  scale: spaceScale
 });
 export var gridRowGap = style({
   prop: 'gridRowGap',
-  transformValue: px,
-  key: 'space'
+  key: 'space',
+  transformValue: getPx,
+  scale: spaceScale
 });
@@ -486,42 +457,43 @@ export var gridColumn = style({
 }); // borders
+// export const getBorder = (n, scale) =>
 
-var getBorder = function getBorder(n) {
-  return num(n) && n > 0 ? n + 'px solid' : n;
-};
-
 export var border = style({
   prop: 'border',
-  key: 'borders',
-  transformValue: getBorder
+  key: 'borders'
 });
+export var borderWidth = style({
+  prop: 'borderWidth',
+  key: 'borderWidths',
+  transformValue: getPx
+});
+export var borderStyle = style({
+  prop: 'borderStyle',
+  key: 'borderStyles'
+});
+export var borderColor = style({
+  prop: 'borderColor',
+  key: 'colors'
+});
 export var borderTop = style({
   prop: 'borderTop',
-  key: 'borders',
-  transformValue: getBorder
+  key: 'borders'
 });
 export var borderRight = style({
   prop: 'borderRight',
-  key: 'borders',
-  transformValue: getBorder
+  key: 'borders'
 });
 export var borderBottom = style({
   prop: 'borderBottom',
-  key: 'borders',
-  transformValue: getBorder
+  key: 'borders'
 });
 export var borderLeft = style({
   prop: 'borderLeft',
-  key: 'borders',
-  transformValue: getBorder
+  key: 'borders'
 });
-export var borders = compose(border, borderTop, borderRight, borderBottom, borderLeft);
-export var borderColor = style({
-  prop: 'borderColor',
-  key: 'colors'
-});
 export var borderRadius = style({
   prop: 'borderRadius',
   key: 'radii',
-  transformValue: px
+  transformValue: getPx
 });
+export var borders = compose(border, borderStyle, borderWidth, borderColor, borderTop, borderRight, borderBottom, borderLeft, borderRadius);
 export var boxShadow = style({
@@ -558,131 +530,30 @@ prop: 'boxShadow',
 export var zIndex = style({
-  prop: 'zIndex'
+  prop: 'zIndex',
+  key: 'zIndices'
 });
 export var top = style({
   prop: 'top',
-  transformValue: px
+  transformValue: getPx
 });
 export var right = style({
   prop: 'right',
-  transformValue: px
+  transformValue: getPx
 });
 export var bottom = style({
   prop: 'bottom',
-  transformValue: px
+  transformValue: getPx
 });
 export var left = style({
   prop: 'left',
-  transformValue: px
+  transformValue: getPx
+}); // variants
+
+export var buttonStyle = variant({
+  key: 'buttons'
 });
 export var textStyle = variant({
-  prop: 'textStyle',
   key: 'textStyles'
 });
 export var colorStyle = variant({
-  prop: 'colors',
   key: 'colorStyles'
 });
-export var buttonStyle = variant({
-  key: 'buttons'
-});
-export var styles = {
-  space: space,
-  width: width,
-  fontSize: fontSize,
-  textColor: textColor,
-  bgColor: bgColor,
-  color: color,
-  fontFamily: fontFamily,
-  textAlign: textAlign,
-  lineHeight: lineHeight,
-  fontWeight: fontWeight,
-  fontStyle: fontStyle,
-  letterSpacing: letterSpacing,
-  display: display,
-  maxWidth: maxWidth,
-  minWidth: minWidth,
-  height: height,
-  maxHeight: maxHeight,
-  minHeight: minHeight,
-  sizeWidth: sizeWidth,
-  sizeHeight: sizeHeight,
-  size: size,
-  ratioPadding: ratioPadding,
-  ratio: ratio,
-  verticalAlign: verticalAlign,
-  alignItems: alignItems,
-  alignContent: alignContent,
-  justifyItems: justifyItems,
-  justifyContent: justifyContent,
-  flexWrap: flexWrap,
-  flexBasis: flexBasis,
-  flexDirection: flexDirection,
-  flex: flex,
-  justifySelf: justifySelf,
-  alignSelf: alignSelf,
-  order: order,
-  gridGap: gridGap,
-  gridColumnGap: gridColumnGap,
-  gridRowGap: gridRowGap,
-  gridColumn: gridColumn,
-  gridRow: gridRow,
-  gridAutoFlow: gridAutoFlow,
-  gridAutoColumns: gridAutoColumns,
-  gridAutoRows: gridAutoRows,
-  gridTemplateColumns: gridTemplateColumns,
-  gridTemplateRows: gridTemplateRows,
-  gridTemplateAreas: gridTemplateAreas,
-  gridArea: gridArea,
-  // borders
-  border: border,
-  borderTop: borderTop,
-  borderRight: borderRight,
-  borderBottom: borderBottom,
-  borderLeft: borderLeft,
-  borders: borders,
-  borderColor: borderColor,
-  borderRadius: borderRadius,
-  boxShadow: boxShadow,
-  opacity: opacity,
-  overflow: overflow,
-  background: background,
-  backgroundImage: backgroundImage,
-  backgroundPosition: backgroundPosition,
-  backgroundRepeat: backgroundRepeat,
-  backgroundSize: backgroundSize,
-  position: position,
-  zIndex: zIndex,
-  top: top,
-  right: right,
-  bottom: bottom,
-  left: left,
-  textStyle: textStyle,
-  colorStyle: colorStyle,
-  buttonStyle: buttonStyle // mixed
-
-};
-
-var omit = function omit(obj, blacklist) {
-  var next = {};
-
-  for (var key in obj) {
-    if (blacklist.indexOf(key) > -1) continue;
-    next[key] = obj[key];
-  }
-
-  return next;
-};
-
-var funcs = Object.keys(styles).map(function (key) {
-  return styles[key];
-}).filter(function (fn) {
-  return typeof fn === 'function';
-});
-var blacklist = funcs.reduce(function (a, fn) {
-  return a.concat(Object.keys(fn.propTypes || {}));
-}, ['theme']);
-export var mixed = function mixed(props) {
-  return funcs.map(function (fn) {
-    return fn(props);
-  }).reduce(merge, omit(props, blacklist));
-};

package.json

 {
   "name": "styled-system",
-  "version": "3.2.1",
+  "version": "4.0.0-0",
   "description": "Responsive, theme-based style props for building design systems with React",
@@ -14,4 +14,2 @@ "main": "dist/index.cjs.js",
     "build:esm": "cross-env NODE_ENV=esm babel src -o dist/index.esm.js",
-    "start": "mdx-go docs",
-    "docs": "mdx-go build docs -d site",
     "logo": "npx repng docs/Logo.js -d docs -f logo.png -w 512 -h 512 -p '{\"size\":512}'",
@@ -23,2 +21,4 @@ "logo-svg": "scrs docs/Logo.js --svg > docs/logo.svg",
     "test": "nyc ava",
+    "start": "mdx-go docs",
+    "now-build": "mdx-go build docs -d public",
     "bench": "node bench"
@@ -35,21 +35,25 @@ },
   "devDependencies": {
-    "@babel/cli": "^7.1.2",
-    "@babel/core": "^7.1.2",
-    "@babel/plugin-transform-runtime": "^7.1.0",
-    "@babel/preset-env": "^7.0.0",
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-transform-runtime": "^7.2.0",
+    "@babel/preset-env": "^7.3.1",
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
-    "ava": "^1.0.0-beta.8",
+    "@emotion/core": "^10.0.6",
+    "@emotion/styled": "^10.0.6",
+    "ava": "^1.2.0",
     "benchmark": "^2.1.4",
     "cross-env": "^5.2.0",
+    "husky": "^1.3.1",
     "is-ci": "^1.1.0",
-    "mdx-go": "^2.0.0-29",
+    "lint-staged": "^8.1.3",
+    "mdx-go": "^2.0.0-32",
     "nyc": "^12.0.2",
-    "prettier": "^1.15.3",
-    "react": "^16.4.0",
-    "react-live": "^1.11.0",
-    "react-test-renderer": "^16.4.0",
-    "rebass": "^3.0.0-8",
+    "prettier": "^1.16.1",
+    "react": "^16.7.0",
+    "react-live": "^1.12.0",
+    "react-test-renderer": "^16.7.0",
+    "rebass": "^3.0.1",
     "scrs": "^1.1.0",
-    "styled-components": "^4.0.0"
+    "styled-components": "^4.1.3"
   },
@@ -80,5 +84,16 @@ "ava": {
   "dependencies": {
-    "@babel/runtime": "^7.1.2",
+    "@babel/runtime": "^7.3.1",
     "prop-types": "^15.6.2"
+  },
+  "husky": {
+    "hooks": {
+      "precommit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,md}": [
+      "prettier --write",
+      "git add"
+    ]
   }
 }

README.md

@@ -66,2 +66,6 @@
 
+> "If you like Tachyons you will love styled-system. If you don't like Tachyons, you will love styled-system."
+>
+> – [Adam Morse][mrmrs]
+
 [dalgleish]: https://mobile.twitter.com/markdalgleish/status/913191186944241665
@@ -128,3 +132,3 @@ [mrmrs]: https://mobile.twitter.com/mrmrs_/status/913189805055401984
 // color: #333 (theme.colors.gray[0])
-<Box color='grays.0' />
+<Box color='gray.0' />
 
@@ -184,3 +188,3 @@ // background color
   - [Misc](docs/api.md#misc)
-  - [Variants](docs/api.md#variant)
+  - [Variants](docs/api.md#variants)
   - [Utilities](docs/api.md#utilities)
@@ -193,3 +197,2 @@ - [get](docs/api.md#get)
 - [Custom Props](docs/custom-props.md)
-- [Troubleshooting](docs/troubleshooting.md)
 
@@ -202,2 +205,4 @@
 - [Component Based Design System With Styled-System][varun-post]
+- [Build Better Component Libraries with Styled System][alan-b-smith-post]
+- [Defining Component APIs in React](http://jxnblk.com/writing/posts/defining-component-apis-in-react/)
 
@@ -215,2 +220,3 @@
 [varun-post]: https://varun.ca/styled-system/
+[alan-b-smith-post]: https://medium.com/styled-components/build-better-component-libraries-with-styled-system-4951653d54ee
 [david-tweet]: https://mobile.twitter.com/davidyeiser/status/965920740582285312
@@ -217,0 +223,0 @@

New 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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

225

increased by2.74%

Worsened metrics

Total package byte prevSize

47486

decreased by-4.36%

Dev dependency count

23

increased by21.05%

Lines of code

1118

decreased by-16%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@babel/runtime@^7.3.1