styled-components-2rem/es/index.js

Extension of styled-components with features for convert px to rem units

import styled__default from 'styled-components';
export * from 'styled-components';

function _toConsumableArray(arr) {
  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}

function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) {
    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];

    return arr2;
  }
}

function _iterableToArray(iter) {
  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}

function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance");
}

var pxRe = /-?\d*[.\d]*pxm/g;
var base64Re = /^data:\w+\/[a-zA-Z+\-.]+;base64,/i;

var px2rem = function px2rem(px) {
  return Number(px) ? "".concat(Math.round(Number(px) / 75 * 100000) / 100000, "rem") : 0;
};

var convertStringPx2rem = function convertStringPx2rem(style) {
  if (!style) return style;

  if (!base64Re.test(style) && // 非base64字符串
  pxRe.test(style) // 包含pxm单位
  ) {
      return style.replace(pxRe, function (value) {
        return px2rem(value.replace("pxm", ""));
      });
    }

  return style;
};

var convertInterpolationPx2rem = function convertInterpolationPx2rem(interpolation) {
  if (Object.prototype.toString.call(interpolation) === "[object Object]" && interpolation.constructor.name.toLowerCase() === "keyframes") {
    interpolation.rules = interpolation.rules.map(convertStringPx2rem);
    return interpolation;
  } else if (Object.prototype.toString.call(interpolation) === "[object Array]") {
    return convertStringPx2rem(interpolation.join(""));
  } else if (typeof interpolation !== "function") {
    return interpolation;
  }

  return function (props) {
    var result = interpolation(props);

    if (typeof result === "string") {
      return convertStringPx2rem(result);
    }

    if (Array.isArray(result)) {
      return result.map(convertStringPx2rem);
    }

    return result;
  };
};

var withCss = function withCss(styled) {
  var interleave = function interleave(strings) {
    for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
      interpolations[_key - 1] = arguments[_key];
    }

    strings = strings.map(convertStringPx2rem);
    interpolations = interpolations.map(convertInterpolationPx2rem);
    return styled.apply(void 0, [strings].concat(_toConsumableArray(interpolations))); // return styled(strings, ...interpolations);
  };

  Object.keys(styled).forEach(function (prop) {
    return interleave[prop] = withTemplateFunc(styled[prop]);
  });
  return interleave;
};

var withTemplateFunc = function withTemplateFunc(styled) {
  return function () {
    return withCss(styled.apply(void 0, arguments));
  };
};

var styledPx2rem = function (styled) {
  var obj = withTemplateFunc(styled);
  Object.keys(styled).forEach(function (key) {
    obj[key] = withCss(styled[key]);
    Object.keys(styled[key]).forEach(function (prop) {
      return obj[key][prop] = withTemplateFunc(styled[key][prop]);
    });
  });
  return obj;
}(styled__default);

export default styledPx2rem;
export { px2rem };