@sit-onyx/figma-utils 1.0.0-alpha.0 → 1.0.0-alpha.2

package/README.md

@@ -1,6 +1,6 @@
 # @sit-onyx/figma-utils
 
-Utility functions and CLI for importing data from the Figma API into CSS/SCSS variables.
+Utility functions and CLI for importing data from the Figma API into different formats (e.g. CSS, SCSS etc.).
 
 ## Use as CLI
 

package/dist/commands/import-variables.d.ts

@@ -1,2 +1,15 @@
 import { Command } from "commander";
+export type ImportCommandOptions = {
+    fileKey: string;
+    token: string;
+    filename: string;
+    format: string[];
+    dir?: string;
+    modes?: string[];
+    selector: string;
+};
 export declare const importCommand: Command;
+/**
+ * Action to run when executing the import action. Only intended to be called manually for testing.
+ */
+export declare function importCommandAction(options: ImportCommandOptions): Promise<void>;

package/dist/commands/import-variables.js

@@ -1,53 +1,63 @@
 import { Command } from "commander";
 import fs from "node:fs";
 import path from "node:path";
-import { DEFAULT_MODE_NAME, fetchFigmaVariables, generateAsCSS, generateAsSCSS, parseFigmaVariables, } from "../index.js";
+import { DEFAULT_MODE_NAME, fetchFigmaVariables, generateAsCSS, generateAsJSON, generateAsSCSS, parseFigmaVariables, } from "../index.js";
 export const importCommand = new Command("import-variables")
     .description("CLI tool to import Figma variables into CSS, SCSS etc. variables.")
     .requiredOption("-k, --file-key <string>", "Figma file key (required)")
     .requiredOption("-t, --token <string>", "Figma access token with scope `file_variables:read` (required)")
-    .option("-f, --format <string>", "Output format. Supported are: CSS, SCSS", "CSS")
+    .option("-f, --format <strings...>", "Output formats. Supported are: CSS, SCSS, JSON", ["CSS"])
     .option("-n, --filename <string>", "Base name of the generated variables file", "variables")
     .option("-d, --dir <string>", "Working directory to use. Defaults to current working directory of the script.")
     .option("-m, --modes <strings...>", "Can be used to only export specific Figma modes. If unset, all modes will be exported as a separate file.")
     .option("-s, --selector <string>", 'CSS selector to use for the CSS format. The mode name will be added to the selector if it is set to something other than ":root", e.g. for the mode named "dark", passing the selector "html" will result in "html.dark"', ":root")
-    .action(async (options) => {
+    .action(importCommandAction);
+/**
+ * Action to run when executing the import action. Only intended to be called manually for testing.
+ */
+export async function importCommandAction(options) {
     const generators = {
-        CSS: (data) => generateAsCSS(data, options.selector),
+        CSS: (data) => generateAsCSS(data, { selector: options.selector }),
         SCSS: generateAsSCSS,
+        JSON: generateAsJSON,
     };
-    if (!(options.format in generators)) {
-        throw new Error(`Unknown format: ${options.format}. Supported: ${Object.keys(generators).join(", ")}`);
-    }
+    options.format.forEach((format) => {
+        if (!(format in generators)) {
+            throw new Error(`Unknown format "${format}". Supported: ${Object.keys(generators).join(", ")}`);
+        }
+    });
     console.log("Fetching variables from Figma API...");
     const data = await fetchFigmaVariables(options.fileKey, options.token);
     console.log("Parsing Figma variables...");
     const parsedVariables = parseFigmaVariables(data);
     if (options.modes?.length) {
         // verify that all modes are found
-        for (const mode of options.modes) {
+        options.modes.forEach((mode) => {
             if (parsedVariables.find((i) => i.modeName === mode))
-                continue;
+                return;
             const availableModes = parsedVariables
                 .map((i) => i.modeName ?? DEFAULT_MODE_NAME)
                 .map((mode) => `"${mode}"`);
             throw new Error(`Mode "${mode}" not found. Available modes: ${Object.values(availableModes).join(", ")}`);
-        }
+        });
     }
     const outputDirectory = options.dir ?? process.cwd();
     const filename = options.filename ?? "variables";
     console.log(`Generating ${options.format} variables...`);
-    parsedVariables.forEach((data) => {
-        // if the user passed specific modes to be exported, we will only generate those
-        // otherwise all modes will be exported.
-        // the default mode (undefined data.modeName) is always generated because its mode name can
-        // not be specified by the designer in Figma
-        const isModeIncluded = !options.modes?.length || !data.modeName || options.modes.includes(data.modeName);
-        if (!isModeIncluded)
-            return;
-        const baseName = data.modeName ? `${filename}-${data.modeName}` : filename;
-        const fullPath = path.join(outputDirectory, `${baseName}.${options.format.toLowerCase()}`);
-        fs.writeFileSync(fullPath, generators[options.format](data));
+    options.format.forEach((format) => {
+        console.log(`Generating ${format} variables...`);
+        parsedVariables.forEach((data) => {
+            // if the user passed specific modes to be exported, we will only generate those
+            // otherwise all modes will be exported.
+            // the default mode (undefined data.modeName) is always generated because its mode name can
+            // not be specified by the designer in Figma
+            const isModeIncluded = !options.modes?.length || !data.modeName || options.modes.includes(data.modeName);
+            if (!isModeIncluded)
+                return;
+            const baseName = data.modeName ? `${filename}-${data.modeName}` : filename;
+            const fullPath = path.join(outputDirectory, `${baseName}.${format.toLowerCase()}`);
+            fs.writeFileSync(fullPath, generators[format](data));
+        });
     });
     console.log("Done.");
-});
+}

package/dist/commands/import-variables.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/commands/import-variables.spec.js

@@ -0,0 +1,49 @@
+import fs from "node:fs";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import * as functions from "../index.js";
+import { importCommandAction } from "./import-variables.js";
+vi.mock("node:fs");
+vi.mock("../index.js");
+describe("import-variables.ts", () => {
+    const mockOptions = {
+        fileKey: "test-file-key",
+        filename: "test-file-name",
+        format: ["CSS"],
+        token: "test-token",
+        selector: ":root",
+    };
+    beforeEach(() => {
+        vi.clearAllMocks();
+        vi.spyOn(console, "log").mockImplementation(() => ({}));
+        vi.spyOn(process, "cwd").mockReturnValue("test-cwd");
+    });
+    test("should throw error for unknown formats", () => {
+        const promise = () => importCommandAction({ ...mockOptions, format: ["does-not-exist"] });
+        expect(promise).rejects.toThrowError('Unknown format "does-not-exist". Supported: CSS, SCSS, JSON');
+    });
+    test("should throw error for unknown modes", () => {
+        vi.spyOn(functions, "parseFigmaVariables").mockReturnValue([
+            { modeName: "test-mode-1", variables: {} },
+        ]);
+        const promise = () => importCommandAction({
+            ...mockOptions,
+            modes: ["test-mode-1", "does-not-exist"],
+        });
+        expect(promise).rejects.toThrowError('Mode "does-not-exist" not found. Available modes: "test-mode-1"');
+    });
+    test("should generate variables", async () => {
+        vi.spyOn(functions, "parseFigmaVariables").mockReturnValue([
+            { modeName: "test-mode-1", variables: {} },
+            { modeName: "test-mode-2", variables: {} },
+            { modeName: "test-mode-3", variables: {} },
+        ]);
+        vi.spyOn(functions, "generateAsCSS").mockReturnValue("mock-css-file-content");
+        await importCommandAction({ ...mockOptions, modes: ["test-mode-1", "test-mode-2"] });
+        expect(functions.fetchFigmaVariables).toHaveBeenCalledOnce();
+        expect(functions.parseFigmaVariables).toHaveBeenCalledOnce();
+        expect(functions.generateAsCSS).toHaveBeenCalledTimes(2);
+        expect(fs.writeFileSync).toHaveBeenCalledTimes(2);
+        expect(fs.writeFileSync).toHaveBeenCalledWith("test-cwd/test-file-name-test-mode-1.css", "mock-css-file-content");
+        expect(fs.writeFileSync).toHaveBeenCalledWith("test-cwd/test-file-name-test-mode-2.css", "mock-css-file-content");
+    });
+});

package/dist/utils/generate.d.ts

@@ -1,19 +1,64 @@
 import { ParsedVariable } from "../types/figma.js";
+export type BaseGenerateOptions = {
+    /**
+     * If `true`, alias variable values will be resolved to their actual value instead
+     * of using a reference by their name.
+     *
+     * @default false
+     */
+    resolveAlias?: boolean;
+};
+export type GenerateAsCSSOptions = BaseGenerateOptions & {
+    /**
+     * Selector to use for the CSS format. The mode name will be added to the selector
+     * if it is set to something other than ":root"
+     *
+     * @default ":root"
+     * @example
+     * for the mode named "dark", passing the selector "html" will result in "html.dark"
+     */
+    selector?: string;
+};
 /**
  * Generates the given parsed Figma variables into CSS variables.
  *
  * @param data Parsed Figma variables
- * @param selector CSS selector to use for the CSS format. The mode name will be added to the selector
- * if it is set to something other than ":root", e.g. for the mode named "dark", passing the selector "html" will result in "html.dark"
+ * @param options Optional options to fine-tune the generated output
  * @returns File content of the .css file
  */
-export declare const generateAsCSS: (data: ParsedVariable, selector?: string) => string;
+export declare const generateAsCSS: (data: ParsedVariable, options?: GenerateAsCSSOptions) => string;
 /**
  * Generates the given parsed Figma variables into SCSS variables.
  *
  * @returns File content of the .scss file
  */
-export declare const generateAsSCSS: (data: ParsedVariable) => string;
+export declare const generateAsSCSS: (data: ParsedVariable, options?: BaseGenerateOptions) => string;
+/**
+ * Generates the given parsed Figma variables as JSON.
+ * Alias variables will be resolved to their actual value.
+ *
+ * @returns File content of the .json file
+ */
+export declare const generateAsJSON: (data: ParsedVariable) => string;
+/**
+ * Recursively resolves the value for the given variable name.
+ * So if the value is an alias, the output will be the actual alias value instead of a reference by name.
+ * If the value is not an alias, its value will be directly returned.
+ *
+ * @param name Variable name to resolve
+ * @param allVariables All available variables
+ * @example
+ * ```ts
+ * const allVariables = {
+ *   "variable-a": 42,
+ *   "variable-b": "{variable-a}"
+ * }
+ *
+ * const resolvedValue = resolveValue("variable-b", allVariables);
+ * // const resolvedValue = 42;
+ * ```
+ */
+export declare const resolveValue: (name: string, allVariables: ParsedVariable["variables"]) => string;
 /**
  * Generates the timestamp comment that is added to the start of every generated file.
  */
@@ -23,9 +68,9 @@ export declare const generateTimestampComment: (modeName?: string) => string;
  * Alias values are enclosed by curly braces.
  *
  * @example "{your-variable-name}"
- * @returns `isAlias` whether the variable is an alias and `variableName` the raw variable name without curly braces.
+ * @returns `isAlias` whether the variable is an alias and `aliasName` the raw variable name without curly braces.
  */
 export declare const isAliasVariable: (variableValue: string) => {
     isAlias: RegExpExecArray | null;
-    variableName: string;
+    aliasName: string;
 };

package/dist/utils/generate.js

@@ -2,17 +2,12 @@
  * Generates the given parsed Figma variables into CSS variables.
  *
  * @param data Parsed Figma variables
- * @param selector CSS selector to use for the CSS format. The mode name will be added to the selector
- * if it is set to something other than ":root", e.g. for the mode named "dark", passing the selector "html" will result in "html.dark"
+ * @param options Optional options to fine-tune the generated output
  * @returns File content of the .css file
  */
-export const generateAsCSS = (data, selector = ":root") => {
-    const variableContent = Object.entries(data.variables).map(([name, value]) => {
-        const { isAlias, variableName } = isAliasVariable(value);
-        const variableValue = isAlias ? `var(--${variableName})` : value;
-        return `  --${name}: ${variableValue};`;
-    });
-    let fullSelector = selector.trim();
+export const generateAsCSS = (data, options) => {
+    const variableContent = getCssOrScssVariableContent(data.variables, (name) => `  --${name}`, (name) => `var(--${name})`, options);
+    let fullSelector = options?.selector?.trim() || ":root";
     if (fullSelector !== ":root")
         fullSelector += `.${data.modeName}`;
     return `${generateTimestampComment(data.modeName)}
@@ -23,14 +18,49 @@ ${fullSelector} {\n${variableContent.join("\n")}\n}\n`;
  *
  * @returns File content of the .scss file
  */
-export const generateAsSCSS = (data) => {
-    const variableContent = Object.entries(data.variables).map(([name, value]) => {
-        const { isAlias, variableName } = isAliasVariable(value);
-        const variableValue = isAlias ? `$${variableName}` : value;
-        return `$${name}: ${variableValue};`;
-    });
+export const generateAsSCSS = (data, options) => {
+    const variableContent = getCssOrScssVariableContent(data.variables, (name) => `$${name}`, (name) => `$${name}`, options);
     return `${generateTimestampComment(data.modeName)}\n${variableContent.join("\n")}\n`;
 };
+/**
+ * Generates the given parsed Figma variables as JSON.
+ * Alias variables will be resolved to their actual value.
+ *
+ * @returns File content of the .json file
+ */
+export const generateAsJSON = (data) => {
+    const variables = structuredClone(data.variables);
+    // recursively resolve aliases to plain values since keys can not be referenced in a .json file
+    // like we could e.g. in a .css file
+    Object.keys(variables).forEach((name) => {
+        variables[name] = resolveValue(name, variables);
+    });
+    return `${JSON.stringify(variables, null, 2)}\n`;
+};
+/**
+ * Recursively resolves the value for the given variable name.
+ * So if the value is an alias, the output will be the actual alias value instead of a reference by name.
+ * If the value is not an alias, its value will be directly returned.
+ *
+ * @param name Variable name to resolve
+ * @param allVariables All available variables
+ * @example
+ * ```ts
+ * const allVariables = {
+ *   "variable-a": 42,
+ *   "variable-b": "{variable-a}"
+ * }
+ *
+ * const resolvedValue = resolveValue("variable-b", allVariables);
+ * // const resolvedValue = 42;
+ * ```
+ */
+export const resolveValue = (name, allVariables) => {
+    const { isAlias, aliasName } = isAliasVariable(allVariables[name]);
+    if (!isAlias)
+        return allVariables[name];
+    return resolveValue(aliasName, allVariables);
+};
 /**
  * Generates the timestamp comment that is added to the start of every generated file.
  */
@@ -45,10 +75,29 @@ export const generateTimestampComment = (modeName) => {
  * Alias values are enclosed by curly braces.
  *
  * @example "{your-variable-name}"
- * @returns `isAlias` whether the variable is an alias and `variableName` the raw variable name without curly braces.
+ * @returns `isAlias` whether the variable is an alias and `aliasName` the raw variable name without curly braces.
  */
 export const isAliasVariable = (variableValue) => {
     const isAlias = /{.*}/.exec(variableValue);
-    const variableName = variableValue.replace("{", "").replace("}", "");
-    return { isAlias, variableName };
+    const aliasName = variableValue.replace("{", "").replace("}", "");
+    return { isAlias, aliasName };
+};
+/**
+ * Gets the variable file content of the CSS or SCSS file as array where each element
+ * represents a single line of the file.
+ *
+ * @param variables Variable data (name + value)
+ * @param nameFormatter Function to format the variable name
+ * @param aliasFormatter Function to format a reference to another variable (e.g. `var(--name)` for CSS)
+ * @param options Generator options
+ */
+const getCssOrScssVariableContent = (variables, nameFormatter, aliasFormatter, options) => {
+    return Object.entries(variables).map(([name, value]) => {
+        const { isAlias, aliasName } = isAliasVariable(value);
+        let variableValue = isAlias ? aliasFormatter(aliasName) : value;
+        if (isAlias && options?.resolveAlias) {
+            variableValue = resolveValue(name, variables);
+        }
+        return `${nameFormatter(name)}: ${variableValue};`;
+    });
 };

package/dist/utils/generate.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/generate.spec.js

@@ -0,0 +1,77 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { generateAsCSS, generateAsJSON, generateAsSCSS } from "./generate.js";
+describe("generate.ts", () => {
+    const mockData = {
+        modeName: "test-mode-1",
+        variables: {
+            "test-1": "#ffffff",
+            "test-2": "1rem",
+            "test-3": "{test-2}",
+        },
+    };
+    beforeEach(() => {
+        vi.setSystemTime(new Date(2024, 0, 7, 13, 42));
+    });
+    test("should generate as CSS", () => {
+        const fileContent = generateAsCSS(mockData);
+        expect(fileContent).toBe(`/**
+ * Do not edit directly.
+ * This file contains the specific variables for the "test-mode-1" theme.
+ * Imported from Figma API on Sun, 07 Jan 2024 13:42:00 GMT
+ */
+:root {
+  --test-1: #ffffff;
+  --test-2: 1rem;
+  --test-3: var(--test-2);
+}
+`);
+    });
+    test("should generate as CSS with custom selector", () => {
+        const fileContent = generateAsCSS(mockData, { selector: "html" });
+        expect(fileContent).toBe(`/**
+ * Do not edit directly.
+ * This file contains the specific variables for the "test-mode-1" theme.
+ * Imported from Figma API on Sun, 07 Jan 2024 13:42:00 GMT
+ */
+html.test-mode-1 {
+  --test-1: #ffffff;
+  --test-2: 1rem;
+  --test-3: var(--test-2);
+}
+`);
+    });
+    test("should generate as CSS with resolved aliases", () => {
+        const fileContent = generateAsCSS(mockData, { resolveAlias: true });
+        expect(fileContent).toBe(`/**
+ * Do not edit directly.
+ * This file contains the specific variables for the "test-mode-1" theme.
+ * Imported from Figma API on Sun, 07 Jan 2024 13:42:00 GMT
+ */
+:root {
+  --test-1: #ffffff;
+  --test-2: 1rem;
+  --test-3: 1rem;
+}
+`);
+    });
+    test("should generate as SCSS", () => {
+        const fileContent = generateAsSCSS(mockData);
+        expect(fileContent).toBe(`/**
+ * Do not edit directly.
+ * This file contains the specific variables for the "test-mode-1" theme.
+ * Imported from Figma API on Sun, 07 Jan 2024 13:42:00 GMT
+ */
+$test-1: #ffffff;
+$test-2: 1rem;
+$test-3: $test-2;
+`);
+    });
+    test("should generate as JSON", () => {
+        const fileContent = generateAsJSON(mockData);
+        expect(JSON.parse(fileContent)).toStrictEqual({
+            "test-1": "#ffffff",
+            "test-2": "1rem",
+            "test-3": "1rem",
+        });
+    });
+});

package/dist/utils/parse.js

@@ -34,8 +34,30 @@ export const parseFigmaVariables = (apiResponse, options) => {
         });
     });
     parsedData.forEach((data) => {
-        if (data.modeName === "DEFAULT_MODE_NAME")
+        if (data.modeName === DEFAULT_MODE_NAME)
             delete data.modeName;
+        const numberRegex = /\d+/;
+        // sort variables by name
+        // for variables with the same name that just end with a different number (e.g. my-var-100 and my-var-200)
+        // sort them by number instead of alphabetically so e.g. 100 is sorted before 1000
+        data.variables = Object.keys(data.variables)
+            .map((key) => {
+            const asNumber = numberRegex.exec(key)?.[0] ?? "";
+            return {
+                key,
+                asNumber: +asNumber || undefined, // prevent NaN
+                base: key.replace(asNumber, ""),
+            };
+        })
+            .sort((a, b) => {
+            if (a.asNumber && b.asNumber && a.base === b.base)
+                return a.asNumber - b.asNumber;
+            return a.key.localeCompare(b.key);
+        })
+            .reduce((variables, { key }) => {
+            variables[key] = data.variables[key];
+            return variables;
+        }, {});
     });
     return parsedData;
 };

package/dist/utils/parse.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/parse.spec.js

@@ -0,0 +1,187 @@
+import { describe, expect, test } from "vitest";
+import { DEFAULT_MODE_NAME, normalizeVariableName, parseFigmaVariables, resolveFigmaVariableValue, rgbaToHex, } from "./parse.js";
+describe("parse.ts", () => {
+    test("should convert RGBA to hex color", () => {
+        let hex = rgbaToHex({ r: 1, g: 1, b: 1, a: 1 });
+        expect(hex).toBe("#ffffff");
+        hex = rgbaToHex({ r: 1, g: 0, b: 0, a: 1 });
+        expect(hex).toBe("#ff0000");
+        hex = rgbaToHex({ r: 0, g: 1, b: 0, a: 1 });
+        expect(hex).toBe("#00ff00");
+        hex = rgbaToHex({ r: 0, g: 0, b: 1, a: 1 });
+        expect(hex).toBe("#0000ff");
+        hex = rgbaToHex({ r: 0, g: 0, b: 0, a: 0 });
+        expect(hex).toBe("#00000000");
+    });
+    test("should normalize variable name", () => {
+        const name = normalizeVariableName("a/b c+d&e");
+        expect(name).toBe("a-b-c-d-e");
+    });
+    test("should resolve color variable value", () => {
+        const value = { r: 1, g: 1, b: 1, a: 1 };
+        const resolvedValue = resolveFigmaVariableValue(value, {});
+        expect(resolvedValue).toBe("#ffffff");
+    });
+    test("should resolve numeric value and convert to rem", () => {
+        // with default rem base
+        let resolvedValue = resolveFigmaVariableValue(16, {});
+        expect(resolvedValue).toBe("1rem");
+        // with individual rem base
+        resolvedValue = resolveFigmaVariableValue(16, {}, 8);
+        expect(resolvedValue).toBe("2rem");
+        // without rem base (pixel value)
+        resolvedValue = resolveFigmaVariableValue(16, {}, false);
+        expect(resolvedValue).toBe("16px");
+    });
+    test("should resolve alias value", () => {
+        const value = { type: "VARIABLE_ALIAS", id: "test-1" };
+        const allVariables = {
+            "test-1": {
+                hiddenFromPublishing: false,
+                name: "test-variable-1",
+                valuesByMode: {},
+                variableCollectionId: "collection-1",
+            },
+        };
+        const resolvedValue = resolveFigmaVariableValue(value, allVariables);
+        expect(resolvedValue).toBe("{test-variable-1}");
+        // should throw error if alias can not be found
+        expect(() => resolveFigmaVariableValue({ type: "VARIABLE_ALIAS", id: "does-not-exist" }, allVariables)).toThrowError();
+    });
+    test("should parse all Figma variables", () => {
+        const apiResponse = {
+            meta: {
+                variableCollections: {
+                    "collection-1": {
+                        hiddenFromPublishing: false,
+                        defaultModeId: "test-1",
+                        modes: [
+                            { modeId: "test-1", name: "Test 1" },
+                            { modeId: "test-2", name: "Test 2" },
+                            { modeId: "test-3", name: "Test 3" },
+                        ],
+                    },
+                    "collection-2": {
+                        hiddenFromPublishing: false,
+                        defaultModeId: "test-2",
+                        modes: [
+                            { modeId: "test-1", name: "Test 1" },
+                            { modeId: "test-2", name: "Test 2" },
+                            { modeId: "test-3", name: "Test 3" },
+                        ],
+                    },
+                },
+                variables: {
+                    "variable-1": {
+                        hiddenFromPublishing: false,
+                        name: "variable-1",
+                        variableCollectionId: "collection-1",
+                        valuesByMode: {
+                            "test-1": { r: 1, g: 1, b: 1, a: 1 },
+                            "test-2": { type: "VARIABLE_ALIAS", id: "variable-2" },
+                            "test-3": 42,
+                        },
+                    },
+                    "variable-2": {
+                        hiddenFromPublishing: false,
+                        name: "variable-2",
+                        variableCollectionId: "collection-2",
+                        valuesByMode: {
+                            "test-1": { type: "VARIABLE_ALIAS", id: "variable-1" },
+                            "test-2": 42,
+                            "test-3": { r: 1, g: 1, b: 1, a: 1 },
+                        },
+                    },
+                },
+            },
+        };
+        const parsedVariables = parseFigmaVariables(apiResponse);
+        expect(parsedVariables).toStrictEqual([
+            {
+                modeName: "Test 1",
+                variables: {
+                    "variable-1": "#ffffff",
+                    "variable-2": "{variable-1}",
+                },
+            },
+            {
+                modeName: "Test 2",
+                variables: {
+                    "variable-1": "{variable-2}",
+                    "variable-2": "2.625rem",
+                },
+            },
+            {
+                modeName: "Test 3",
+                variables: {
+                    "variable-1": "2.625rem",
+                    "variable-2": "#ffffff",
+                },
+            },
+        ]);
+    });
+    test("should ignore variables/collections that are hidden from publishing", () => {
+        const apiResponse = {
+            meta: {
+                variableCollections: {
+                    "collection-1": {
+                        hiddenFromPublishing: true,
+                        defaultModeId: "test-1",
+                        modes: [{ modeId: "test-1", name: "Test 1" }],
+                    },
+                },
+                variables: {
+                    "variable-1": {
+                        hiddenFromPublishing: true,
+                        name: "variable-1",
+                        variableCollectionId: "collection-1",
+                        valuesByMode: {
+                            "test-1": 42,
+                        },
+                    },
+                    "variable-2": {
+                        hiddenFromPublishing: false,
+                        name: "variable-2",
+                        variableCollectionId: "collection-1",
+                        valuesByMode: {
+                            "test-1": 42,
+                        },
+                    },
+                },
+            },
+        };
+        const parsedVariables = parseFigmaVariables(apiResponse);
+        expect(parsedVariables).toStrictEqual([]);
+    });
+    test("should clear mode name if its the default Figma mode name", () => {
+        const apiResponse = {
+            meta: {
+                variableCollections: {
+                    "collection-1": {
+                        hiddenFromPublishing: false,
+                        defaultModeId: "test-1",
+                        modes: [{ modeId: "test-1", name: DEFAULT_MODE_NAME }],
+                    },
+                },
+                variables: {
+                    "variable-1": {
+                        hiddenFromPublishing: false,
+                        name: "variable-1",
+                        variableCollectionId: "collection-1",
+                        valuesByMode: {
+                            "test-1": 16,
+                        },
+                    },
+                },
+            },
+        };
+        const parsedVariables = parseFigmaVariables(apiResponse);
+        expect(parsedVariables).toStrictEqual([
+            {
+                variables: {
+                    "variable-1": "1rem",
+                },
+            },
+        ]);
+    });
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/figma-utils",
-  "description": "Utility functions and CLI for importing data from the Figma API into CSS/SCSS variables",
-  "version": "1.0.0-alpha.0",
+  "description": "Utility functions and CLI for importing data from the Figma API into different formats (e.g. CSS, SCSS etc.)",
+  "version": "1.0.0-alpha.2",
   "type": "module",
   "bin": {
     "@sit-onyx/figma-utils": "./dist/cli.js"
@@ -22,7 +22,11 @@
     "commander": "^11.1.0"
   },
   "scripts": {
-    "build": "rimraf dist && tsc",
-    "@sit-onyx/figma-utils": "node ./dist/cli.js"
+    "build": "pnpm run '/type-check|build-only/'",
+    "build-only": "rimraf dist && tsc -p tsconfig.node.json --composite false",
+    "type-check": "tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "@sit-onyx/figma-utils": "node ./dist/cli.js",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage"
   }
 }