@exah/prop-styles-system - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

CHANGELOG.md

@@ -9,2 +9,19 @@ # Changelog
 
+## [1.2.0](https://github.com/exah/pss/compare/1.1.0...1.2.0) - 2018-07-25
+### Added
+- ✨ Add `propStylesInTheme` [`a25bdb3`](https://github.com/exah/pss/commit/a25bdb3afe811443fefdf13b0fca61b2fb4b42d5)
+
+### Changed
+- 💥 Change `everyMedia` signature (internal) [`af5ad5d`](https://github.com/exah/pss/commit/af5ad5d3c1b2d4840df2c4336b2720502311c461)
+
+### Improved
+- ♻️ Restructure `utils/*` import due to `flow` re-export bug [`d90ae11`](https://github.com/exah/pss/commit/d90ae117184287b3736b1fbc2a4829e520a7f4d0)
+- ♻️ Improve `mapObj` [`a8dd441`](https://github.com/exah/pss/commit/a8dd441038fad2109658576b97acd89d691bd86c)
+- ♻️ Remove units from `0` in `sizes` [`6372b74`](https://github.com/exah/pss/commit/6372b74811bc5748b25761dccf682ea2a13563d0)
+
+
+
+### Docs & Tests
+- 📝 Add `propStylesInTheme` docs [`8528e61`](https://github.com/exah/pss/commit/8528e61e3b0b31d4d904d3cde7f2df5d89edc3b6)
+
 ## [1.1.0](https://github.com/exah/pss/compare/1.0.2...1.1.0) - 2018-07-19
@@ -11,0 +28,0 @@ ### Added

cjs/core/color-prop.js

@@ -14,4 +14,8 @@ 'use strict';
 
-var _utils = require('../utils');
+var _is = require('../utils/is');
 
+var _fns = require('../utils/fns');
+
+var _getters = require('../utils/getters');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -50,3 +54,3 @@
   var fgKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'fg';
-  return (0, _utils.curryN)(2, function (value, _ref) {
+  return (0, _fns.curryN)(2, function (value, _ref) {
     var theme = _ref.theme;
@@ -65,3 +69,3 @@
 
-    var palette = (0, _utils.getColors)(theme, value);
+    var palette = (0, _getters.getColors)(theme, value);
 
@@ -113,4 +117,4 @@ return {
 var colorProp = function colorProp(cssProp, colorKey) {
-  var getCssValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _utils.identity;
-  return (0, _utils.curryN)(2, function (value, props) {
+  var getCssValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _fns.identity;
+  return (0, _fns.curryN)(2, function (value, props) {
     if (value == null) {
@@ -120,3 +124,3 @@ return {};
 
-    var color = value === false ? _constants.CSS_PROPS_DEFAULTS[cssProp] || _constants.CSS_DEFAULT_VALUE : (0, _utils.isColor)(value) ? value : (0, _utils.getColor)(props.theme, colorKey, value);
+    var color = value === false ? _constants.CSS_PROPS_DEFAULTS[cssProp] || _constants.CSS_DEFAULT_VALUE : (0, _is.isColor)(value) ? value : (0, _getters.getColor)(props.theme, colorKey, value);
 
@@ -123,0 +127,0 @@ return !color ? {} : (0, _defineProperty3.default)({}, cssProp, getCssValue(color, props));

cjs/core/create-prop-styles.js

@@ -16,4 +16,10 @@ 'use strict';
 
-var _utils = require('../utils');
+var _is = require('../utils/is');
 
+var _fns = require('../utils/fns');
+
+var _helpers = require('../utils/helpers');
+
+var _getters = require('../utils/getters');
+
 var _constants = require('../constants');
@@ -29,3 +35,3 @@
   return function (theme) {
-    var media = (0, _utils.themeMedia)(theme);
+    var media = (0, _getters.themeMedia)(theme);
     var mediaKeys = Object.keys(media).map(function (mediaKey) {
@@ -102,6 +108,6 @@ return mediaKey === _constants.DEFAULT_KEY ? '' : mediaKey;
   var opts = Object.assign({}, DEFAULT_OPTIONS, options);
-  var buildStylesWithMediaOnce = (0, _utils.once)(buildStylesWithMedia(propStyles));
+  var buildStylesWithMediaOnce = (0, _fns.once)(buildStylesWithMedia(propStyles));
 
   return function (props) {
-    var isMedia = opts.isMediaProps && (0, _utils.themeDefaultMedia)(props.theme) !== false;
+    var isMedia = opts.isMediaProps && (0, _getters.themeDefaultMedia)(props.theme) !== false;
     var stylesMap = isMedia ? buildStylesWithMediaOnce(props.theme) : propStyles;
@@ -121,6 +127,4 @@
 
-        return acc.concat((0, _utils.toArr)(propStyle).map(function (style) {
-          return (0, _utils.wrapIfMedia)(mediaQuery, (0, _utils.isFn)(value)
-          // $FlowFixMe - Shitty FlowType don't recognize imported `isFn`
-          ? value(props, mediaKey, style) : (0, _utils.handlePropStyle)(style, value, props, mediaKey)) || [];
+        return acc.concat((0, _helpers.toArr)(propStyle).map(function (style) {
+          return (0, _helpers.wrapIfMedia)(mediaQuery, (0, _is.isFn)(value) ? value(props, mediaKey, style) : (0, _helpers.handlePropStyle)(style, value, props, mediaKey)) || [];
         }));
@@ -127,0 +131,0 @@ }

cjs/core/create-space-props.js

@@ -22,4 +22,6 @@ 'use strict';
 
-var _utils = require('../utils');
+var _getters = require('../utils/getters');
 
+var _helpers = require('../utils/helpers');
+
 var _everyMedia = require('./every-media');
@@ -43,18 +45,9 @@
 var cssRuleSpaceStyle = function cssRuleSpaceStyle(styleProp) {
-  var getSpaceValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _utils.getSpace;
+  var getSpaceValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _getters.getSpace;
   var toPx = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  return function (value, fnMediaKey) {
-    return function (props) {
-      var propMediaKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : fnMediaKey;
-
-      var cssRule = (0, _utils.toCssRule)(styleProp, toPx);
-      var spaceValue = getSpaceValue(props.theme, value);
-
-      if (propMediaKey != null) {
-        return cssRule(spaceValue(propMediaKey));
-      }
-
-      return (0, _everyMedia.everyMedia)(function (mediaKey) {
-        return cssRule(spaceValue(mediaKey, true));
-      }, props);
+  return function (value, defaultMediaKey) {
+    return function (_ref3) {
+      var theme = _ref3.theme;
+      var mediaKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultMediaKey;
+      return (0, _everyMedia.everyMediaValue)(theme, mediaKey, getSpaceValue(theme, value), (0, _helpers.toCssRule)(styleProp, toPx));
     };
@@ -108,6 +101,6 @@ };
 
-  return Object.assign(baseStyle, (0, _utils.toObj)(modifiers, function (_ref3) {
-    var _ref4 = (0, _slicedToArray3.default)(_ref3, 2),
-        modName = _ref4[0],
-        styleProp = _ref4[1];
+  return Object.assign(baseStyle, (0, _helpers.toObj)(modifiers, function (_ref4) {
+    var _ref5 = (0, _slicedToArray3.default)(_ref4, 2),
+        modName = _ref5[0],
+        styleProp = _ref5[1];
 
@@ -155,6 +148,6 @@ return !modName ? null : (0, _defineProperty3.default)({}, modName, cssRuleSpaceStyle(styleProp, getSpaceValue));
 
-  return (0, _utils.toObj)(modifiers, function (_ref6) {
-    var _ref7 = (0, _slicedToArray3.default)(_ref6, 2),
-        modName = _ref7[0],
-        styleProp = _ref7[1];
+  return (0, _helpers.toObj)(modifiers, function (_ref7) {
+    var _ref8 = (0, _slicedToArray3.default)(_ref7, 2),
+        modName = _ref8[0],
+        styleProp = _ref8[1];
 
@@ -161,0 +154,0 @@ var style = cssRuleSpaceStyle(styleProp, getSpaceValue);

cjs/core/every-media.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.everyMedia = undefined;
+exports.everyMediaValue = exports.everyMedia = undefined;
 
@@ -13,8 +13,14 @@ var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
 
-var _utils = require('../utils');
+var _is = require('../utils/is');
 
+var _fns = require('../utils/fns');
+
+var _getters = require('../utils/getters');
+
+var _helpers = require('../utils/helpers');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var everyMedia = (0, _utils.curryN)(2, function (getStyle, props) {
-  return Object.entries((0, _utils.themeMedia)(props.theme)).reduce(function (acc, _ref) {
+var everyMedia = function everyMedia(theme, getStyle) {
+  return Object.entries((0, _getters.themeMedia)(theme)).reduce(function (acc, _ref) {
     var _ref2 = (0, _slicedToArray3.default)(_ref, 2),
@@ -24,5 +30,23 @@ mediaKey = _ref2[0],
 
-    return acc.concat((0, _utils.wrapIfMedia)(mediaQuery, getStyle(mediaKey, props)) || []);
+    return acc.concat((0, _helpers.wrapIfMedia)(mediaQuery, getStyle(mediaKey)) || []);
   }, []);
-});
-exports.everyMedia = everyMedia;
+};
+
+var everyMediaValue = function everyMediaValue(theme, fnMediaKey, themeValue) {
+  var wrapper = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _fns.identity;
+
+  if ((0, _is.isFn)(themeValue)) {
+    if (fnMediaKey != null) {
+      return wrapper(themeValue(fnMediaKey));
+    }
+
+    return everyMedia(theme, function (mediaKey) {
+      return wrapper(themeValue(mediaKey, true));
+    });
+  }
+
+  return wrapper(themeValue);
+};
+
+exports.everyMedia = everyMedia;
+exports.everyMediaValue = everyMediaValue;

cjs/core/index.js

@@ -43,2 +43,14 @@ 'use strict';
 
+var _propStylesInTheme = require('./prop-styles-in-theme');
+
+Object.keys(_propStylesInTheme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _propStylesInTheme[key];
+    }
+  });
+});
+
 var _everyMedia = require('./every-media');
@@ -45,0 +57,0 @@

cjs/core/rule-prop.js

@@ -12,3 +12,3 @@ 'use strict';
 
-var _utils = require('../utils');
+var _is = require('../utils/is');
 
@@ -19,3 +19,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
   return function (val) {
-    return (0, _defineProperty3.default)({}, cssProp, (0, _utils.isBool)(val) ? val === true ? trueVal : falseVal : val);
+    return (0, _defineProperty3.default)({}, cssProp, (0, _is.isBool)(val) ? val === true ? trueVal : falseVal : val);
   };
@@ -22,0 +22,0 @@ };

cjs/core/size-prop.js

@@ -12,4 +12,10 @@ 'use strict';
 
-var _utils = require('../utils');
+var _is = require('../utils/is');
 
+var _fns = require('../utils/fns');
+
+var _getters = require('../utils/getters');
+
+var _helpers = require('../utils/helpers');
+
 var _everyMedia = require('./every-media');
@@ -53,13 +59,13 @@
   var toPx = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-  return (0, _utils.curryN)(2, function (propValue, _ref, propMediaKey) {
+  return (0, _fns.curryN)(2, function (propValue, _ref, mediaKey) {
     var theme = _ref.theme;
 
-    var cssRule = (0, _utils.toCssRule)(cssProp, toPx);
+    var cssRule = (0, _helpers.toCssRule)(cssProp, toPx);
 
-    if ((0, _utils.isStr)(propValue)) {
-      var customPathValue = (0, _utils.themePath)(propValue, null)(theme);
+    if ((0, _is.isStr)(propValue)) {
+      var customPathValue = (0, _getters.themePath)(propValue, null)(theme);
       if (customPathValue !== null) return cssRule(customPathValue);
     }
 
-    var size = (0, _utils.sizeValue)(propValue, trueVal, falseVal);
+    var size = (0, _helpers.sizeValue)(propValue, trueVal, falseVal);
 
@@ -70,3 +76,3 @@ if (size !== propValue) {
 
-    var themeSize = (0, _utils.getSize)(theme, propValue);
+    var themeSize = (0, _getters.getSize)(theme, propValue);
 
@@ -77,14 +83,3 @@ if (themeSize == null) {
 
-    if ((0, _utils.isFn)(themeSize)) {
-      if (propMediaKey == null) {
-        return (0, _everyMedia.everyMedia)(function (mediaKey) {
-          return cssRule(themeSize(mediaKey, true));
-        }, { theme: theme });
-      }
-
-      var mediaSize = themeSize(propMediaKey);
-      return cssRule(mediaSize !== propValue ? mediaSize : propValue);
-    }
-
-    return cssRule(themeSize);
+    return (0, _everyMedia.everyMediaValue)(theme, mediaKey, themeSize, cssRule);
   });
@@ -91,0 +86,0 @@ };

cjs/index.js

@@ -27,2 +27,8 @@ 'use strict';
 });
+Object.defineProperty(exports, 'propStylesInTheme', {
+  enumerable: true,
+  get: function get() {
+    return _core.propStylesInTheme;
+  }
+});
 Object.defineProperty(exports, 'createSpaceStyle', {
@@ -29,0 +35,0 @@ enumerable: true,

cjs/prop-styles/borders.js

@@ -20,4 +20,6 @@ 'use strict';
 
-var _utils = require('../utils');
+var _getters = require('../utils/getters');
 
+var _helpers = require('../utils/helpers');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -37,3 +39,3 @@
     var widthNum = val === true ? 1 : Number(widthValue);
-    var width = isNaN(widthNum) ? (0, _utils.getSize)(theme, widthValue) : widthNum;
+    var width = isNaN(widthNum) ? (0, _getters.getSize)(theme, widthValue) : widthNum;
 
@@ -47,3 +49,7 @@ return Object.assign((0, _defineProperty3.default)({}, 'border' + dir + 'Width', width || 0), style && (0, _defineProperty3.default)({}, 'border' + dir + 'Style', style));
   bdc: (0, _core.colorProp)('borderColor', 'border')
-}, (0, _utils.mapObj)(_constants.SHORT_DIRECTIONS, function (shortDir, longDir) {
+}, (0, _helpers.mapObj)(_constants.SHORT_DIRECTIONS, function (_ref3) {
+  var _ref4 = (0, _slicedToArray3.default)(_ref3, 2),
+      shortDir = _ref4[0],
+      longDir = _ref4[1];
+
   return ['bd' + shortDir, longDir.map(function (dir) {
@@ -50,0 +56,0 @@ return borderStyle(dir);

cjs/prop-styles/css.js

@@ -10,3 +10,3 @@ 'use strict';
 
-var _utils = require('../utils');
+var _helpers = require('../utils/helpers');
 
@@ -49,3 +49,3 @@ /**
   css: function css(val) {
-    return (0, _utils.toObj)(val);
+    return (0, _helpers.toObj)(val);
   }
@@ -52,0 +52,0 @@ });

cjs/prop-styles/space.js

@@ -10,3 +10,3 @@ 'use strict';
 
-var _utils = require('../utils');
+var _fns = require('../utils/fns');
 
@@ -58,3 +58,3 @@ var marginPropStyles = (0, _core.createPropStyles)((0, _core.createSpaceProps)('margin', 'mg'));
 
-var spacePropStyles = (0, _utils.combine)(marginPropStyles, paddingPropStyles);
+var spacePropStyles = (0, _fns.combine)(marginPropStyles, paddingPropStyles);
 
@@ -61,0 +61,0 @@ exports.marginPropStyles = marginPropStyles;

cjs/styles/media.js

@@ -8,8 +8,14 @@ 'use strict';
 
-var _utils = require('../utils');
+var _is = require('../utils/is');
 
-var onMedia = (0, _utils.curryN)(3, function (mediaKey, style, props) {
-  return (0, _utils.wrapIfMedia)((0, _utils.themeMedia)(props.theme)[mediaKey], (0, _utils.isFn)(style) ? style(props, mediaKey) : style);
+var _fns = require('../utils/fns');
+
+var _helpers = require('../utils/helpers');
+
+var _getters = require('../utils/getters');
+
+var onMedia = (0, _fns.curryN)(3, function (mediaKey, style, props) {
+  return (0, _helpers.wrapIfMedia)((0, _getters.themeMedia)(props.theme)[mediaKey], (0, _is.isFn)(style) ? style(props, mediaKey) : style);
 });
 
 exports.onMedia = onMedia;

cjs/utils/getters.js

@@ -6,8 +6,4 @@ 'use strict';
 });
-exports.getSpace = exports.getSize = exports.getColor = exports.getColors = exports.getPalette = exports.themePath = exports.themeColors = exports.themePalettes = exports.themeMedia = exports.themeSpaces = exports.themeDefaultMedia = exports.themeDefaultPaletteName = undefined;
+exports.getSpace = exports.getSize = exports.getColor = exports.getColors = exports.getPalette = exports.themePath = exports.themeColors = exports.themePalettes = exports.themeMedia = exports.themeSpaces = exports.themeDefaultMedia = exports.themeDefaultPaletteName = exports.getThemeMediaValue = undefined;
 
-var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
-
-var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
-
 var _constants = require('../constants');
@@ -23,4 +19,2 @@
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var themePath = function themePath(key, fallback) {
@@ -33,2 +27,3 @@ return function (src) {
 var themeDefaultPaletteName = themePath([_constants.DEFAULT_KEY, _constants.PALETTE_KEY], _constants.DEFAULT_KEY);
+var themeDefaultMedia = themePath([_constants.DEFAULT_KEY, _constants.MEDIA_KEY], _constants.DEFAULT_KEY);
 var themeSpaces = themePath(_constants.SPACE_KEY, {});
@@ -38,3 +33,2 @@ var themeMedia = themePath(_constants.MEDIA_KEY, {});
 var themeColors = themePath(_constants.COLORS_KEY, {});
-var themeDefaultMedia = themePath([_constants.DEFAULT_KEY, _constants.MEDIA_KEY], _constants.DEFAULT_KEY);
 
@@ -62,26 +56,17 @@ var getPalette = function getPalette(theme, name) {
 
-var getThemeMediaValue = function getThemeMediaValue(key) {
+var getThemeMediaValue = function getThemeMediaValue(themeParentKey) {
   return function (theme, value) {
-    var themeName = value === true ? (0, _helpers.path)([_constants.DEFAULT_KEY].concat((0, _toConsumableArray3.default)(key.split('.'))), _constants.DEFAULT_KEY)(theme) : value;
-    var themeValue = (0, _helpers.path)(key, {})(theme)[themeName];
+    var key = value === true ? themePath([_constants.DEFAULT_KEY, themeParentKey], _constants.DEFAULT_KEY)(theme) : (0, _is.isStr)(value) ? value : null;
+    var src = themePath(themeParentKey, null)(theme);
+    var result = (0, _helpers.path)(key, null, src);
 
-    if ((0, _is.isObj)(themeValue) && themeValue.hasOwnProperty(_constants.DEFAULT_KEY)) {
+    if (result !== null && result.hasOwnProperty(_constants.DEFAULT_KEY)) {
       return function (mediaKey) {
         var exact = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
-        var mediaValue = themeValue[mediaKey];
-
-        if (mediaValue != null) {
-          return mediaValue;
-        }
-
-        var defaultMediaValue = themeValue[_constants.DEFAULT_KEY];
-
-        if (defaultMediaValue != null) {
-          return exact === true ? null : defaultMediaValue;
-        }
+        return (0, _fns.fallbackTo)(result[mediaKey], exact ? null : result[_constants.DEFAULT_KEY]);
       };
     }
 
-    return themeValue;
+    return result;
   };
@@ -96,3 +81,3 @@ };
 
-    if (!(0, _is.isNum)(step) && !(0, _is.isBool)(step)) {
+    if ((0, _is.isStr)(step)) {
       var themeSize = getSize(theme, step);
@@ -112,10 +97,8 @@
     var spaces = themeSpaces(theme);
-    var spaceSizes = (0, _is.isArr)(spaces) ? spaces : (0, _fns.fallbackTo)(spaces[mediaKey], spaces[exact || _constants.DEFAULT_KEY]);
 
-    if (!spaceSizes) return null;
-
-    return (0, _helpers.spaceValue)(spaceSizes, step);
+    return (0, _helpers.spaceValue)(step, (0, _fns.fallbackTo)(spaces[mediaKey], exact ? [] : spaces[_constants.DEFAULT_KEY], []));
   };
 };
 
+exports.getThemeMediaValue = getThemeMediaValue;
 exports.themeDefaultPaletteName = themeDefaultPaletteName;
@@ -122,0 +105,0 @@ exports.themeDefaultMedia = themeDefaultMedia;

cjs/utils/helpers.js

@@ -33,11 +33,9 @@ 'use strict';
 
-    var result = fn.apply(undefined, payload);
-    if (result == null) return acc;
-    return Object.assign({}, acc, result);
+    return Object.assign({}, acc, fn.apply(undefined, payload));
   }, {});
 };
 
-var mapObj = function mapObj(obj, fn) {
-  return Object.keys(obj).reduce(function (acc, key) {
-    var _fn = fn(key, obj[key], obj),
+var mapObj = (0, _fns.curryN)(2, function (obj, fn) {
+  return Object.entries(obj).reduce(function (acc, entry, index) {
+    var _fn = fn(entry, index, obj),
         _fn2 = (0, _slicedToArray3.default)(_fn, 2),
@@ -49,3 +47,3 @@ nextKey = _fn2[0],
   }, {});
-};
+});
 
@@ -169,11 +167,13 @@ var toCssRule = function toCssRule(cssProps, toPx) {
   var falseVal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  return (0, _is.isNum)(val) ? val > 1 ? val : val * 100 + '%' : val === true ? trueVal : val === false ? falseVal : val;
+  return (0, _is.isNum)(val) ? val <= 0 || val > 1 ? val : val * 100 + '%' : val === true ? trueVal : val === false ? falseVal : val;
 };
 
-var spaceValue = function spaceValue() {
-  var spaces = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var step = arguments[1];
+var spaceValue = function spaceValue(val, spaces) {
+  var size = spaces[Math.abs(val)];
 
-  var size = spaces[Math.abs(step)];
-  return size != null ? size * (step < 0 ? -1 : 1) : step;
+  if (size === undefined) {
+    return null;
+  }
+
+  return size * (val < 0 ? -1 : 1);
 };
@@ -197,5 +197,5 @@
 
-var path = (0, _fns.curryN)(3, function (pathsOpt, fallback, obj) {
-  var paths = (0, _is.isStr)(pathsOpt) ? pathsOpt.split('.') : pathsOpt;
-  var val = obj || {};
+var path = (0, _fns.curryN)(3, function (pathsOpt, fallback, src) {
+  var paths = (0, _is.isStr)(pathsOpt) ? pathsOpt.split('.') : toArr(pathsOpt);
+  var val = src;
   var idx = 0;
@@ -212,3 +212,3 @@
 
-  return val;
+  return val === src ? fallback : val;
 });
@@ -215,0 +215,0 @@

cjs/utils/is.js

@@ -6,10 +6,2 @@ 'use strict';
 });
-exports.isEmpty = exports.isColor = exports.isObj = exports.isArr = exports.isStr = exports.isNum = exports.isBool = exports.isFn = undefined;
-
-var _typeof2 = require('babel-runtime/helpers/typeof');
-
-var _typeof3 = _interopRequireDefault(_typeof2);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var isFn = function isFn(val) {
@@ -30,5 +22,2 @@ return typeof val === 'function';
 };
-var isObj = function isObj(val) {
-  return (typeof val === 'undefined' ? 'undefined' : (0, _typeof3.default)(val)) === 'object' && !isArr(val);
-};
 
@@ -68,4 +57,3 @@ var isHex = function isHex(str) {
 exports.isArr = isArr;
-exports.isObj = isObj;
 exports.isColor = isColor;
 exports.isEmpty = isEmpty;

esm/core/color-prop.js

@@ -6,3 +6,5 @@ import _defineProperty from 'babel-runtime/helpers/defineProperty';
 
-import { getColors, getColor, isColor, identity, curryN } from '../utils';
+import { isColor } from '../utils/is';
+import { identity, curryN } from '../utils/fns';
+import { getColors, getColor } from '../utils/getters';
 
@@ -9,0 +11,0 @@ /**

esm/core/create-prop-styles.js

@@ -5,4 +5,10 @@ import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
 
-import { isFn, toArr, once, wrapIfMedia, handlePropStyle, themeMedia, themeDefaultMedia } from '../utils';
+import { isFn } from '../utils/is';
 
+import { once } from '../utils/fns';
+
+import { toArr, wrapIfMedia, handlePropStyle } from '../utils/helpers';
+
+import { themeMedia, themeDefaultMedia } from '../utils/getters';
+
 import { DEFAULT_KEY } from '../constants';
@@ -107,5 +113,3 @@
         return acc.concat(toArr(propStyle).map(function (style) {
-          return wrapIfMedia(mediaQuery, isFn(value)
-          // $FlowFixMe - Shitty FlowType don't recognize imported `isFn`
-          ? value(props, mediaKey, style) : handlePropStyle(style, value, props, mediaKey)) || [];
+          return wrapIfMedia(mediaQuery, isFn(value) ? value(props, mediaKey, style) : handlePropStyle(style, value, props, mediaKey)) || [];
         }));
@@ -112,0 +116,0 @@ }

esm/core/create-space-props.js

@@ -8,4 +8,5 @@ import _defineProperty from 'babel-runtime/helpers/defineProperty';
 
-import { getSpace, toObj, toCssRule } from '../utils';
-import { everyMedia } from './every-media';
+import { getSpace } from '../utils/getters';
+import { toObj, toCssRule } from '../utils/helpers';
+import { everyMediaValue } from './every-media';
 
@@ -28,16 +29,7 @@ var buildDirectionModifiers = function buildDirectionModifiers(styleProp) {
   var toPx = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  return function (value, fnMediaKey) {
-    return function (props) {
-      var propMediaKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : fnMediaKey;
-
-      var cssRule = toCssRule(styleProp, toPx);
-      var spaceValue = getSpaceValue(props.theme, value);
-
-      if (propMediaKey != null) {
-        return cssRule(spaceValue(propMediaKey));
-      }
-
-      return everyMedia(function (mediaKey) {
-        return cssRule(spaceValue(mediaKey, true));
-      }, props);
+  return function (value, defaultMediaKey) {
+    return function (_ref3) {
+      var theme = _ref3.theme;
+      var mediaKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultMediaKey;
+      return everyMediaValue(theme, mediaKey, getSpaceValue(theme, value), toCssRule(styleProp, toPx));
     };
@@ -91,6 +83,6 @@ };
 
-  return Object.assign(baseStyle, toObj(modifiers, function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 2),
-        modName = _ref4[0],
-        styleProp = _ref4[1];
+  return Object.assign(baseStyle, toObj(modifiers, function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+        modName = _ref5[0],
+        styleProp = _ref5[1];
 
@@ -138,6 +130,6 @@ return !modName ? null : _defineProperty({}, modName, cssRuleSpaceStyle(styleProp, getSpaceValue));
 
-  return toObj(modifiers, function (_ref6) {
-    var _ref7 = _slicedToArray(_ref6, 2),
-        modName = _ref7[0],
-        styleProp = _ref7[1];
+  return toObj(modifiers, function (_ref7) {
+    var _ref8 = _slicedToArray(_ref7, 2),
+        modName = _ref8[0],
+        styleProp = _ref8[1];
 
@@ -144,0 +136,0 @@ var style = cssRuleSpaceStyle(styleProp, getSpaceValue);

esm/core/every-media.js

 import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
-import { wrapIfMedia, themeMedia, curryN } from '../utils';
+import { isFn } from '../utils/is';
+import { identity } from '../utils/fns';
+import { themeMedia } from '../utils/getters';
+import { wrapIfMedia } from '../utils/helpers';
 
-var everyMedia = curryN(2, function (getStyle, props) {
-  return Object.entries(themeMedia(props.theme)).reduce(function (acc, _ref) {
+var everyMedia = function everyMedia(theme, getStyle) {
+  return Object.entries(themeMedia(theme)).reduce(function (acc, _ref) {
     var _ref2 = _slicedToArray(_ref, 2),
@@ -10,6 +13,22 @@ mediaKey = _ref2[0],
 
-    return acc.concat(wrapIfMedia(mediaQuery, getStyle(mediaKey, props)) || []);
+    return acc.concat(wrapIfMedia(mediaQuery, getStyle(mediaKey)) || []);
   }, []);
-});
+};
 
-export { everyMedia };
+var everyMediaValue = function everyMediaValue(theme, fnMediaKey, themeValue) {
+  var wrapper = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : identity;
+
+  if (isFn(themeValue)) {
+    if (fnMediaKey != null) {
+      return wrapper(themeValue(fnMediaKey));
+    }
+
+    return everyMedia(theme, function (mediaKey) {
+      return wrapper(themeValue(mediaKey, true));
+    });
+  }
+
+  return wrapper(themeValue);
+};
+
+export { everyMedia, everyMediaValue };

esm/core/index.js

 export * from './create-prop-styles';
 export * from './create-theme';
 export * from './create-space-props';
+export * from './prop-styles-in-theme';
 export * from './every-media';
@@ -5,0 +6,0 @@ export * from './rule-prop';

esm/core/rule-prop.js

 import _defineProperty from 'babel-runtime/helpers/defineProperty';
 
 
-import { isBool } from '../utils';
+import { isBool } from '../utils/is';
 
@@ -6,0 +6,0 @@ var ruleProp = function ruleProp(cssProp, trueVal, falseVal) {

esm/core/size-prop.js

 import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
 
 
-import { getSize, themePath, sizeValue, toCssRule, isFn, isStr, curryN } from '../utils';
+import { isStr } from '../utils/is';
 
-import { everyMedia } from './every-media';
+import { curryN } from '../utils/fns';
+import { getSize, themePath } from '../utils/getters';
+import { sizeValue, toCssRule } from '../utils/helpers';
+import { everyMediaValue } from './every-media';
 
@@ -42,3 +45,3 @@ /**
   var toPx = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-  return curryN(2, function (propValue, _ref, propMediaKey) {
+  return curryN(2, function (propValue, _ref, mediaKey) {
     var theme = _ref.theme;
@@ -65,14 +68,3 @@
 
-    if (isFn(themeSize)) {
-      if (propMediaKey == null) {
-        return everyMedia(function (mediaKey) {
-          return cssRule(themeSize(mediaKey, true));
-        }, { theme: theme });
-      }
-
-      var mediaSize = themeSize(propMediaKey);
-      return cssRule(mediaSize !== propValue ? mediaSize : propValue);
-    }
-
-    return cssRule(themeSize);
+    return everyMediaValue(theme, mediaKey, themeSize, cssRule);
   });
@@ -79,0 +71,0 @@ };

esm/index.js

@@ -1,2 +0,2 @@
-export { createPropStyles, createPropStyles as default, createTheme, createSpaceStyle, createSpaceProps, everyMedia, ruleProp, sizeStyle, sizeProp, colorProp, themeProp } from './core';
+export { createPropStyles, createPropStyles as default, createTheme, propStylesInTheme, createSpaceStyle, createSpaceProps, everyMedia, ruleProp, sizeStyle, sizeProp, colorProp, themeProp } from './core';
 
@@ -3,0 +3,0 @@ export { wrap, wrapIfMedia, propSelector, propSelector as ps, combineSelectors, combineSelectors as cs, themeSelector, themeSelector as ts, sizeValue, spaceValue, skipPropValue } from './utils/helpers';

esm/prop-styles/borders.js

@@ -5,3 +5,4 @@ import _defineProperty from 'babel-runtime/helpers/defineProperty';
 import { SHORT_DIRECTIONS } from '../constants';
-import { getSize, mapObj } from '../utils';
+import { getSize } from '../utils/getters';
+import { mapObj } from '../utils/helpers';
 
@@ -29,3 +30,7 @@ var borderStyle = function borderStyle() {
   bdc: colorProp('borderColor', 'border')
-}, mapObj(SHORT_DIRECTIONS, function (shortDir, longDir) {
+}, mapObj(SHORT_DIRECTIONS, function (_ref3) {
+  var _ref4 = _slicedToArray(_ref3, 2),
+      shortDir = _ref4[0],
+      longDir = _ref4[1];
+
   return ['bd' + shortDir, longDir.map(function (dir) {
@@ -32,0 +37,0 @@ return borderStyle(dir);

esm/prop-styles/css.js

 import { createPropStyles } from '../core';
-import { toObj } from '../utils';
+import { toObj } from '../utils/helpers';
 
@@ -4,0 +4,0 @@ /**

esm/prop-styles/space.js

 import { createPropStyles, createSpaceProps } from '../core';
-import { combine } from '../utils';
+import { combine } from '../utils/fns';
 
@@ -4,0 +4,0 @@ var marginPropStyles = createPropStyles(createSpaceProps('margin', 'mg'));

esm/styles/media.js

@@ -1,2 +0,5 @@
-import { wrapIfMedia, themeMedia, isFn, curryN } from '../utils';
+import { isFn } from '../utils/is';
+import { curryN } from '../utils/fns';
+import { wrapIfMedia } from '../utils/helpers';
+import { themeMedia } from '../utils/getters';
 
@@ -3,0 +6,0 @@ var onMedia = curryN(3, function (mediaKey, style, props) {

esm/utils/getters.js

@@ -1,5 +0,4 @@
-import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
 import { DEFAULT_KEY, COLORS_KEY, MEDIA_KEY, PALETTE_KEY, SIZES_KEY, SPACE_KEY } from '../constants';
 
-import { isStr, isArr, isNum, isObj, isFn, isBool, isEmpty } from './is';
+import { isStr, isFn, isEmpty } from './is';
 import { spaceValue, path } from './helpers';
@@ -16,2 +15,3 @@ import { fallbackTo } from './fns';
 var themeDefaultPaletteName = themePath([DEFAULT_KEY, PALETTE_KEY], DEFAULT_KEY);
+var themeDefaultMedia = themePath([DEFAULT_KEY, MEDIA_KEY], DEFAULT_KEY);
 var themeSpaces = themePath(SPACE_KEY, {});
@@ -21,3 +21,2 @@ var themeMedia = themePath(MEDIA_KEY, {});
 var themeColors = themePath(COLORS_KEY, {});
-var themeDefaultMedia = themePath([DEFAULT_KEY, MEDIA_KEY], DEFAULT_KEY);
 
@@ -45,26 +44,17 @@ var getPalette = function getPalette(theme, name) {
 
-var getThemeMediaValue = function getThemeMediaValue(key) {
+var getThemeMediaValue = function getThemeMediaValue(themeParentKey) {
   return function (theme, value) {
-    var themeName = value === true ? path([DEFAULT_KEY].concat(_toConsumableArray(key.split('.'))), DEFAULT_KEY)(theme) : value;
-    var themeValue = path(key, {})(theme)[themeName];
+    var key = value === true ? themePath([DEFAULT_KEY, themeParentKey], DEFAULT_KEY)(theme) : isStr(value) ? value : null;
+    var src = themePath(themeParentKey, null)(theme);
+    var result = path(key, null, src);
 
-    if (isObj(themeValue) && themeValue.hasOwnProperty(DEFAULT_KEY)) {
+    if (result !== null && result.hasOwnProperty(DEFAULT_KEY)) {
       return function (mediaKey) {
         var exact = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
-        var mediaValue = themeValue[mediaKey];
-
-        if (mediaValue != null) {
-          return mediaValue;
-        }
-
-        var defaultMediaValue = themeValue[DEFAULT_KEY];
-
-        if (defaultMediaValue != null) {
-          return exact === true ? null : defaultMediaValue;
-        }
+        return fallbackTo(result[mediaKey], exact ? null : result[DEFAULT_KEY]);
       };
     }
 
-    return themeValue;
+    return result;
   };
@@ -79,3 +69,3 @@ };
 
-    if (!isNum(step) && !isBool(step)) {
+    if (isStr(step)) {
       var themeSize = getSize(theme, step);
@@ -95,10 +85,7 @@
     var spaces = themeSpaces(theme);
-    var spaceSizes = isArr(spaces) ? spaces : fallbackTo(spaces[mediaKey], spaces[exact || DEFAULT_KEY]);
 
-    if (!spaceSizes) return null;
-
-    return spaceValue(spaceSizes, step);
+    return spaceValue(step, fallbackTo(spaces[mediaKey], exact ? [] : spaces[DEFAULT_KEY], []));
   };
 };
 
-export { themeDefaultPaletteName, themeDefaultMedia, themeSpaces, themeMedia, themePalettes, themeColors, themePath, getPalette, getColors, getColor, getSize, getSpace };
+export { getThemeMediaValue, themeDefaultPaletteName, themeDefaultMedia, themeSpaces, themeMedia, themePalettes, themeColors, themePath, getPalette, getColors, getColor, getSize, getSpace };

esm/utils/helpers.js

@@ -17,11 +17,9 @@ import _defineProperty from 'babel-runtime/helpers/defineProperty';
 
-    var result = fn.apply(undefined, payload);
-    if (result == null) return acc;
-    return Object.assign({}, acc, result);
+    return Object.assign({}, acc, fn.apply(undefined, payload));
   }, {});
 };
 
-var mapObj = function mapObj(obj, fn) {
-  return Object.keys(obj).reduce(function (acc, key) {
-    var _fn = fn(key, obj[key], obj),
+var mapObj = curryN(2, function (obj, fn) {
+  return Object.entries(obj).reduce(function (acc, entry, index) {
+    var _fn = fn(entry, index, obj),
         _fn2 = _slicedToArray(_fn, 2),
@@ -33,3 +31,3 @@ nextKey = _fn2[0],
   }, {});
-};
+});
 
@@ -153,11 +151,13 @@ var toCssRule = function toCssRule(cssProps, toPx) {
   var falseVal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  return isNum(val) ? val > 1 ? val : val * 100 + '%' : val === true ? trueVal : val === false ? falseVal : val;
+  return isNum(val) ? val <= 0 || val > 1 ? val : val * 100 + '%' : val === true ? trueVal : val === false ? falseVal : val;
 };
 
-var spaceValue = function spaceValue() {
-  var spaces = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var step = arguments[1];
+var spaceValue = function spaceValue(val, spaces) {
+  var size = spaces[Math.abs(val)];
 
-  var size = spaces[Math.abs(step)];
-  return size != null ? size * (step < 0 ? -1 : 1) : step;
+  if (size === undefined) {
+    return null;
+  }
+
+  return size * (val < 0 ? -1 : 1);
 };
@@ -181,5 +181,5 @@
 
-var path = curryN(3, function (pathsOpt, fallback, obj) {
-  var paths = isStr(pathsOpt) ? pathsOpt.split('.') : pathsOpt;
-  var val = obj || {};
+var path = curryN(3, function (pathsOpt, fallback, src) {
+  var paths = isStr(pathsOpt) ? pathsOpt.split('.') : toArr(pathsOpt);
+  var val = src;
   var idx = 0;
@@ -196,5 +196,5 @@
 
-  return val;
+  return val === src ? fallback : val;
 });
 
 export { toArr, toObj, mapObj, toCssRule, wrap, path, wrapIfMedia, propSelector, combineSelectors, handlePropStyle, sizeValue, themeSelector, spaceValue, skipPropValue };

esm/utils/is.js

@@ -1,2 +0,1 @@
-import _typeof from 'babel-runtime/helpers/typeof';
 var isFn = function isFn(val) {
@@ -17,5 +16,2 @@ return typeof val === 'function';
 };
-var isObj = function isObj(val) {
-  return (typeof val === 'undefined' ? 'undefined' : _typeof(val)) === 'object' && !isArr(val);
-};
 
@@ -50,2 +46,2 @@ var isHex = function isHex(str) {
 
-export { isFn, isBool, isNum, isStr, isArr, isObj, isColor, isEmpty };
+export { isFn, isBool, isNum, isStr, isArr, isColor, isEmpty };

package.json

 {
   "name": "@exah/prop-styles-system",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Prop styles system for styled components",
@@ -5,0 +5,0 @@ "author": "John Grishin <[e-mail]>",

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

138124

increased by4.79%

Lines of code

3361

increased by4.74%

No dependency changes