fix: detect $extensions changes in sync diff so modifier edits are no…

.changeset/tough-chefs-return.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/figma-plugin": patch
+---
+
+Opacity modifier changes are now correctly detected in the sync diff and will appear as pending changes ready to commit.

packages/tokens-studio-for-figma/src/utils/findDifferentState.test.ts

@@ -75,5 +75,176 @@ describe('findDifferentState', () => {
     });
   });
 
-  // Additional test cases can be added to cover other scenarios like updated tokens, removed tokens, new/updated/removed themes, etc.
+  it('detects updated token value', () => {
+    const baseState: CompareStateType = {
+      tokens: {
+        set1: [{
+          name: 'token1', value: '#ff0000', description: '', type: TokenTypes.COLOR,
+        }],
+      },
+      themes: [],
+      metadata: null,
+    };
+    const compareState: CompareStateType = {
+      tokens: {
+        set1: [{
+          name: 'token1', value: '#00ff00', description: '', type: TokenTypes.COLOR,
+        }],
+      },
+      themes: [],
+      metadata: null,
+    };
+
+    const result = findDifferentState(baseState, compareState);
+
+    expect(result.tokens.set1).toEqual([
+      expect.objectContaining({ name: 'token1', value: '#00ff00', oldValue: '#ff0000', importType: 'UPDATE' }),
+    ]);
+  });
+
+  it('detects removed tokens', () => {
+    const baseState: CompareStateType = {
+      tokens: {
+        set1: [
+          { name: 'token1', value: 'value1', description: '', type: TokenTypes.COLOR },
+          { name: 'token2', value: 'value2', description: '', type: TokenTypes.COLOR },
+        ],
+      },
+      themes: [],
+      metadata: null,
+    };
+    const compareState: CompareStateType = {
+      tokens: {
+        set1: [{ name: 'token1', value: 'value1', description: '', type: TokenTypes.COLOR }],
+      },
+      themes: [],
+      metadata: null,
+    };
+
+    const result = findDifferentState(baseState, compareState);
+
+    expect(result.tokens.set1).toEqual([
+      expect.objectContaining({ name: 'token2', importType: 'REMOVE' }),
+    ]);
+  });
+
+  it('detects opacity modifier change in $extensions as an update', () => {
+    const baseState: CompareStateType = {
+      tokens: {
+        set1: [{
+          name: 'color.primary',
+          value: '#ff0000',
+          description: '',
+          type: TokenTypes.COLOR,
+          $extensions: {
+            'studio.tokens': {
+              modify: { type: 'alpha', value: '0.5', space: 'srgb' },
+            },
+          },
+        }],
+      },
+      themes: [],
+      metadata: null,
+    };
+    const compareState: CompareStateType = {
+      tokens: {
+        set1: [{
+          name: 'color.primary',
+          value: '#ff0000',
+          description: '',
+          type: TokenTypes.COLOR,
+          $extensions: {
+            'studio.tokens': {
+              modify: { type: 'alpha', value: '0.35', space: 'srgb' },
+            },
+          },
+        }],
+      },
+      themes: [],
+      metadata: null,
+    };
+
+    const result = findDifferentState(baseState, compareState);
+
+    expect(result.tokens.set1).toHaveLength(1);
+    expect(result.tokens.set1[0]).toMatchObject({ name: 'color.primary', importType: 'UPDATE' });
+    expect(result.tokens.set1[0].oldValue).toBeUndefined();
+  });
+
+  it('does not flag a change when $extensions modifier is identical', () => {
+    const token = {
+      name: 'color.primary',
+      value: '#ff0000',
+      description: '',
+      type: TokenTypes.COLOR,
+      $extensions: {
+        'studio.tokens': {
+          modify: { type: 'alpha', value: '0.5', space: 'srgb' },
+        },
+      },
+    };
+    const baseState: CompareStateType = { tokens: { set1: [token] }, themes: [], metadata: null };
+    const compareToken = JSON.parse(JSON.stringify(token));
+    const compareState: CompareStateType = { tokens: { set1: [compareToken] }, themes: [], metadata: null };
+
+    const result = findDifferentState(baseState, compareState);
+
+    expect(result.tokens).toEqual({});
+  });
+
+  it('detects when opacity modifier is added to a token', () => {
+    const baseState: CompareStateType = {
+      tokens: {
+        set1: [{ name: 'color.primary', value: '#ff0000', description: '', type: TokenTypes.COLOR }],
+      },
+      themes: [],
+      metadata: null,
+    };
+    const compareState: CompareStateType = {
+      tokens: {
+        set1: [{
+          name: 'color.primary',
+          value: '#ff0000',
+          description: '',
+          type: TokenTypes.COLOR,
+          $extensions: { 'studio.tokens': { modify: { type: 'alpha', value: '0.5', space: 'srgb' } } },
+        }],
+      },
+      themes: [],
+      metadata: null,
+    };
+
+    const result = findDifferentState(baseState, compareState);
+
+    expect(result.tokens.set1).toHaveLength(1);
+    expect(result.tokens.set1[0]).toMatchObject({ name: 'color.primary', importType: 'UPDATE' });
+  });
+
+  it('detects when opacity modifier is removed from a token', () => {
+    const baseState: CompareStateType = {
+      tokens: {
+        set1: [{
+          name: 'color.primary',
+          value: '#ff0000',
+          description: '',
+          type: TokenTypes.COLOR,
+          $extensions: { 'studio.tokens': { modify: { type: 'alpha', value: '0.5', space: 'srgb' } } },
+        }],
+      },
+      themes: [],
+      metadata: null,
+    };
+    const compareState: CompareStateType = {
+      tokens: {
+        set1: [{ name: 'color.primary', value: '#ff0000', description: '', type: TokenTypes.COLOR }],
+      },
+      themes: [],
+      metadata: null,
+    };
+
+    const result = findDifferentState(baseState, compareState);
+
+    expect(result.tokens.set1).toHaveLength(1);
+    expect(result.tokens.set1[0]).toMatchObject({ name: 'color.primary', importType: 'UPDATE' });
+  });
 });

packages/tokens-studio-for-figma/src/utils/findDifferentState.ts

@@ -23,9 +23,11 @@ export function findDifferentState(baseState: CompareStateType, compareState: Co
     values.forEach((token) => {
       const oldValue = baseState.tokens[tokenSet]?.find((t) => t.name === token.name);
       if (oldValue) {
-        if (!isEqual(oldValue.value, token.value)) {
+        const valueChanged = !isEqual(oldValue.value, token.value);
+        const extensionsChanged = !isEqual(oldValue.$extensions, token.$extensions);
+        if (valueChanged || extensionsChanged) {
           const updatedToken: ImportToken = { ...token };
-          updatedToken.oldValue = oldValue.value;
+          if (valueChanged) updatedToken.oldValue = oldValue.value;
           updatedToken.importType = 'UPDATE';
           updatedTokens.push(updatedToken);
         }