understyle/dist/create-style.js

Functional style utilities for authoring JavaScript style objects

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _objectAssign = require('object-assign');

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _parseArrayValue = require('./parse-array-value');

var _parseArrayValue2 = _interopRequireDefault(_parseArrayValue);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var display = function display(val) {
  return { display: val };
};

var width = function width(val) {
  if (val === null) return null;
  return val > 1 ? { width: val } : { width: val * 100 + '%' };
};

var getScaleProp = function getScaleProp(scale) {
  return function (key) {
    return function (val) {
      if (val === null) return null;
      if (typeof val === 'string') {
        return _defineProperty({}, key, val);
      }
      var multiplier = val < 0 ? -1 : 1;
      val = Math.abs(val);

      var numVal = scale[val] || val;

      return _defineProperty({}, key, numVal * multiplier);
    };
  };
};

var fontSize = function fontSize(scale) {
  return function (val) {
    return {
      fontSize: scale[val] || val
    };
  };
};

var getColorProp = function getColorProp(key) {
  return function (colors) {
    return function (val) {
      if (!val) return null;
      var color = colors[val] || val;
      return _defineProperty({}, key, color);
    };
  };
};
var color = getColorProp('color');
var backgroundColor = getColorProp('backgroundColor');
var borderColor = getColorProp('borderColor');

var border = function border(key, val) {
  var _ref5;

  if (val === false) {
    return _defineProperty({}, key, 0);
  }
  var size = typeof val === 'number' ? val : 1;
  return _ref5 = {}, _defineProperty(_ref5, key + 'Width', size), _defineProperty(_ref5, key + 'Style', 'solid'), _ref5;
};

var rx = function rx() {
  for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
    args[_key] = arguments[_key];
  }

  return args.map(function (v) {
    return v ? v + 'px' : 0;
  }).join(' ');
};

var radii = function radii(R) {
  return function (val) {
    switch (val) {
      case false:
        return { borderRadius: 0 };
      case true:
        return { borderRadius: R };
      case 'top':
        return { borderRadius: rx(R, R, 0, 0) };
      case 'right':
        return { borderRadius: rx(0, R, R, 0) };
      case 'bottom':
        return { borderRadius: rx(0, 0, R, R) };
      case 'left':
        return { borderRadius: rx(R, 0, 0, R) };
      default:
        return null;
    }
  };
};

var parseStyle = function parseStyle(config) {
  return function (key) {
    return function (value) {
      if (value === null) return null;

      switch (key) {
        // Layout
        case 'display':
          return display(value);
        case 'width':
          return width(value);

        // Typography
        case 'fontSize':
          return fontSize(config.typeScale)(value);

        case 'align':
          return { textAlign: value };
        case 'bold':
          return { fontWeight: config.bold };
        case 'caps':
          return {
            textTransform: 'uppercase',
            letterSpacing: '.1em'
          };

        // Padding
        case 'p':
        case 'padding':
          return getScaleProp(config.scale)('padding')(value);
        case 'pt':
        case 'paddingTop':
          return getScaleProp(config.scale)('paddingTop')(value);
        case 'pr':
        case 'paddingRight':
          return getScaleProp(config.scale)('paddingRight')(value);
        case 'pb':
        case 'paddingBottom':
          return getScaleProp(config.scale)('paddingBottom')(value);
        case 'pl':
        case 'paddingLeft':
          return getScaleProp(config.scale)('paddingLeft')(value);
        case 'px':
        case 'paddingX':
          return (0, _objectAssign2.default)({}, getScaleProp(config.scale)('paddingLeft')(value), getScaleProp(config.scale)('paddingRight')(value));
        case 'py':
        case 'paddingY':
          return (0, _objectAssign2.default)({}, getScaleProp(config.scale)('paddingTop')(value), getScaleProp(config.scale)('paddingBottom')(value));

        // Margin
        case 'm':
        case 'margin':
          return getScaleProp(config.scale)('margin')(value);
        case 'mt':
        case 'marginTop':
          return getScaleProp(config.scale)('marginTop')(value);
        case 'mr':
        case 'marginRight':
          return getScaleProp(config.scale)('marginRight')(value);
        case 'mb':
        case 'marginBottom':
          return getScaleProp(config.scale)('marginBottom')(value);
        case 'ml':
        case 'marginLeft':
          return getScaleProp(config.scale)('marginLeft')(value);
        case 'mx':
        case 'marginX':
          return (0, _objectAssign2.default)({}, getScaleProp(config.scale)('marginLeft')(value), getScaleProp(config.scale)('marginRight')(value));
        case 'my':
        case 'marginY':
          return (0, _objectAssign2.default)({}, getScaleProp(config.scale)('marginTop')(value), getScaleProp(config.scale)('marginBottom')(value));

        // Flexbox properties
        case 'flexWrap':
          return { flexWrap: value };
        case 'alignItems':
          return { alignItems: value };
        case 'justifyContent':
          return { justifyContent: value };
        case 'flexDirection':
          return { flexDirection: value };
        case 'flexAuto':
          return { flex: '1 1 auto' };
        case 'flexNone':
          return { flex: 'none' };

        // Color properties
        case 'color':
          return color(config.colors)(value);
        case 'backgroundColor':
        case 'bg':
          return backgroundColor(config.colors)(value);
        case 'borderColor':
          return borderColor(config.colors)(value);

        // Border properties
        case 'border':
          return border('border', value);
        case 'borderTop':
          return border('borderTop', value);
        case 'borderRight':
          return border('borderRight', value);
        case 'borderBottom':
          return border('borderBottom', value);
        case 'borderLeft':
          return border('borderLeft', value);
        case 'rounded':
          return radii(config.borderRadius)(value);
        default:
          return null;
      }
    };
  };
};

var createStyle = function createStyle(config) {
  return function (_ref6) {
    var key = _ref6.key,
        value = _ref6.value;

    return (0, _parseArrayValue2.default)(config.breakpoints)(value)(parseStyle(config)(key));
  };
};

exports.default = createStyle;