styled-system - npm Package Compare versions

Comparing version 1.1.7 to 2.0.0-0

dist/border-width.js

 'use strict';
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
 var _assign = require('babel-runtime/core-js/object/assign');
@@ -15,6 +19,6 @@
 
+var _util = require('./util');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var style = require('./style');
-
 var getDirectionProp = function getDirectionProp(template) {
@@ -41,6 +45,6 @@ return function (dir) {
 
-module.exports = function (props) {
+exports.default = function (props) {
   var directions = getDirections(props);
   var borderWidths = directions ? directions.map(function (dir) {
-    return style({
+    return (0, _util.style)({
       key: 'borderWidths',
@@ -51,3 +55,3 @@ prop: 'borderWidth',
     })(props);
-  }) : [style({
+  }) : [(0, _util.style)({
     key: 'borderWidths',
@@ -54,0 +58,0 @@ prop: 'borderWidth',

dist/color.js

 'use strict';
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
 var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
@@ -11,20 +15,14 @@
 
+var _util = require('./util');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _require = require('./util'),
-    get = _require.get,
-    breaks = _require.breaks,
-    merge = _require.merge,
-    arr = _require.arr,
-    dec = _require.dec,
-    media = _require.media;
-
 var REG = /^color|bg$/;
 
-module.exports = function (props) {
+exports.default = function (props) {
   var keys = (0, _keys2.default)(props).filter(function (key) {
     return REG.test(key);
   });
-  var bp = breaks(props);
-  var palette = get(props, 'theme.colors', {});
+  var bp = (0, _util.breaks)(props);
+  var palette = (0, _util.get)(props, 'theme.colors', {});
 
@@ -39,4 +37,4 @@ return keys.map(function (key) {
 
-    return val.map(cx(palette)).map(dec(prop)).map(media(bp)).reduce(merge, {});
-  }).reduce(merge, {});
+    return val.map(cx(palette)).map((0, _util.dec)(prop)).map((0, _util.media)(bp)).reduce(_util.merge, {});
+  }).reduce(_util.merge, {});
 };
@@ -46,3 +44,3 @@
   return function (n) {
-    return get(obj, n + '', n);
+    return (0, _util.get)(obj, n + '', n);
   };
@@ -49,0 +47,0 @@ };

dist/constants.js

@@ -1,10 +0,13 @@
-"use strict";
+'use strict';
 
-var breakpoints = [40, 52, 64];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var breakpoints = exports.breakpoints = ['40em', '52em', '64em'];
 
-var space = [0, 8, 16, 32, 64];
+var space = exports.space = [0, 4, 8, 16, 32, 64, 128, 256, 512];
 
-var fontSizes = [12, 14, 16, 20, 24, 32, 48, 64, 72];
+var fontSizes = exports.fontSizes = [12, 14, 16, 20, 24, 32, 48, 64, 72];
 
-module.exports = {
+exports.default = {
   breakpoints: breakpoints,
@@ -11,0 +14,0 @@ space: space,

dist/font-size.js

 'use strict';
 
-var _require = require('./util'),
-    get = _require.get,
-    is = _require.is,
-    arr = _require.arr,
-    num = _require.num,
-    px = _require.px,
-    breaks = _require.breaks,
-    dec = _require.dec,
-    media = _require.media,
-    merge = _require.merge;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-var _require2 = require('./constants'),
-    fontSizes = _require2.fontSizes;
+var _util = require('./util');
 
-module.exports = function (props) {
-  var n = is(props.fontSize) ? props.fontSize : props.fontSize || props.f;
-  if (!is(n)) return null;
+var _constants = require('./constants');
 
-  var scale = get(props, 'theme.fontSizes', fontSizes);
+exports.default = function (props) {
+  var n = (0, _util.is)(props.fontSize) ? props.fontSize : props.fontSize || props.f;
+  if (!(0, _util.is)(n)) return null;
 
+  var scale = (0, _util.get)(props, 'theme.fontSizes', _constants.fontSizes);
+
   if (!Array.isArray(n)) {
@@ -29,5 +23,5 @@ return {
 
-  var bp = breaks(props);
+  var bp = (0, _util.breaks)(props);
 
-  return n.map(fx(scale)).map(dec('fontSize')).map(media(bp)).reduce(merge, {});
+  return n.map(fx(scale)).map((0, _util.dec)('fontSize')).map((0, _util.media)(bp)).reduce(_util.merge, {});
 };
@@ -37,4 +31,4 @@
   return function (n) {
-    return num(n) ? px(scale[n] || n) : n;
+    return (0, _util.num)(n) ? (0, _util.px)(scale[n] || n) : n;
   };
 };

dist/index.js

 'use strict';
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.disabled = exports.active = exports.focus = exports.hover = exports.left = exports.bottom = exports.right = exports.top = exports.zIndex = exports.backgroundPosition = exports.backgroundSize = exports.backgroundImage = exports.background = exports.boxShadow = exports.borderColor = exports.borderRadius = exports.borders = exports.borderLeft = exports.borderBottom = exports.borderRight = exports.borderTop = exports.border = exports.getBorder = exports.alignSelf = exports.flex = exports.flexDirection = exports.flexWrap = exports.justifyContent = exports.alignContent = exports.alignItems = exports.size = exports.sizeHeight = exports.sizeWidth = exports.minHeight = exports.maxHeight = exports.height = exports.minWidth = exports.maxWidth = exports.display = exports.letterSpacing = exports.fontWeight = exports.lineHeight = exports.textAlign = exports.fontFamily = exports.color = exports.bgColor = exports.textColor = exports.fontSize = exports.width = exports.util = exports.space = exports.propTypes = exports.theme = exports.responsiveStyle = exports.pseudoStyle = exports.style = undefined;
+
+var _assign = require('babel-runtime/core-js/object/assign');
+
+var _assign2 = _interopRequireDefault(_assign);
+
+var _util2 = require('./util');
+
+Object.defineProperty(exports, 'style', {
+  enumerable: true,
+  get: function get() {
+    return _util2.style;
+  }
+});
+Object.defineProperty(exports, 'pseudoStyle', {
+  enumerable: true,
+  get: function get() {
+    return _util2.pseudoStyle;
+  }
+});
+Object.defineProperty(exports, 'responsiveStyle', {
+  enumerable: true,
+  get: function get() {
+    return _util2.responsiveStyle;
+  }
+});
+Object.defineProperty(exports, 'theme', {
+  enumerable: true,
+  get: function get() {
+    return _util2.theme;
+  }
+});
+
+var _propTypes = require('./prop-types');
+
+Object.defineProperty(exports, 'propTypes', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_propTypes).default;
+  }
+});
+
+var _space = require('./space');
+
+Object.defineProperty(exports, 'space', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_space).default;
+  }
+});
+
+var util = _interopRequireWildcard(_util2);
+
+var _util = _interopRequireWildcard(_util2);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.util = _util;
+
 // core
-var space = require('./space');
-var width = require('./width');
-var fontSize = require('./font-size');
-var color = require('./color');
 
-// low-level style function creators
-var style = require('./style');
-var responsiveStyle = require('./responsive-style');
-var pseudoStyle = require('./pseudo-style');
+var getWidth = function getWidth(n) {
+  return !util.num(n) || n > 1 ? util.px(n) : n * 100 + '%';
+};
+var width = exports.width = (0, _util2.responsiveStyle)({
+  prop: 'width',
+  alias: 'w',
+  getter: getWidth
+});
 
-// extras
-var textAlign = require('./text-align');
-var lineHeight = require('./line-height');
-var fontWeight = require('./font-weight');
-var letterSpacing = require('./letter-spacing');
-var alignItems = require('./align-items');
-var justifyContent = require('./justify-content');
-var flexWrap = require('./flex-wrap');
-var flexDirection = require('./flex-direction');
-var flex = require('./flex');
-var alignSelf = require('./align-self');
-var borderRadius = require('./border-radius');
-var borderColor = require('./border-color');
-var borderWidth = require('./border-width');
-var boxShadow = require('./box-shadow');
-var maxWidth = require('./max-width');
-var hover = require('./hover');
-var focus = require('./focus');
-var active = require('./active');
-var disabled = require('./disabled');
+var fontSize = exports.fontSize = (0, _util2.responsiveStyle)({
+  prop: 'fontSize',
+  alias: 'f',
+  key: 'fontSizes',
+  numberToPx: true
+});
 
-// other
-var theme = require('./theme');
-var propTypes = require('./prop-types');
-var cleanElement = require('./clean-element');
-var removeProps = require('./remove-props');
-var util = require('./util');
-var constants = require('./constants');
+var textColor = exports.textColor = (0, _util2.responsiveStyle)({
+  prop: 'color',
+  key: 'colors'
+});
 
-module.exports = {
-  space: space,
-  width: width,
-  fontSize: fontSize,
-  color: color,
-  style: style,
-  responsiveStyle: responsiveStyle,
-  pseudoStyle: pseudoStyle,
-  textAlign: textAlign,
-  lineHeight: lineHeight,
-  fontWeight: fontWeight,
-  letterSpacing: letterSpacing,
-  alignItems: alignItems,
-  justifyContent: justifyContent,
-  flexWrap: flexWrap,
-  flexDirection: flexDirection,
-  flex: flex,
-  alignSelf: alignSelf,
-  borderRadius: borderRadius,
-  borderColor: borderColor,
-  borderWidth: borderWidth,
-  boxShadow: boxShadow,
-  maxWidth: maxWidth,
-  hover: hover,
-  focus: focus,
-  active: active,
-  disabled: disabled,
-  theme: theme,
-  propTypes: propTypes,
-  cleanElement: cleanElement,
-  removeProps: removeProps,
-  util: util,
-  constants: constants
-};
+var bgColor = exports.bgColor = (0, _util2.responsiveStyle)({
+  prop: 'bg',
+  cssProperty: 'backgroundColor',
+  key: 'colors'
+});
+
+var color = exports.color = function color(props) {
+  return (0, _assign2.default)({}, textColor(props), bgColor(props));
+};
+
+// typography
+var fontFamily = exports.fontFamily = (0, _util2.responsiveStyle)({
+  prop: 'fontFamily',
+  alias: 'font',
+  key: 'fonts'
+});
+
+var textAlign = exports.textAlign = (0, _util2.responsiveStyle)({
+  prop: 'textAlign'
+});
+
+var lineHeight = exports.lineHeight = (0, _util2.style)({
+  prop: 'lineHeight',
+  key: 'lineHeights'
+});
+
+var fontWeight = exports.fontWeight = (0, _util2.style)({
+  prop: 'fontWeight',
+  key: 'fontWeights'
+});
+
+var letterSpacing = exports.letterSpacing = (0, _util2.style)({
+  prop: 'letterSpacing',
+  key: 'letterSpacings',
+  numberToPx: true
+});
+
+// layout
+var display = exports.display = (0, _util2.responsiveStyle)({
+  prop: 'display'
+});
+
+var maxWidth = exports.maxWidth = (0, _util2.responsiveStyle)({
+  prop: 'maxWidth',
+  key: 'maxWidths',
+  numberToPx: true
+});
+
+var minWidth = exports.minWidth = (0, _util2.responsiveStyle)({
+  prop: 'minWidth',
+  key: 'minWidths',
+  numberToPx: true
+});
+
+var height = exports.height = (0, _util2.responsiveStyle)({
+  prop: 'height',
+  key: 'heights',
+  numberToPx: true
+});
+
+var maxHeight = exports.maxHeight = (0, _util2.responsiveStyle)({
+  prop: 'maxHeight',
+  key: 'maxHeights',
+  numberToPx: true
+});
+
+var minHeight = exports.minHeight = (0, _util2.responsiveStyle)({
+  prop: 'minHeight',
+  key: 'minHeights',
+  numberToPx: true
+});
+
+var sizeWidth = exports.sizeWidth = (0, _util2.responsiveStyle)({
+  prop: 'size',
+  cssProperty: 'width',
+  numberToPx: true
+});
+
+var sizeHeight = exports.sizeHeight = (0, _util2.responsiveStyle)({
+  prop: 'size',
+  cssProperty: 'height',
+  numberToPx: true
+});
+
+var size = exports.size = function size(props) {
+  return (0, _assign2.default)({}, sizeWidth(props), sizeHeight(props));
+};
+
+// export const ratio = props => null
+
+// flexbox
+var alignItems = exports.alignItems = (0, _util2.responsiveStyle)({
+  prop: 'alignItems'
+});
+
+var alignContent = exports.alignContent = (0, _util2.responsiveStyle)({
+  prop: 'alignContent'
+});
+
+var justifyContent = exports.justifyContent = (0, _util2.responsiveStyle)({
+  prop: 'justifyContent'
+});
+
+var flexWrap = exports.flexWrap = (0, _util2.responsiveStyle)({
+  prop: 'flexWrap',
+  alias: 'wrap'
+});
+
+var flexDirection = exports.flexDirection = (0, _util2.responsiveStyle)({
+  prop: 'flexDirection'
+});
+
+var flex = exports.flex = (0, _util2.responsiveStyle)({
+  prop: 'flex'
+});
+
+var alignSelf = exports.alignSelf = (0, _util2.responsiveStyle)({
+  prop: 'alignSelf'
+});
+
+// borders
+var getBorder = exports.getBorder = function getBorder(n) {
+  return util.num(n) && n > 0 ? n + 'px solid' : n;
+};
+
+var border = exports.border = (0, _util2.responsiveStyle)({
+  prop: 'border',
+  key: 'borders',
+  getter: getBorder
+});
+
+var borderTop = exports.borderTop = (0, _util2.responsiveStyle)({
+  prop: 'borderTop',
+  key: 'borders',
+  getter: getBorder
+});
+
+var borderRight = exports.borderRight = (0, _util2.responsiveStyle)({
+  prop: 'borderRight',
+  key: 'borders',
+  getter: getBorder
+});
+
+var borderBottom = exports.borderBottom = (0, _util2.responsiveStyle)({
+  prop: 'borderBottom',
+  key: 'borders',
+  getter: getBorder
+});
+
+var borderLeft = exports.borderLeft = (0, _util2.responsiveStyle)({
+  prop: 'borderLeft',
+  key: 'borders',
+  getter: getBorder
+});
+
+var borders = exports.borders = function borders(props) {
+  return (0, _assign2.default)({}, border(props), borderTop(props), borderRight(props), borderBottom(props), borderLeft(props));
+};
+
+var borderRadius = exports.borderRadius = (0, _util2.style)({
+  prop: 'borderRadius',
+  key: 'radii',
+  numberToPx: true
+});
+
+var borderColor = exports.borderColor = (0, _util2.style)({
+  prop: 'borderColor',
+  key: 'colors'
+});
+
+var boxShadow = exports.boxShadow = (0, _util2.style)({
+  prop: 'boxShadow',
+  key: 'shadows'
+});
+
+// backgrounds
+var background = exports.background = (0, _util2.style)({
+  prop: 'background'
+});
+
+var backgroundImage = exports.backgroundImage = (0, _util2.style)({
+  prop: 'backgroundImage',
+  alias: 'bgImage',
+  getter: function getter(n) {
+    return 'url(' + n + ')';
+  }
+});
+
+var backgroundSize = exports.backgroundSize = (0, _util2.style)({
+  prop: 'backgroundSize',
+  alias: 'bgSize'
+});
+
+var backgroundPosition = exports.backgroundPosition = (0, _util2.style)({
+  prop: 'backgroundPosition',
+  alias: 'bgPosition'
+});
+
+// position
+var zIndex = exports.zIndex = (0, _util2.style)({
+  prop: 'zIndex'
+});
+
+var top = exports.top = (0, _util2.responsiveStyle)({
+  prop: 'top',
+  numberToPx: true
+});
+
+var right = exports.right = (0, _util2.responsiveStyle)({
+  prop: 'right',
+  numberToPx: true
+});
+
+var bottom = exports.bottom = (0, _util2.responsiveStyle)({
+  prop: 'bottom',
+  numberToPx: true
+});
+
+var left = exports.left = (0, _util2.responsiveStyle)({
+  prop: 'left',
+  numberToPx: true
+});
+
+// pseudos
+var hover = exports.hover = (0, _util2.pseudoStyle)('hover')({
+  color: 'colors',
+  backgroundColor: 'colors',
+  borderColor: 'colors',
+  boxShadow: 'shadows'
+});
+
+var focus = exports.focus = (0, _util2.pseudoStyle)('focus')({
+  color: 'colors',
+  backgroundColor: 'colors',
+  borderColor: 'colors',
+  boxShadow: 'shadows'
+});
+
+var active = exports.active = (0, _util2.pseudoStyle)('active')({
+  color: 'colors',
+  backgroundColor: 'colors',
+  borderColor: 'colors',
+  boxShadow: 'shadows'
+});
+
+var disabled = exports.disabled = (0, _util2.pseudoStyle)('disabled', 'disabledStyle')({
+  color: 'colors',
+  backgroundColor: 'colors',
+  borderColor: 'colors',
+  boxShadow: 'shadows'
+});

dist/prop-types.js

 'use strict';
 
-var PropTypes = require('prop-types');
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-var responsive = PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]);
+var _propTypes = require('prop-types');
 
-var responsiveBoolean = PropTypes.oneOfType([PropTypes.bool, PropTypes.array]);
+var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var numberOrString = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var responsive = _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string, _propTypes2.default.array]);
+
+var numberOrString = _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]);
+
 var width = {
@@ -44,3 +50,3 @@ width: responsive,
 var textAlign = {
-  align: responsive
+  textAlign: responsive
 };
@@ -57,11 +63,12 @@
 var alignItems = {
-  align: responsive
+  alignItems: responsive
 };
 
 var justifyContent = {
-  justify: responsive
+  justifyContent: responsive
 };
 
 var flexWrap = {
-  wrap: responsiveBoolean
+  flexWrap: responsive,
+  wrap: responsive
 };
@@ -91,30 +98,30 @@
   borderWidth: numberOrString,
-  borderTop: PropTypes.bool,
-  borderRight: PropTypes.bool,
-  borderBottom: PropTypes.bool,
-  borderLeft: PropTypes.bool
+  borderTop: _propTypes2.default.bool,
+  borderRight: _propTypes2.default.bool,
+  borderBottom: _propTypes2.default.bool,
+  borderLeft: _propTypes2.default.bool
 };
 
 var borderColor = {
-  borderColor: PropTypes.string
+  borderColor: _propTypes2.default.string
 };
 
 var boxShadow = {
-  boxShadow: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  boxShadow: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number])
 };
 
 var hover = {
-  hover: PropTypes.object
+  hover: _propTypes2.default.object
 };
 
 var focus = {
-  focus: PropTypes.object
+  focus: _propTypes2.default.object
 };
 
 var active = {
-  active: PropTypes.object
+  active: _propTypes2.default.object
 };
 
 var disabled = {
-  disabledStyle: PropTypes.object
+  disabledStyle: _propTypes2.default.object
 };
@@ -147,2 +154,2 @@
 
-module.exports = propTypes;
+exports.default = propTypes;

dist/space.js

 'use strict';
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
 var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
@@ -19,26 +23,16 @@
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _util = require('./util');
 
-var _require = require('./util'),
-    get = _require.get,
-    arr = _require.arr,
-    px = _require.px,
-    neg = _require.neg,
-    num = _require.num,
-    breaks = _require.breaks,
-    dec = _require.dec,
-    media = _require.media,
-    merge = _require.merge;
+var _constants = require('./constants');
 
-var _require2 = require('./constants'),
-    space = _require2.space;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var REG = /^[mp][trblxy]?$/;
 
-module.exports = function (props) {
+exports.default = function (props) {
   var keys = (0, _keys2.default)(props).filter(function (key) {
     return REG.test(key);
   }).sort();
-  var bp = breaks(props);
-  var sc = get(props, 'theme.space', space);
+  var bp = (0, _util.breaks)(props);
+  var sc = (0, _util.get)(props, 'theme.space', _constants.space);
 
@@ -55,4 +49,4 @@ return keys.map(function (key) {
 
-    return arr(val).map(mx(sc)).map(dec(p)).map(media(bp)).reduce(merge, {});
-  }).reduce(merge, {});
+    return (0, _util.arr)(val).map(mx(sc)).map((0, _util.dec)(p)).map((0, _util.media)(bp)).reduce(_util.merge, {});
+  }).reduce(_util.merge, {});
 };
@@ -62,3 +56,3 @@
   return function (n) {
-    if (!num(n)) {
+    if (!(0, _util.num)(n)) {
       return n;
@@ -68,7 +62,7 @@ }
     var value = scale[Math.abs(n)] || Math.abs(n);
-    if (!num(value)) {
+    if (!(0, _util.num)(value)) {
       return value;
     }
 
-    return px(value * (neg(n) ? -1 : 1));
+    return (0, _util.px)(value * ((0, _util.neg)(n) ? -1 : 1));
   };
@@ -75,0 +69,0 @@ };

dist/util.js

 'use strict';
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.theme = exports.responsiveStyle = exports.pseudoStyle = exports.style = exports.getValue = exports.mq = exports.merge = exports.dec = exports.media = exports.breaks = exports.arr = exports.num = exports.neg = exports.px = exports.is = exports.get = undefined;
+
 var _typeof2 = require('babel-runtime/helpers/typeof');
@@ -23,7 +28,12 @@
 
+var _propTypes = require('./prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _constants = require('./constants');
+
+var _constants2 = _interopRequireDefault(_constants);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _require = require('./constants'),
-    breakpoints = _require.breakpoints;
-
 var is = function is(n) {
@@ -38,5 +48,2 @@ return n !== undefined && n !== null;
 };
-var em = function em(n) {
-  return num(n) ? n + 'em' : n;
-};
 var neg = function neg(n) {
@@ -56,7 +63,11 @@ return n < 0;
 var mq = function mq(n) {
-  return '@media screen and (min-width: ' + em(n) + ')';
+  return '@media screen and (min-width: ' + px(n) + ')';
 };
 
+var fallbackTheme = function fallbackTheme(props) {
+  return get(props, 'theme', _constants2.default);
+};
+
 var breaks = function breaks(props) {
-  return [null].concat((0, _toConsumableArray3.default)(get(props, 'theme.breakpoints', breakpoints).map(mq)));
+  return [null].concat((0, _toConsumableArray3.default)(get(props, 'theme.breakpoints', _constants.breakpoints).map(mq)));
 };
@@ -84,21 +95,94 @@
 
-// keeping for backwards-compatibility only
-var idx = function idx(keys, obj) {
-  return get(obj, keys.join('.')) || null;
+var getValue = function getValue(val, getter, toPx) {
+  return typeof getter === 'function' ? getter(val) : toPx ? px(val) : val;
 };
 
-module.exports = {
-  get: get,
-  is: is,
-  px: px,
-  em: em,
-  neg: neg,
-  num: num,
-  arr: arr,
-  idx: idx,
-  breaks: breaks,
-  media: media,
-  dec: dec,
-  merge: merge,
-  mq: mq
-};
+var style = function style(_ref2) {
+  var prop = _ref2.prop,
+      cssProperty = _ref2.cssProperty,
+      alias = _ref2.alias,
+      key = _ref2.key,
+      getter = _ref2.getter,
+      numberToPx = _ref2.numberToPx;
+  return function (props) {
+    cssProperty = cssProperty || prop;
+    var n = is(props[prop]) ? props[prop] : props[alias];
+    var th = fallbackTheme(props);
+    if (!is(n)) return null;
+    var value = getValue(get(th, [key, n].join('.'), n), getter, numberToPx);
+
+    return (0, _defineProperty3.default)({}, cssProperty, value);
+  };
+};
+
+var responsiveStyle = function responsiveStyle(_ref4) {
+  var prop = _ref4.prop,
+      cssProperty = _ref4.cssProperty,
+      alias = _ref4.alias,
+      key = _ref4.key,
+      getter = _ref4.getter,
+      numberToPx = _ref4.numberToPx;
+  return function (props) {
+    cssProperty = cssProperty || prop;
+    var n = is(props[prop]) ? props[prop] : props[alias];
+    if (!is(n)) return null;
+
+    var bp = breaks(props);
+    var th = fallbackTheme(props);
+    var sx = function sx(n) {
+      return getValue(get(th, [key || prop, n].join('.'), n), getter, numberToPx);
+    };
+
+    if (!Array.isArray(n)) {
+      return (0, _defineProperty3.default)({}, cssProperty, sx(n));
+    }
+
+    var val = arr(n);
+    return val.map(sx).map(dec(cssProperty)).map(media(bp)).reduce(merge, {});
+  };
+};
+
+var pseudoStyle = function pseudoStyle(pseudoclass, prop) {
+  return function () {
+    var keys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return function (props) {
+      var style = props[prop || pseudoclass];
+      var numberToPx = keys.numberToPx || {};
+      for (var key in style) {
+        var toPx = numberToPx[key];
+
+        if (!keys[key] && !toPx) continue;
+        var themeKey = [keys[key], style[key]].join('.');
+        var th = fallbackTheme(props);
+        style[key] = get(th, themeKey, style[key]);
+
+        if (toPx) style[key] = px(style[key]);
+      }
+
+      return (0, _defineProperty3.default)({}, '&:' + pseudoclass, style);
+    };
+  };
+};
+
+var theme = function theme(keys, fallback) {
+  return function (props) {
+    return get(props.theme, keys, fallback);
+  };
+};
+
+exports.get = get;
+exports.is = is;
+exports.px = px;
+exports.neg = neg;
+exports.num = num;
+exports.arr = arr;
+exports.breaks = breaks;
+exports.media = media;
+exports.dec = dec;
+exports.merge = merge;
+exports.mq = mq;
+exports.getValue = getValue;
+exports.style = style;
+exports.pseudoStyle = pseudoStyle;
+exports.responsiveStyle = responsiveStyle;
+exports.theme = theme;

dist/width.js

 'use strict';
 
-var _require = require('./util'),
-    is = _require.is,
-    arr = _require.arr,
-    num = _require.num,
-    px = _require.px,
-    breaks = _require.breaks,
-    dec = _require.dec,
-    media = _require.media,
-    merge = _require.merge;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-module.exports = function (props) {
-  var n = is(props.width) ? props.width : props.width || props.w;
-  if (!is(n)) return null;
+var _util = require('./util');
 
+exports.default = function (props) {
+  var n = (0, _util.is)(props.width) ? props.width : props.width || props.w;
+  if (!(0, _util.is)(n)) return null;
+
   if (!Array.isArray(n)) {
@@ -23,9 +19,9 @@ return {
 
-  var bp = breaks(props);
+  var bp = (0, _util.breaks)(props);
 
-  return n.map(wx).map(dec('width')).map(media(bp)).reduce(merge, {});
+  return n.map(wx).map((0, _util.dec)('width')).map((0, _util.media)(bp)).reduce(_util.merge, {});
 };
 
 var wx = function wx(n) {
-  return !num(n) || n > 1 ? px(n) : n * 100 + '%';
+  return !(0, _util.num)(n) || n > 1 ? (0, _util.px)(n) : n * 100 + '%';
 };

package.json

 {
   "name": "styled-system",
-  "version": "1.1.7",
+  "version": "2.0.0-0",
   "description": "Design system utilities for styled-components, glamorous, and other css-in-js libraries",
   "main": "dist/index.js",
   "scripts": {
-    "prepublish": "babel src -d dist",
+    "prepare": "babel src -d dist",
     "start": "x0 dev docs/App.js -op 8888",
@@ -47,2 +47,8 @@ "build": "x0 build docs/App.js -d docs --static --cssLibrary='styled-components'",
   },
+  "ava": {
+    "require": [
+      "babel-register"
+    ],
+    "babel": "inherit"
+  },
   "nyc": {
@@ -49,0 +55,0 @@ "ignore": [

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

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 README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

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

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

Lines of code

743

increased by4.06%

Worsened metrics

Total package byte prevSize

26130

decreased by-49.76%

Number of package files

11

decreased by-70.27%

Number of low quality alerts

2

increased by100%

Number of medium quality alerts

1

increased byInfinity%

Number of lines in readme file

0

decreased by-100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes