1845-dont-overwrite--key (#1949)

https://github.com/tokens-studio/figma-plugin/assets/25951419/fc21bf51-d437-4d09-91dd-77adc20d5440 --------- Co-authored-by: Jan Six <six.jan@gmail.com> Co-authored-by: Sergii Golyshev <cyber.tchief@gmail.com> Co-authored-by: Jan Six <six7@github.com> Co-authored-by: SorsOps <80043879+SorsOps@users.noreply.github.com>
tokens-studio · Jun 14, 2023 · 6ebdc50 · 6ebdc50
1 parent 34642ef
commit 6ebdc50
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tokens-studio-for-figma",
   "version": "1.0.0",
-  "plugin_version": "1.36.4",
+  "plugin_version": "1.36.5",
   "description": "Tokens Studio for Figma",
   "license": "MIT",
   "scripts": {

diff --git a/script/release.sh b/script/release.sh
@@ -1,4 +1,4 @@
-VERSION=figma-tokens@1.36.4
+VERSION=figma-tokens@1.36.5
 sentry-cli releases -p figma-tokens files "$VERSION" upload-sourcemaps --ext ts --ext tsx --ext map --ext js --ignore-file .sentryignore .
 sentry-cli releases set-commits "$VERSION" --auto
 sentry-cli releases finalize "$VERSION"
diff --git a/src/app/components/EditTokenForm.tsx b/src/app/components/EditTokenForm.tsx
@@ -230,18 +230,24 @@ function EditTokenForm({ resolvedTokens }: Props) {
   }, [internalEditToken]);
 
   const removeColorModify = React.useCallback(() => {
-    const newValue = internalEditToken;
-    delete newValue?.$extensions;
+    const newValue = { ...internalEditToken.$extensions?.['studio.tokens'] };
+    delete newValue?.modify;
     setInternalEditToken({
-      ...newValue,
+      ...internalEditToken,
+      $extensions: {
+        ...internalEditToken.$extensions,
+        'studio.tokens': Object.keys(newValue).length > 0 ? newValue : undefined,
+      },
     });
   }, [internalEditToken]);
 
   const handleColorModifyChange = React.useCallback((newModify: ColorModifier) => {
     setInternalEditToken({
       ...internalEditToken,
       $extensions: {
+        ...internalEditToken.$extensions,
         'studio.tokens': {
+          ...internalEditToken.$extensions?.['studio.tokens'],
           modify: newModify,
         },
       },

diff --git a/src/app/store/useManageTokens.tsx b/src/app/store/useManageTokens.tsx
@@ -22,7 +22,13 @@ type EditSingleTokenData = {
   description?: string;
   oldName?: string;
   shouldUpdateDocument?: boolean;
-  $extensions?: { 'studio.tokens': { modify: ColorModifier } }
+  $extensions?: {
+    [key: string]: any;
+    'studio.tokens'?: {
+      [key: string]: any;
+      modify?: ColorModifier
+    }
+  }
 };
 
 type CreateSingleTokenData = {
@@ -32,7 +38,12 @@ type CreateSingleTokenData = {
   value: SingleToken['value'];
   description?: string;
   shouldUpdateDocument?: boolean;
-  $extensions?: { 'studio.tokens': { modify: ColorModifier } }
+  $extensions?: {
+    [key: string]: any;
+    'studio.tokens'?: {
+      modify?: ColorModifier
+    }
+  }
 };
 
 type Choice = { key: string; label: string; enabled?: boolean, unique?: boolean };

diff --git a/src/plugin/node.ts b/src/plugin/node.ts
@@ -56,8 +56,10 @@ export function mapValuesToTokens(tokens: Map<string, AnyTokenList[number]>, val
     if (!resolvedToken) return acc;
     if (isSingleToken(resolvedToken)) {
       if (returnValueToLookFor(key) === 'rawValue' && resolvedToken.$extensions) {
-        const modifier = resolvedToken.$extensions['studio.tokens'].modify;
-        acc[key] = modifier.type === ColorModifierTypes.MIX ? `${resolvedToken.rawValue} / mix(${modifier.color}, ${modifier.value}) / ${modifier.space}` : `${resolvedToken.rawValue} / ${modifier.type}(${modifier.value}) / ${modifier.space}`;
+        const modifier = resolvedToken.$extensions?.['studio.tokens']?.modify;
+        if (modifier) {
+          acc[key] = modifier.type === ColorModifierTypes.MIX ? `${resolvedToken.rawValue} / mix(${modifier.color}, ${modifier.value}) / ${modifier.space}` : `${resolvedToken.rawValue} / ${modifier.type}(${modifier.value}) / ${modifier.space}`;
+        }
       } else {
         acc[key] = resolvedToken[returnValueToLookFor(key)] || resolvedToken.value;
       }

diff --git a/src/types/payloads/DuplicateTokenPayload.ts b/src/types/payloads/DuplicateTokenPayload.ts
@@ -11,5 +11,11 @@ export type DuplicateTokenPayload = {
   oldName?: string;
   shouldUpdate?: boolean;
   tokenSets: string[];
-  $extensions?: { 'studio.tokens': { modify: ColorModifier } }
+  $extensions?: {
+    [key: string]: any;
+    'studio.tokens'?: {
+      [key: string]: any;
+      modify?: ColorModifier
+    }
+  }
 };
diff --git a/src/types/tokens/SingleGenericToken.ts b/src/types/tokens/SingleGenericToken.ts
@@ -10,7 +10,13 @@ export type SingleGenericToken<T extends TokenTypes, V = string, Named extends b
   oldValue?: V;
   internal__Parent?: string;
   inheritTypeLevel?: number;
-  $extensions?: { 'studio.tokens': { modify: ColorModifier } }
+  $extensions?: {
+    [key: string]: any;
+    'studio.tokens'?: {
+      [key: string]: any;
+      modify?: ColorModifier
+    }
+  }
 } & (Named extends true ? {
   name: string;
 } : {

diff --git a/src/utils/updateTokenPayloadToSingleToken.ts b/src/utils/updateTokenPayloadToSingleToken.ts
@@ -13,9 +13,13 @@ export function updateTokenPayloadToSingleToken(
     } : {}),
     ...(payload.$extensions ? {
       $extensions: {
-        'studio.tokens': {
-          modify: payload.$extensions['studio.tokens']?.modify,
-        },
+        ...payload.$extensions,
+        ...(payload.$extensions?.['studio.tokens'] ? {
+          'studio.tokens': {
+            ...payload.$extensions['studio.tokens'],
+            modify: payload.$extensions['studio.tokens']?.modify,
+          },
+        } : {}),
       },
     } : {}),
   } as SingleToken;