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

package/dist/commands/import-variables.js

@@ -10,9 +10,10 @@ export const importCommand = new Command("import-variables")
     .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) => {
     const generators = {
-        CSS: generateAsCSS,
+        CSS: (data) => generateAsCSS(data, options.selector),
         SCSS: generateAsSCSS,
     };
     if (!(options.format in generators)) {

package/dist/utils/generate.d.ts

@@ -2,15 +2,22 @@ import { ParsedVariable } from "../types/figma.js";
 /**
  * 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"
  * @returns File content of the .css file
  */
-export declare const generateAsCSS: (data: ParsedVariable) => string;
+export declare const generateAsCSS: (data: ParsedVariable, selector?: string) => string;
 /**
  * Generates the given parsed Figma variables into SCSS variables.
  *
  * @returns File content of the .scss file
  */
 export declare const generateAsSCSS: (data: ParsedVariable) => string;
+/**
+ * Generates the timestamp comment that is added to the start of every generated file.
+ */
+export declare const generateTimestampComment: (modeName?: string) => string;
 /**
  * Checks whether the given variable value is an alias / variable reference to another variable.
  * Alias values are enclosed by curly braces.

package/dist/utils/generate.js

@@ -1,14 +1,22 @@
 /**
  * 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"
  * @returns File content of the .css file
  */
-export const generateAsCSS = (data) => {
-    return genericGenerator({
-        data,
-        nameTransformer: (name) => `--${name}`,
-        aliasTransformer: (name) => `var(--${name})`,
+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();
+    if (fullSelector !== ":root")
+        fullSelector += `.${data.modeName}`;
+    return `${generateTimestampComment(data.modeName)}
+${fullSelector} {\n${variableContent.join("\n")}\n}\n`;
 };
 /**
  * Generates the given parsed Figma variables into SCSS variables.
@@ -16,29 +24,21 @@ export const generateAsCSS = (data) => {
  * @returns File content of the .scss file
  */
 export const generateAsSCSS = (data) => {
-    return genericGenerator({
-        data,
-        nameTransformer: (name) => `$${name}`,
-        aliasTransformer: (name) => `$${name}`,
+    const variableContent = Object.entries(data.variables).map(([name, value]) => {
+        const { isAlias, variableName } = isAliasVariable(value);
+        const variableValue = isAlias ? `$${variableName}` : value;
+        return `$${name}: ${variableValue};`;
     });
+    return `${generateTimestampComment(data.modeName)}\n${variableContent.join("\n")}\n`;
 };
 /**
- * Generic base generator for CSS, SCSS etc. files.
- * Will take care of defining selectors and formatting.
+ * Generates the timestamp comment that is added to the start of every generated file.
  */
-const genericGenerator = (options) => {
-    const variableContent = Object.entries(options.data.variables).map(([name, value]) => {
-        const { isAlias, variableName } = isAliasVariable(value);
-        const variableValue = isAlias ? options.aliasTransformer(variableName) : value;
-        return `  ${options.nameTransformer(name)}: ${variableValue};`;
-    });
-    const timestamp = new Date().toUTCString();
-    const mode = options.data.modeName;
+export const generateTimestampComment = (modeName) => {
     return `/**
- * Do not edit directly.${mode ? `\n * This file contains the specific variables for the "${mode}" theme.` : ""}
- * Imported from Figma API on ${timestamp}
- */
-:root {\n${variableContent.join("\n")}\n}\n`;
+ * Do not edit directly.${modeName ? `\n * This file contains the specific variables for the "${modeName}" theme.` : ""}
+ * Imported from Figma API on ${new Date().toUTCString()}
+ */`;
 };
 /**
  * Checks whether the given variable value is an alias / variable reference to another variable.

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": "0.0.0",
+  "version": "1.0.0-alpha.0",
   "type": "module",
   "bin": {
     "@sit-onyx/figma-utils": "./dist/cli.js"