From 68faa9e9d93c88e26242f36e13b5173d9b2607a4 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Fri, 12 Jul 2024 00:54:20 -0400
Subject: [PATCH] Work around some math expressions lacking calc()

---
 assets/web/css/cpd-common-base.css | 38 +++++++++++++++---------------
 src/configs/getWebConfig.ts        |  8 ++++++-
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/assets/web/css/cpd-common-base.css b/assets/web/css/cpd-common-base.css
index 8e196b86..1223ecc7 100644
--- a/assets/web/css/cpd-common-base.css
+++ b/assets/web/css/cpd-common-base.css
@@ -58,24 +58,24 @@
   --cpd-font-body-xs-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-body-xs)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
   --cpd-font-body-xs-medium: var(--cpd-font-weight-medium) var(--cpd-font-size-body-xs)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
   --cpd-font-body-xs-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-body-xs)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
-  --cpd-space-64x: var(--cpd-space-scale) * 64;
-  --cpd-space-48x: var(--cpd-space-scale) * 48;
-  --cpd-space-40x: var(--cpd-space-scale) * 40;
-  --cpd-space-32x: var(--cpd-space-scale) * 32;
-  --cpd-space-28x: var(--cpd-space-scale) * 28;
-  --cpd-space-24x: var(--cpd-space-scale) * 24;
-  --cpd-space-20x: var(--cpd-space-scale) * 20;
-  --cpd-space-15x: var(--cpd-space-scale) * 15;
-  --cpd-space-14x: var(--cpd-space-scale) * 14;
-  --cpd-space-13x: var(--cpd-space-scale) * 13;
-  --cpd-space-9x: var(--cpd-space-scale) * 9;
-  --cpd-space-8x: var(--cpd-space-scale) * 8;
-  --cpd-space-7x: var(--cpd-space-scale) * 7;
-  --cpd-space-5x: var(--cpd-space-scale) * 5;
-  --cpd-space-4x: var(--cpd-space-scale) * 4;
-  --cpd-space-3x: var(--cpd-space-scale) * 3;
-  --cpd-space-2x: var(--cpd-space-scale) * 2;
-  --cpd-space-1-5x: var(--cpd-space-scale) * 1.5;
+  --cpd-space-64x: 256px;
+  --cpd-space-48x: 192px;
+  --cpd-space-40x: 160px;
+  --cpd-space-32x: 128px;
+  --cpd-space-28x: 112px;
+  --cpd-space-24x: 96px;
+  --cpd-space-20x: 80px;
+  --cpd-space-15x: 60px;
+  --cpd-space-14x: 56px;
+  --cpd-space-13x: 52px;
+  --cpd-space-9x: 36px;
+  --cpd-space-8x: 32px;
+  --cpd-space-7x: 28px;
+  --cpd-space-5x: 20px;
+  --cpd-space-4x: 16px;
+  --cpd-space-3x: 12px;
+  --cpd-space-2x: 8px;
+  --cpd-space-1-5x: 6px;
   --cpd-space-1x: var(--cpd-space-scale);
-  --cpd-space-0-5x: var(--cpd-space-scale) * 0.5;
+  --cpd-space-0-5x: 2px;
 }
diff --git a/src/configs/getWebConfig.ts b/src/configs/getWebConfig.ts
index 4105d933..43964c64 100644
--- a/src/configs/getWebConfig.ts
+++ b/src/configs/getWebConfig.ts
@@ -90,7 +90,13 @@ function getFilesFormat(theme: Theme, target: "css" | "js" | "ts"): File[] {
       isCoreToken.filter(t) === (tier === "base"),
     options: {
       showFileHeader: false,
-      outputReferences: true,
+      // Workaround for https://github.com/tokens-studio/sd-transforms/issues/203.
+      // ts/resolveMath currently has no way to insert calc() around
+      // var(...) * num expressions, so we instead force it to avoid outputting
+      // the var() reference and resolve the expression to a static value.
+      outputReferences: (token) =>
+        typeof token.original.value !== "string" ||
+        !token.original.value.includes("{space.scale} * "),
       basePxFontSize,
       selector: `:root, [class*="cpd-theme-"]`,
     },