fix: check color transform value string (#317)

tokens-studio · Sep 13, 2024 · 61af02f · 61af02f
1 parent 8b70914
commit 61af02f
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/.changeset/nice-scissors-think.md b/.changeset/nice-scissors-think.md
@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': patch
+---
+
+Check for color transforms that the value is of type string, since other color object types could occur from previously ran transforms.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/css/transformHEXRGBa.ts b/src/css/transformHEXRGBa.ts
@@ -24,8 +24,8 @@ export function transformHEXRGBaForCSS(token: DesignToken): DesignToken['value']
     });
   };
 
-  const transformProp = (val: Record<string, string>, prop: string) => {
-    if (val[prop] !== undefined) {
+  const transformProp = (val: Record<string, unknown>, prop: string) => {
+    if (val[prop] !== undefined && typeof val[prop] === 'string') {
       val[prop] = transformHEXRGBa(val[prop]);
     }
     return val;

diff --git a/src/register.ts b/src/register.ts
@@ -167,6 +167,7 @@ export async function register(sd: typeof StyleDictionary, transformOpts?: Trans
     type: 'value',
     transitive: true,
     filter: token =>
+      typeof (token.$value ?? token.value) === 'string' &&
       (token.$type ?? token.type) === 'color' &&
       token.$extensions &&
       token.$extensions['studio.tokens']?.modify,