figma-token 0.1.0 → 0.1.1

package/dist/index.js

@@ -7,17 +7,220 @@ import { Command, InvalidArgumentError } from "commander";
 // src/sync.ts
 import { mkdir, readFile, writeFile } from "fs/promises";
 import { dirname } from "path";
-import {
-  diffTokens,
-  isDesignTokenArray,
-  normalizeFigmaVariables,
-  renderCssVariables,
-  renderDtcgJson,
-  renderScssVariables,
-  renderTailwindTheme,
-  renderTheme,
-  renderTokensJson
-} from "@lee090626/core";
+
+// ../core/dist/index.js
+var supportedTypes = ["color", "spacing", "radius", "borderWidth", "size", "fontSize", "opacity"];
+var dimensionTypes = ["spacing", "radius", "borderWidth", "size", "fontSize"];
+var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var isFiniteNumber = (value) => typeof value === "number" && Number.isFinite(value);
+var isColorValue = (value) => isRecord(value) && ["r", "g", "b", "a"].every((key) => isFiniteNumber(value[key]));
+var words = (value) => value.replace(/%/g, " percent ").replace(/(^|[^A-Za-z0-9])-([0-9])/g, "$1 negative $2").replace(/([0-9])\.([0-9])/g, "$1 dot $2").replace(/([a-z0-9])([A-Z])/g, "$1 $2").match(/[A-Za-z0-9]+/g) ?? [];
+function isDesignTokenArray(value) {
+  return Array.isArray(value) && value.every(
+    (token) => isRecord(token) && typeof token.name === "string" && Array.isArray(token.path) && token.path.length > 0 && token.path.every((part) => typeof part === "string") && supportedTypes.includes(token.type) && (isFiniteNumber(token.value) || isColorValue(token.value))
+  );
+}
+var tokenTypeFromName = (name, resolvedType) => {
+  const first = name.split("/").filter(Boolean)[0]?.toLowerCase().replace(/[-_\s]/g, "");
+  if (resolvedType === "COLOR") return "color";
+  if (resolvedType !== "FLOAT") return void 0;
+  if (first === "spacing") return "spacing";
+  if (first === "radius") return "radius";
+  if (first === "borderwidth") return "borderWidth";
+  if (first === "size") return "size";
+  if (first === "fontsize") return "fontSize";
+  if (first === "opacity") return "opacity";
+  return void 0;
+};
+var tokenTypeFromCollection = (collection, resolvedType) => {
+  if (resolvedType !== "FLOAT" || typeof collection?.name !== "string") return void 0;
+  const name = words(collection.name.toLowerCase());
+  if (name.includes("spacing") || name.includes("gap")) return "spacing";
+  if (name.includes("radius") || name.includes("corner") || name.includes("shape")) return "radius";
+  if (name.includes("borderwidth") || name.includes("border") && name.includes("width") || name.includes("stroke")) return "borderWidth";
+  if (name.includes("fontsize") || name.includes("font") && name.includes("size") || name.includes("text")) return "fontSize";
+  if (name.includes("size")) return "size";
+  if (name.includes("opacity") || name.includes("alpha")) return "opacity";
+  return void 0;
+};
+var to255 = (value) => Math.round(value <= 1 ? value * 255 : value);
+var clamp = (min, value, max) => Math.min(max, Math.max(min, value));
+function pickModeId(collection, values, wanted) {
+  if (wanted && wanted in values) return wanted;
+  const defaultModeId = typeof collection?.defaultModeId === "string" ? collection.defaultModeId : void 0;
+  if (defaultModeId && defaultModeId in values) return defaultModeId;
+  const modes = Array.isArray(collection?.modes) ? collection.modes.filter(isRecord) : [];
+  const firstModeId = modes.map((mode) => mode.modeId).find((modeId) => typeof modeId === "string" && modeId in values);
+  return firstModeId ?? Object.keys(values)[0];
+}
+function resolveValue(variables, variable, modeId, onWarning, seen = /* @__PURE__ */ new Set()) {
+  const values = isRecord(variable.valuesByMode) ? variable.valuesByMode : {};
+  const name = typeof variable.name === "string" ? variable.name : modeId;
+  if (!(modeId in values)) {
+    onWarning?.(`${name} (mode: ${modeId})`, "alias-mode-mismatch");
+    return void 0;
+  }
+  const value = values[modeId];
+  if (!isRecord(value) || value.type !== "VARIABLE_ALIAS" || typeof value.id !== "string") return value;
+  if (seen.has(value.id)) {
+    onWarning?.(name, "alias-cycle");
+    return void 0;
+  }
+  seen.add(value.id);
+  const target = variables[value.id];
+  if (!isRecord(target)) {
+    onWarning?.(name, "alias-target-missing");
+    return void 0;
+  }
+  return resolveValue(variables, target, modeId, onWarning, seen);
+}
+function normalizeValue(value, type) {
+  if (type === "color" && isRecord(value) && ["r", "g", "b"].every((key) => isFiniteNumber(value[key])) && (value.a === void 0 || isFiniteNumber(value.a))) {
+    return {
+      r: clamp(0, to255(value.r), 255),
+      g: clamp(0, to255(value.g), 255),
+      b: clamp(0, to255(value.b), 255),
+      a: clamp(0, typeof value.a === "number" ? value.a : 1, 1)
+    };
+  }
+  if (type !== "color" && isFiniteNumber(value)) return value;
+  return void 0;
+}
+function normalizeFigmaVariables(input, options = {}) {
+  if (!isRecord(input)) return [];
+  const root = isRecord(input.meta) ? input.meta : input;
+  const variables = isRecord(root.variables) ? root.variables : {};
+  const collections = isRecord(root.variableCollections) ? root.variableCollections : {};
+  const result = [];
+  for (const variable of Object.values(variables)) {
+    if (!isRecord(variable) || typeof variable.name !== "string" || variable.deletedButReferenced === true) continue;
+    const collection = typeof variable.variableCollectionId === "string" && isRecord(collections[variable.variableCollectionId]) ? collections[variable.variableCollectionId] : void 0;
+    const typeFromName = tokenTypeFromName(variable.name, variable.resolvedType);
+    const typeFromCollection = tokenTypeFromCollection(collection, variable.resolvedType);
+    const type = typeFromName ?? typeFromCollection;
+    if (!type) {
+      options.onUnsupported?.(variable.name, variable.resolvedType === "FLOAT" ? "unclassified-float" : "unsupported-type", typeof collection?.name === "string" ? collection.name : void 0);
+      continue;
+    }
+    const path = variable.name.split("/").filter(Boolean);
+    if (!path.length) continue;
+    const values = isRecord(variable.valuesByMode) ? variable.valuesByMode : {};
+    const modeId = pickModeId(collection, values, options.modeId);
+    if (!modeId) continue;
+    const warnAlias = (name, reason) => options.onAliasWarning?.(name, reason, typeof collection?.name === "string" ? collection.name : void 0);
+    const selectedValue = values[modeId];
+    const rawValue = resolveValue(variables, variable, modeId, warnAlias);
+    const value = normalizeValue(rawValue, type);
+    if (value === void 0) {
+      if (isRecord(selectedValue) && selectedValue.type === "VARIABLE_ALIAS" && rawValue !== void 0) warnAlias(variable.name, "alias-type-mismatch");
+      continue;
+    }
+    const modes = Array.isArray(collection?.modes) ? collection.modes.filter(isRecord) : [];
+    const mode = modes.find((candidate) => candidate.modeId === modeId);
+    result.push({
+      name: variable.name,
+      path: typeFromName ? path : [type, ...path],
+      type,
+      value,
+      ...typeof collection?.name === "string" ? { collection: collection.name } : {},
+      ...typeof mode?.name === "string" ? { mode: mode.name } : {},
+      ...typeof variable.description === "string" && variable.description ? { description: variable.description } : {}
+    });
+  }
+  return result.sort(compareTokens);
+}
+var identity = (token) => `${token.path.join("/")}\0${token.collection ?? ""}\0${token.mode ?? ""}`;
+var compareTokens = (a, b) => (a.collection ?? "").localeCompare(b.collection ?? "") || (a.mode ?? "").localeCompare(b.mode ?? "") || a.path.join("/").localeCompare(b.path.join("/"));
+function diffTokens(previous, current) {
+  const before = new Map(previous.map((token) => [identity(token), token]));
+  const after = new Map(current.map((token) => [identity(token), token]));
+  const diffs = [];
+  for (const [key, token] of after) {
+    const old = before.get(key);
+    if (!old) diffs.push({ type: "added", token });
+    else if (JSON.stringify(old) !== JSON.stringify(token)) diffs.push({ type: "changed", token });
+  }
+  for (const [key, token] of before) if (!after.has(key)) diffs.push({ type: "removed", token });
+  const order = { added: 0, changed: 1, removed: 2 };
+  return diffs.sort((a, b) => compareTokens(a.token, b.token) || order[a.type] - order[b.type]);
+}
+var renderTokensJson = (tokens) => `${JSON.stringify(tokens, null, 2)}
+`;
+var camelKey = (value, fallback = "default") => {
+  let key = words(value).map((word, index) => index ? word[0].toUpperCase() + word.slice(1).toLowerCase() : word.toLowerCase()).join("") || fallback;
+  if (!/^[A-Za-z_$]/.test(key)) key = `_${key}`;
+  return key;
+};
+var kebabKey = (value) => words(value).map((word) => word.toLowerCase()).join("-");
+var generateVariableName = (token) => {
+  const prefix = token.type === "fontSize" ? "font-size" : token.type === "borderWidth" ? "border-width" : token.type;
+  const first = token.path[0]?.toLowerCase().replace(/[-_\s]/g, "");
+  const hasPrefix = first === prefix.replace(/-/g, "");
+  const rest = token.path.slice(hasPrefix ? 1 : 0).map(kebabKey).filter(Boolean).join("-");
+  return `${prefix}${rest ? `-${rest}` : ""}`;
+};
+var hex = (value) => clamp(0, Math.round(value), 255).toString(16).padStart(2, "0");
+var colorHex = (value) => `#${hex(value.r)}${hex(value.g)}${hex(value.b)}${value.a < 1 ? hex(value.a * 255) : ""}`;
+var formatValue = (token) => {
+  if (token.type === "color") return colorHex(token.value);
+  if (dimensionTypes.includes(token.type)) return `${token.value}px`;
+  return String(token.value);
+};
+var formatThemeValue = (token) => token.type === "opacity" ? token.value : formatValue(token);
+function renderCssLike(tokens, nameFor, wrap) {
+  const lines = tokens.map((token) => `${wrap ? "  " : ""}${nameFor(token)}: ${formatValue(token)};`);
+  return wrap ? `${wrap[0]}
+${lines.join("\n")}
+${wrap[1]}
+` : `${lines.join("\n")}
+`;
+}
+var cssName = (token) => `--${generateVariableName(token)}`;
+var scssName = (token) => `$${generateVariableName(token)}`;
+var renderCssVariables = (tokens) => renderCssLike(tokens, cssName, [":root {", "}"]);
+var renderScssVariables = (tokens) => renderCssLike(tokens, scssName);
+var renderTailwindTheme = (tokens) => renderCssLike(tokens, cssName, ["@theme {", "}"]);
+function dtcgValue(token) {
+  if (token.type === "color") return { $type: "color", $value: colorHex(token.value) };
+  if (dimensionTypes.includes(token.type)) return { $type: "dimension", $value: { value: token.value, unit: "px" } };
+  return { $type: "number", $value: token.value };
+}
+function renderDtcgJson(tokens) {
+  const root = {};
+  for (const token of tokens) {
+    let cursor = root;
+    token.path.forEach((part, index) => {
+      if (index === token.path.length - 1) {
+        if (part in cursor) throw new Error(`Duplicate DTCG path: ${token.path.join(".")}`);
+        cursor[part] = dtcgValue(token);
+      } else {
+        if (part in cursor && !isRecord(cursor[part])) throw new Error(`Duplicate DTCG path: ${token.path.join(".")}`);
+        cursor = cursor[part] ?? (cursor[part] = {});
+      }
+    });
+  }
+  return `${JSON.stringify(root, null, 2)}
+`;
+}
+function renderTheme(tokens, exportName = "theme") {
+  if (!/^[A-Za-z_$][\w$]*$/.test(exportName)) throw new Error(`Invalid TypeScript export name: ${exportName}`);
+  const root = {};
+  for (const token of tokens) {
+    const path = token.path.map((part) => camelKey(part, "token"));
+    let cursor = root;
+    path.forEach((part, index) => {
+      if (index === path.length - 1) {
+        if (part in cursor) throw new Error(`Duplicate theme path: ${path.join(".")}`);
+        cursor[part] = formatThemeValue(token);
+      } else {
+        if (part in cursor && !isRecord(cursor[part])) throw new Error(`Duplicate theme path: ${path.join(".")}`);
+        cursor = cursor[part] ?? (cursor[part] = {});
+      }
+    });
+  }
+  return `export const ${exportName} = ${JSON.stringify(root, null, 2)} as const;
+`;
+}
 
 // src/figma/fetchFigmaVariables.ts
 var FIGMA_API = "https://api.figma.com/v1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "figma-token",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Export Figma Variables to design token files.",
   "license": "MIT",
   "type": "module",
@@ -18,11 +18,11 @@
   ],
   "dependencies": {
     "commander": "^14.0.0",
-    "dotenv": "^17.0.0",
-    "@lee090626/core": "0.1.0"
+    "dotenv": "^17.0.0"
   },
   "devDependencies": {
-    "tsup": "^8.5.0"
+    "tsup": "^8.5.0",
+    "@lee090626/core": "0.1.0"
   },
   "scripts": {
     "build": "tsup",