Merge pull request #1745 from tokens-studio/release-135_3

1.35.3

.vscode/launch.json

@@ -11,6 +11,18 @@
       "url": "http://localhost:8080",
       "webRoot": "${workspaceFolder}"
     },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Test current file",
+      "program": "${workspaceRoot}/node_modules/jest/bin/jest",
+      "args": [
+        "--config=./jest.config.ts",
+        "--json",
+        "--testPathPattern=${fileBasenameNoExtension}"
+      ],
+      "console": "integratedTerminal"
+    },
     {
       "type": "node",
       "request": "launch",
@@ -40,6 +52,20 @@
       "console": "integratedTerminal",
       "cwd": "${workspaceFolder}/token-transformer",
       "internalConsoleOptions": "neverOpen"
+    },
+    {
+      "name": "Test current file",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/jest",
+      "args": [
+        "--testPathPattern=${fileBasenameNoExtension}",
+        "--no-cache",
+        "--coverage=false"
+      ],
+      "cwd": "${workspaceFolder}",
+      "sourceMaps": true,
+      "console": "integratedTerminal"
     }
   ]
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tokens-studio-for-figma",
   "version": "1.0.0",
-  "plugin_version": "1.35.2",
+  "plugin_version": "1.35.3",
   "description": "Tokens Studio for Figma",
   "license": "MIT",
   "scripts": {
@@ -16,6 +16,7 @@
     "cy:open": "cypress open",
     "cy:run": "cypress run --headless",
     "serve": "serve dist",
+    "lint":"eslint . --quiet --fix",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
@@ -105,7 +106,7 @@
     "set-value": "^3.0.2",
     "storyblok-js-client": "^3.3.1",
     "use-debounce": "^6.0.1",
-    "zod": "^3.14.4"
+    "zod": "^3.21.4"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/app/components/TokenGroup/TokenGroupHeading.test.tsx

@@ -48,6 +48,6 @@ describe('TokenGroupHeading', () => {
     await fireEvent.contextMenu(getByText('color'));
     await fireEvent.click(getByText('Duplicate'));
 
-    expect(getByText('Duplicate Group')).toBeInTheDocument();
+    expect(getByText('Duplicate group')).toBeInTheDocument();
   });
 });

src/app/components/modals/DuplicateTokenGroupModal.tsx

@@ -35,11 +35,11 @@ export default function DuplicateTokenGroupModal({
       oldName, newName, tokenSets: selectedTokenSets, type,
     });
     onClose();
-  }, [duplicateGroup, oldName, newName, type, selectedTokenSets]);
+  }, [duplicateGroup, oldName, newName, selectedTokenSets, type, onClose]);
 
   return (
     <Modal
-      title="Duplicate Group"
+      title="Duplicate group"
       isOpen={isOpen}
       close={onClose}
       large

src/plugin/asyncMessageHandlers/applySiblingStyle.ts

@@ -19,6 +19,21 @@ export async function applySiblingStyleId(node: BaseNode, styleIds: StyleIdMap,
           }
 
           // A text layer can have mixed styles, we need to swap the segments.
+          if (node.textStyleId !== figma.mixed) {
+            const newTextStyleId = await getNewStyleId(node.textStyleId as string, styleIds, styleMap, newTheme);
+            if (newTextStyleId) {
+              node.textStyleId = newTextStyleId;
+            }
+          } else {
+            node.getStyledTextSegments(['textStyleId']).forEach(async (segment) => {
+              const newTextStyleId = await getNewStyleId(segment.textStyleId, styleIds, styleMap, newTheme);
+
+              if (newTextStyleId) {
+                node.setRangeTextStyleId(segment.start, segment.end, newTextStyleId);
+              }
+            });
+          }
+
           if (node.fillStyleId !== figma.mixed) {
             const newFillStyleId = await getNewStyleId(node.fillStyleId as string, styleIds, styleMap, newTheme);
             if (newFillStyleId) {

src/plugin/node.test.ts

@@ -1,7 +1,7 @@
 import { mockRootSetSharedPluginData } from '../../tests/__mocks__/figmaMock';
 import { StorageProviderType } from '@/constants/StorageProviderType';
 import {
-  destructureToken, mapValuesToTokens, returnValueToLookFor, saveStorageType, saveOnboardingExplainerSets, saveOnboardingExplainerInspect, saveOnboardingExplainerSyncProviders,
+  destructureToken, mapValuesToTokens, returnValueToLookFor, saveStorageType, saveOnboardingExplainerSets, saveOnboardingExplainerInspect, saveOnboardingExplainerSyncProviders, destructureTokenForAlias,
 } from './node';
 import getOnboardingExplainer from '@/utils/getOnboardingExplainer';
 import { TokenTypes } from '@/constants/TokenTypes';
@@ -134,6 +134,14 @@ const tokens = new Map([
       value: multipleShadowToken.value,
     },
   ],
+  ['global.border.general',
+    {
+      ...borderToken,
+      name: 'border.general',
+      rawValue: borderToken.value,
+      value: borderToken.value,
+    },
+  ],
 ]);
 
 const values = [
@@ -144,6 +152,7 @@ const values = [
   { composition: 'global.composition.containMultiBoxshadow' },
   { boxShadow: 'global.shadow.single' },
   { boxShadow: 'global.shadow.multiple' },
+  { border: 'global.border.general' },
 ];
 
 const mappedTokens = [
@@ -205,6 +214,20 @@ const applyProperties = [
   { borderBottom: borderToken.value, borderColor: '#ff0000' },
 ];
 
+const applyTokens = [
+  { fill: 'global.colors.blue' },
+  { opacity: 'opacity.40' },
+  {
+    opacity: 'opacity.40',
+    borderRadius: 'border-radius.7',
+  },
+  { boxShadow: 'global.shadow.single' },
+  { boxShadow: 'global.shadow.multiple' },
+  { boxShadow: 'global.shadow.single' },
+  { boxShadow: 'global.shadow.multiple' },
+  { border: 'global.border.general', borderColor: 'global.border.general' },
+];
+
 describe('mapValuesToTokens', () => {
   it('maps values to tokens', () => {
     values.forEach((value, index) => {
@@ -221,6 +244,14 @@ describe('destructureToken', () => {
   });
 });
 
+describe('destructureTokenForAliasa', () => {
+  it('return extract border color from border token', () => {
+    values.forEach((value, index) => {
+      expect(destructureTokenForAlias(tokens, value)).toEqual(applyTokens[index]);
+    });
+  });
+});
+
 describe('returnValueToLookFor', () => {
   it('returns value that were looking for', () => {
     const tokens = [

src/plugin/node.ts

@@ -24,7 +24,6 @@ import {
 import { AsyncMessageChannel } from '@/AsyncMessageChannel';
 import { AsyncMessageTypes } from '@/types/AsyncMessages';
 import { updatePluginData } from './pluginData';
-import { extractColorInBorderTokenForAlias } from './extractColorInBorderTokenForAlias';
 import { SettingsState } from '@/app/store/models/settings';
 
 // @TODO fix typings
@@ -53,7 +52,6 @@ export function mapValuesToTokens(tokens: Map<string, AnyTokenList[number]>, val
   const mappedValues = Object.entries(values).reduce<MapValuesToTokensResult>((acc, [key, tokenOnNode]) => {
     const resolvedToken = tokens.get(tokenOnNode);
     if (!resolvedToken) return acc;
-
     acc[key] = isSingleToken(resolvedToken) ? resolvedToken[returnValueToLookFor(key)] || resolvedToken.value : resolvedToken;
     return acc;
   }, {});
@@ -174,19 +172,19 @@ export function destructureToken(values: MapValuesToTokensResult): MapValuesToTo
 
 export function destructureTokenForAlias(tokens: Map<string, AnyTokenList[number]>, values: NodeTokenRefMap): MapValuesToTokensResult {
   if (values && values.border) {
-    values = extractColorInBorderTokenForAlias(tokens, values, values.border);
+    values = { ...values, ...(values.borderColor ? { } : { borderColor: values.border }) };
   }
   if (values && values.borderTop) {
-    values = extractColorInBorderTokenForAlias(tokens, values, values.borderTop);
+    values = { ...values, ...(values.borderColor ? { } : { borderColor: values.borderTop }) };
   }
   if (values && values.borderRight) {
-    values = extractColorInBorderTokenForAlias(tokens, values, values.borderRight);
+    values = { ...values, ...(values.borderColor ? { } : { borderColor: values.borderTop }) };
   }
   if (values && values.borderLeft) {
-    values = extractColorInBorderTokenForAlias(tokens, values, values.borderLeft);
+    values = { ...values, ...(values.borderColor ? { } : { borderColor: values.borderTop }) };
   }
   if (values && values.borderBottom) {
-    values = extractColorInBorderTokenForAlias(tokens, values, values.borderBottom);
+    values = { ...values, ...(values.borderColor ? { } : { borderColor: values.borderTop }) };
   }
   if (values && values.composition) {
     const resolvedToken = tokens.get(values.composition);

src/plugin/renameStylesFromPlugin.test.ts

@@ -0,0 +1,54 @@
+import { AsyncMessageChannel } from '@/AsyncMessageChannel';
+import { TokenSetStatus } from '@/constants/TokenSetStatus';
+import { AsyncMessageTypes, GetThemeInfoMessageResult } from '@/types/AsyncMessages';
+import renameStylesFromPlugin from './renameStylesFromPlugin';
+
+describe('renameStylesFromPlugin', () => {
+  figma.getLocalPaintStyles.mockReturnValue([
+    {
+      name: 'colors/old',
+      id: '456',
+      description: 'the red one',
+      paints: [{ type: 'SOLID', color: { r: 1, g: 0, b: 0 }, opacity: 1 }],
+      remove: jest.fn(),
+    },
+    {
+      name: 'colors/blue',
+      id: '567',
+      description: 'the blue one',
+      paints: [{ type: 'other', color: { r: 0, g: 0, b: 1 }, opacity: 0.5 }],
+      remove: jest.fn(),
+    },
+    {
+      name: 'colors/red',
+      id: '678',
+      description: 'the red one',
+      paints: [{ type: 'other', color: { r: 0, g: 0, b: 1 }, opacity: 0.5 }],
+      remove: jest.fn(),
+    },
+  ]);
+
+  const runAfter: (() => void)[] = [];
+
+  const mockGetThemeInfoHandler = async (): Promise<GetThemeInfoMessageResult> => ({
+    type: AsyncMessageTypes.GET_THEME_INFO,
+    activeTheme: 'light',
+    themes: [{
+      id: 'light',
+      name: 'Light',
+      selectedTokenSets: {
+        global: TokenSetStatus.ENABLED,
+      },
+      $figmaStyleReferences: {},
+    }],
+  });
+
+  runAfter.push(AsyncMessageChannel.ReactInstance.connect());
+  AsyncMessageChannel.ReactInstance.handle(AsyncMessageTypes.GET_THEME_INFO, mockGetThemeInfoHandler);
+
+  runAfter.push(AsyncMessageChannel.PluginInstance.connect());
+
+  it('should remove styles from plugin', async () => {
+    expect(await renameStylesFromPlugin('global.colors.old', 'global.colors.new', 'global')).toEqual(['456']);
+  });
+});

src/plugin/renameStylesFromPlugin.ts

@@ -19,12 +19,12 @@ export default async function renameStylesFromPlugin(
   });
 
   const themesToContainToken = themeInfo.themes.filter((theme) => Object.entries(theme.selectedTokenSets).some(([tokenSet, value]) => tokenSet === parent && value === TokenSetStatus.ENABLED)).map((filteredTheme) => filteredTheme.name);
-  const pathNames = themesToContainToken.map((theme) => convertTokenNameToPath(oldName, theme)).concat(convertTokenNameToPath(oldName));
-  const allStyleIds = allStyles.filter((style) => pathNames.some((pathName) => {
-    if (isMatchingStyle(pathName, style)) {
-      const oldPath = oldName.split('.').map((part) => part.trim()).join('/');
-      const newPath = newName.split('.').map((part) => part.trim()).join('/');
-      style.name = pathName.replace(oldPath, newPath);
+  const oldPathNames = themesToContainToken.map((theme) => convertTokenNameToPath(oldName, theme)).concat(themesToContainToken.map(() => convertTokenNameToPath(oldName, null, 1))).concat(convertTokenNameToPath(oldName));
+  const newPathNames = themesToContainToken.map((theme) => convertTokenNameToPath(newName, theme)).concat(themesToContainToken.map(() => convertTokenNameToPath(newName, null, 1))).concat(convertTokenNameToPath(newName));
+  const allStyleIds = allStyles.filter((style) => oldPathNames.some((oldPathName) => {
+    if (isMatchingStyle(oldPathName, style)) {
+      const index = oldPathNames.findIndex((item) => item === oldPathName);
+      style.name = newPathNames[index];
       return true;
     }
     return false;