@mp3wizard/figma-console-mcp 1.25.1 → 1.28.2

package/dist/cloudflare/core/tokens/formatters/tailwind-v3.js

@@ -0,0 +1,237 @@
+/**
+ * Tailwind v3 config formatter.
+ *
+ * Output shape:
+ *
+ *   // tailwind.tokens.js
+ *   module.exports = {
+ *     colors: {
+ *       primary: "#4085F2",
+ *       brand: { primary: "#FF00AA" }
+ *     },
+ *     spacing: {
+ *       md: "16px"
+ *     }
+ *   };
+ *
+ * Designed to be spread into `tailwind.config.js`:
+ *
+ *   const tokens = require('./src/styles/generated/tailwind.tokens.js');
+ *   module.exports = { theme: { extend: tokens } };
+ *
+ * Token-to-namespace mapping mirrors Tailwind v3's theme keys:
+ *
+ *   color/*       → colors.*
+ *   spacing/*     → spacing.*
+ *   font/*        → fontFamily.*
+ *   text/*        → fontSize.*
+ *   radius/*      → borderRadius.*
+ *
+ * Multi-mode tokens flatten to the primary mode (Tailwind v3 doesn't have
+ * a native multi-mode model — dark-mode variants come from `tailwindcss`'s
+ * `darkMode: 'class'` + separate CSS variable files).
+ */
+import { buildTokenIndex, resolveAliasChain } from "../alias-resolver.js";
+export function formatTailwindV3(doc, opts) {
+    const warnings = [];
+    const files = [];
+    const splitByCollection = opts.target.splitByCollection ?? false;
+    // Tailwind v3 config is consumed by Tailwind's build step, which needs
+    // literal values — no runtime alias resolution. Build a full-document
+    // token index so we can resolve alias chains at export time. Even when
+    // splitByCollection writes one file per set, aliases may target tokens
+    // in OTHER sets (e.g. semantic → primitives) so the index must span
+    // every set, not just the file's own.
+    const tokenIndex = buildTokenIndex(doc);
+    if (splitByCollection) {
+        for (const set of doc.sets) {
+            files.push({
+                path: filenameFor(opts, set),
+                content: renderConfigFile([set], opts, tokenIndex, warnings),
+            });
+        }
+    }
+    else {
+        files.push({
+            path: filenameFor(opts),
+            content: renderConfigFile(doc.sets, opts, tokenIndex, warnings),
+        });
+    }
+    return { files, warnings };
+}
+function filenameFor(opts, set) {
+    if (opts.target.filename)
+        return opts.target.filename;
+    if (set)
+        return `${slugify(set.name)}.tailwind.tokens.js`;
+    return "tailwind.tokens.js";
+}
+function slugify(s) {
+    return s
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+}
+function jsKey(segment) {
+    if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(segment))
+        return segment;
+    return JSON.stringify(segment);
+}
+function renderConfigFile(sets, opts, tokenIndex, warnings) {
+    const lines = [];
+    lines.push("/**");
+    lines.push(" * Generated by figma-console-mcp — do not edit by hand.");
+    lines.push(" * Spread this into your tailwind.config.js theme.extend block:");
+    lines.push(" *");
+    lines.push(" *   const tokens = require('./path/to/this-file');");
+    lines.push(" *   module.exports = { theme: { extend: tokens } };");
+    lines.push(" */");
+    lines.push("");
+    // Group tokens by Tailwind theme namespace.
+    const namespaces = {};
+    for (const set of sets) {
+        const primaryMode = pickPrimaryMode(set.modes);
+        for (const token of set.tokens) {
+            const value = token.values[primaryMode];
+            if (!value)
+                continue;
+            const formattedValue = formatTokenValue(value, token, primaryMode, tokenIndex, warnings);
+            if (formattedValue === null)
+                continue;
+            const { namespace, subPath } = mapToNamespace(token);
+            if (!namespaces[namespace])
+                namespaces[namespace] = {};
+            writeIntoTree(namespaces[namespace], subPath, formattedValue);
+        }
+    }
+    lines.push("module.exports = {");
+    const namespaceEntries = Object.entries(namespaces).sort(([a], [b]) => a.localeCompare(b));
+    for (let i = 0; i < namespaceEntries.length; i++) {
+        const [ns, tree] = namespaceEntries[i];
+        lines.push(`  ${jsKey(ns)}: ${renderTree(tree, 1)}${i < namespaceEntries.length - 1 ? "," : ""}`);
+    }
+    lines.push("};");
+    lines.push("");
+    return lines.join("\n");
+}
+function pickPrimaryMode(modes) {
+    return modes.find((m) => /^(default|light|value)$/i.test(m)) ?? modes[0];
+}
+function mapToNamespace(token) {
+    const slug = token.path.map(slugify);
+    if (slug.length === 0)
+        return { namespace: "extend", subPath: [] };
+    // First-segment aliases that should be re-namespaced to Tailwind theme keys.
+    const NAMESPACE_MAP = {
+        color: "colors",
+        colors: "colors",
+        spacing: "spacing",
+        space: "spacing",
+        radius: "borderRadius",
+        "border-radius": "borderRadius",
+        rounded: "borderRadius",
+        font: "fontFamily",
+        "font-family": "fontFamily",
+        text: "fontSize",
+        "font-size": "fontSize",
+        "font-weight": "fontWeight",
+        shadow: "boxShadow",
+        "box-shadow": "boxShadow",
+        opacity: "opacity",
+        "z-index": "zIndex",
+        "line-height": "lineHeight",
+        leading: "lineHeight",
+        tracking: "letterSpacing",
+        "letter-spacing": "letterSpacing",
+    };
+    if (NAMESPACE_MAP[slug[0]]) {
+        return { namespace: NAMESPACE_MAP[slug[0]], subPath: slug.slice(1) };
+    }
+    // Heuristic by type when no first-segment match.
+    if (token.type === "color")
+        return { namespace: "colors", subPath: slug };
+    if (token.type === "dimension")
+        return { namespace: "spacing", subPath: slug };
+    if (token.type === "fontFamily")
+        return { namespace: "fontFamily", subPath: slug };
+    if (token.type === "fontWeight")
+        return { namespace: "fontWeight", subPath: slug };
+    // Anything else: dump under extend.{path}
+    return { namespace: "extend", subPath: slug };
+}
+function writeIntoTree(tree, path, value) {
+    if (path.length === 0)
+        return;
+    let cursor = tree;
+    for (let i = 0; i < path.length - 1; i++) {
+        const segment = path[i];
+        const next = cursor[segment];
+        if (!next || typeof next === "string") {
+            const newNode = {};
+            cursor[segment] = newNode;
+            cursor = newNode;
+        }
+        else {
+            cursor = next;
+        }
+    }
+    const leafKey = path[path.length - 1];
+    cursor[leafKey] = value;
+}
+function renderTree(tree, indent) {
+    const ind = "  ".repeat(indent);
+    const innerInd = "  ".repeat(indent + 1);
+    const entries = [];
+    const sortedKeys = Object.keys(tree).sort();
+    for (const key of sortedKeys) {
+        const value = tree[key];
+        const k = jsKey(key);
+        if (typeof value === "string") {
+            entries.push(`${innerInd}${k}: ${value}`);
+        }
+        else {
+            entries.push(`${innerInd}${k}: ${renderTree(value, indent + 1)}`);
+        }
+    }
+    if (entries.length === 0)
+        return "{}";
+    return `{\n${entries.join(",\n")},\n${ind}}`;
+}
+/**
+ * Format a token value as a JavaScript literal (quoted string for most
+ * things). Resolves alias chains to their literal target value via the
+ * document-wide token index — Tailwind v3 config is read at Tailwind's
+ * build time and needs concrete values (no runtime cascade).
+ *
+ * Returns null only for cross-library aliases or genuinely empty values,
+ * after emitting a warning explaining what got skipped.
+ */
+function formatTokenValue(value, token, mode, tokenIndex, warnings) {
+    let effective = value;
+    if (value.reference) {
+        effective = resolveAliasChain(value, mode, tokenIndex);
+        if (!effective) {
+            const bare = value.reference.replace(/^\{|\}$/g, "");
+            const reason = bare.startsWith("__library:") || bare === "unknown"
+                ? "cross-library alias"
+                : "alias target not found in any set";
+            warnings.push(`Skipped ${token.path.join(".")} in Tailwind v3 — ${reason}: ${value.reference}.`);
+            return null;
+        }
+    }
+    if (!effective || effective.literal === undefined || effective.literal === null) {
+        return null;
+    }
+    if (typeof effective.literal === "number") {
+        if (token.type === "dimension")
+            return JSON.stringify(`${effective.literal}px`);
+        return String(effective.literal);
+    }
+    if (typeof effective.literal === "string")
+        return JSON.stringify(effective.literal);
+    if (typeof effective.literal === "boolean")
+        return String(effective.literal);
+    // Composite: emit as JSON object literal
+    return JSON.stringify(effective.literal);
+}

package/dist/cloudflare/core/tokens/formatters/tailwind-v4.js

@@ -0,0 +1,330 @@
+/**
+ * Tailwind v4 `@theme` block formatter.
+ *
+ * Tailwind v4 introduced CSS-first configuration: instead of a JS
+ * `tailwind.config.js`, you write tokens directly into your CSS with an
+ * `@theme inline { ... }` block. Tailwind processes that block to generate
+ * utility classes (`bg-primary`, `text-foreground`, etc.) at build time.
+ *
+ * Output shape:
+ *
+ *   @theme inline {
+ *     --color-primary: #4085F2;
+ *     --spacing-md: 16px;
+ *     --font-family-sans: "Inter", sans-serif;
+ *   }
+ *
+ *   .dark {
+ *     --color-primary: #5599FF;
+ *   }
+ *
+ * Token-to-Tailwind-namespace mapping follows the canonical Tailwind v4
+ * convention (see https://tailwindcss.com/docs/theme):
+ *
+ *   color/*       → --color-*       (maps to bg-*, text-*, border-*, etc.)
+ *   spacing/*     → --spacing-*
+ *   radius/*      → --radius-*      (maps to rounded-*)
+ *   font/*        → --font-*        (font-family namespace)
+ *   text/*        → --text-*        (font-size namespace)
+ *   font-weight/* → --font-weight-*
+ *   tracking/*    → --tracking-*
+ *   leading/*     → --leading-*
+ *   shadow/*      → --shadow-*
+ *
+ * Tokens that don't fit a known Tailwind namespace get emitted with their
+ * path verbatim (with prefix if configured). They're still valid CSS vars
+ * — they just don't generate Tailwind utility classes.
+ */
+export function formatTailwindV4(doc, opts) {
+    const warnings = [];
+    const files = [];
+    const splitByMode = opts.target.splitByMode ?? false;
+    const splitByCollection = opts.target.splitByCollection ?? false;
+    const prefix = opts.target.prefix ?? "";
+    if (splitByMode && splitByCollection) {
+        for (const set of doc.sets) {
+            for (const mode of set.modes) {
+                files.push({
+                    path: filenameFor(opts, set, mode),
+                    content: renderTailwindFile(doc.sets.filter((s) => s.name === set.name), [mode], prefix, warnings),
+                });
+            }
+        }
+    }
+    else if (splitByMode) {
+        const allModes = new Set();
+        for (const set of doc.sets)
+            for (const m of set.modes)
+                allModes.add(m);
+        for (const mode of allModes) {
+            files.push({
+                path: filenameFor(opts, undefined, mode),
+                content: renderTailwindFile(doc.sets, [mode], prefix, warnings),
+            });
+        }
+    }
+    else if (splitByCollection) {
+        for (const set of doc.sets) {
+            files.push({
+                path: filenameFor(opts, set),
+                content: renderTailwindFile([set], set.modes, prefix, warnings),
+            });
+        }
+    }
+    else {
+        // Single file with everything.
+        const allModes = new Set();
+        for (const set of doc.sets)
+            for (const m of set.modes)
+                allModes.add(m);
+        files.push({
+            path: filenameFor(opts),
+            content: renderTailwindFile(doc.sets, [...allModes], prefix, warnings),
+        });
+    }
+    return { files, warnings };
+}
+function filenameFor(opts, set, mode) {
+    if (opts.target.filename)
+        return opts.target.filename;
+    const parts = [];
+    if (set)
+        parts.push(slugify(set.name));
+    if (mode)
+        parts.push(slugify(mode));
+    if (parts.length === 0)
+        parts.push("tailwind.theme");
+    return `${parts.join(".")}.css`;
+}
+function slugify(s) {
+    return s
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+}
+/**
+ * Render a Tailwind v4 CSS file. The "primary" mode (first in the list)
+ * goes into `@theme inline { ... }` — this is what Tailwind reads to
+ * generate utility classes. Additional modes go under standard CSS
+ * selectors (`.dark`, `[data-theme="..."]`) so the user can swap modes
+ * at runtime.
+ */
+function renderTailwindFile(sets, modes, prefix, warnings) {
+    const lines = [];
+    lines.push("/* Generated by figma-console-mcp — do not edit by hand */");
+    lines.push("");
+    // Decide which mode is the "primary" (lives inside @theme).
+    const primaryMode = modes.find((m) => /^(default|light|value)$/i.test(m)) ?? modes[0];
+    // @theme inline { ... } block for the primary mode.
+    lines.push("@theme inline {");
+    for (const set of sets) {
+        if (!set.modes.includes(primaryMode))
+            continue;
+        for (const token of set.tokens) {
+            const value = token.values[primaryMode];
+            if (!value)
+                continue;
+            emitTailwindTokenLines(token, value, prefix, lines, warnings);
+        }
+    }
+    lines.push("}");
+    lines.push("");
+    // Mode variants under standard CSS selectors.
+    for (const mode of modes) {
+        if (mode === primaryMode)
+            continue;
+        lines.push(`${selectorFor(mode)} {`);
+        for (const set of sets) {
+            if (!set.modes.includes(mode))
+                continue;
+            for (const token of set.tokens) {
+                const value = token.values[mode];
+                if (!value)
+                    continue;
+                emitTailwindTokenLines(token, value, prefix, lines, warnings);
+            }
+        }
+        lines.push("}");
+        lines.push("");
+    }
+    return lines.join("\n");
+}
+function selectorFor(mode) {
+    const lower = mode.toLowerCase();
+    if (lower === "dark")
+        return ".dark";
+    return `[data-theme="${slugify(mode)}"]`;
+}
+/**
+ * Emit one or more CSS custom property declarations for a token, using
+ * Tailwind v4's namespace conventions where possible.
+ */
+function emitTailwindTokenLines(token, value, prefix, out, warnings) {
+    const cssName = `--${prefix}${pathToTailwindName(token.path, token.type)}`;
+    if (value.reference) {
+        // Cross-library alias: skip with a comment.
+        const bareRef = value.reference.replace(/^\{|\}$/g, "");
+        const libMatch = bareRef.match(/^__library:(.+)$/);
+        if (libMatch || bareRef === "unknown") {
+            const originalId = libMatch ? libMatch[1] : "unknown";
+            warnings.push(`Skipped ${token.path.join(".")} in Tailwind v4 — references cross-library variable ${originalId}.`);
+            out.push(`  /* ${cssName}: skipped — cross-library alias to ${originalId} */`);
+            return;
+        }
+        // Local alias → var() reference using the same namespace mapping.
+        const refPath = bareRef.split(".");
+        const targetName = pathToTailwindName(refPath, token.type);
+        out.push(`  ${cssName}: var(--${prefix}${targetName});`);
+        return;
+    }
+    if (value.literal === undefined || value.literal === null) {
+        warnings.push(`Token ${token.path.join(".")} has no value — emitting nothing.`);
+        return;
+    }
+    // Composite tokens: typography expands, shadow renders as CSS string.
+    if (token.type === "typography" && typeof value.literal === "object") {
+        const t = value.literal;
+        for (const subField of ["fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing"]) {
+            if (t[subField] !== undefined) {
+                out.push(`  ${cssName}-${kebab(subField)}: ${formatValue(t[subField], token.type)};`);
+            }
+        }
+        return;
+    }
+    if (token.type === "shadow" && typeof value.literal === "object") {
+        const css = renderShadow(value.literal);
+        if (css)
+            out.push(`  ${cssName}: ${css};`);
+        return;
+    }
+    out.push(`  ${cssName}: ${formatValue(value.literal, token.type)};`);
+}
+/**
+ * Map a token path to a Tailwind v4 CSS custom property name.
+ *
+ * Strategy:
+ *   1. If the path's leading segment matches a Tailwind namespace
+ *      (color, spacing, radius, font, text, etc.), emit it as-is — that
+ *      tells Tailwind to generate the corresponding utility class family.
+ *   2. Otherwise, prepend our type-based namespace heuristically.
+ *   3. Always slugify each segment for valid CSS identifiers.
+ *
+ * Examples:
+ *   ["color", "primary"]              → "color-primary"        (bg-primary works)
+ *   ["spacing", "md"]                 → "spacing-md"           (p-md works)
+ *   ["radius", "lg"]                  → "radius-lg"            (rounded-lg works)
+ *   ["text", "base", "font-size"]     → "text-base-font-size"
+ *   ["semantic", "bg"]  (color type)  → "color-semantic-bg"    (heuristic prepend)
+ */
+function pathToTailwindName(path, type) {
+    // Tailwind v4's known namespaces (https://tailwindcss.com/docs/theme).
+    const KNOWN = new Set([
+        "color",
+        "colors",
+        "spacing",
+        "radius",
+        "rounded",
+        "shadow",
+        "font",
+        "text",
+        "font-weight",
+        "tracking",
+        "leading",
+        "blur",
+        "ease",
+        "animate",
+        "breakpoint",
+        "container",
+        "aspect",
+    ]);
+    // Aliases that normalize to a canonical namespace.
+    const NORMALIZE = {
+        colors: "color",
+        rounded: "radius",
+    };
+    const slug = path.map(slugify);
+    if (slug.length === 0)
+        return "token";
+    // First-segment match: easy case, normalize plural → singular and emit.
+    if (KNOWN.has(slug[0])) {
+        const head = NORMALIZE[slug[0]] ?? slug[0];
+        return [head, ...slug.slice(1)].join("-");
+    }
+    // Determine the target Tailwind namespace from token type.
+    const ns = type === "color"
+        ? "color"
+        : type === "dimension" || type === "number"
+            ? "spacing"
+            : type === "fontFamily"
+                ? "font"
+                : type === "fontWeight"
+                    ? "font-weight"
+                    : null;
+    if (!ns)
+        return slug.join("-");
+    // Dedup: if the path already contains the target namespace (e.g. a path
+    // like `theme.color.header.background` for a color token would otherwise
+    // produce `color-theme-color-header-background`), strip the duplicate
+    // segment so the result reads cleanly. Match both the canonical name
+    // and any alias that normalizes to it.
+    const dupAliases = new Set([ns, ...Object.entries(NORMALIZE)
+            .filter(([, target]) => target === ns)
+            .map(([alias]) => alias)]);
+    const dedupedTail = slug.filter((s) => !dupAliases.has(s));
+    return [ns, ...dedupedTail].join("-");
+}
+function kebab(s) {
+    return s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function formatValue(value, type) {
+    if (typeof value === "number") {
+        if (type === "dimension")
+            return `${value}px`;
+        return String(value);
+    }
+    if (typeof value === "string") {
+        if (type === "color")
+            return value;
+        if (type === "fontFamily" || type === "string") {
+            return needsQuoting(value) ? JSON.stringify(value) : value;
+        }
+        return value;
+    }
+    if (typeof value === "boolean")
+        return String(value);
+    return JSON.stringify(value);
+}
+function needsQuoting(s) {
+    if (/^["']/.test(s))
+        return false;
+    if (/^[\d.]+([a-z%]+)?$/.test(s))
+        return false;
+    if (/^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(s))
+        return false;
+    return true;
+}
+function renderShadow(shadow) {
+    if (Array.isArray(shadow)) {
+        return shadow.map(renderShadow).filter(Boolean).join(", ");
+    }
+    if (!shadow || typeof shadow !== "object")
+        return null;
+    const s = shadow;
+    const inset = s.inset ? "inset " : "";
+    const x = withPx(s.offsetX);
+    const y = withPx(s.offsetY);
+    const blur = withPx(s.blur);
+    const spread = s.spread !== undefined ? ` ${withPx(s.spread)}` : "";
+    const color = s.color;
+    if (!x || !y || !blur || typeof color !== "string")
+        return null;
+    return `${inset}${x} ${y} ${blur}${spread} ${color}`;
+}
+function withPx(v) {
+    if (typeof v === "number")
+        return `${v}px`;
+    if (typeof v === "string")
+        return v;
+    return "";
+}