Convert "px" to "rem"

pxToRem.ts

/**
 * Assuming 1rem = 16px
 *
 * 14 => 0.875
 */
export const pxToRem = (val: number, htmlFontSize?: number) => val / (htmlFontSize ?? 16);

/**
 * Assuming 1rem = 16px
 *
 * 14 => "0.875rem"
 */
export const toRem = (val: number, htmlFontSize?: number) => `${pxToRem(val, htmlFontSize)}rem`;

/**
 * Assuming 1rem = 16px
 *
 * "9px 4px 6px 4px" => "0.5625rem 0.25rem 0.375rem 0.25rem"
 */
export const replacePxByRem = (str: string, htmlFontSize?: number) => {
  const regex = /(\d+)px/g;

  return str.replace(regex, (pxValue) => toRem(parseFloat(pxValue), htmlFontSize));
};