@controlfront/detect 0.0.1

package/src/utils/buildDeclaredCssVars.js

@@ -0,0 +1,185 @@
+import fs from "fs";
+import postcss from "postcss";
+import safeParser from "postcss-safe-parser";
+import { buildDeclaredJson } from "./buildDeclaredJson.js";
+
+const DEBUG = false;
+
+// Helper to extract theme name from a selector
+function extractThemeName(selector) {
+  selector = selector.trim();
+  if (selector === ":root") {
+    return null;
+  } else if (selector.startsWith(".")) {
+    return selector.substring(1);
+  } else if (selector.startsWith(":")) {
+    return selector.substring(1);
+  }
+  return null;
+}
+
+// Recursive function to process nodes and extract CSS vars
+function processNodes(nodes, theme = null, tokens = [], file) {
+  nodes.forEach((node) => {
+    if (node.type === "rule") {
+      const currentTheme = extractThemeName(node.selector) ?? theme;
+      node.walkDecls((decl) => {
+        if (decl.prop.startsWith("--") && decl.value) {
+          tokens.push({
+            name: decl.prop.slice(2),
+            cssVar: decl.prop,
+            value: decl.value.trim().replace(/^['"]|['"]$/g, ""),
+            type: null,
+            theme: currentTheme,
+            source: "css",
+            file,
+            line: decl.source?.start?.line || null,
+          });
+        } else if (DEBUG && decl.prop.startsWith("--")) {
+          console.warn(`[buildDeclaredCssVars] Skipped CSS var with missing value in ${file}: ${decl.prop}`);
+        }
+      });
+    } else if (node.type === "atrule") {
+      if (node.name === "theme" && node.params.trim() === "inline") {
+        // @theme inline { ... }
+        processNodes(node.nodes || [], "tailwind-inline", tokens, file);
+      } else {
+        if (node.nodes) {
+          processNodes(node.nodes, theme, tokens, file);
+        }
+      }
+    }
+  });
+  return tokens;
+}
+
+// Unified parsing function using PostCSS AST
+function parseCssVarsWithPostcss(content, file) {
+  const tokens = [];
+  let root;
+  try {
+    root = postcss.parse(content, { from: file, parser: safeParser });
+  } catch (e) {
+    // If parsing fails, return empty tokens
+    return tokens;
+  }
+  return processNodes(root.nodes, null, tokens, file);
+}
+
+// Main function to build declared CSS variable tokens from project files
+export async function buildDeclaredCssVars({ projectRoot, files }) {
+  if (!files?.length) return [];
+  let declaredJsonTokens = [];
+  try {
+    const maybeTokens = await buildDeclaredJson({ projectRoot, files });
+    declaredJsonTokens = Array.isArray(maybeTokens) ? maybeTokens : [];
+  } catch {
+    declaredJsonTokens = [];
+  }
+
+  // Fallback to ensure cssVar and theme are properly normalized
+  for (const t of declaredJsonTokens) {
+    if (!t.cssVar && t.name) {
+      const normalizedName = t.name.replace(/\./g, "-");
+      t.cssVar = normalizedName.startsWith("--") ? normalizedName : `--${normalizedName}`;
+    }
+    if (!t.theme || t.theme === "root") {
+      t.theme = "default";
+    }
+  }
+
+  const allTokens = [];
+  for (const file of files) {
+    const content = await fs.promises.readFile(file, "utf8");
+    const parsedTokens = parseCssVarsWithPostcss(content, file);
+    allTokens.push(...parsedTokens);
+  }
+
+  // Normalize themes for all tokens
+  for (const t of allTokens) {
+    if (t.theme == null || t.theme === "root") t.theme = "default";
+  }
+
+  // Consistent key normalization
+  const normalizeKey = (cssVar, theme) => {
+    if (!cssVar) return "";
+    return `${cssVar.trim().toLowerCase()}|${(theme || "default").trim().toLowerCase()}`;
+  };
+
+  // Build declaredJsonGroupMap using normalized keys
+  const declaredJsonGroupMap = declaredJsonTokens.reduce((map, token) => {
+    const key = normalizeKey(token.cssVar, token.theme);
+    if (!map.has(key)) map.set(key, []);
+    map.get(key).push(token);
+    return map;
+  }, new Map());
+
+  const normalizeValue = (v) => {
+    if (typeof v !== "string") return v;
+    const s = v
+      .replace(/^['"]|['"]$/g, "")
+      .replace(/[;]+$/, "")
+      .replace(/\s+/g, " ")
+      .trim()
+      .toLowerCase();
+    if (/^#[0-9a-f]{3}$/.test(s)) {
+      return "#" + s[1] + s[1] + s[2] + s[2] + s[3] + s[3];
+    }
+    return s;
+  };
+
+  for (const token of allTokens) {
+    const themeKey = token.theme || "default";
+    const exactKey = normalizeKey(token.cssVar, themeKey);
+
+    // Exact theme match first
+    let candidates = declaredJsonGroupMap.get(exactKey) || [];
+
+    // Fallback to default only for default theme
+    if (!candidates.length && themeKey === "default") {
+      candidates =
+        declaredJsonGroupMap.get(normalizeKey(token.cssVar, "default")) ||
+        declaredJsonGroupMap.get(normalizeKey(token.cssVar, null)) ||
+        [];
+    }
+
+    let matchedJson = null;
+    if (candidates.length) {
+      const eqVal = (t) => normalizeValue(t.value) === normalizeValue(token.value);
+      matchedJson = candidates.find(eqVal) || candidates[0] || null;
+    }
+
+    token.token_backed = matchedJson;
+  }
+
+  // Group tokens by cssVar and theme
+  const groupedMap = new Map();
+  for (const token of allTokens) {
+    const cssVar = token.cssVar;
+    const name = token.name;
+    const themeKey = token.theme === null ? "default" : token.theme;
+    if (!groupedMap.has(cssVar)) {
+      groupedMap.set(cssVar, {
+        cssVar,
+        name,
+        themes: {},
+      });
+    }
+    const group = groupedMap.get(cssVar);
+    if (!group.themes[themeKey]) {
+      group.themes[themeKey] = { entries: [] };
+    }
+    group.themes[themeKey].entries.push({
+      value: token.value,
+      file: token.file,
+      source: token.source,
+      token_backed: token.token_backed,
+      line: token.line,
+    });
+  }
+
+  const result = Array.from(groupedMap.values());
+
+  if (DEBUG) console.log(`[buildDeclaredCssVars] Found ${allTokens.length} CSS variable tokens.`);
+  return result;
+}

package/src/utils/buildDeclaredJson.js

@@ -0,0 +1,214 @@
+import fs from "fs";
+import path from "path";
+
+/**
+ * Flatten W3C / Style Dictionary token JSON into a simple array.
+ */
+function flattenTokens(input, filePath = "", prefix = "") {
+  if (!input || typeof input !== "object") return [];
+
+  // Determine the correct root object to traverse
+  const root = (() => {
+    // Start from tokens if present, otherwise the whole input
+    const base = "tokens" in input && typeof input.tokens === "object" ? input.tokens : input;
+
+    // Preserve top-level modes / $themes even if tokens key exists
+    const merged = { ...base };
+    if (input.modes && typeof input.modes === "object") {
+      merged.modes = input.modes;
+    }
+    if (input.$themes && typeof input.$themes === "object") {
+      merged.$themes = input.$themes;
+    }
+    return merged;
+  })();
+
+  const out = [];
+  // The deduplication map is now declared inside each flattenTokens call,
+  // so deduplication is per-file and not across files.
+  const seen = new Map(); // dedupeKey -> token object
+
+  function inferType(name, explicitType) {
+    if (explicitType) return explicitType;
+    if (name.startsWith("color.")) return "color";
+    if (name.startsWith("space.") || name.startsWith("size.")) return "dimension";
+    if (name.startsWith("radius.") || name.startsWith("border.")) return "dimension";
+    if (name.startsWith("font-size.")) return "dimension";
+    if (name.startsWith("font.")) return "fontFamily";
+    return null;
+  }
+
+  for (const [key, val] of Object.entries(root)) {
+    const pathName = prefix ? `${prefix}.${key}` : key;
+
+    // Handle W3C $themes or Style Dictionary modes
+    if ((key === "$themes" || key === "modes") && val && typeof val === "object") {
+      for (const [themeName, themeTokens] of Object.entries(val)) {
+        if (!themeTokens || typeof themeTokens !== "object") continue;
+        for (const [themeTokenKey, themeTokenVal] of Object.entries(themeTokens)) {
+          if (!themeTokenVal || typeof themeTokenVal !== "object") continue;
+          const name = prefix ? `${prefix}.${themeTokenKey}` : themeTokenKey;
+          const theme = themeName || "default";
+
+          if ("$value" in themeTokenVal || "value" in themeTokenVal) {
+            const type = inferType(name, themeTokenVal.$type ?? themeTokenVal.type ?? null);
+            // Always push tokens from themes/modes without deduplication across files
+            out.push({
+              name,
+              value: themeTokenVal.$value ?? themeTokenVal.value,
+              type,
+              cssVar: `--${name.replace(/\./g, "-")}`,
+              source: "json",
+              file: filePath,
+              theme,
+            });
+          } else {
+            const nestedTokens = flattenTokens(themeTokenVal, filePath, name);
+            nestedTokens.forEach(t => {
+              t.theme = theme;
+              out.push(t);
+            });
+          }
+        }
+      }
+    }
+    // Handle CSS-like theme selectors e.g. .dark, .light
+    else if (
+      key.startsWith(".") &&
+      val && typeof val === "object"
+    ) {
+      const themeName = key.slice(1) || "default";
+      const flattenedThemeTokens = flattenTokens(val, filePath, prefix);
+      flattenedThemeTokens.forEach(token => {
+        token.theme = themeName;
+      });
+      // Do not deduplicate theme selector tokens by value or name+theme.
+      // This ensures all dark-only tokens and multiple per-theme file entries are preserved.
+      flattenedThemeTokens.forEach(token => {
+        out.push(token);
+      });
+    }
+    // W3C format ($value/$type)
+    else if (val && typeof val === "object" && ("$value" in val || "value" in val)) {
+      const name = pathName;
+      const theme = "default";
+      const dedupeKey = `${name}::${theme}::${filePath}`;
+      const type = inferType(name, val.$type ?? val.type ?? null);
+      const newToken = {
+        name,
+        value: val.$value ?? val.value,
+        type,
+        cssVar: `--${name.replace(/\./g, "-")}`,
+        source: "json",
+        file: filePath,
+        theme,
+      };
+      if (seen.has(dedupeKey)) {
+        // Merge logic for default tokens
+        const existing = seen.get(dedupeKey);
+        if (existing.file !== newToken.file) {
+          const files = new Set((existing.file + "," + newToken.file).split(","));
+          existing.file = Array.from(files).join(",");
+        }
+        if (existing.value === undefined && newToken.value !== undefined) {
+          existing.value = newToken.value;
+        }
+        if (existing.type === undefined && newToken.type !== undefined) {
+          existing.type = newToken.type;
+        }
+      } else {
+        out.push(newToken);
+        seen.set(dedupeKey, newToken);
+      }
+    } else if (val && typeof val === "object") {
+      const nestedTokens = flattenTokens(val, filePath, pathName);
+      nestedTokens.forEach(t => {
+        t.theme = t.theme || "default";
+        // For nested tokens, retain deduplication per file for non-theme tokens.
+        const dedupeKey = `${t.name}::${t.theme}::${filePath}`;
+        if (seen.has(dedupeKey)) {
+          // Merge logic for nested tokens
+          const existing = seen.get(dedupeKey);
+          if (existing.file !== t.file) {
+            const files = new Set((existing.file + "," + t.file).split(","));
+            existing.file = Array.from(files).join(",");
+          }
+          if (existing.value === undefined && t.value !== undefined) {
+            existing.value = t.value;
+          }
+          if (existing.type === undefined && t.type !== undefined) {
+            existing.type = t.type;
+          }
+        } else {
+          out.push(t);
+          seen.set(dedupeKey, t);
+        }
+      });
+    }
+  }
+
+  // Alias expansion logic
+  const expanded = [...out];
+  for (const t of out) {
+    let refName = null;
+    if (t.name.startsWith("alias.")) {
+      refName = t.name.replace(/^alias\./, "");
+    } else if (typeof t.value === "string") {
+      const match = t.value.match(/^\{([^}]+)\}$/);
+      if (match) {
+        refName = match[1];
+      }
+    }
+    if (refName) {
+      expanded.push({
+        name: t.name.startsWith("alias.") ? refName : t.name,
+        cssVar: t.cssVar.replace(/^--alias-/, "--"),
+        value: `var(--${refName.replace(/\./g, "-")})`,
+        resolvedFrom: t.name,
+      });
+    }
+  }
+
+  return expanded;
+}
+
+/**
+ * Build declared_json model for ControlFront.
+ *
+ * Note: This implementation ensures that all dark mode tokens and
+ * multiple per-theme file entries are preserved in the output array,
+ * even if they have the same name, theme, and value, but come from different files.
+ * Deduplication now happens per file, not across files, and value-based deduplication
+ * for theme tokens has been removed.
+ *
+ * File discovery now happens in scan.js.
+ */
+export async function buildDeclaredJson({ projectRoot, files } = {}) {
+  const root = projectRoot || process.cwd();
+  const searchFiles = ["tokens.json", "tokens.w3c.json"];
+  const allFiles = Array.isArray(files) ? files : [];
+
+  const foundFiles = allFiles.filter(f => searchFiles.includes(path.basename(f)));
+  if (foundFiles.length === 0) return [];
+
+  const tokens = [];
+  for (const file of foundFiles) {
+    try {
+      // Normalize to absolute path
+      const absFile = path.resolve(file);
+      const rawContent = await fs.promises.readFile(absFile, "utf8");
+      const parsed = JSON.parse(rawContent);
+      const flattened = flattenTokens(parsed, path.relative(root, absFile));
+      if (Array.isArray(flattened)) {
+        tokens.push(...flattened);
+      }
+    } catch (err) {
+      console.warn(`⚠️ Failed to parse ${file}:`, err.message);
+      continue;
+    }
+  }
+
+  if (!Array.isArray(tokens)) return [];
+
+  return tokens;
+}