@muloka/figma-console-mcp 0.5.0 → 0.5.1

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

@@ -1,237 +0,0 @@
-/**
- * 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

@@ -1,335 +0,0 @@
-/**
- * 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.
- */
-import { buildTokenIndex, referenceTargetPath } from "../alias-resolver.js";
-export function formatTailwindV4(doc, opts) {
-    const warnings = [];
-    const files = [];
-    // Whole-document index so set-qualified alias references resolve to the
-    // target token's own path when generating var(--...) names.
-    const tokenIndex = buildTokenIndex(doc, warnings);
-    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, tokenIndex, 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, tokenIndex, warnings),
-            });
-        }
-    }
-    else if (splitByCollection) {
-        for (const set of doc.sets) {
-            files.push({
-                path: filenameFor(opts, set),
-                content: renderTailwindFile([set], set.modes, prefix, tokenIndex, 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, tokenIndex, 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, tokenIndex, 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, tokenIndex, 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, tokenIndex, 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, tokenIndex, 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.
-        // Resolve set-qualified references to the target token's own path.
-        const refPath = referenceTargetPath(value.reference, tokenIndex);
-        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 "";
-}