styled-system - npm Package Compare versions

Comparing version 3.1.2-1 to 3.1.2-2

dist/index.js

@@ -1,16 +0,12 @@
-'use strict';
+"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.px = exports.num = exports.is = exports.defaultBreakpoints = exports.propTypes = undefined;
+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.px = exports.num = exports.is = exports.defaultBreakpoints = exports.propTypes = void 0;
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _propTypes = require('prop-types');
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 // utils
@@ -21,22 +17,32 @@ var noop = function noop(n) {
 
-var propTypes = exports.propTypes = {
-  numberOrString: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
-  responsive: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string, _propTypes2.default.array])
+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])
 };
-
-var defaultBreakpoints = exports.defaultBreakpoints = [40, 52, 64].map(function (n) {
+exports.propTypes = propTypes;
+var defaultBreakpoints = [40, 52, 64].map(function (n) {
   return n + 'em';
 });
-var is = exports.is = function is(n) {
+exports.defaultBreakpoints = defaultBreakpoints;
+
+var is = function is(n) {
   return n !== undefined && n !== null;
 };
-var num = exports.num = function num(n) {
+
+exports.is = is;
+
+var num = function num(n) {
   return typeof n === 'number' && !isNaN(n);
 };
-var px = exports.px = function px(n) {
+
+exports.num = num;
+
+var px = function px(n) {
   return num(n) ? n + 'px' : n;
 };
 
-var get = exports.get = function get(obj) {
-  for (var _len = arguments.length, paths = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+exports.px = px;
+
+var get = function get(obj) {
+  for (var _len = arguments.length, paths = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     paths[_key - 1] = arguments[_key];
@@ -50,3 +56,5 @@ }
 
-var themeGet = exports.themeGet = function themeGet(paths, fallback) {
+exports.get = get;
+
+var themeGet = function themeGet(paths, fallback) {
   return function (props) {
@@ -57,18 +65,24 @@ return get(props.theme, paths) || fallback;
 
-var cloneFunc = exports.cloneFunc = function cloneFunc(fn) {
+exports.themeGet = themeGet;
+
+var cloneFunc = function cloneFunc(fn) {
   return function () {
-    return fn.apply(undefined, arguments);
+    return fn.apply(void 0, arguments);
   };
 };
 
-var merge = exports.merge = function merge(a, b) {
+exports.cloneFunc = cloneFunc;
+
+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));
+    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 compose = exports.compose = function compose() {
-  for (var _len2 = arguments.length, funcs = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+exports.merge = merge;
+
+var compose = function compose() {
+  for (var _len2 = arguments.length, funcs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
     funcs[_key2] = arguments[_key2];
@@ -89,7 +103,11 @@ }
 
-var createMediaQuery = exports.createMediaQuery = function createMediaQuery(n) {
-  return '@media screen and (min-width: ' + n + ')';
+exports.compose = compose;
+
+var createMediaQuery = function createMediaQuery(n) {
+  return "@media screen and (min-width: " + n + ")";
 };
 
-var style = exports.style = function style(_ref) {
+exports.createMediaQuery = createMediaQuery;
+
+var style = function style(_ref) {
   var _fn$propTypes;
@@ -103,11 +121,11 @@
       _ref$scale = _ref.scale,
-      defaultScale = _ref$scale === undefined ? {} : _ref$scale;
-
+      defaultScale = _ref$scale === void 0 ? {} : _ref$scale;
   var css = cssProperty || prop;
   var transform = transformValue || getter || noop;
+
   var fn = function fn(props) {
     var val = props[prop];
     if (!is(val)) return null;
+    var scale = get(props.theme, key) || defaultScale;
 
-    var scale = get(props.theme, key) || defaultScale;
     var style = function style(n) {
@@ -121,7 +139,6 @@ var _ref2;
       return style(val);
-    }
+    } // how to hoist this up??
 
-    // how to hoist this up??
+
     var breakpoints = [null].concat((get(props.theme, 'breakpoints') || defaultBreakpoints).map(createMediaQuery));
-
     var styles = {};
@@ -131,2 +148,3 @@
       var media = breakpoints[i];
+
       if (!media) {
@@ -136,2 +154,3 @@ styles = style(val[i]);
       }
+
       var rule = style(val[i]);
@@ -146,3 +165,2 @@ if (!rule) continue;
   fn.propTypes = (_fn$propTypes = {}, _fn$propTypes[prop] = cloneFunc(propTypes.responsive), _fn$propTypes);
-
   fn.propTypes[prop].meta = {
@@ -153,12 +171,15 @@ prop: prop,
   };
-
   return fn;
 };
 
-var getWidth = exports.getWidth = function getWidth(n) {
+exports.style = style;
+
+var getWidth = function getWidth(n) {
   return !num(n) || n > 1 ? px(n) : n * 100 + '%';
-};
+}; // variant
 
-// variant
-var variant = exports.variant = function variant(_ref3) {
+
+exports.getWidth = getWidth;
+
+var variant = function variant(_ref3) {
   var _fn$propTypes2;
@@ -168,3 +189,3 @@
       _ref3$prop = _ref3.prop,
-      prop = _ref3$prop === undefined ? 'variant' : _ref3$prop;
+      prop = _ref3$prop === void 0 ? 'variant' : _ref3$prop;
 
@@ -174,2 +195,3 @@ var fn = function fn(props) {
   };
+
   fn.propTypes = (_fn$propTypes2 = {}, _fn$propTypes2[prop] = propTypes.numberOrString, _fn$propTypes2);
@@ -179,3 +201,4 @@ return fn;
 
-var util = exports.util = {
+exports.variant = variant;
+var util = {
   propTypes: propTypes,
@@ -192,8 +215,11 @@ defaultBreakpoints: defaultBreakpoints,
   createMediaQuery: createMediaQuery,
-  style: style
+  style: style // space
 
-  // space
-};var isNegative = function isNegative(n) {
+};
+exports.util = util;
+
+var isNegative = function isNegative(n) {
   return n < 0;
 };
+
 var REG = /^[mp][trblxy]?$/;
@@ -230,8 +256,11 @@ var properties = {
     }
+
     var abs = Math.abs(n);
     var neg = isNegative(n);
     var value = scale[abs] || abs;
+
     if (!num(value)) {
       return neg ? '-' + value : value;
     }
+
     return px(value * (neg ? -1 : 1));
@@ -243,3 +272,3 @@ };
 
-var space = exports.space = function space(props) {
+var space = function space(props) {
   var keys = Object.keys(props).filter(function (key) {
@@ -250,3 +279,2 @@ return REG.test(key);
   var getStyle = getValue(scale);
-
   return keys.map(function (key) {
@@ -269,3 +297,2 @@ var value = props[key];
     var breakpoints = [null].concat((get(props.theme, 'breakpoints') || defaultBreakpoints).map(createMediaQuery));
-
     var styles = {};
@@ -275,2 +302,3 @@
       var media = breakpoints[i];
+
       if (!media) {
@@ -280,2 +308,3 @@ styles = style(value[i]);
       }
+
       var rule = style(value[i]);
@@ -290,2 +319,3 @@ if (!rule) continue;
 
+exports.space = space;
 space.propTypes = {
@@ -318,11 +348,10 @@ m: cloneFunc(propTypes.responsive),
   space.propTypes[prop].meta = meta(prop);
-});
+}); // styles
 
-// styles
-var width = exports.width = style({
+var width = style({
   prop: 'width',
   transformValue: getWidth
 });
-
-var fontSize = exports.fontSize = style({
+exports.width = width;
+var fontSize = style({
   prop: 'fontSize',
@@ -333,9 +362,9 @@ key: 'fontSizes',
 });
-
-var textColor = exports.textColor = style({
+exports.fontSize = fontSize;
+var textColor = style({
   prop: 'color',
   key: 'colors'
 });
-
-var bgColor = exports.bgColor = style({
+exports.textColor = textColor;
+var bgColor = style({
   prop: 'bg',
@@ -345,41 +374,41 @@ cssProperty: 'backgroundColor',
 });
+exports.bgColor = bgColor;
+var color = compose(textColor, bgColor); // typography
 
-var color = exports.color = compose(textColor, bgColor);
-
-// typography
-var fontFamily = exports.fontFamily = style({
+exports.color = color;
+var fontFamily = style({
   prop: 'fontFamily',
   key: 'fonts'
 });
-
-var textAlign = exports.textAlign = style({
+exports.fontFamily = fontFamily;
+var textAlign = style({
   prop: 'textAlign'
 });
-
-var lineHeight = exports.lineHeight = style({
+exports.textAlign = textAlign;
+var lineHeight = style({
   prop: 'lineHeight',
   key: 'lineHeights'
 });
-
-var fontWeight = exports.fontWeight = style({
+exports.lineHeight = lineHeight;
+var fontWeight = style({
   prop: 'fontWeight',
   key: 'fontWeights'
 });
-
-var fontStyle = exports.fontStyle = style({
+exports.fontWeight = fontWeight;
+var fontStyle = style({
   prop: 'fontStyle'
 });
-
-var letterSpacing = exports.letterSpacing = style({
+exports.fontStyle = fontStyle;
+var letterSpacing = style({
   prop: 'letterSpacing',
   key: 'letterSpacings',
   transformValue: px
-});
+}); // layout
 
-// layout
-var display = exports.display = style({
+exports.letterSpacing = letterSpacing;
+var display = style({
   prop: 'display'
 });
-
-var maxWidth = exports.maxWidth = style({
+exports.display = display;
+var maxWidth = style({
   prop: 'maxWidth',
@@ -389,4 +418,4 @@ key: 'maxWidths',
 });
-
-var minWidth = exports.minWidth = style({
+exports.maxWidth = maxWidth;
+var minWidth = style({
   prop: 'minWidth',
@@ -396,4 +425,4 @@ key: 'minWidths',
 });
-
-var height = exports.height = style({
+exports.minWidth = minWidth;
+var height = style({
   prop: 'height',
@@ -403,4 +432,4 @@ key: 'heights',
 });
-
-var maxHeight = exports.maxHeight = style({
+exports.height = height;
+var maxHeight = style({
   prop: 'maxHeight',
@@ -410,4 +439,4 @@ key: 'maxHeights',
 });
-
-var minHeight = exports.minHeight = style({
+exports.maxHeight = maxHeight;
+var minHeight = style({
   prop: 'minHeight',
@@ -417,4 +446,4 @@ key: 'minHeights',
 });
-
-var sizeWidth = exports.sizeWidth = style({
+exports.minHeight = minHeight;
+var sizeWidth = style({
   prop: 'size',
@@ -424,4 +453,4 @@ cssProperty: 'width',
 });
-
-var sizeHeight = exports.sizeHeight = style({
+exports.sizeWidth = sizeWidth;
+var sizeHeight = style({
   prop: 'size',
@@ -431,6 +460,6 @@ cssProperty: 'height',
 });
-
-var size = exports.size = compose(sizeHeight, sizeWidth);
-
-var ratioPadding = exports.ratioPadding = style({
+exports.sizeHeight = sizeHeight;
+var size = compose(sizeHeight, sizeWidth);
+exports.size = size;
+var ratioPadding = style({
   prop: 'ratio',
@@ -442,4 +471,5 @@ cssProperty: 'paddingBottom',
 });
+exports.ratioPadding = ratioPadding;
 
-var ratio = exports.ratio = function ratio(props) {
+var ratio = function ratio(props) {
   return props.ratio ? _extends({
@@ -449,56 +479,57 @@ height: 0
 };
+
+exports.ratio = ratio;
 ratio.propTypes = _extends({}, ratioPadding.propTypes);
-
-var verticalAlign = exports.verticalAlign = style({
+var verticalAlign = style({
   prop: 'verticalAlign'
-});
+}); // flexbox
 
-// flexbox
-var alignItems = exports.alignItems = style({
+exports.verticalAlign = verticalAlign;
+var alignItems = style({
   prop: 'alignItems'
 });
-
-var alignContent = exports.alignContent = style({
+exports.alignItems = alignItems;
+var alignContent = style({
   prop: 'alignContent'
 });
-
-var justifyItems = exports.justifyItems = style({
+exports.alignContent = alignContent;
+var justifyItems = style({
   prop: 'justifyItems'
 });
-
-var justifyContent = exports.justifyContent = style({
+exports.justifyItems = justifyItems;
+var justifyContent = style({
   prop: 'justifyContent'
 });
-
-var flexWrap = exports.flexWrap = style({
+exports.justifyContent = justifyContent;
+var flexWrap = style({
   prop: 'flexWrap'
 });
-
-var flexBasis = exports.flexBasis = style({
+exports.flexWrap = flexWrap;
+var flexBasis = style({
   prop: 'flexBasis',
   transformValue: getWidth
 });
-
-var flexDirection = exports.flexDirection = style({
+exports.flexBasis = flexBasis;
+var flexDirection = style({
   prop: 'flexDirection'
 });
-
-var flex = exports.flex = style({
+exports.flexDirection = flexDirection;
+var flex = style({
   prop: 'flex'
 });
-
-var justifySelf = exports.justifySelf = style({
+exports.flex = flex;
+var justifySelf = style({
   prop: 'justifySelf'
 });
-
-var alignSelf = exports.alignSelf = style({
+exports.justifySelf = justifySelf;
+var alignSelf = style({
   prop: 'alignSelf'
 });
-
-var order = exports.order = style({
+exports.alignSelf = alignSelf;
+var order = style({
   prop: 'order'
-});
+}); // grid
 
-// grid
-var gridGap = exports.gridGap = style({
+exports.order = order;
+var gridGap = style({
   prop: 'gridGap',
@@ -508,4 +539,4 @@ transformValue: px,
 });
-
-var gridColumnGap = exports.gridColumnGap = style({
+exports.gridGap = gridGap;
+var gridColumnGap = style({
   prop: 'gridColumnGap',
@@ -515,4 +546,4 @@ transformValue: px,
 });
-
-var gridRowGap = exports.gridRowGap = style({
+exports.gridColumnGap = gridColumnGap;
+var gridRowGap = style({
   prop: 'gridRowGap',
@@ -522,40 +553,41 @@ transformValue: px,
 });
-
-var gridColumn = exports.gridColumn = style({
+exports.gridRowGap = gridRowGap;
+var gridColumn = style({
   prop: 'gridColumn'
 });
-
-var gridRow = exports.gridRow = style({
+exports.gridColumn = gridColumn;
+var gridRow = style({
   prop: 'gridRow'
 });
-
-var gridAutoFlow = exports.gridAutoFlow = style({
+exports.gridRow = gridRow;
+var gridAutoFlow = style({
   prop: 'gridAutoFlow'
 });
-
-var gridAutoColumns = exports.gridAutoColumns = style({
+exports.gridAutoFlow = gridAutoFlow;
+var gridAutoColumns = style({
   prop: 'gridAutoColumns'
 });
-
-var gridAutoRows = exports.gridAutoRows = style({
+exports.gridAutoColumns = gridAutoColumns;
+var gridAutoRows = style({
   prop: 'gridAutoRows'
 });
-
-var gridTemplateColumns = exports.gridTemplateColumns = style({
+exports.gridAutoRows = gridAutoRows;
+var gridTemplateColumns = style({
   prop: 'gridTemplateColumns'
 });
-
-var gridTemplateRows = exports.gridTemplateRows = style({
+exports.gridTemplateColumns = gridTemplateColumns;
+var gridTemplateRows = style({
   prop: 'gridTemplateRows'
 });
-
-var gridTemplateAreas = exports.gridTemplateAreas = style({
+exports.gridTemplateRows = gridTemplateRows;
+var gridTemplateAreas = style({
   prop: 'gridTemplateAreas'
 });
-
-var gridArea = exports.gridArea = style({
+exports.gridTemplateAreas = gridTemplateAreas;
+var gridArea = style({
   prop: 'gridArea'
-});
+}); // borders
 
-// borders
+exports.gridArea = gridArea;
+
 var getBorder = function getBorder(n) {
@@ -565,3 +597,3 @@ return num(n) && n > 0 ? n + 'px solid' : n;
 
-var border = exports.border = style({
+var border = style({
   prop: 'border',
@@ -571,4 +603,4 @@ key: 'borders',
 });
-
-var borderTop = exports.borderTop = style({
+exports.border = border;
+var borderTop = style({
   prop: 'borderTop',
@@ -578,4 +610,4 @@ key: 'borders',
 });
-
-var borderRight = exports.borderRight = style({
+exports.borderTop = borderTop;
+var borderRight = style({
   prop: 'borderRight',
@@ -585,4 +617,4 @@ key: 'borders',
 });
-
-var borderBottom = exports.borderBottom = style({
+exports.borderRight = borderRight;
+var borderBottom = style({
   prop: 'borderBottom',
@@ -592,4 +624,4 @@ key: 'borders',
 });
-
-var borderLeft = exports.borderLeft = style({
+exports.borderBottom = borderBottom;
+var borderLeft = style({
   prop: 'borderLeft',
@@ -599,11 +631,11 @@ key: 'borders',
 });
-
-var borders = exports.borders = compose(border, borderTop, borderRight, borderBottom, borderLeft);
-
-var borderColor = exports.borderColor = style({
+exports.borderLeft = borderLeft;
+var borders = compose(border, borderTop, borderRight, borderBottom, borderLeft);
+exports.borders = borders;
+var borderColor = style({
   prop: 'borderColor',
   key: 'colors'
 });
-
-var borderRadius = exports.borderRadius = style({
+exports.borderColor = borderColor;
+var borderRadius = style({
   prop: 'borderRadius',
@@ -613,81 +645,81 @@ key: 'radii',
 });
-
-var boxShadow = exports.boxShadow = style({
+exports.borderRadius = borderRadius;
+var boxShadow = style({
   prop: 'boxShadow',
   key: 'shadows'
 });
-
-var opacity = exports.opacity = style({
+exports.boxShadow = boxShadow;
+var opacity = style({
   prop: 'opacity'
 });
-
-var overflow = exports.overflow = style({
+exports.opacity = opacity;
+var overflow = style({
   prop: 'overflow'
-});
+}); // backgrounds
 
-// backgrounds
-var background = exports.background = style({
+exports.overflow = overflow;
+var background = style({
   prop: 'background'
 });
-
-var backgroundImage = exports.backgroundImage = style({
+exports.background = background;
+var backgroundImage = style({
   prop: 'backgroundImage'
 });
-
-var backgroundSize = exports.backgroundSize = style({
+exports.backgroundImage = backgroundImage;
+var backgroundSize = style({
   prop: 'backgroundSize'
 });
-
-var backgroundPosition = exports.backgroundPosition = style({
+exports.backgroundSize = backgroundSize;
+var backgroundPosition = style({
   prop: 'backgroundPosition'
 });
-
-var backgroundRepeat = exports.backgroundRepeat = style({
+exports.backgroundPosition = backgroundPosition;
+var backgroundRepeat = style({
   prop: 'backgroundRepeat'
-});
+}); // position
 
-// position
-var position = exports.position = style({
+exports.backgroundRepeat = backgroundRepeat;
+var position = style({
   prop: 'position'
 });
-
-var zIndex = exports.zIndex = style({
+exports.position = position;
+var zIndex = style({
   prop: 'zIndex'
 });
-
-var top = exports.top = style({
+exports.zIndex = zIndex;
+var top = style({
   prop: 'top',
   transformValue: px
 });
-
-var right = exports.right = style({
+exports.top = top;
+var right = style({
   prop: 'right',
   transformValue: px
 });
-
-var bottom = exports.bottom = style({
+exports.right = right;
+var bottom = style({
   prop: 'bottom',
   transformValue: px
 });
-
-var left = exports.left = style({
+exports.bottom = bottom;
+var left = style({
   prop: 'left',
   transformValue: px
 });
-
-var textStyle = exports.textStyle = variant({
+exports.left = left;
+var textStyle = variant({
   prop: 'textStyle',
   key: 'textStyles'
 });
-
-var colorStyle = exports.colorStyle = variant({
+exports.textStyle = textStyle;
+var colorStyle = variant({
   prop: 'colors',
   key: 'colorStyles'
 });
-
-var buttonStyle = exports.buttonStyle = variant({
+exports.colorStyle = colorStyle;
+var buttonStyle = variant({
   key: 'buttons'
 });
-
-var styles = exports.styles = {
+exports.buttonStyle = buttonStyle;
+var styles = {
   width: width,
@@ -763,7 +795,10 @@ fontSize: fontSize,
   colorStyle: colorStyle,
-  buttonStyle: buttonStyle
+  buttonStyle: buttonStyle // mixed
 
-  // mixed
-};var omit = function omit(obj, blacklist) {
+};
+exports.styles = styles;
+
+var omit = function omit(obj, blacklist) {
   var next = {};
+
   for (var key in obj) {
@@ -773,2 +808,3 @@ if (blacklist.indexOf(key) > -1) continue;
   }
+
   return next;
@@ -782,11 +818,12 @@ };
 });
-
 var blacklist = funcs.reduce(function (a, fn) {
-  return [].concat(a, Object.keys(fn.propTypes || {}));
+  return a.concat(Object.keys(fn.propTypes || {}));
 }, ['theme']);
 
-var mixed = exports.mixed = function mixed(props) {
+var mixed = function mixed(props) {
   return funcs.map(function (fn) {
     return fn(props);
   }).reduce(merge, omit(props, blacklist));
-};
+};
+
+exports.mixed = mixed;

package.json

 {
   "name": "styled-system",
-  "version": "3.1.2-1",
+  "version": "3.1.2-2",
   "description": "Design system utilities for styled-components, glamorous, and other css-in-js libraries",
@@ -31,12 +31,9 @@ "main": "dist/index.js",
   "license": "MIT",
-  "dependencies": {
-    "prop-types": "^15.6.2"
-  },
   "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.1",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.0.0",
     "ava": "^1.0.0-beta.8",
-    "babel-preset-stage-2": "^6.24.1",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
     "benchmark": "^2.1.4",
@@ -59,3 +56,3 @@ "bundlesize": "^0.17.0",
     "require": [
-      "babel-register"
+      "@babel/register"
     ]
@@ -81,2 +78,5 @@ },
   },
+  "dependencies": {
+    "prop-types": "^15.6.2"
+  },
   "mdx-go": {
@@ -83,0 +83,0 @@ "basename": "/styled-system"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32925

increased by1.85%

Lines of code

698

increased by12.58%

Worsened metrics

Number of package files

5

decreased by-16.67%

No dependency changes