@styleframe/cli 2.3.2 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @styleframe/cli
 
+## 2.4.0
+
+### Minor Changes
+
+- [#83](https://github.com/styleframe-dev/styleframe/pull/83) [`6deddfd`](https://github.com/styleframe-dev/styleframe/commit/6deddfd7a97df13a7fcb865dbf088995f79bd4f3) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add Figma plugin for syncing Styleframe variables with Figma variables and CLI commands for Figma import/export
+
+## 2.3.3
+
+### Patch Changes
+
+- [#102](https://github.com/styleframe-dev/styleframe/pull/102) [`90c3ae8`](https://github.com/styleframe-dev/styleframe/commit/90c3ae8dd19a688f88d1b362af6bef732de988d6) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add `@styleframe/license` dependency and move runtime to production dependencies in init command
+
 ## 2.3.2
 
 ### Patch Changes

package/dist/build-ur0w63-6.js

@@ -0,0 +1,49 @@
+import path from "node:path";
+import { l as loadConfiguration, b as build$1 } from "./index-BX6dI2z2.js";
+import { defineCommand } from "citty";
+import consola from "consola";
+const build = defineCommand({
+  meta: {
+    name: "build",
+    description: "Build Styleframe project from source files"
+  },
+  args: {
+    entry: {
+      type: "positional",
+      description: "Entry point file(s) for the build",
+      default: "styleframe.config.ts",
+      valueHint: "path"
+    },
+    outputDir: {
+      type: "string",
+      description: "Output directory for built files",
+      default: "styleframe",
+      alias: ["o", "out"],
+      valueHint: "path"
+    },
+    clean: {
+      type: "boolean",
+      description: "Clean output directory before build",
+      default: false
+    }
+  },
+  async run({ args }) {
+    consola.info(
+      `Loading configuration from "${path.relative(process.cwd(), path.resolve(args.entry))}"...`
+    );
+    const instance = await loadConfiguration({ entry: args.entry });
+    consola.info("Building styleframe...");
+    try {
+      await build$1(instance, {
+        outputDir: args.outputDir,
+        clean: args.clean
+      });
+      consola.success("Styleframe built successfully!");
+    } catch (error) {
+      consola.error("Failed to build Styleframe:", error);
+    }
+  }
+});
+export {
+  build as default
+};

package/dist/export-DbajI91o.js

@@ -0,0 +1,139 @@
+import path from "node:path";
+import { writeFile } from "node:fs/promises";
+import { l as loadConfiguration } from "./index-BX6dI2z2.js";
+import { defineCommand } from "citty";
+import consola from "consola";
+import { d as detectFigmaType, s as styleframeValueToFigma, a as styleframeToFigmaName, t as toDTCG } from "./index-C3Gqfamh.js";
+const _export = defineCommand({
+  meta: {
+    name: "export",
+    description: "Export Styleframe variables to DTCG format JSON"
+  },
+  args: {
+    config: {
+      type: "string",
+      description: "Path to the Styleframe config file",
+      default: "styleframe.config.ts",
+      alias: ["c"],
+      valueHint: "path"
+    },
+    output: {
+      type: "string",
+      description: "Output JSON file path",
+      default: "tokens.json",
+      alias: ["o"],
+      valueHint: "path"
+    },
+    collection: {
+      type: "string",
+      description: "Name for the Figma collection",
+      default: "Design Tokens",
+      alias: ["n", "name"]
+    },
+    baseFontSize: {
+      type: "string",
+      description: "Base font size for rem conversion (in pixels)",
+      default: "16"
+    }
+  },
+  async run({ args }) {
+    const configPath = path.resolve(args.config);
+    const outputPath = path.resolve(args.output);
+    const baseFontSize = Number.parseInt(args.baseFontSize, 10) || 16;
+    consola.info(
+      `Loading configuration from "${path.relative(process.cwd(), configPath)}"...`
+    );
+    const instance = await loadConfiguration({ entry: configPath });
+    const root = instance.root;
+    consola.info("Extracting variables...");
+    const modes = ["Default", ...root.themes.map((t) => capitalize(t.name))];
+    const variableMap = /* @__PURE__ */ new Map();
+    for (const variable of root.variables) {
+      if (!variableMap.has(variable.name)) {
+        variableMap.set(variable.name, /* @__PURE__ */ new Map());
+      }
+      const modeValues = variableMap.get(variable.name);
+      modeValues.set("Default", resolveValue(variable.value));
+    }
+    for (const theme of root.themes) {
+      const modeName = capitalize(theme.name);
+      for (const variable of theme.variables) {
+        if (!variableMap.has(variable.name)) {
+          variableMap.set(variable.name, /* @__PURE__ */ new Map());
+        }
+        const modeValues = variableMap.get(variable.name);
+        modeValues.set(modeName, resolveValue(variable.value));
+      }
+    }
+    const variables = [];
+    for (const [name, modeValues] of variableMap) {
+      const defaultValue = modeValues.get("Default");
+      if (defaultValue === void 0) continue;
+      const type = detectFigmaType(defaultValue);
+      const figmaValues = {};
+      for (const [modeName, value] of modeValues) {
+        const figmaValue = styleframeValueToFigma(value, type, baseFontSize);
+        if (figmaValue !== null) {
+          figmaValues[modeName] = figmaValue;
+        }
+      }
+      const rawDefaultValue = getRawValue(
+        root.variables.find((v) => v.name === name)?.value
+      );
+      const isReference = isReferenceValue(rawDefaultValue);
+      const aliasTo = isReference ? getReferenceName(rawDefaultValue) : void 0;
+      variables.push({
+        name: styleframeToFigmaName(name),
+        styleframeName: name,
+        type,
+        values: figmaValues,
+        aliasTo
+      });
+    }
+    const intermediateData = {
+      collection: args.collection,
+      modes,
+      variables
+    };
+    const themeNames = root.themes.map((t) => capitalize(t.name));
+    const dtcgData = toDTCG(intermediateData, { themeNames });
+    consola.info(
+      `Writing ${variables.length} variables to "${path.relative(process.cwd(), outputPath)}"...`
+    );
+    await writeFile(outputPath, JSON.stringify(dtcgData, null, 2));
+    consola.success(
+      `Exported ${variables.length} variables in DTCG format to "${path.relative(process.cwd(), outputPath)}"`
+    );
+  }
+});
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+function resolveValue(value) {
+  if (value === null || value === void 0) return value;
+  if (typeof value !== "object") return value;
+  if ("type" in value) {
+    if (value.type === "reference") {
+      return value.fallback ?? "";
+    }
+    if (value.type === "css") {
+      return value.value.map((v) => resolveValue(v)).join("");
+    }
+  }
+  if (Array.isArray(value)) {
+    return value.map((v) => resolveValue(v)).join("");
+  }
+  return String(value);
+}
+function getRawValue(value) {
+  return value ?? "";
+}
+function isReferenceValue(value) {
+  return typeof value === "object" && value !== null && "type" in value && value.type === "reference";
+}
+function getReferenceName(value) {
+  return value.name;
+}
+export {
+  _export as default
+};

package/dist/import-CwuwczM7.js

@@ -0,0 +1,90 @@
+import path from "node:path";
+import { readFile, writeFile } from "node:fs/promises";
+import { defineCommand } from "citty";
+import consola from "consola";
+import { f as fromDTCG, g as generateStyleframeCode } from "./index-C3Gqfamh.js";
+const _import = defineCommand({
+  meta: {
+    name: "import",
+    description: "Generate Styleframe code from DTCG format JSON"
+  },
+  args: {
+    input: {
+      type: "string",
+      description: "Input DTCG JSON file path",
+      required: true,
+      alias: ["i"],
+      valueHint: "path"
+    },
+    output: {
+      type: "string",
+      description: "Output Styleframe TypeScript file path",
+      default: "tokens.styleframe.ts",
+      alias: ["o"],
+      valueHint: "path"
+    },
+    composables: {
+      type: "boolean",
+      description: "Use @styleframe/theme composables (useColor, useSpacing, etc.)",
+      default: true
+    },
+    rem: {
+      type: "boolean",
+      description: "Use rem units for dimensions instead of px",
+      default: false
+    },
+    baseFontSize: {
+      type: "string",
+      description: "Base font size for rem conversion (in pixels)",
+      default: "16"
+    },
+    instanceName: {
+      type: "string",
+      description: "Name for the Styleframe instance variable",
+      default: "s"
+    }
+  },
+  async run({ args }) {
+    const inputPath = path.resolve(args.input);
+    const outputPath = path.resolve(args.output);
+    const baseFontSize = Number.parseInt(args.baseFontSize, 10) || 16;
+    consola.info(
+      `Reading JSON from "${path.relative(process.cwd(), inputPath)}"...`
+    );
+    let data;
+    try {
+      const content = await readFile(inputPath, "utf-8");
+      const rawData = JSON.parse(content);
+      data = fromDTCG(rawData);
+    } catch (error) {
+      consola.error(
+        `Failed to read or parse input file: ${error instanceof Error ? error.message : error}`
+      );
+      process.exit(1);
+    }
+    consola.info(
+      `Generating Styleframe code for ${data.variables.length} variables...`
+    );
+    const result = generateStyleframeCode(data, {
+      useComposables: args.composables,
+      useRem: args.rem,
+      baseFontSize,
+      instanceName: args.instanceName
+    });
+    consola.info(`Writing to "${path.relative(process.cwd(), outputPath)}"...`);
+    await writeFile(outputPath, result.code);
+    consola.success(`Generated Styleframe code with:`);
+    consola.info(`  - ${result.variables.length} variables`);
+    consola.info(`  - ${result.themes.length} theme(s)`);
+    if (args.composables && result.imports.length > 1) {
+      consola.info(
+        `  - Using composables: ${result.imports.slice(1).join(", ")}`
+      );
+    }
+    consola.info(`
+Output: ${path.relative(process.cwd(), outputPath)}`);
+  }
+});
+export {
+  _import as default
+};