agentsqripts/lib/ui-problems/inlineStyleDetector.js

Comprehensive static code analysis toolkit for identifying technical debt, security vulnerabilities, performance issues, and code quality problems

/**
 * @file Inline style detector
 * @description Detects excessive inline styles
 */

const { UI_PROBLEM_PATTERNS, UI_CONFIG } = require('./uiProblemPatterns');

/**
 * Detects excessive inline styles
 * @param {string} content - File content
 * @param {string} filePath - Path to the file
 * @returns {Array} Array of inline style issues
 */
function detectExcessiveInlineStyles(content, filePath) {
  const issues = [];
  
  const inlineStyleMatches = content.match(/style\s*=\s*["'][^"']+["']/gi) || [];
  const inlineStyleCount = inlineStyleMatches.length;
  
  if (inlineStyleCount > UI_CONFIG.maxInlineStyles) {
    const patternInfo = UI_PROBLEM_PATTERNS['excessive_inline_styles'];
    
    // Find common style patterns
    const stylePatterns = {};
    inlineStyleMatches.forEach(style => {
      const normalized = style.toLowerCase().replace(/\s+/g, ' ');
      stylePatterns[normalized] = (stylePatterns[normalized] || 0) + 1;
    });
    
    const repeatedStyles = Object.entries(stylePatterns)
      .filter(([, count]) => count > 1)
      .sort((a, b) => b[1] - a[1]);
    
    issues.push({
      type: 'excessive_inline_styles',
      severity: patternInfo.severity,
      category: patternInfo.category,
      location: filePath,
      count: inlineStyleCount,
      threshold: UI_CONFIG.maxInlineStyles,
      summary: `${inlineStyleCount} inline styles detected (threshold: ${UI_CONFIG.maxInlineStyles})`,
      recommendation: `Extract repeated styles to CSS classes, styled-components, or theme configuration`,
      effort: patternInfo.effort,
      impact: patternInfo.impact,
      repeatedStyles: repeatedStyles.slice(0, 5).map(([style, count]) => ({
        style: style.substring(0, 50) + (style.length > 50 ? '...' : ''),
        occurrences: count
      }))
    });
  }
  
  return issues;
}

module.exports = {
  detectExcessiveInlineStyles
};