@mujo/box/dist/lib/helpers.js

A React utility to add a style guide to primative components

import { css } from '@emotion/react';
import keys from 'object-keys';
export var cssToStyle = function cssToStyle(cssProp) {
  return cssProp ? css(cssProp) : css({});
};
export function mapToPair(props) {
  return function (key) {
    return [key, props[key]];
  };
}
export var mapToStyleGuideValue = function mapToStyleGuideValue(_ref) {
  var _ref$used = _ref.used,
      used = _ref$used === void 0 ? [] : _ref$used,
      key = _ref.key,
      value = _ref.value;
  return function (val, curr) {
    if (val) return val;

    if (curr[key]) {
      used.push(key);

      if ((typeof value === 'string' || typeof value === 'number') && curr[key][value]) {
        return cssToStyle(curr[key][value]);
      }
    }

    return val;
  };
};
var cssDataPattern = /^data-css/;
export function propsToStyles(stylesObjs) {
  return function (props) {
    var used = [];
    var styles = keys(props).map(mapToPair(props)).map(function (pair) {
      if (cssDataPattern.test(pair[0])) {
        used.push(pair[0]);
        return pair[0].replace(cssDataPattern, 'css');
      }

      return [stylesObjs].reduce(mapToStyleGuideValue({
        used: used,
        key: pair[0],
        value: pair[1]
      }), null);
    }).filter(function (val) {
      return typeof val !== 'string';
    });
    return {
      used: used,
      styles: styles
    };
  };
}
export var makeStyles = function makeStyles(property, props) {
  var ret = {};
  var key;

  for (key in props) {
    var cssObject = {};
    cssObject[property] = props[key];
    ret[key] = cssObject;
  }

  return ret;
};