feat: add new setting for 'resolveSameCollectionOrModeReference'

lukasoppermann · Oct 25, 2024 · 2ee3972 · 2ee3972
1 parent 96d1f58
commit 2ee3972
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -358,6 +358,10 @@ By default, the mode names are not included in both the token names and the toke
 - If you wish to do include the mode name in both the token name and value, you can activate both of the checkboxes.
 - If you wish to do not include the mode name in both the token name and value, you can deactivate both of the checkboxes.
 
+### Resolve same collection or same mode variables references (EXPERIMENTAL)
+
+This feature enables the resolution of variable references from within the same collection or mode. When enabled, the default value returned by the Figma API is updated to include all necessary information in the reference path, allowing these references to be properly resolved.
+
 ### Aliases (Standard format only)
 
 The standard token format allows you to define an alias/reference for a color tokens via the description field.

diff --git a/dist/plugin.js b/dist/plugin.js
diff --git a/dist/ui.html b/dist/ui.html
diff --git a/dist/ui.js b/dist/ui.js
diff --git a/src/config/defaultSettings.ts b/src/config/defaultSettings.ts
@@ -22,6 +22,7 @@ export const defaultSettings: Settings = {
   prefixInName: true,
   modeInTokenValue: false,
   modeInTokenName: false,
+  resolveSameCollectionOrModeReference: false,
   prefix: {
     color: 'color',
     gradient: 'gradient',

diff --git a/src/ui/components/GeneralSettings.tsx b/src/ui/components/GeneralSettings.tsx
@@ -1,23 +1,27 @@
-import * as React from 'react'
-import { Button } from '@components/Button'
-import { Checkbox } from '@components/Checkbox'
-import { Input } from '@components/Input'
-import { Select } from '@components/Select'
-import { Label } from '@components/Label'
-import { Title } from '@components/Title'
-import { Text } from '@components/Text'
-import { CancelButton } from '@components/CancelButton'
-import { useContext, useState } from 'react'
-import { FigmaContext, SettingsContext } from '@ui/context'
-import { css } from '@emotion/css'
-import { commands } from '@config/commands'
-import config from '@config/config'
-import { Footer } from '@components/Footer'
-import { nameConversionType, Settings, tokenFormatType } from '@typings/settings'
-import { Row } from '@components/Row'
-import { Info } from '@components/Info'
-import { Separator } from './Separator'
-import { WebLink } from './WebLink'
+import * as React from "react";
+import { Button } from "@components/Button";
+import { Checkbox } from "@components/Checkbox";
+import { Input } from "@components/Input";
+import { Select } from "@components/Select";
+import { Label } from "@components/Label";
+import { Title } from "@components/Title";
+import { Text } from "@components/Text";
+import { CancelButton } from "@components/CancelButton";
+import { useContext, useState } from "react";
+import { FigmaContext, SettingsContext } from "@ui/context";
+import { css } from "@emotion/css";
+import { commands } from "@config/commands";
+import config from "@config/config";
+import { Footer } from "@components/Footer";
+import {
+  nameConversionType,
+  Settings,
+  tokenFormatType,
+} from "@typings/settings";
+import { Row } from "@components/Row";
+import { Info } from "@components/Info";
+import { Separator } from "./Separator";
+import { WebLink } from "./WebLink";
 
 const style = css`
   display: flex;
@@ -29,44 +33,51 @@ const style = css`
     display: grid;
     grid-template-columns: repeat(2, 1fr);
   }
-`
+`;
 
 const labelStyle = css`
   width: 85px;
-`
+`;
 
 const textStyle = css`
   padding: 0 var(--size-xxxsmall) 0 var(--size-xxsmall);
   color: var(--figma-color-text-secondary);
   margin-top: 0;
-`
+`;
 
-const isStyle = (key: string): boolean => ['color', 'gradient', 'grid', 'effect', 'font'].includes(key)
+const isStyle = (key: string): boolean =>
+  ["color", "gradient", "grid", "effect", "font"].includes(key);
 
 export const GeneralSettings = () => {
-  const [isStandard, setStandard] = useState(false)
-  const { figmaUIApi, figmaMetaData } = useContext(FigmaContext)
-  const { settings, updateSettings } = useContext<{settings: Settings, updateSettings: any}>(SettingsContext)
+  const [isStandard, setStandard] = useState(false);
+  const { figmaUIApi, figmaMetaData } = useContext(FigmaContext);
+  const { settings, updateSettings } = useContext<{
+    settings: Settings;
+    updateSettings: any;
+  }>(SettingsContext);
 
   const handleFormSubmit = (event) => {
-    event.preventDefault() // Prevent form submit triggering navigation
-    const settingsForm = event.target
+    event.preventDefault(); // Prevent form submit triggering navigation
+    const settingsForm = event.target;
     if (settingsForm.checkValidity() === true) {
-      const { accessToken, ...pluginSettings } = settings
+      const { accessToken, ...pluginSettings } = settings;
       // save date to local storage
-      figmaUIApi.postMessage({
-        pluginMessage: {
-          command: commands.saveSettings,
-          payload: {
-            closePlugin: true,
-            settings: pluginSettings,
-            accessToken: accessToken
-          }
-        }
-      // @ts-ignore
-      }, '*')
+      figmaUIApi.postMessage(
+        {
+          pluginMessage: {
+            command: commands.saveSettings,
+            payload: {
+              closePlugin: true,
+              settings: pluginSettings,
+              accessToken: accessToken,
+            },
+          },
+          // @ts-ignore
+        },
+        "*"
+      );
     }
-  }
+  };
 
   return (
     <form className={style} onSubmit={handleFormSubmit}>
@@ -224,9 +235,9 @@ export const GeneralSettings = () => {
       </div>
       <Separator />
       <div>
-          <Title size="small" weight="bold">
-            Reference mode from variables
-          </Title>
+        <Title size="small" weight="bold">
+          Reference mode from variables
+        </Title>
         <div className="grid-2-col">
           <div>
             <Checkbox
@@ -240,7 +251,8 @@ export const GeneralSettings = () => {
               }
               info={{
                 width: 240,
-                label:"If enabled, the exported json will include the mode of the variables in the token name path, if more than 1 mode exists"
+                label:
+                  "If enabled, the exported json will include the mode of the variables in the token name path, if more than 1 mode exists",
               }}
             />
           </div>
@@ -257,13 +269,41 @@ export const GeneralSettings = () => {
               info={{
                 width: 220,
                 position: "left",
-                label:"If enabled, the exported json will include the mode of the variables in the token value"
+                label:
+                  "If enabled, the exported json will include the mode of the variables in the token value",
               }}
             />
           </div>
         </div>
       </div>
       <Separator />
+      <Title size="small" weight="bold">
+        Resolve same collection or same mode variables references (experimental)
+      </Title>
+      <Text className={textStyle} size="small">
+        Resolves the variable reference made to other variables in the same collection or in the same mode.
+      </Text>
+      <Text className={textStyle} size="small">
+        This feature is EXPERIMENTAL and may break in setups with a large number of variables definitions.
+      </Text>
+      <Row>
+        <Checkbox
+          label="Resolve same collection or same mode variable references"
+          type="switch"
+          checked={settings.resolveSameCollectionOrModeReference}
+          onChange={(value) =>
+            updateSettings((draft) => {
+              draft.resolveSameCollectionOrModeReference = value;
+            })
+          }
+          info={{
+            width: 240,
+            label:
+              "If enabled, it resolves same collection or same mode variable reference value.",
+          }}
+        />
+      </Row>
+      <Separator />
       <Title size="small" weight="bold">
         Token prefixes{" "}
         <Info width={150} label="Use commas to separate multiple prefixed" />
@@ -326,4 +366,4 @@ export const GeneralSettings = () => {
       </Footer>
     </form>
   );
-}
+};
diff --git a/src/utilities/getVariables.ts b/src/utilities/getVariables.ts
@@ -110,7 +110,7 @@ export const getVariables = (figma: PluginAPI, settings: Settings) => {
       const { variableCollectionId } = variable
       const { name: collection, modes } = collections[variableCollectionId]
 
-      if (modes.length > 1) {
+      if (settings.resolveSameCollectionOrModeReference) {
         variable = detectVariableReferencesInCollection(
           collections[variableCollectionId],
           variable

diff --git a/tests/unit/settings.test.ts b/tests/unit/settings.test.ts
@@ -37,6 +37,7 @@ const baseSettings = {
   prefixInName: true,
   modeInTokenValue: true,
   modeInTokenName: true,
+  resolveSameCollectionOrModeReference: false,
   prefix: {
     color: 'color',
     gradient: 'gradient',

diff --git a/types/settings.ts b/types/settings.ts
@@ -28,6 +28,7 @@ export type Settings = {
   prefixInName: boolean,
   modeInTokenValue: boolean,
   modeInTokenName: boolean,
+  resolveSameCollectionOrModeReference: boolean,
   prefix: {
     color: string,
     gradient: string,