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

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

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

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

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

function clone(aObject) {
  let value;
  const bObject = {};
  for (const key in aObject) {
    value = aObject[key];
    bObject[key] = typeof value === "object" ? clone(value) : value;
  }
  return bObject;
}

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

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

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

  const replacement = clone(styles);

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

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

    for (const key in selector) {
      const val = selector[key];

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

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