feat: use @tokens-studio/unit-calculator instead of regex wrapper

Author: floscr

package-lock.json

@@ -36,6 +36,7 @@
     "@bundled-es-modules/deepmerge": "^4.3.1",
     "@bundled-es-modules/postcss-calc-ast-parser": "^0.1.6",
     "@tokens-studio/types": "^0.5.1",
+    "@tokens-studio/unit-calculator": "^0.0.1",
     "colorjs.io": "^0.5.2",
     "expr-eval-fork": "^2.0.2",
     "is-mergeable-object": "^1.1.1"

package.json

@@ -3,6 +3,8 @@ import { Parser } from 'expr-eval-fork';
 import { parse, reduceExpression } from '@bundled-es-modules/postcss-calc-ast-parser';
 import { defaultFractionDigits } from './utils/constants.js';
 import { reduceToFixed } from './utils/reduceToFixed.js';
+import { strictCheckAndEvaluateMath, MathOptions } from './strictCheckAndEvaluateMath.js';
+import { transformByTokenType } from './utils/transformByTokenType.js';
 
 const mathChars = ['+', '-', '*', '/'];
 
@@ -157,9 +159,9 @@ export function parseAndReduce(
 export function checkAndEvaluateMath(
   token: DesignToken,
   fractionDigits?: number,
-  isStrict = false,
+  strictOptions?: Partial<MathOptions>,
 ): DesignToken['value'] {
-  if (isStrict) return checkAndEvaluateMath(token, fractionDigits);
+  if (strictOptions) return strictCheckAndEvaluateMath(token, { fractionDigits, ...strictOptions });
 
   const expr = token.$value ?? token.value;
   const type = token.$type ?? token.type;
@@ -180,48 +182,7 @@ export function checkAndEvaluateMath(
     return reducedExprs.join(' ');
   };
 
-  const transformProp = (val: Record<string, number | string>, prop: string) => {
-    if (typeof val === 'object' && val[prop] !== undefined) {
-      val[prop] = resolveMath(val[prop]);
-    }
-    return val;
-  };
-
-  let transformed = expr;
-  switch (type) {
-    case 'typography':
-    case 'border': {
-      transformed = transformed as Record<string, number | string>;
-      // double check that expr is still an object and not already shorthand transformed to a string
-      if (typeof expr === 'object') {
-        Object.keys(transformed).forEach(prop => {
-          transformed = transformProp(transformed, prop);
-        });
-      }
-      break;
-    }
-    case 'shadow': {
-      transformed = transformed as
-        | Record<string, number | string>
-        | Record<string, number | string>[];
-      const transformShadow = (shadowVal: Record<string, number | string>) => {
-        // double check that expr is still an object and not already shorthand transformed to a string
-        if (typeof expr === 'object') {
-          Object.keys(shadowVal).forEach(prop => {
-            shadowVal = transformProp(shadowVal, prop);
-          });
-        }
-        return shadowVal;
-      };
-      if (Array.isArray(transformed)) {
-        transformed = transformed.map(transformShadow);
-      }
-      transformed = transformShadow(transformed);
-      break;
-    }
-    default:
-      transformed = resolveMath(transformed);
-  }
+  const transformed = transformByTokenType(expr, type, resolveMath);
 
   return transformed;
 }

src/checkAndEvaluateMath.ts

@@ -73,7 +73,14 @@ export async function register(sd: typeof StyleDictionary, transformOpts?: Trans
     type: 'value',
     transitive: true,
     filter: token => ['string', 'object'].includes(typeof (token.$value ?? token.value)),
-    transform: (token, platformCfg) => checkAndEvaluateMath(token, platformCfg.mathFractionDigits),
+    transform: (token, platformCfg) =>
+      checkAndEvaluateMath(
+        token,
+        // backwards compability prop
+        platformCfg.mathFractionDigits,
+        // strict math mode options
+        platformCfg.mathOptions,
+      ),
   });
 
   sd.registerTransform({

src/register.ts

@@ -1,52 +1,61 @@
+import { run, config as calcConfig } from '@tokens-studio/unit-calculator';
+import type { IUnitValue } from '@tokens-studio/unit-calculator';
 import { Parser } from 'expr-eval-fork';
 import { DesignToken } from 'style-dictionary/types';
 import { defaultFractionDigits } from './utils/constants.js';
-import { MathExprEvalError, MixedUnitsExpressionError } from './utils/errors.js';
-import { parseUnits } from './utils/parseUnits.js';
+import { MathExprEvalError } from './utils/errors.js';
 import { reduceToFixed } from './utils/reduceToFixed.js';
+import { transformByTokenType } from './utils/transformByTokenType.js';
+
+const { roundTo } = new Parser().functions;
+const config = {
+  mathFunctions: {
+    ...calcConfig.defaultMathFunctions,
+    roundTo: (a: IUnitValue, b: IUnitValue) => {
+      const value = roundTo(a.value, b.value);
+      return { value, unit: a.unit };
+    },
+  },
+};
+
+export interface MathOptions {
+  fractionDigits: number;
+}
 
-const parser = new Parser();
-
-export function evaluateMathExpr(expr: string, fractionDigits: number): string | number {
-  const isAlreadyNumber = !isNaN(Number(expr));
-  if (isAlreadyNumber) {
-    return expr;
-  }
-
-  const { units, unitlessExpr } = parseUnits(expr);
-
-  // Remove unitless "unit" from the units set to count the number of units
-  const noUnitlessUnits = units.difference(new Set(['']));
-  if (noUnitlessUnits.size > 1) {
-    throw new MixedUnitsExpressionError({ units });
-  }
-  // Since there's no unit mixing allowed we can take the first item out of the units set as the output unit
-  const resultUnit: string | null = [...noUnitlessUnits][0];
-
-  let evalResult: number;
+export function evaluateMathExpr(expr: string, { fractionDigits }: MathOptions): string | number {
   try {
-    evalResult = parser.evaluate(unitlessExpr);
+    const parsed = run(expr, config);
+    const values = parsed.exec().map(function (result) {
+      const { value, unit } = result;
+      const fixedValue = typeof value === 'number' ? reduceToFixed(value, fractionDigits) : value;
+      return unit ? `${fixedValue}${unit}` : fixedValue;
+    });
+    return values.length > 1 ? values.join(' ') : values[0];
   } catch (exception) {
     throw new MathExprEvalError({
-      value: unitlessExpr,
+      value: expr,
       exception: exception instanceof Error ? exception : undefined,
     });
   }
-
-  const fixedNum = reduceToFixed(evalResult, fractionDigits);
-  const result = resultUnit ? `${fixedNum}${resultUnit}` : fixedNum;
-  return result;
 }
 
 export function strictCheckAndEvaluateMath(
   token: DesignToken,
-  fractionDigits = defaultFractionDigits,
+  options: Partial<MathOptions> = {},
 ): DesignToken['value'] {
+  const opts = { fractionDigits: options.fractionDigits ?? defaultFractionDigits };
+
   const expr = token.$value ?? token.value;
+  const type = token.$type ?? token.type;
 
-  if (!['string'].includes(typeof expr)) {
+  if (!['string', 'object'].includes(typeof expr)) {
     return expr;
   }
 
-  return evaluateMathExpr(expr, fractionDigits);
+  const resolveMath = (expr: DesignToken['value']) => {
+    if (typeof expr !== 'string') return expr;
+    return evaluateMathExpr(expr, opts);
+  };
+
+  return transformByTokenType(expr, type, resolveMath);
 }

src/strictCheckAndEvaluateMath.ts

@@ -1,15 +1,3 @@
-import type { Units } from './parseUnits.ts';
-
-export class MixedUnitsExpressionError extends Error {
-  units: Units;
-
-  constructor({ units }: { units: Units }) {
-    super('Mixed units found in expression');
-    this.name = 'MixedUnitsExpressionError';
-    this.units = units;
-  }
-}
-
 export class MathExprEvalError extends Error {
   value: string;
   exception?: Error;

src/utils/errors.ts

@@ -0,0 +1,51 @@
+import type { DesignToken } from 'style-dictionary/types';
+
+export function transformByTokenType(
+  expr: DesignToken['value'],
+  type: string | undefined,
+  resolveMath: (expr: number | string) => number | string,
+): DesignToken['value'] {
+  const transformProp = (val: Record<string, number | string>, prop: string) => {
+    if (typeof val === 'object' && val[prop] !== undefined) {
+      val[prop] = resolveMath(val[prop]);
+    }
+    return val;
+  };
+
+  let transformed = expr;
+  switch (type) {
+    case 'typography':
+    case 'border': {
+      transformed = transformed as Record<string, number | string>;
+      // double check that expr is still an object and not already shorthand transformed to a string
+      if (typeof expr === 'object') {
+        Object.keys(transformed).forEach(prop => {
+          transformed = transformProp(transformed, prop);
+        });
+      }
+      break;
+    }
+    case 'shadow': {
+      transformed = transformed as
+        | Record<string, number | string>
+        | Record<string, number | string>[];
+      const transformShadow = (shadowVal: Record<string, number | string>) => {
+        // double check that expr is still an object and not already shorthand transformed to a string
+        if (typeof expr === 'object') {
+          Object.keys(shadowVal).forEach(prop => {
+            shadowVal = transformProp(shadowVal, prop);
+          });
+        }
+        return shadowVal;
+      };
+      if (Array.isArray(transformed)) {
+        transformed = transformed.map(transformShadow);
+      }
+      transformed = transformShadow(transformed);
+      break;
+    }
+    default:
+      transformed = resolveMath(transformed);
+  }
+  return transformed;
+}