css-viewport-units-transform/dist/index.js

Transform CSS viewport units of a style object to pixels based on window dimensions

"use strict";

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

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

exports.transform = transform;
var viewportUnitRE = /^([+-]?[0-9.]+)(vh|vw|vmin|vmax)$/;

function isViewportUnit(value) {
  return viewportUnitRE.test(value);
}

function getMatchObject(dim) {
  var vh = dim.height;
  var vw = dim.width;
  return {
    vh: vh,
    vw: vw,
    vmax: Math.max(vw, vh),
    vmin: Math.min(vw, vh)
  };
}

function clone(aObject) {
  var value = void 0;
  var bObject = {};
  for (var key in aObject) {
    value = aObject[key];
    bObject[key] = (typeof value === "undefined" ? "undefined" : _typeof(value)) === "object" ? clone(value) : value;
  }
  return bObject;
}

function transform(styles, dimensions) {
  var dim = getMatchObject(dimensions);

  function replaceViewportUnit(_, number, unit) {
    var base = dim[unit];
    var val = parseFloat(number) / 100;
    return val * base;
  }

  function replace(value) {
    return parseFloat(value.replace(viewportUnitRE, replaceViewportUnit));
  }

  var replacement = clone(styles);

  for (var key in replacement) {
    var selector = replacement[key];

    if (isViewportUnit(selector)) {
      replacement[key] = replace(selector);
      continue;
    }

    for (var _key in selector) {
      var val = selector[_key];

      if (isViewportUnit(val)) {
        selector[_key] = replace(val);
        continue;
      }

      for (var _key2 in val) {
        if (isViewportUnit(val[_key2])) {
          val[_key2] = replace(val[_key2]);
          continue;
        }
      }
    }
  }
  return replacement;
}