apphouse/dist/utils/units/toRems.ts

Component library for React that uses observable state management and theme-able components.

import { FONT_SIZE_CONVERSION_RATIO_PX_TO_REMS } from './fontSizeRatios';
import { isValidFontSizeUnit } from './isValidFontSizeUnit';

export const toRems = (value: string | number): string => {
  if (!value) {
    return '';
  }

  if (typeof value === 'string') {
    if (isValidFontSizeUnit(value)) {
      if (value.indexOf('rem') >= 0) {
        return value;
      }
      if (value.indexOf('px') >= 0) {
        return `${
          parseFloat(value) * FONT_SIZE_CONVERSION_RATIO_PX_TO_REMS
        }rem`;
      }

      if (value.indexOf('pt') >= 0) {
        return `${
          parseFloat(value) * FONT_SIZE_CONVERSION_RATIO_PX_TO_REMS
        }rem`;
      }

      if (value.indexOf('sp') >= 0) {
        return `${
          parseFloat(value) * FONT_SIZE_CONVERSION_RATIO_PX_TO_REMS
        }rem`;
      }
    }
    if (isNaN(parseFloat(value))) {
      return `0rem`;
    }
    return `${parseFloat(value) * FONT_SIZE_CONVERSION_RATIO_PX_TO_REMS}rem`;
  }

  if (typeof value === 'number') {
    return `${value * FONT_SIZE_CONVERSION_RATIO_PX_TO_REMS}rem`;
  }

  return '';
};