scss-variable-extractor 1.0.0

package/jest.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  testEnvironment: 'node',
+  collectCoverageFrom: [
+    'src/**/*.js',
+    '!src/**/*.test.js'
+  ],
+  testMatch: [
+    '**/test/**/*.test.js'
+  ],
+  coverageDirectory: 'coverage',
+  verbose: true
+};

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "scss-variable-extractor",
+  "version": "1.0.0",
+  "description": "Analyzes Angular SCSS files and extracts repeated hardcoded values into reusable variables",
+  "bin": {
+    "scss-extract": "./bin/cli.js"
+  },
+  "main": "src/index.js",
+  "scripts": {
+    "test": "jest",
+    "analyze": "node bin/cli.js analyze",
+    "generate": "node bin/cli.js generate",
+    "refactor": "node bin/cli.js refactor"
+  },
+  "keywords": [
+    "angular",
+    "scss",
+    "sass",
+    "css",
+    "variables",
+    "refactoring",
+    "cli",
+    "angular-material"
+  ],
+  "license": "MIT",
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "dependencies": {
+    "commander": "^9.0.0",
+    "glob": "^8.0.0",
+    "chalk": "^4.1.2",
+    "cli-table3": "^0.6.3"
+  },
+  "devDependencies": {
+    "jest": "^29.0.0"
+  }
+}

package/src/analyzer.js

@@ -0,0 +1,285 @@
+/**
+ * Analyzes extracted values and identifies repeated ones
+ */
+
+/**
+ * Analyzes all extracted values from multiple files
+ * @param {Array<Object>} allExtracted - Array of extracted values from all files
+ * @param {Object} config - Configuration object
+ * @returns {Object} - Analysis results with repeated values
+ */
+function analyzeValues(allExtracted, config) {
+  const analysis = {
+    colors: {},
+    spacing: {},
+    fontSizes: {},
+    fontWeights: {},
+    fontFamilies: {},
+    borderRadius: {},
+    shadows: {},
+    zIndex: {},
+    sizing: {},
+    lineHeight: {},
+    opacity: {},
+    transitions: {}
+  };
+  
+  // Count occurrences of each value
+  Object.keys(allExtracted).forEach(category => {
+    if (!config.categories[category]) return;
+    
+    allExtracted[category].forEach(item => {
+      const normalizedValue = normalizeValue(item.value, category);
+      
+      if (!analysis[category][normalizedValue]) {
+        analysis[category][normalizedValue] = {
+          value: item.value,
+          count: 0,
+          files: new Set(),
+          occurrences: []
+        };
+      }
+      
+      analysis[category][normalizedValue].count++;
+      analysis[category][normalizedValue].files.add(item.file);
+      analysis[category][normalizedValue].occurrences.push({
+        file: item.file,
+        line: item.line,
+        context: item.context,
+        property: item.property
+      });
+    });
+  });
+  
+  // Filter by threshold and generate variable names
+  const results = {};
+  
+  Object.keys(analysis).forEach(category => {
+    results[category] = [];
+    
+    Object.keys(analysis[category]).forEach(normalizedValue => {
+      const data = analysis[category][normalizedValue];
+      
+      if (data.count >= config.threshold) {
+        results[category].push({
+          value: data.value,
+          normalizedValue,
+          count: data.count,
+          fileCount: data.files.size,
+          files: Array.from(data.files),
+          occurrences: data.occurrences,
+          suggestedName: generateVariableName(category, data.value, data.occurrences, config)
+        });
+      }
+    });
+    
+    // Sort by count (descending)
+    results[category].sort((a, b) => b.count - a.count);
+  });
+  
+  return results;
+}
+
+/**
+ * Normalizes value for comparison
+ */
+function normalizeValue(value, category) {
+  if (category === 'colors') {
+    return normalizeColor(value);
+  }
+  return value.toLowerCase().trim();
+}
+
+/**
+ * Normalizes color values for comparison
+ */
+function normalizeColor(color) {
+  color = color.toLowerCase().trim();
+  
+  // Convert 3-digit hex to 6-digit
+  if (/^#[0-9a-f]{3}$/i.test(color)) {
+    color = '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
+  }
+  
+  // Normalize rgb/rgba spacing
+  color = color.replace(/\s+/g, '');
+  
+  return color;
+}
+
+/**
+ * Generates a variable name based on category and value
+ */
+function generateVariableName(category, value, occurrences, config) {
+  const prefix = getCategoryPrefix(category);
+  
+  if (category === 'spacing') {
+    return generateSpacingVariableName(value, config);
+  } else if (category === 'colors') {
+    return generateColorVariableName(value, occurrences);
+  } else if (category === 'fontSizes') {
+    return generateFontSizeVariableName(value);
+  } else if (category === 'fontWeights') {
+    return generateFontWeightVariableName(value);
+  } else if (category === 'fontFamilies') {
+    return prefix + sanitizeName(value);
+  } else if (category === 'borderRadius') {
+    return generateBorderRadiusVariableName(value);
+  } else if (category === 'shadows') {
+    return prefix + 'default';
+  } else if (category === 'zIndex') {
+    return prefix + value;
+  } else if (category === 'sizing') {
+    return prefix + value.replace('px', '');
+  } else if (category === 'lineHeight') {
+    return prefix + sanitizeName(value);
+  } else if (category === 'opacity') {
+    return prefix + sanitizeName(value);
+  } else if (category === 'transitions') {
+    return prefix + 'default';
+  }
+  
+  return prefix + 'value';
+}
+
+/**
+ * Gets prefix for a category
+ */
+function getCategoryPrefix(category) {
+  const prefixes = {
+    colors: '$color-',
+    spacing: '$spacing-',
+    fontSizes: '$font-size-',
+    fontWeights: '$font-weight-',
+    fontFamilies: '$font-family-',
+    borderRadius: '$border-radius-',
+    shadows: '$shadow-',
+    zIndex: '$z-index-',
+    sizing: '$size-',
+    lineHeight: '$line-height-',
+    opacity: '$opacity-',
+    transitions: '$transition-'
+  };
+  
+  return prefixes[category] || '$';
+}
+
+/**
+ * Generates spacing variable name using t-shirt sizing
+ */
+function generateSpacingVariableName(value, config) {
+  const spacingScale = config.spacingScale;
+  
+  // Try to match to spacing scale
+  for (const [size, scaleValue] of Object.entries(spacingScale)) {
+    if (scaleValue === value) {
+      return `$spacing-${size}`;
+    }
+  }
+  
+  // Fallback to pixel value
+  return `$spacing-${value.replace('px', '')}`;
+}
+
+/**
+ * Generates color variable name
+ */
+function generateColorVariableName(value, occurrences) {
+  // Try to detect common color patterns
+  const normalizedColor = normalizeColor(value);
+  
+  // Check for common Material colors
+  if (normalizedColor === '#1976d2' || normalizedColor === 'rgb(25,118,210)') {
+    return '$color-brand-primary';
+  }
+  if (normalizedColor === 'rgba(0,0,0,0.87)') {
+    return '$color-text-primary';
+  }
+  if (normalizedColor === 'rgba(0,0,0,0.54)') {
+    return '$color-text-secondary';
+  }
+  if (normalizedColor === '#ffffff' || normalizedColor === 'white') {
+    return '$color-white';
+  }
+  if (normalizedColor === '#000000' || normalizedColor === 'black') {
+    return '$color-black';
+  }
+  
+  // Try to derive from context
+  if (occurrences && occurrences.length > 0) {
+    const context = occurrences[0].context || '';
+    if (context.includes('background')) return '$color-background';
+    if (context.includes('border')) return '$color-border';
+    if (context.includes('text') || context.includes('color:')) return '$color-text';
+  }
+  
+  // Fallback to hex value
+  return '$color-' + sanitizeName(value);
+}
+
+/**
+ * Generates font size variable name
+ */
+function generateFontSizeVariableName(value) {
+  const sizeMap = {
+    '12px': 'xs',
+    '14px': 'sm',
+    '16px': 'md',
+    '18px': 'lg',
+    '20px': 'xl',
+    '24px': 'xxl'
+  };
+  
+  return `$font-size-${sizeMap[value] || value.replace('px', '')}`;
+}
+
+/**
+ * Generates font weight variable name
+ */
+function generateFontWeightVariableName(value) {
+  const weightMap = {
+    '300': 'light',
+    '400': 'normal',
+    '500': 'medium',
+    '600': 'semibold',
+    '700': 'bold',
+    'bold': 'bold',
+    'normal': 'normal'
+  };
+  
+  return `$font-weight-${weightMap[value] || value}`;
+}
+
+/**
+ * Generates border radius variable name
+ */
+function generateBorderRadiusVariableName(value) {
+  if (value === '50%') return '$border-radius-circle';
+  
+  const radiusMap = {
+    '2px': 'xs',
+    '4px': 'sm',
+    '8px': 'md',
+    '12px': 'lg',
+    '16px': 'xl'
+  };
+  
+  return `$border-radius-${radiusMap[value] || value.replace(/px|%/, '')}`;
+}
+
+/**
+ * Sanitizes a value to be a valid variable name
+ */
+function sanitizeName(value) {
+  return value
+    .replace(/[^a-zA-Z0-9-]/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+    .toLowerCase();
+}
+
+module.exports = {
+  analyzeValues,
+  normalizeValue,
+  generateVariableName
+};

package/src/config.js

@@ -0,0 +1,82 @@
+const fs = require('fs');
+const path = require('path');
+
+const DEFAULT_CONFIG = {
+  src: './apps/subapp/src',
+  output: './libs/styles/_variables.scss',
+  threshold: 2,
+  categories: {
+    colors: true,
+    spacing: true,
+    fontSizes: true,
+    fontWeights: true,
+    fontFamilies: true,
+    borderRadius: true,
+    shadows: true,
+    zIndex: true,
+    sizing: true,
+    lineHeight: true,
+    opacity: true,
+    transitions: true
+  },
+  spacingScale: {
+    xxs: '2px',
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px',
+    xxl: '48px'
+  },
+  ignore: [
+    '**/node_modules/**',
+    '**/dist/**',
+    '**/_variables.scss'
+  ],
+  importStyle: 'use',
+  reportFormat: 'table'
+};
+
+function loadConfig(configPath = null) {
+  let userConfig = {};
+  
+  // Try to find config file
+  const possiblePaths = [
+    configPath,
+    '.scssextractrc.json',
+    path.join(process.cwd(), '.scssextractrc.json')
+  ].filter(Boolean);
+  
+  for (const configFile of possiblePaths) {
+    if (fs.existsSync(configFile)) {
+      try {
+        const content = fs.readFileSync(configFile, 'utf8');
+        userConfig = JSON.parse(content);
+        console.log(`Loaded config from: ${configFile}`);
+        break;
+      } catch (error) {
+        console.warn(`Warning: Could not parse config file ${configFile}:`, error.message);
+      }
+    }
+  }
+  
+  // Merge with defaults
+  return {
+    ...DEFAULT_CONFIG,
+    ...userConfig,
+    categories: {
+      ...DEFAULT_CONFIG.categories,
+      ...(userConfig.categories || {})
+    },
+    spacingScale: {
+      ...DEFAULT_CONFIG.spacingScale,
+      ...(userConfig.spacingScale || {})
+    },
+    ignore: userConfig.ignore || DEFAULT_CONFIG.ignore
+  };
+}
+
+module.exports = {
+  DEFAULT_CONFIG,
+  loadConfig
+};

package/src/generator.js

@@ -0,0 +1,219 @@
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Generates a _variables.scss file from analyzed values
+ * @param {Object} analysis - Analysis results
+ * @param {string} outputPath - Output file path
+ * @param {Object} config - Configuration
+ */
+function generateVariablesFile(analysis, outputPath, config) {
+  const version = require('../package.json').version;
+  const timestamp = new Date().toISOString();
+  
+  let content = '';
+  
+  // Header
+  content += `//\n`;
+  content += `// Auto-generated SCSS Variables\n`;
+  content += `// Generated by scss-variable-extractor v${version}\n`;
+  content += `// Generated at: ${timestamp}\n`;
+  content += `//\n`;
+  content += `// DO NOT EDIT THIS FILE MANUALLY\n`;
+  content += `// This file is auto-generated. Your changes will be overwritten.\n`;
+  content += `//\n\n`;
+  
+  // Categories
+  const categories = [
+    { key: 'colors', title: 'Colors' },
+    { key: 'spacing', title: 'Spacing' },
+    { key: 'fontSizes', title: 'Font Sizes' },
+    { key: 'fontWeights', title: 'Font Weights' },
+    { key: 'fontFamilies', title: 'Font Families' },
+    { key: 'borderRadius', title: 'Border Radius' },
+    { key: 'shadows', title: 'Shadows' },
+    { key: 'zIndex', title: 'Z-Index' },
+    { key: 'sizing', title: 'Sizing' },
+    { key: 'lineHeight', title: 'Line Heights' },
+    { key: 'opacity', title: 'Opacity' },
+    { key: 'transitions', title: 'Transitions' }
+  ];
+  
+  categories.forEach(({ key, title }) => {
+    if (analysis[key] && analysis[key].length > 0) {
+      content += `// ${title}\n`;
+      content += `// ────────────────────────────────────────\n`;
+      
+      // Group variables with same name
+      const variableGroups = {};
+      analysis[key].forEach(item => {
+        const baseName = item.suggestedName;
+        if (!variableGroups[baseName]) {
+          variableGroups[baseName] = [];
+        }
+        variableGroups[baseName].push(item);
+      });
+      
+      // Generate unique variable names
+      Object.keys(variableGroups).forEach(baseName => {
+        const items = variableGroups[baseName];
+        
+        if (items.length === 1) {
+          const item = items[0];
+          content += `${item.suggestedName}: ${item.value};\n`;
+        } else {
+          // Multiple values with same suggested name, add suffixes
+          items.forEach((item, index) => {
+            const uniqueName = index === 0 ? item.suggestedName : `${item.suggestedName}-${index + 1}`;
+            content += `${uniqueName}: ${item.value};\n`;
+          });
+        }
+      });
+      
+      content += '\n';
+    }
+  });
+  
+  // Ensure output directory exists
+  const outputDir = path.dirname(outputPath);
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+  
+  // Write file
+  fs.writeFileSync(outputPath, content, 'utf8');
+  
+  return content;
+}
+
+/**
+ * Generates a report in the specified format
+ * @param {Object} analysis - Analysis results
+ * @param {string} format - Report format (table, json, markdown)
+ * @param {Object} config - Configuration
+ * @returns {string} - Formatted report
+ */
+function generateReport(analysis, format = 'table', config) {
+  if (format === 'json') {
+    return generateJsonReport(analysis);
+  } else if (format === 'markdown') {
+    return generateMarkdownReport(analysis);
+  } else {
+    return generateTableReport(analysis);
+  }
+}
+
+/**
+ * Generates a console table report
+ */
+function generateTableReport(analysis) {
+  const Table = require('cli-table3');
+  const chalk = require('chalk');
+  
+  let output = '\n';
+  output += chalk.bold.cyan('SCSS Variable Extraction Analysis\n');
+  output += chalk.gray('═'.repeat(80)) + '\n\n';
+  
+  const categories = [
+    { key: 'colors', title: 'Colors' },
+    { key: 'spacing', title: 'Spacing' },
+    { key: 'fontSizes', title: 'Font Sizes' },
+    { key: 'fontWeights', title: 'Font Weights' },
+    { key: 'fontFamilies', title: 'Font Families' },
+    { key: 'borderRadius', title: 'Border Radius' },
+    { key: 'shadows', title: 'Shadows' },
+    { key: 'zIndex', title: 'Z-Index' },
+    { key: 'sizing', title: 'Sizing' },
+    { key: 'lineHeight', title: 'Line Heights' },
+    { key: 'opacity', title: 'Opacity' },
+    { key: 'transitions', title: 'Transitions' }
+  ];
+  
+  categories.forEach(({ key, title }) => {
+    if (analysis[key] && analysis[key].length > 0) {
+      output += chalk.bold.yellow(`${title}\n`);
+      
+      const table = new Table({
+        head: [
+          chalk.white('Value'),
+          chalk.white('Count'),
+          chalk.white('Files'),
+          chalk.white('Suggested Variable')
+        ],
+        colWidths: [30, 10, 10, 40]
+      });
+      
+      analysis[key].forEach(item => {
+        table.push([
+          item.value,
+          chalk.green(item.count),
+          chalk.blue(item.fileCount),
+          chalk.cyan(item.suggestedName)
+        ]);
+      });
+      
+      output += table.toString() + '\n\n';
+    }
+  });
+  
+  // Summary
+  const totalExtracted = Object.values(analysis).reduce((sum, arr) => sum + arr.length, 0);
+  output += chalk.gray('─'.repeat(80)) + '\n';
+  output += chalk.bold(`Total extractable values: ${totalExtracted}\n`);
+  
+  return output;
+}
+
+/**
+ * Generates a JSON report
+ */
+function generateJsonReport(analysis) {
+  return JSON.stringify(analysis, null, 2);
+}
+
+/**
+ * Generates a Markdown report
+ */
+function generateMarkdownReport(analysis) {
+  let output = '# SCSS Variable Extraction Analysis\n\n';
+  
+  const categories = [
+    { key: 'colors', title: 'Colors' },
+    { key: 'spacing', title: 'Spacing' },
+    { key: 'fontSizes', title: 'Font Sizes' },
+    { key: 'fontWeights', title: 'Font Weights' },
+    { key: 'fontFamilies', title: 'Font Families' },
+    { key: 'borderRadius', title: 'Border Radius' },
+    { key: 'shadows', title: 'Shadows' },
+    { key: 'zIndex', title: 'Z-Index' },
+    { key: 'sizing', title: 'Sizing' },
+    { key: 'lineHeight', title: 'Line Heights' },
+    { key: 'opacity', title: 'Opacity' },
+    { key: 'transitions', title: 'Transitions' }
+  ];
+  
+  categories.forEach(({ key, title }) => {
+    if (analysis[key] && analysis[key].length > 0) {
+      output += `## ${title}\n\n`;
+      output += '| Value | Count | Files | Suggested Variable |\n';
+      output += '|-------|-------|-------|-------------------|\n';
+      
+      analysis[key].forEach(item => {
+        output += `| ${item.value} | ${item.count} | ${item.fileCount} | \`${item.suggestedName}\` |\n`;
+      });
+      
+      output += '\n';
+    }
+  });
+  
+  // Summary
+  const totalExtracted = Object.values(analysis).reduce((sum, arr) => sum + arr.length, 0);
+  output += `---\n\n**Total extractable values:** ${totalExtracted}\n`;
+  
+  return output;
+}
+
+module.exports = {
+  generateVariablesFile,
+  generateReport
+};

package/src/index.js

@@ -0,0 +1,16 @@
+const { loadConfig } = require('./config');
+const { scanScssFiles } = require('./scanner');
+const { parseScss } = require('./parser');
+const { analyzeValues } = require('./analyzer');
+const { generateVariablesFile, generateReport } = require('./generator');
+const { refactorScssFiles } = require('./refactorer');
+
+module.exports = {
+  loadConfig,
+  scanScssFiles,
+  parseScss,
+  analyzeValues,
+  generateVariablesFile,
+  generateReport,
+  refactorScssFiles
+};