@sit-onyx/figma-utils 1.0.0-alpha.4 → 1.0.0-alpha.5

package/README.md

@@ -1,6 +1,17 @@
+<div align="center" style="text-align: center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" type="image/svg+xml" srcset="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-light.svg">
+    <source media="(prefers-color-scheme: light)" type="image/svg+xml" srcset="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-dark.svg">
+    <img alt="onyx logo" src="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-dark.svg" width="160px">
+  </picture>
+</div>
+
+<br>
+
 # @sit-onyx/figma-utils
 
 Utility functions and CLI for importing data from the Figma API into different formats (e.g. CSS, SCSS etc.).
+Created by [Schwarz IT](https://it.schwarz).
 
 ## Use as CLI
 
@@ -10,39 +21,6 @@ For a list of supported commands and options, run:
 npx @sit-onyx/figma-utils@latest --help
 ```
 
-## Use as npm package
-
-This package also provides utility functions for importing data from the Figma API.
-This is useful if you want customize the CLI commands to have full control over the output.
-
-```sh
-npm install @sit-onyx/figma-utils
-```
-
-### Examples
+## Documentation
 
-```ts
-import fs from "node:fs";
-import path from "node:path";
-import { fetchFigmaVariables, generateAsCSS, parseFigmaVariables } from "@sit-onyx/figma-utils";
-
-const FILE_KEY = "your-figma-file-key";
-const FIGMA_TOKEN = "your-figma-access-token";
-
-// fetch variables from Figma API
-const data = await fetchFigmaVariables(FILE_KEY, FIGMA_TOKEN);
-
-// parse variables into a readable and normalized format
-const parsedVariables = parseFigmaVariables(data);
-
-// generate .css files for every Figma mode
-parsedVariables.forEach((mode) => {
-  // get .css file content
-  const fileContent = generateAsCSS(mode);
-
-  // write content as a file
-  const filename = mode.modeName ? `variables-${mode.modeName}.css` : "variables.css";
-  const fullPath = path.join(process.cwd(), filename);
-  fs.writeFileSync(fullPath, fileContent);
-});
-```
+You can find our documentation [here](https://onyx.schwarz/development/packages/figma-utils.html).

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

@@ -2,8 +2,8 @@ import { Command } from "commander";
 export type ImportCommandOptions = {
     fileKey: string;
     token: string;
-    filename: string;
     format: string[];
+    filename?: string;
     dir?: string;
     modes?: string[];
     selector: string;

package/dist/commands/import-variables.js

@@ -7,7 +7,7 @@ export const importCommand = new Command("import-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 <strings...>", "Output formats. Supported are: CSS, SCSS, JSON", ["CSS"])
-    .option("-n, --filename <string>", "Base name of the generated variables file", "variables")
+    .option("-n, --filename <string>", "Base name / prefix of the generated variables file. Will append the mode name")
     .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. You can use {mode} as placeholder for the mode name, so e.g. for the mode named "dark", passing the selector "html.{mode}" will result in "html.dark"', ":root")
@@ -42,8 +42,12 @@ export async function importCommandAction(options) {
         });
     }
     const outputDirectory = options.dir ?? process.cwd();
-    const filename = options.filename ?? "variables";
     console.log(`Generating ${options.format} variables...`);
+    const getBaseFileName = (modeName = "default") => {
+        if (options.filename)
+            return `${options.filename}${modeName}`;
+        return modeName;
+    };
     options.format.forEach((format) => {
         console.log(`Generating ${format} variables...`);
         parsedVariables.forEach((data) => {
@@ -54,7 +58,7 @@ export async function importCommandAction(options) {
             const isModeIncluded = !options.modes?.length || !data.modeName || options.modes.includes(data.modeName);
             if (!isModeIncluded)
                 return;
-            const baseName = data.modeName ? `${filename}-${data.modeName}` : filename;
+            const baseName = getBaseFileName(data.modeName);
             const fullPath = path.join(outputDirectory, `${baseName}.${format.toLowerCase()}`);
             fs.writeFileSync(fullPath, generators[format](data));
         });

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 different formats (e.g. CSS, SCSS etc.)",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.5",
   "type": "module",
   "bin": {
     "@sit-onyx/figma-utils": "./dist/cli.js"
@@ -19,8 +19,17 @@
       "import": "./dist/index.js"
     }
   },
+  "homepage": "https://onyx.schwarz/development/packages/figma-utils.html",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SchwarzIT/onyx",
+    "directory": "packages/figma-utils"
+  },
+  "bugs": {
+    "url": "https://github.com/SchwarzIT/onyx/issues"
+  },
   "dependencies": {
-    "commander": "^11.1.0"
+    "commander": "^12.1.0"
   },
   "scripts": {
     "build": "pnpm run '/type-check|build-only/'",