@fragments-sdk/cli 0.2.2

package/src/service/ast-utils.ts

@@ -0,0 +1,444 @@
+/**
+ * AST Utilities
+ *
+ * Provides AST-based style extraction and patching capabilities using Babel.
+ * Used for precisely locating style definitions in source files and generating
+ * accurate patches for token replacement.
+ */
+
+import { parse, type ParserOptions } from "@babel/parser";
+import traverse, { type NodePath } from "@babel/traverse";
+import generate from "@babel/generator";
+import * as t from "@babel/types";
+
+/**
+ * Style location information
+ */
+export interface StyleLocation {
+  /** Source file path */
+  file: string;
+
+  /** Line number (1-indexed) */
+  line: number;
+
+  /** Column number (0-indexed) */
+  column: number;
+
+  /** End line number */
+  endLine?: number;
+
+  /** End column number */
+  endColumn?: number;
+
+  /** Type of style definition */
+  type: "inline" | "styled-components" | "emotion" | "css-module" | "css-prop";
+
+  /** Property name (camelCase for inline, kebab-case for CSS) */
+  property: string;
+
+  /** Current value at this location */
+  value: string;
+
+  /** Full text of the style definition for context */
+  context?: string;
+}
+
+/**
+ * Babel parser options for React/TypeScript files
+ */
+const PARSER_OPTIONS: ParserOptions = {
+  sourceType: "module",
+  plugins: [
+    "jsx",
+    "typescript",
+    ["decorators", { decoratorsBeforeExport: true }],
+    "classProperties",
+    "classPrivateProperties",
+    "classPrivateMethods",
+    "exportDefaultFrom",
+    "exportNamespaceFrom",
+    "dynamicImport",
+    "nullishCoalescingOperator",
+    "optionalChaining",
+    "objectRestSpread",
+  ],
+};
+
+/**
+ * Extract style locations from a React/TypeScript source file
+ *
+ * Finds style definitions in:
+ * - Inline style={{...}} attributes
+ * - styled-components template literals
+ * - Emotion css={{...}} or css`...`
+ * - CSS module className references (returns the class reference, not styles)
+ */
+export function extractStyleLocations(
+  sourceCode: string,
+  filePath: string
+): StyleLocation[] {
+  const locations: StyleLocation[] = [];
+
+  let ast: t.File;
+  try {
+    ast = parse(sourceCode, PARSER_OPTIONS);
+  } catch (error) {
+    console.error(`Failed to parse ${filePath}:`, error);
+    return locations;
+  }
+
+  traverse(ast, {
+    // Handle inline style={{...}} and Emotion css={{...}}
+    JSXAttribute(path) {
+      const attrName = t.isJSXIdentifier(path.node.name) ? path.node.name.name : null;
+
+      // Handle style={{...}}
+      if (attrName === "style") {
+        const value = path.node.value;
+        if (t.isJSXExpressionContainer(value)) {
+          const expr = value.expression;
+          if (t.isObjectExpression(expr)) {
+            extractFromObjectExpression(expr, path, filePath, "inline", locations);
+          }
+        }
+        return;
+      }
+
+      // Handle Emotion css={{...}} prop
+      if (attrName === "css") {
+        const value = path.node.value;
+        if (t.isJSXExpressionContainer(value)) {
+          const expr = value.expression;
+          if (t.isObjectExpression(expr)) {
+            extractFromObjectExpression(expr, path, filePath, "emotion", locations);
+          }
+        }
+        return;
+      }
+    },
+
+    // Handle styled-components: styled.div`...`
+    TaggedTemplateExpression(path) {
+      const tag = path.node.tag;
+
+      // Check for styled.element or styled(Component)
+      const isStyledCall =
+        (t.isMemberExpression(tag) &&
+          t.isIdentifier(tag.object, { name: "styled" })) ||
+        (t.isCallExpression(tag) &&
+          t.isIdentifier(tag.callee, { name: "styled" }));
+
+      // Check for css`` from emotion or styled-components
+      const isCssCall = t.isIdentifier(tag, { name: "css" });
+
+      if (isStyledCall || isCssCall) {
+        extractFromTemplateLiteral(
+          path.node.quasi,
+          path,
+          filePath,
+          "styled-components",
+          locations
+        );
+      }
+    },
+  });
+
+  return locations;
+}
+
+/**
+ * Extract style properties from an object expression
+ */
+function extractFromObjectExpression(
+  obj: t.ObjectExpression,
+  path: NodePath,
+  filePath: string,
+  type: StyleLocation["type"],
+  locations: StyleLocation[]
+): void {
+  for (const prop of obj.properties) {
+    if (!t.isObjectProperty(prop)) continue;
+
+    // Get property name
+    let propertyName: string | null = null;
+    if (t.isIdentifier(prop.key)) {
+      propertyName = prop.key.name;
+    } else if (t.isStringLiteral(prop.key)) {
+      propertyName = prop.key.value;
+    }
+
+    if (!propertyName) continue;
+
+    // Get property value
+    let value: string | null = null;
+    if (t.isStringLiteral(prop.value)) {
+      value = prop.value.value;
+    } else if (t.isNumericLiteral(prop.value)) {
+      value = String(prop.value.value);
+    } else if (t.isTemplateLiteral(prop.value) && prop.value.quasis.length === 1) {
+      value = prop.value.quasis[0].value.raw;
+    }
+
+    if (!value) continue;
+
+    const loc = prop.loc;
+    if (!loc) continue;
+
+    locations.push({
+      file: filePath,
+      line: loc.start.line,
+      column: loc.start.column,
+      endLine: loc.end.line,
+      endColumn: loc.end.column,
+      type,
+      property: propertyName,
+      value,
+    });
+  }
+}
+
+/**
+ * Extract style properties from a template literal (styled-components, emotion css``)
+ */
+function extractFromTemplateLiteral(
+  template: t.TemplateLiteral,
+  path: NodePath,
+  filePath: string,
+  type: StyleLocation["type"],
+  locations: StyleLocation[]
+): void {
+  // Combine all quasis to get the full CSS text
+  const cssText = template.quasis.map((q) => q.value.raw).join("${...}");
+
+  // Parse CSS properties using regex (simplified parser)
+  const propertyPattern = /([a-z-]+)\s*:\s*([^;{}]+);/gi;
+  let match;
+
+  while ((match = propertyPattern.exec(cssText)) !== null) {
+    const [, property, value] = match;
+
+    // Calculate approximate line number from the template start
+    const loc = template.loc;
+    if (!loc) continue;
+
+    // Count newlines before this match to estimate line
+    const beforeMatch = cssText.slice(0, match.index);
+    const lineOffset = (beforeMatch.match(/\n/g) || []).length;
+
+    locations.push({
+      file: filePath,
+      line: loc.start.line + lineOffset,
+      column: 0, // Approximate
+      type,
+      property: property.trim(),
+      value: value.trim(),
+      context: match[0],
+    });
+  }
+}
+
+/**
+ * Result of applying a patch
+ */
+export interface PatchResult {
+  /** Whether the patch was successfully applied */
+  success: boolean;
+
+  /** Modified source code */
+  code?: string;
+
+  /** Unified diff of the change */
+  diff?: string;
+
+  /** Error message if failed */
+  error?: string;
+}
+
+/**
+ * Apply a patch to replace a style value
+ *
+ * Uses Babel to parse, modify, and regenerate the code with preserved formatting.
+ */
+export function applyPatch(
+  sourceCode: string,
+  styleLocation: StyleLocation,
+  oldValue: string,
+  newValue: string
+): PatchResult {
+  let ast: t.File;
+  try {
+    ast = parse(sourceCode, PARSER_OPTIONS);
+  } catch (error) {
+    return {
+      success: false,
+      error: `Failed to parse source: ${error instanceof Error ? error.message : String(error)}`,
+    };
+  }
+
+  let modified = false;
+  const originalLines = sourceCode.split("\n");
+
+  traverse(ast, {
+    // Handle inline style={{...}}
+    ObjectProperty(path) {
+      if (modified) return;
+
+      const loc = path.node.loc;
+      if (!loc) return;
+
+      // Check if this is at the right location
+      if (loc.start.line !== styleLocation.line) return;
+
+      // Get property name
+      let propertyName: string | null = null;
+      if (t.isIdentifier(path.node.key)) {
+        propertyName = path.node.key.name;
+      } else if (t.isStringLiteral(path.node.key)) {
+        propertyName = path.node.key.value;
+      }
+
+      if (propertyName !== styleLocation.property) return;
+
+      // Check and update value
+      if (t.isStringLiteral(path.node.value) && path.node.value.value === oldValue) {
+        path.node.value = t.stringLiteral(newValue);
+        modified = true;
+      }
+    },
+  });
+
+  if (!modified) {
+    return {
+      success: false,
+      error: `Could not find style property '${styleLocation.property}' with value '${oldValue}' at line ${styleLocation.line}`,
+    };
+  }
+
+  // Generate modified code
+  const result = generate(ast, {
+    retainLines: true,
+    compact: false,
+  });
+
+  // Generate unified diff
+  const newLines = result.code.split("\n");
+  const diff = generateUnifiedDiff(
+    styleLocation.file,
+    originalLines,
+    newLines,
+    styleLocation.line
+  );
+
+  return {
+    success: true,
+    code: result.code,
+    diff,
+  };
+}
+
+/**
+ * Generate a unified diff for a file change
+ */
+function generateUnifiedDiff(
+  file: string,
+  originalLines: string[],
+  newLines: string[],
+  changedLine: number
+): string {
+  const diffLines: string[] = [];
+
+  diffLines.push(`--- a/${file}`);
+  diffLines.push(`+++ b/${file}`);
+
+  // Find the changed region with context
+  const contextSize = 3;
+  const start = Math.max(0, changedLine - contextSize - 1);
+  const end = Math.min(originalLines.length, changedLine + contextSize);
+
+  diffLines.push(`@@ -${start + 1},${end - start} +${start + 1},${end - start} @@`);
+
+  for (let i = start; i < end; i++) {
+    const origLine = originalLines[i] || "";
+    const newLine = newLines[i] || "";
+
+    if (origLine !== newLine) {
+      diffLines.push(`-${origLine}`);
+      diffLines.push(`+${newLine}`);
+    } else {
+      diffLines.push(` ${origLine}`);
+    }
+  }
+
+  return diffLines.join("\n");
+}
+
+/**
+ * Find all style property occurrences matching a value
+ */
+export function findStyleOccurrences(
+  sourceCode: string,
+  filePath: string,
+  propertyPattern: string | RegExp,
+  valuePattern: string | RegExp
+): StyleLocation[] {
+  const locations = extractStyleLocations(sourceCode, filePath);
+
+  const propRegex = typeof propertyPattern === "string"
+    ? new RegExp(`^${propertyPattern}$`, "i")
+    : propertyPattern;
+
+  const valueRegex = typeof valuePattern === "string"
+    ? new RegExp(`^${escapeRegExp(valuePattern)}$`, "i")
+    : valuePattern;
+
+  return locations.filter((loc) => {
+    return propRegex.test(loc.property) && valueRegex.test(loc.value);
+  });
+}
+
+/**
+ * Escape special regex characters
+ */
+function escapeRegExp(string: string): string {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+/**
+ * Batch apply multiple patches to a source file
+ */
+export function applyPatches(
+  sourceCode: string,
+  patches: Array<{
+    location: StyleLocation;
+    oldValue: string;
+    newValue: string;
+  }>
+): PatchResult {
+  // Sort patches by line number descending to avoid offset issues
+  const sortedPatches = [...patches].sort((a, b) => b.location.line - a.location.line);
+
+  let currentCode = sourceCode;
+  const allDiffs: string[] = [];
+
+  for (const patch of sortedPatches) {
+    const result = applyPatch(currentCode, patch.location, patch.oldValue, patch.newValue);
+
+    if (!result.success) {
+      return {
+        success: false,
+        error: `Failed to apply patch at line ${patch.location.line}: ${result.error}`,
+      };
+    }
+
+    currentCode = result.code!;
+    if (result.diff) {
+      allDiffs.push(result.diff);
+    }
+  }
+
+  return {
+    success: true,
+    code: currentCode,
+    diff: allDiffs.join("\n\n"),
+  };
+}