cssunitvalue-is-not-easy-to-use-as-extension-handler.js

// https://www.w3.org/TR/css-typed-om-1/#simple-numeric
class CSSUnitValue {
  constructor(value, unit) {
    this.value = value;
    this.unit = unit;
  }
  toString() {
    // https://www.w3.org/TR/css-typed-om-1/#numericvalue-serialization
    // 4. Otherwise, if unit is "percentage", append "%" to s, then return s.
    return `${this.value}${this.unit === "percent" ? "%" : ""}`;
  }
}

// https://www.w3.org/TR/css-typed-om-1/#numeric-factory
const CSS = {
  px(value) {
    return new CSSUnitValue(value, "px");
  },
  percent(value) {
    return new CSSUnitValue(value, "percent");
  }
};


function px({ number }) {
  return CSS.px(number);
}

function percent({ number }) {
  return CSS.percent(number);
}


// 1percent
console.log(String(percent(Object.freeze({ number: 1, string: "1" })))); // "1%"

// 1px
console.log(String(px(Object.freeze({ number: 1, string: "1" })))); // "1"

let a = px(Object.freeze({ number: 1, string: "1" }));
let b = px(Object.freeze({ number: 3, string: "3" }));
console.log(
  a + b // "13"
);