chrometools-mcp 2.4.0 → 2.5.0

package/element-finder-utils.js

@@ -305,73 +305,181 @@ function isSafeSelectorValue(value) {
   return !/["'\\[\]{}()]/.test(value);
 }
 
+/**
+ * Check if a class name is a Tailwind CSS utility class
+ * Tailwind classes contain special characters that break CSS selectors:
+ * - Colons (:) for variants like hover:, focus:, md:, etc.
+ * - Slashes (/) for fractions like w-1/2
+ * - Brackets ([]) for arbitrary values like bg-[#1da1f2]
+ * - Dots (.) in decimal values
+ */
+function isTailwindClass(className) {
+  if (!className || typeof className !== 'string') return false;
+
+  // Check for special characters that indicate Tailwind variants/utilities
+  if (/[:\/\[\]]/.test(className)) {
+    return true;
+  }
+
+  // Common Tailwind utility prefixes
+  const tailwindPrefixes = [
+    'bg-', 'text-', 'border-', 'rounded-', 'shadow-', 'font-', 'leading-',
+    'flex-', 'grid-', 'p-', 'px-', 'py-', 'pt-', 'pb-', 'pl-', 'pr-',
+    'm-', 'mx-', 'my-', 'mt-', 'mb-', 'ml-', 'mr-', 'space-',
+    'w-', 'h-', 'min-', 'max-', 'gap-', 'inset-', 'top-', 'right-', 'bottom-', 'left-',
+    'justify-', 'items-', 'content-', 'self-', 'place-',
+    'overflow-', 'opacity-', 'cursor-', 'transition-', 'transform-',
+    'duration-', 'ease-', 'delay-', 'animate-', 'scale-', 'rotate-', 'translate-',
+    'z-', 'order-', 'col-', 'row-', 'auto-', 'tracking-', 'select-',
+    'sr-', 'not-', 'pointer-', 'resize-', 'list-', 'appearance-',
+    'underline', 'line-through', 'no-underline', 'uppercase', 'lowercase', 'capitalize',
+    'italic', 'not-italic', 'ordinal', 'slashed-zero', 'lining-nums', 'oldstyle-nums',
+    'proportional-nums', 'tabular-nums', 'diagonal-fractions', 'stacked-fractions',
+    'hidden', 'block', 'inline', 'flex', 'grid', 'table', 'contents',
+    'absolute', 'relative', 'fixed', 'sticky', 'static'
+  ];
+
+  // Check if className starts with known Tailwind prefix
+  return tailwindPrefixes.some(prefix => className.startsWith(prefix));
+}
+
 /**
  * Generate unique CSS selector for an element
+ * Priority: id → data-testid → data-* → aria-label → role → semantic classes → nth-child
+ * Filters out Tailwind CSS classes to avoid invalid selectors
  */
 function getUniqueSelectorInPage(element) {
-  // Try ID first
-  if (element.id) {
-    return `#${element.id}`;
+  const tagName = element.tagName.toLowerCase();
+
+  // 1. Try ID first (highest priority)
+  if (element.id && isSafeSelectorValue(element.id)) {
+    try {
+      return `#${CSS.escape(element.id)}`;
+    } catch (e) {
+      // CSS.escape not available in old browsers, use simple escape
+      return `#${element.id.replace(/[^\w-]/g, '\\$&')}`;
+    }
   }
 
-  // Try unique class combination
-  if (element.className) {
-    const classes = element.className.split(' ').filter(c => c.trim());
-    if (classes.length > 0) {
-      const selector = `${element.tagName.toLowerCase()}.${classes.join('.')}`;
+  // 2. Try data-testid (very common in modern apps)
+  if (element.dataset && element.dataset.testid && isSafeSelectorValue(element.dataset.testid)) {
+    const selector = `[data-testid="${element.dataset.testid}"]`;
+    try {
       if (document.querySelectorAll(selector).length === 1) {
         return selector;
       }
-      // Try with first class only
-      const firstClassSelector = `${element.tagName.toLowerCase()}.${classes[0]}`;
-      if (document.querySelectorAll(firstClassSelector).length === 1) {
-        return firstClassSelector;
+    } catch (e) {
+      // Invalid selector, continue
+    }
+  }
+
+  // 3. Try other data-* attributes (only if values are safe)
+  const dataAttrs = Array.from(element.attributes)
+    .filter(attr => attr.name.startsWith('data-') &&
+                    attr.name !== 'data-testid' &&
+                    isSafeSelectorValue(attr.value))
+    .slice(0, 2);
+
+  for (const attr of dataAttrs) {
+    const selector = `${tagName}[${attr.name}="${attr.value}"]`;
+    try {
+      if (document.querySelectorAll(selector).length === 1) {
+        return selector;
       }
+    } catch (e) {
+      continue;
     }
   }
 
-  // Try name attribute (only if value is safe)
-  if (element.name && isSafeSelectorValue(element.name)) {
-    const selector = `${element.tagName.toLowerCase()}[name="${element.name}"]`;
+  // 4. Try aria-label
+  const ariaLabel = element.getAttribute('aria-label');
+  if (ariaLabel && isSafeSelectorValue(ariaLabel)) {
+    const selector = `${tagName}[aria-label="${ariaLabel}"]`;
     try {
       if (document.querySelectorAll(selector).length === 1) {
         return selector;
       }
     } catch (e) {
-      // Invalid selector, skip
+      // Invalid selector, continue
     }
   }
 
-  // Try data attributes (only if values are safe)
-  const dataAttrs = Array.from(element.attributes)
-    .filter(attr => attr.name.startsWith('data-') && isSafeSelectorValue(attr.value))
-    .slice(0, 2);
+  // 5. Try role attribute
+  const role = element.getAttribute('role');
+  if (role && isSafeSelectorValue(role)) {
+    const selector = `${tagName}[role="${role}"]`;
+    try {
+      if (document.querySelectorAll(selector).length === 1) {
+        return selector;
+      }
+    } catch (e) {
+      // Invalid selector, continue
+    }
+  }
 
-  for (const attr of dataAttrs) {
-    const selector = `${element.tagName.toLowerCase()}[${attr.name}="${attr.value}"]`;
+  // 6. Try name attribute (common for form inputs)
+  if (element.name && isSafeSelectorValue(element.name)) {
+    const selector = `${tagName}[name="${element.name}"]`;
     try {
       if (document.querySelectorAll(selector).length === 1) {
         return selector;
       }
     } catch (e) {
-      // Invalid selector, skip
-      continue;
+      // Invalid selector, continue
+    }
+  }
+
+  // 7. Try semantic classes (filter out Tailwind)
+  if (element.className && typeof element.className === 'string') {
+    const classes = element.className.split(' ')
+      .filter(c => c.trim() && !isTailwindClass(c))
+      .slice(0, 3); // Limit to 3 classes max
+
+    if (classes.length > 0) {
+      try {
+        // Try with all filtered classes
+        const escapedClasses = classes.map(c => {
+          try {
+            return CSS.escape(c);
+          } catch (e) {
+            return c.replace(/[^\w-]/g, '\\$&');
+          }
+        });
+        const selector = `${tagName}.${escapedClasses.join('.')}`;
+        if (document.querySelectorAll(selector).length === 1) {
+          return selector;
+        }
+
+        // Try with first class only
+        const firstClassSelector = `${tagName}.${escapedClasses[0]}`;
+        if (document.querySelectorAll(firstClassSelector).length === 1) {
+          return firstClassSelector;
+        }
+      } catch (e) {
+        // Invalid selector, continue to fallback
+      }
     }
   }
 
-  // Fallback: nth-child
+  // 8. Fallback: nth-of-type with path
   let current = element;
   const path = [];
 
   while (current && current.tagName) {
     let selector = current.tagName.toLowerCase();
 
-    if (current.id) {
-      selector = `#${current.id}`;
+    // Stop at element with ID
+    if (current.id && isSafeSelectorValue(current.id)) {
+      try {
+        selector = `#${CSS.escape(current.id)}`;
+      } catch (e) {
+        selector = `#${current.id.replace(/[^\w-]/g, '\\$&')}`;
+      }
       path.unshift(selector);
       break;
     }
 
+    // Calculate nth-of-type
     let sibling = current;
     let nth = 1;
 
@@ -382,7 +490,9 @@ function getUniqueSelectorInPage(element) {
       }
     }
 
-    if (nth > 1) {
+    // Only add nth-of-type if there are multiple siblings of same type
+    if (nth > 1 || (current.parentElement &&
+        Array.from(current.parentElement.children).filter(c => c.tagName === current.tagName).length > 1)) {
       selector += `:nth-of-type(${nth})`;
     }
 

package/figma-tools.js

@@ -377,3 +377,123 @@ export function collectAllText(node, texts = []) {
   }
   return texts;
 }
+
+/**
+ * Simplify Figma node structure for code generation
+ * Extracts only essential properties: layout, styling, text, and children
+ */
+export function simplifyNode(node) {
+  if (!node) return null;
+
+  const simplified = {
+    type: node.type,
+    name: node.name,
+  };
+
+  // Dimensions
+  if (node.absoluteBoundingBox) {
+    simplified.size = {
+      width: Math.round(node.absoluteBoundingBox.width),
+      height: Math.round(node.absoluteBoundingBox.height),
+    };
+  }
+
+  // Layout properties (Auto Layout / Flexbox)
+  if (node.layoutMode) {
+    simplified.layout = {
+      mode: node.layoutMode, // HORIZONTAL or VERTICAL
+      padding: (node.paddingLeft || node.paddingTop || node.paddingRight || node.paddingBottom) ? {
+        top: node.paddingTop || 0,
+        right: node.paddingRight || 0,
+        bottom: node.paddingBottom || 0,
+        left: node.paddingLeft || 0,
+      } : undefined,
+      gap: node.itemSpacing,
+      align: node.primaryAxisAlignItems,
+      justify: node.counterAxisAlignItems,
+    };
+  }
+
+  // Border radius
+  if (node.cornerRadius) {
+    simplified.borderRadius = node.cornerRadius;
+  } else if (node.rectangleCornerRadii) {
+    simplified.borderRadius = node.rectangleCornerRadii;
+  }
+
+  // Fills (backgrounds)
+  if (node.fills && node.fills.length > 0) {
+    simplified.fills = node.fills
+      .filter(fill => fill.visible !== false)
+      .map(fill => ({
+        type: fill.type,
+        color: fill.color ? {
+          r: Math.round(fill.color.r * 255),
+          g: Math.round(fill.color.g * 255),
+          b: Math.round(fill.color.b * 255),
+          a: fill.color.a !== undefined ? Math.round(fill.color.a * 100) / 100 : 1,
+        } : undefined,
+        opacity: fill.opacity,
+      }));
+  }
+
+  // Strokes (borders)
+  if (node.strokes && node.strokes.length > 0) {
+    simplified.strokes = node.strokes
+      .filter(stroke => stroke.visible !== false)
+      .map(stroke => ({
+        type: stroke.type,
+        color: stroke.color ? {
+          r: Math.round(stroke.color.r * 255),
+          g: Math.round(stroke.color.g * 255),
+          b: Math.round(stroke.color.b * 255),
+          a: stroke.color.a !== undefined ? Math.round(stroke.color.a * 100) / 100 : 1,
+        } : undefined,
+      }));
+
+    if (node.strokeWeight) {
+      simplified.strokeWeight = node.strokeWeight;
+    }
+  }
+
+  // Effects (shadows, blurs)
+  if (node.effects && node.effects.length > 0) {
+    simplified.effects = node.effects
+      .filter(effect => effect.visible !== false)
+      .map(effect => ({
+        type: effect.type,
+        radius: effect.radius,
+        offset: effect.offset,
+        color: effect.color ? {
+          r: Math.round(effect.color.r * 255),
+          g: Math.round(effect.color.g * 255),
+          b: Math.round(effect.color.b * 255),
+          a: Math.round(effect.color.a * 100) / 100,
+        } : undefined,
+      }));
+  }
+
+  // Text properties
+  if (node.type === 'TEXT') {
+    simplified.text = node.characters;
+    if (node.style) {
+      simplified.textStyle = {
+        fontFamily: node.style.fontFamily,
+        fontWeight: node.style.fontWeight,
+        fontSize: node.style.fontSize,
+        lineHeight: node.style.lineHeightPx,
+        letterSpacing: node.style.letterSpacing,
+        textAlign: node.style.textAlignHorizontal,
+      };
+    }
+  }
+
+  // Recursively simplify children
+  if (node.children && node.children.length > 0) {
+    simplified.children = node.children
+      .map(child => simplifyNode(child))
+      .filter(Boolean); // Remove null values
+  }
+
+  return simplified;
+}