@styleframe/cli 3.0.0 → 4.1.0

package/dist/import-Bll_uBvJ.js

@@ -0,0 +1,123 @@
+import { defineCommand } from "citty";
+import path from "node:path";
+import consola from "consola";
+import { readFile, readdir, stat, writeFile } from "node:fs/promises";
+import { fromDTCG, generateStyleframeCode } from "@styleframe/figma";
+//#region src/commands/figma/import.ts
+var import_default = defineCommand({
+	meta: {
+		name: "import",
+		description: "Generate Styleframe code from Figma-compatible DTCG per-mode files"
+	},
+	args: {
+		input: {
+			type: "string",
+			description: "Input .tokens.json file or directory of per-mode files",
+			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 from "${path.relative(process.cwd(), inputPath)}"...`);
+		let data;
+		try {
+			if ((await stat(inputPath)).isDirectory()) {
+				const tokenFiles = (await readdir(inputPath)).filter((f) => f.endsWith(".tokens.json")).sort();
+				if (tokenFiles.length === 0) {
+					consola.error(`No .tokens.json files found in "${path.relative(process.cwd(), inputPath)}"`);
+					process.exit(1);
+				}
+				consola.info(`Found ${tokenFiles.length} mode file(s): ${tokenFiles.join(", ")}`);
+				const modeFormats = [];
+				for (const file of tokenFiles) {
+					const content = await readFile(path.join(inputPath, file), "utf-8");
+					const rawDoc = JSON.parse(content);
+					const modeData = fromDTCG(rawDoc, { defaultModeName: extractModeName(rawDoc, file) });
+					modeFormats.push(modeData);
+				}
+				data = mergeModeFormats(modeFormats);
+			} else {
+				const content = await readFile(inputPath, "utf-8");
+				data = fromDTCG(JSON.parse(content));
+			}
+		} catch (error) {
+			consola.error(`Failed to read or parse input: ${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(`\nOutput: ${path.relative(process.cwd(), outputPath)}`);
+	}
+});
+function extractModeName(doc, filename) {
+	const ext = doc.$extensions;
+	if (ext && typeof ext["com.figma.modeName"] === "string") return ext["com.figma.modeName"];
+	const sfExt = ext?.["dev.styleframe"];
+	if (sfExt && typeof sfExt.modeName === "string") return sfExt.modeName;
+	return filename.replace(/\.tokens\.json$/, "");
+}
+function mergeModeFormats(formats) {
+	if (formats.length === 1) return formats[0];
+	const allModes = [];
+	const variableMap = /* @__PURE__ */ new Map();
+	for (const format of formats) {
+		for (const mode of format.modes) if (!allModes.includes(mode)) allModes.push(mode);
+		for (const v of format.variables) {
+			const existing = variableMap.get(v.name);
+			if (existing) Object.assign(existing.values, v.values);
+			else variableMap.set(v.name, {
+				...v,
+				values: { ...v.values }
+			});
+		}
+	}
+	return {
+		collection: formats[0].collection,
+		modes: allModes,
+		variables: [...variableMap.values()]
+	};
+}
+//#endregion
+export { import_default as default };

package/dist/import-MqLYxb8d.js

@@ -0,0 +1,114 @@
+import { defineCommand } from "citty";
+import path from "node:path";
+import consola from "consola";
+import { readFile, stat, writeFile } from "node:fs/promises";
+import { fromDTCG, fromDTCGResolver, generateStyleframeCode } from "@styleframe/figma";
+//#region src/commands/dtcg/import.ts
+var import_default = defineCommand({
+	meta: {
+		name: "import",
+		description: "Generate Styleframe code from DTCG format JSON"
+	},
+	args: {
+		input: {
+			type: "string",
+			description: "Input DTCG JSON file or directory containing tokens.json",
+			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 from "${path.relative(process.cwd(), inputPath)}"...`);
+		let data;
+		try {
+			if ((await stat(inputPath)).isDirectory()) data = await readFromDirectory(inputPath);
+			else data = await readFromFile(inputPath);
+		} catch (error) {
+			consola.error(`Failed to read or parse input: ${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(`\nOutput: ${path.relative(process.cwd(), outputPath)}`);
+	}
+});
+async function readFromDirectory(dirPath) {
+	const content = await readFile(path.join(dirPath, "tokens.json"), "utf-8");
+	const tokensDoc = JSON.parse(content);
+	const resolverPath = path.join(dirPath, "tokens.resolver.json");
+	const resolverDoc = await tryReadJson(resolverPath);
+	if (resolverDoc) {
+		consola.info(`Found resolver: "${path.relative(process.cwd(), resolverPath)}"`);
+		return fromDTCGResolver(resolverDoc, { fileLoader: async (ref) => {
+			if (ref === "tokens.json") return tokensDoc;
+			throw new Error(`Resolver references "${ref}" but only "tokens.json" was found`);
+		} });
+	}
+	return fromDTCG(tokensDoc);
+}
+async function readFromFile(filePath) {
+	const content = await readFile(filePath, "utf-8");
+	const tokensDoc = JSON.parse(content);
+	const resolverPath = filePath.replace(/\.json$/, ".resolver.json");
+	const resolverDoc = await tryReadJson(resolverPath);
+	if (resolverDoc) {
+		consola.info(`Auto-detected resolver: "${path.relative(process.cwd(), resolverPath)}"`);
+		return fromDTCGResolver(resolverDoc, { fileLoader: async (ref) => {
+			if (ref === path.basename(filePath)) return tokensDoc;
+			throw new Error(`Resolver references "${ref}" but only "${path.basename(filePath)}" was provided`);
+		} });
+	}
+	return fromDTCG(tokensDoc);
+}
+async function tryReadJson(filePath) {
+	try {
+		const content = await readFile(filePath, "utf-8");
+		return JSON.parse(content);
+	} catch {
+		return;
+	}
+}
+//#endregion
+export { import_default as default };

package/dist/import-ibQc_GXm.cjs

@@ -0,0 +1,117 @@
+const require_chunk = require("./chunk-D6vf50IK.cjs");
+let citty = require("citty");
+let node_path = require("node:path");
+node_path = require_chunk.__toESM(node_path, 1);
+let consola = require("consola");
+consola = require_chunk.__toESM(consola, 1);
+let node_fs_promises = require("node:fs/promises");
+let _styleframe_figma = require("@styleframe/figma");
+//#region src/commands/dtcg/import.ts
+var import_default = (0, citty.defineCommand)({
+	meta: {
+		name: "import",
+		description: "Generate Styleframe code from DTCG format JSON"
+	},
+	args: {
+		input: {
+			type: "string",
+			description: "Input DTCG JSON file or directory containing tokens.json",
+			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 = node_path.default.resolve(args.input);
+		const outputPath = node_path.default.resolve(args.output);
+		const baseFontSize = Number.parseInt(args.baseFontSize, 10) || 16;
+		consola.default.info(`Reading from "${node_path.default.relative(process.cwd(), inputPath)}"...`);
+		let data;
+		try {
+			if ((await (0, node_fs_promises.stat)(inputPath)).isDirectory()) data = await readFromDirectory(inputPath);
+			else data = await readFromFile(inputPath);
+		} catch (error) {
+			consola.default.error(`Failed to read or parse input: ${error instanceof Error ? error.message : error}`);
+			process.exit(1);
+		}
+		consola.default.info(`Generating Styleframe code for ${data.variables.length} variables...`);
+		const result = (0, _styleframe_figma.generateStyleframeCode)(data, {
+			useComposables: args.composables,
+			useRem: args.rem,
+			baseFontSize,
+			instanceName: args.instanceName
+		});
+		consola.default.info(`Writing to "${node_path.default.relative(process.cwd(), outputPath)}"...`);
+		await (0, node_fs_promises.writeFile)(outputPath, result.code);
+		consola.default.success(`Generated Styleframe code with:`);
+		consola.default.info(`  - ${result.variables.length} variables`);
+		consola.default.info(`  - ${result.themes.length} theme(s)`);
+		if (args.composables && result.imports.length > 1) consola.default.info(`  - Using composables: ${result.imports.slice(1).join(", ")}`);
+		consola.default.info(`\nOutput: ${node_path.default.relative(process.cwd(), outputPath)}`);
+	}
+});
+async function readFromDirectory(dirPath) {
+	const content = await (0, node_fs_promises.readFile)(node_path.default.join(dirPath, "tokens.json"), "utf-8");
+	const tokensDoc = JSON.parse(content);
+	const resolverPath = node_path.default.join(dirPath, "tokens.resolver.json");
+	const resolverDoc = await tryReadJson(resolverPath);
+	if (resolverDoc) {
+		consola.default.info(`Found resolver: "${node_path.default.relative(process.cwd(), resolverPath)}"`);
+		return (0, _styleframe_figma.fromDTCGResolver)(resolverDoc, { fileLoader: async (ref) => {
+			if (ref === "tokens.json") return tokensDoc;
+			throw new Error(`Resolver references "${ref}" but only "tokens.json" was found`);
+		} });
+	}
+	return (0, _styleframe_figma.fromDTCG)(tokensDoc);
+}
+async function readFromFile(filePath) {
+	const content = await (0, node_fs_promises.readFile)(filePath, "utf-8");
+	const tokensDoc = JSON.parse(content);
+	const resolverPath = filePath.replace(/\.json$/, ".resolver.json");
+	const resolverDoc = await tryReadJson(resolverPath);
+	if (resolverDoc) {
+		consola.default.info(`Auto-detected resolver: "${node_path.default.relative(process.cwd(), resolverPath)}"`);
+		return (0, _styleframe_figma.fromDTCGResolver)(resolverDoc, { fileLoader: async (ref) => {
+			if (ref === node_path.default.basename(filePath)) return tokensDoc;
+			throw new Error(`Resolver references "${ref}" but only "${node_path.default.basename(filePath)}" was provided`);
+		} });
+	}
+	return (0, _styleframe_figma.fromDTCG)(tokensDoc);
+}
+async function tryReadJson(filePath) {
+	try {
+		const content = await (0, node_fs_promises.readFile)(filePath, "utf-8");
+		return JSON.parse(content);
+	} catch {
+		return;
+	}
+}
+//#endregion
+exports.default = import_default;