Refactor typed om implementation

src/css-typed-om/css-keyword-value.js

@@ -0,0 +1,11 @@
+export class CSSKeywordValue {
+  #value;
+
+  constructor(value) {
+    this.#value = value;
+  }
+
+  toString() {
+    return this.#value.toString();
+  }
+}

src/css-typed-om/css-math-invert.js

@@ -0,0 +1,17 @@
+import {invertType} from './procedures';
+import {CSSMathValue} from './css-math-value';
+
+export class CSSMathInvert extends CSSMathValue {
+  constructor(values) {
+    super([1, arguments[0]], 'invert', 'calc', ' / ');
+  }
+
+  get value() {
+    return  this.values[1];
+  }
+
+  type() {
+    // The type of a CSSUnitValue is the result of creating a type from its unit internal slot.
+    return invertType(this.values[1].type())
+  }
+}

src/css-typed-om/css-math-max.js

@@ -0,0 +1,7 @@
+import {CSSMathValue} from './css-math-value';
+
+export class CSSMathMax extends CSSMathValue {
+  constructor() {
+    super(arguments, 'max');
+  }
+}

src/css-typed-om/css-math-min.js

@@ -0,0 +1,7 @@
+import {CSSMathValue} from './css-math-value';
+
+export class CSSMathMin extends CSSMathValue {
+  constructor() {
+    super(arguments, 'min');
+  }
+}

src/css-typed-om/css-math-negate.js

@@ -0,0 +1,15 @@
+import {CSSMathValue} from './css-math-value';
+
+export class CSSMathNegate extends CSSMathValue {
+  constructor(values) {
+    super([arguments[0]], 'negate', '-');
+  }
+
+  get value() {
+    return this.values[0];
+  }
+
+  type() {
+    return this.value.type();
+  }
+}

src/css-typed-om/css-math-product.js

@@ -0,0 +1,17 @@
+import {multiplyTypes, toSum} from './procedures';
+import {CSSMathValue} from './css-math-value';
+
+export class CSSMathProduct extends CSSMathValue  {
+  constructor(values) {
+    super(arguments, 'product', 'calc', ' * ');
+  }
+
+  toSum(...units) {
+    return toSum(this, ...units)
+  }
+
+  type() {
+    // The type is the result of multiplying the types of each of the items in its values internal slot.
+    return this.values.map(v => v.type()).reduce(multiplyTypes)
+  }
+}

src/css-typed-om/css-math-sum.js

@@ -0,0 +1,7 @@
+import {CSSMathValue} from './css-math-value';
+
+export class CSSMathSum extends CSSMathValue {
+  constructor(values) {
+    super(arguments, 'sum', 'calc', ' + ');
+  }
+}

src/css-typed-om/css-math-value.js

@@ -0,0 +1,41 @@
+import {CSSNumericValue} from './css-numeric-value'
+function toCssUnitValue(v) {
+  if (typeof v === 'number')
+    return new CSSUnitValue(v, 'number');
+  return v;
+}
+
+function toCssNumericArray(values) {
+  const result = [];
+  for (let i = 0; i < values.length; i++) {
+    result[i] = toCssUnitValue(values[i]);
+  }
+  return result;
+}
+
+export class CSSMathValue extends CSSNumericValue {
+  #values;
+  #operator;
+  #name;
+  #delimiter;
+
+  constructor(values, operator, opt_name, opt_delimiter) {
+    super();
+    this.#values = toCssNumericArray(values);
+    this.#operator = operator;
+    this.#name = opt_name || operator;
+    this.#delimiter = opt_delimiter || ', ';
+  }
+
+  get operator() {
+    return this.#operator;
+  }
+
+  get values() {
+    return this.#values;
+  }
+
+  toString() {
+    return `${this.#name}(${this.#values.join(this.#delimiter)})`;
+  }
+}

src/css-typed-om/css-numeric-value.js

@@ -0,0 +1,13 @@
+import {parseCSSNumericValue} from './parse-numeric-value';
+
+export class CSSNumericValue {
+  static parse(value) {
+    if (value instanceof CSSNumericValue)
+      return value;
+
+    return parseCSSNumericValue(value);
+  }
+
+  // TODO: Add other methods: add, sub, mul, div, …
+  // Spec: https://drafts.css-houdini.org/css-typed-om/#numeric-value
+}

src/css-typed-om/css-unit-value.js

@@ -0,0 +1,53 @@
+import {CSSNumericValue} from './css-numeric-value';
+import {createAType, to, toSum} from './procedures';
+
+function displayUnit(unit) {
+  switch (unit) {
+    case 'percent':
+      return '%';
+    case 'number':
+      return '';
+    default:
+      return unit.toLowerCase();
+  }
+}
+
+export class CSSUnitValue extends CSSNumericValue {
+  #value;
+  #unit;
+
+  constructor(value, unit) {
+    super();
+    this.#value = value;
+    this.#unit = unit;
+  }
+
+  get value() {
+    return this.#value;
+  }
+
+  set value(value) {
+    this.#value = value;
+  }
+
+  get unit() {
+    return this.#unit;
+  }
+
+  to(unit) {
+    return to(this, unit);
+  }
+
+  toSum(...units) {
+    return toSum(this, ...units);
+  }
+
+  type() {
+    // The type of a CSSUnitValue is the result of creating a type from its unit internal slot.
+    return createAType(this.#unit);
+  }
+
+  toString() {
+    return `${this.#value}${displayUnit(this.#unit)}`;
+  }
+}