pxToRem.js

// Here is a simple implementation
theo.registerValueTransform(
  "size/pxToRem",
  prop => prop.get("type") === "size", // Or whatever props you want to match
  prop => {
    let val = Math.floor(parseFloat(prop.get("value").replace(/px/g, "")) / 16)
    return `${val}rem`;
  }
);

// Here is an implementation that matches how Theo does remToPx
const pxToRem = (px, baseFontPercentage, baseFontPixel) =>
  parseFloat(px.replace(/px/g, "")) /
    baseFontPixel /
    (baseFontPercentage / 100) +
  "rem";

const convertPxToRem = prop => {
  const baseFontPercentage =
    typeof prop.getIn(["meta", "baseFontPercentage"]) === "number"
      ? prop.getIn(["meta", "baseFontPercentage"])
      : 100;
  const baseFontPixel =
    typeof prop.getIn(["meta", "baseFontPixel"]) === "number"
      ? prop.getIn(["meta", "baseFontPixel"])
      : 16;
  return pxToRem(prop.get("value"), baseFontPercentage, baseFontPixel);
};

theo.registerValueTransform(
  "size/pxToRem",
  prop => prop.get("type") === "size", // Or whatever props you want to match
  prop => convertPxToRem(prop)
);


// Add it to a transform
theo.registerTransform("web", ["color/rgb", "size/pxToRem"]);