styled-system - npm Package Compare versions

Comparing version 3.1.12 to 3.2.0

CHANGELOG.md

 
 # Changelog
 
+## v3.2.0 2019-01-02
+
+- Allow object syntax for responsive values #341
+
 ## v3.1.12 2019-01-02
@@ -5,0 +9,0 @@

dist/index.cjs.js

@@ -6,3 +6,3 @@ "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 = void 0;
+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;
 
@@ -45,3 +45,11 @@ var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 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) {
@@ -110,12 +118,58 @@ for (var _len = arguments.length, paths = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
 
-var style = function style(_ref) {
+var getStyles = function getStyles(_ref) {
+  var props = _ref.props,
+      style = _ref.style,
+      value = _ref.value;
+
+  if (!isObject(value)) {
+    return style(value);
+  } // how to hoist this up??
+
+
+  var breakpoints = get(props.theme, 'breakpoints') || defaultBreakpoints;
+
+  if (isArray(value)) {
+    var _styles = style(value[0]) || {};
+
+    for (var i = 1; i < value.length; i++) {
+      var rule = style(value[i]);
+
+      if (rule) {
+        var media = createMediaQuery(breakpoints[i - 1]);
+        _styles[media] = rule;
+      }
+    }
+
+    return _styles;
+  }
+
+  var styles = {};
+
+  for (var breakpoint in value) {
+    var _minWidth = breakpoints[breakpoint];
+
+    if (!_minWidth) {
+      Object.assign(styles, style(value[breakpoint]));
+    } else {
+      var _rule = style(value[breakpoint]);
+
+      var _media = createMediaQuery(_minWidth);
+
+      styles[_media] = _rule;
+    }
+  }
+
+  return styles;
+};
+
+var style = function style(_ref2) {
   var _fn$propTypes;
 
-  var prop = _ref.prop,
-      cssProperty = _ref.cssProperty,
-      key = _ref.key,
-      getter = _ref.getter,
-      transformValue = _ref.transformValue,
-      _ref$scale = _ref.scale,
-      defaultScale = _ref$scale === void 0 ? {} : _ref$scale;
+  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;
@@ -125,34 +179,17 @@ var transform = transformValue || getter || noop;
   var fn = function fn(props) {
-    var val = props[prop];
-    if (!is(val)) return null;
+    var value = props[prop];
+    if (!is(value)) return null;
     var scale = get(props.theme, key) || defaultScale;
 
     var style = function style(n) {
-      var _ref2;
+      var _ref3;
 
-      return is(n) ? (_ref2 = {}, _ref2[css] = transform(get(scale, n) || n), _ref2) : null;
+      return is(n) ? (_ref3 = {}, _ref3[css] = transform(get(scale, n) || n), _ref3) : null;
     };
 
-    if (!Array.isArray(val)) {
-      return style(val);
-    } // how to hoist this up??
-
-
-    var breakpoints = [null].concat((get(props.theme, 'breakpoints') || defaultBreakpoints).map(createMediaQuery));
-    var styles = {};
-
-    for (var i = 0; i < val.length; i++) {
-      var media = breakpoints[i];
-
-      if (!media) {
-        styles = style(val[i]) || {};
-        continue;
-      }
-
-      var rule = style(val[i]);
-      if (!rule) continue;
-      styles[media] = rule;
-    }
-
-    return styles;
+    return getStyles({
+      props: props,
+      style: style,
+      value: value
+    });
   };
@@ -178,8 +215,8 @@
 
-var variant = function variant(_ref3) {
+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;
 
@@ -280,23 +317,7 @@ var fn = function fn(props) {
 
-    if (!Array.isArray(value)) {
-      return style(value);
-    }
-
-    var breakpoints = [null].concat((get(props.theme, 'breakpoints') || defaultBreakpoints).map(createMediaQuery));
-    var styles = {};
-
-    for (var i = 0; i < value.length; i++) {
-      var media = breakpoints[i];
-
-      if (!media) {
-        styles = style(value[i]) || {};
-        continue;
-      }
-
-      var rule = style(value[i]);
-      if (!rule) continue;
-      styles[media] = rule;
-    }
-
-    return styles;
+    return getStyles({
+      props: props,
+      style: style,
+      value: value
+    });
   }).reduce(merge, {});
@@ -303,0 +324,0 @@ };

dist/index.esm.js

@@ -24,2 +24,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 };
+var isArray = Array.isArray;
+export { isArray };
+export var isObject = function isObject(n) {
+  return typeof n === 'object' && n !== null;
+};
 export var get = function get(obj) {
@@ -70,12 +75,59 @@ for (var _len = arguments.length, paths = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
 };
-export var style = function style(_ref) {
+
+var getStyles = function getStyles(_ref) {
+  var props = _ref.props,
+      style = _ref.style,
+      value = _ref.value;
+
+  if (!isObject(value)) {
+    return style(value);
+  } // how to hoist this up??
+
+
+  var breakpoints = get(props.theme, 'breakpoints') || defaultBreakpoints;
+
+  if (isArray(value)) {
+    var _styles = style(value[0]) || {};
+
+    for (var i = 1; i < value.length; i++) {
+      var rule = style(value[i]);
+
+      if (rule) {
+        var media = createMediaQuery(breakpoints[i - 1]);
+        _styles[media] = rule;
+      }
+    }
+
+    return _styles;
+  }
+
+  var styles = {};
+
+  for (var breakpoint in value) {
+    var _minWidth = breakpoints[breakpoint];
+
+    if (!_minWidth) {
+      Object.assign(styles, style(value[breakpoint]));
+    } else {
+      var _rule = style(value[breakpoint]);
+
+      var _media = createMediaQuery(_minWidth);
+
+      styles[_media] = _rule;
+    }
+  }
+
+  return styles;
+};
+
+export var style = function style(_ref2) {
   var _fn$propTypes;
 
-  var prop = _ref.prop,
-      cssProperty = _ref.cssProperty,
-      key = _ref.key,
-      getter = _ref.getter,
-      transformValue = _ref.transformValue,
-      _ref$scale = _ref.scale,
-      defaultScale = _ref$scale === void 0 ? {} : _ref$scale;
+  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;
@@ -85,34 +137,17 @@ var transform = transformValue || getter || noop;
   var fn = function fn(props) {
-    var val = props[prop];
-    if (!is(val)) return null;
+    var value = props[prop];
+    if (!is(value)) return null;
     var scale = get(props.theme, key) || defaultScale;
 
     var style = function style(n) {
-      var _ref2;
+      var _ref3;
 
-      return is(n) ? (_ref2 = {}, _ref2[css] = transform(get(scale, n) || n), _ref2) : null;
+      return is(n) ? (_ref3 = {}, _ref3[css] = transform(get(scale, n) || n), _ref3) : null;
     };
 
-    if (!Array.isArray(val)) {
-      return style(val);
-    } // how to hoist this up??
-
-
-    var breakpoints = [null].concat((get(props.theme, 'breakpoints') || defaultBreakpoints).map(createMediaQuery));
-    var styles = {};
-
-    for (var i = 0; i < val.length; i++) {
-      var media = breakpoints[i];
-
-      if (!media) {
-        styles = style(val[i]) || {};
-        continue;
-      }
-
-      var rule = style(val[i]);
-      if (!rule) continue;
-      styles[media] = rule;
-    }
-
-    return styles;
+    return getStyles({
+      props: props,
+      style: style,
+      value: value
+    });
   };
@@ -132,8 +167,8 @@
 
-export var variant = function variant(_ref3) {
+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;
 
@@ -230,23 +265,7 @@ var fn = function fn(props) {
 
-    if (!Array.isArray(value)) {
-      return style(value);
-    }
-
-    var breakpoints = [null].concat((get(props.theme, 'breakpoints') || defaultBreakpoints).map(createMediaQuery));
-    var styles = {};
-
-    for (var i = 0; i < value.length; i++) {
-      var media = breakpoints[i];
-
-      if (!media) {
-        styles = style(value[i]) || {};
-        continue;
-      }
-
-      var rule = style(value[i]);
-      if (!rule) continue;
-      styles[media] = rule;
-    }
-
-    return styles;
+    return getStyles({
+      props: props,
+      style: style,
+      value: value
+    });
   }).reduce(merge, {});
@@ -253,0 +272,0 @@ };

package.json

 {
   "name": "styled-system",
-  "version": "3.1.12",
+  "version": "3.2.0",
   "description": "Responsive, theme-based style props for building design systems with React",
@@ -10,3 +10,3 @@ "main": "dist/index.cjs.js",
     "prepare": "npm run clean && npm run build:cjs && npm run build:esm",
-    "prettier": "prettier \"{src,test}/**/*.js\"",
+    "prettier": "prettier \"{src,test}/**/*.js\" --write",
     "clean": "rm -rf dist && mkdir dist",
@@ -13,0 +13,0 @@ "build:cjs": "cross-env NODE_ENV=cjs babel src -o dist/index.cjs.js",

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

49546

increased by1.39%

Lines of code

1331

increased by2.38%

No dependency changes