scss-variable-extractor 1.6.4 → 1.6.5

package/bin/cli.js

@@ -1,652 +1,807 @@
-#!/usr/bin/env node
-
-const { Command } = require('commander');
-const chalk = require('chalk');
-const path = require('path');
-const { loadConfig } = require('../src/config');
-const { scanScssFiles, scanTemplateFiles } = require('../src/scanner');
-const { parseScss } = require('../src/parser');
-const { analyzeValues } = require('../src/analyzer');
-const { generateVariablesFile, generateReport } = require('../src/generator');
-const { refactorScssFiles } = require('../src/refactorer');
-const { analyzeAngularPatterns, refactorAngularPatterns, generateAngularPatternReport } = require('../src/ng-refactorer');
-const { detectBootstrap, migrateBootstrapToMaterial, generateBootstrapReport } = require('../src/bootstrap-migrator');
-const { analyzeStyleOrganization, generateOrganizationReport } = require('../src/style-organizer');
-
-const program = new Command();
-
-program
-  .name('scss-extract')
-  .description('Analyzes Angular SCSS files and extracts repeated hardcoded values into reusable variables')
-  .version('1.0.0');
-
-// Analyze command
-program
-  .command('analyze')
-  .description('Dry-run analysis - identifies repeated values without modifying files')
-  .argument('[src]', 'Source directory to scan (optional if using angular.json)')
-  .option('--threshold <number>', 'Minimum repeat count threshold', parseInt)
-  .option('--format <format>', 'Report format (table, json, markdown)', 'table')
-  .option('--config <path>', 'Path to config file')
-  .option('--angular-json <path>', 'Path to angular.json file')
-  .option('--project <name>', 'Angular project name (uses default if not specified)')
-  .option('--no-angular', 'Disable angular.json integration')
-  .action(async (src, options) => {
-    try {
-      console.log(chalk.cyan.bold('\n🔍 SCSS Variable Extraction Analysis\n'));
-      
-      const config = loadConfig(options.config, {
-        useAngularJson: options.angular !== false,
-        angularJsonPath: options.angularJson,
-        projectName: options.project
-      });
-      
-      // Override config with command-line options
-      if (src) config.src = src;
-      if (options.threshold) config.threshold = options.threshold;
-      if (options.format) config.reportFormat = options.format;
-      
-      // Show Angular project info if available
-      if (config.angular) {
-        console.log(chalk.cyan(`Angular Project: ${config.angular.project}`));
-        console.log(chalk.gray(`Prefix: ${config.angular.prefix}`));
-        console.log(chalk.gray(`Style: ${config.angular.stylePreprocessor}\n`));
-      }
-      
-      console.log(chalk.gray(`Scanning: ${config.src}`));
-      console.log(chalk.gray(`Threshold: ${config.threshold} occurrences\n`));
-      
-      // Scan files
-      const files = await scanScssFiles(config.src, config.ignore);
-      console.log(chalk.green(`✓ Found ${files.length} SCSS files\n`));
-      
-      // Parse all files
-      const allExtracted = {
-        colors: [],
-        spacing: [],
-        fontSizes: [],
-        fontWeights: [],
-        fontFamilies: [],
-        borderRadius: [],
-        shadows: [],
-        zIndex: [],
-        sizing: [],
-        lineHeight: [],
-        opacity: [],
-        transitions: []
-      };
-      
-      files.forEach(file => {
-        const content = require('fs').readFileSync(file, 'utf8');
-        const extracted = parseScss(content, file);
-        
-        Object.keys(extracted).forEach(category => {
-          allExtracted[category].push(...extracted[category]);
-        });
-      });
-      
-      // Analyze
-      const analysis = analyzeValues(allExtracted, config);
-      
-      // Generate report
-      const report = generateReport(analysis, config.reportFormat, config);
-      console.log(report);
-      
-    } catch (error) {
-      console.error(chalk.red('✗ Error:'), error.message);
-      process.exit(1);
-    }
-  });
-
-// Generate command
-program
-  .command('generate')
-  .description('Generate variables file only (does not modify existing SCSS files)')
-  .argument('[src]', 'Source directory to scan (optional if using angular.json)')
-  .option('--output <path>', 'Output path for variables file')
-  .option('--threshold <number>', 'Minimum repeat count threshold', parseInt)
-  .option('--config <path>', 'Path to config file')
-  .option('--angular-json <path>', 'Path to angular.json file')
-  .option('--project <name>', 'Angular project name (uses default if not specified)')
-  .option('--no-angular', 'Disable angular.json integration')
-  .action(async (src, options) => {
-    try {
-      console.log(chalk.cyan.bold('\n📝 Generating SCSS Variables File\n'));
-      
-      const config = loadConfig(options.config, {
-        useAngularJson: options.angular !== false,
-        angularJsonPath: options.angularJson,
-        projectName: options.project
-      });
-      
-      // Override config with command-line options
-      if (src) config.src = src;
-      if (options.output) config.output = options.output;
-      if (options.threshold) config.threshold = options.threshold;
-      
-      // Show Angular project info if available
-      if (config.angular) {
-        console.log(chalk.cyan(`Angular Project: ${config.angular.project}`));
-        console.log(chalk.gray(`Prefix: ${config.angular.prefix}`));
-        console.log(chalk.gray(`Style: ${config.angular.stylePreprocessor}\n`));
-      }
-      
-      console.log(chalk.gray(`Scanning: ${config.src}`));
-      console.log(chalk.gray(`Output: ${config.output}\n`));
-      
-      // Scan files
-      const files = await scanScssFiles(config.src, config.ignore);
-      console.log(chalk.green(`✓ Found ${files.length} SCSS files`));
-      
-      // Parse all files
-      const allExtracted = {
-        colors: [],
-        spacing: [],
-        fontSizes: [],
-        fontWeights: [],
-        fontFamilies: [],
-        borderRadius: [],
-        shadows: [],
-        zIndex: [],
-        sizing: [],
-        lineHeight: [],
-        opacity: [],
-        transitions: []
-      };
-      
-      files.forEach(file => {
-        const content = require('fs').readFileSync(file, 'utf8');
-        const extracted = parseScss(content, file);
-        
-        Object.keys(extracted).forEach(category => {
-          allExtracted[category].push(...extracted[category]);
-        });
-      });
-      
-      // Analyze
-      const analysis = analyzeValues(allExtracted, config);
-      
-      // Generate variables file
-      generateVariablesFile(analysis, config.output, config);
-      
-      console.log(chalk.green(`\n✓ Generated variables file: ${config.output}`));
-      
-      // Show summary
-      const totalVars = Object.values(analysis).reduce((sum, arr) => sum + arr.length, 0);
-      console.log(chalk.bold(`\nTotal variables extracted: ${totalVars}\n`));
-      
-    } catch (error) {
-      console.error(chalk.red('✗ Error:'), error.message);
-      process.exit(1);
-    }
-  });
-
-// Refactor command
-program
-  .command('refactor')
-  .description('Full extraction + replacement (generates variables file and refactors SCSS files)')
-  .argument('[src]', 'Source directory to scan (optional if using angular.json)')
-  .option('--output <path>', 'Output path for variables file')
-  .option('--threshold <number>', 'Minimum repeat count threshold', parseInt)
-  .option('--config <path>', 'Path to config file')
-  .option('--angular-json <path>', 'Path to angular.json file')
-  .option('--project <name>', 'Angular project name (uses default if not specified)')
-  .option('--no-angular', 'Disable angular.json integration')
-  .action(async (src, options) => {
-    try {
-      console.log(chalk.cyan.bold('\n🔧 SCSS Refactoring - Full Extraction\n'));
-      
-      const config = loadConfig(options.config, {
-        useAngularJson: options.angular !== false,
-        angularJsonPath: options.angularJson,
-        projectName: options.project
-      });
-      
-      // Override config with command-line options
-      if (src) config.src = src;
-      if (options.output) config.output = options.output;
-      if (options.threshold) config.threshold = options.threshold;
-      
-      // Show Angular project info if available
-      if (config.angular) {
-        console.log(chalk.cyan(`Angular Project: ${config.angular.project}`));
-        console.log(chalk.gray(`Prefix: ${config.angular.prefix}`));
-        console.log(chalk.gray(`Style: ${config.angular.stylePreprocessor}\n`));
-      }
-      
-      console.log(chalk.gray(`Scanning: ${config.src}`));
-      console.log(chalk.gray(`Output: ${config.output}\n`));
-      
-      // Scan files
-      const files = await scanScssFiles(config.src, config.ignore);
-      console.log(chalk.green(`✓ Found ${files.length} SCSS files`));
-      
-      // Parse all files
-      const allExtracted = {
-        colors: [],
-        spacing: [],
-        fontSizes: [],
-        fontWeights: [],
-        fontFamilies: [],
-        borderRadius: [],
-        shadows: [],
-        zIndex: [],
-        sizing: [],
-        lineHeight: [],
-        opacity: [],
-        transitions: []
-      };
-      
-      files.forEach(file => {
-        const content = require('fs').readFileSync(file, 'utf8');
-        const extracted = parseScss(content, file);
-        
-        Object.keys(extracted).forEach(category => {
-          allExtracted[category].push(...extracted[category]);
-        });
-      });
-      
-      // Analyze
-      const analysis = analyzeValues(allExtracted, config);
-      
-      // Generate variables file
-      generateVariablesFile(analysis, config.output, config);
-      console.log(chalk.green(`✓ Generated variables file: ${config.output}`));
-      
-      // Refactor files
-      const refactoredFiles = refactorScssFiles(files, analysis, config.output, config);
-      console.log(chalk.green(`✓ Refactored ${refactoredFiles.length} SCSS files`));
-      
-      // Show summary
-      const totalVars = Object.values(analysis).reduce((sum, arr) => sum + arr.length, 0);
-      console.log(chalk.bold(`\nTotal variables extracted: ${totalVars}`));
-      console.log(chalk.bold(`Files modified: ${refactoredFiles.length}\n`));
-      
-    } catch (error) {
-      console.error(chalk.red('✗ Error:'), error.message);
-      process.exit(1);
-    }
-  });
-
-// Analyze Angular patterns command (ng-deep, !important)
-program
-  .command('analyze-patterns')
-  .description('Analyze SCSS files for Angular Material v15+ anti-patterns (::ng-deep, !important)')
-  .argument('[src]', 'Source directory to scan (optional if using angular.json)')
-  .option('--format <format>', 'Report format (table, json, markdown)', 'table')
-  .option('--config <path>', 'Path to config file')
-  .option('--angular-json <path>', 'Path to angular.json file')
-  .option('--project <name>', 'Angular project name (uses default if not specified)')
-  .option('--no-angular', 'Disable angular.json integration')
-  .action(async (src, options) => {
-    try {
-      console.log(chalk.cyan.bold('\n🔍 Angular Anti-Pattern Analysis\n'));
-      
-      const config = loadConfig(options.config, {
-        useAngularJson: options.angular !== false,
-        angularJsonPath: options.angularJson,
-        projectName: options.project
-      });
-      if (src) config.src = src;
-      
-      // Show Angular project info if available
-      if (config.angular) {
-        console.log(chalk.cyan(`Angular Project: ${config.angular.project}`));
-        console.log(chalk.gray(`Prefix: ${config.angular.prefix}`));
-        console.log(chalk.gray(`Style: ${config.angular.stylePreprocessor}\n`));
-      }
-      
-      console.log(chalk.gray(`Scanning: ${config.src}\n`));
-      
-      // Scan files
-      const files = await scanScssFiles(config.src, config.ignore);
-      console.log(chalk.green(`✓ Found ${files.length} SCSS files\n`));
-      
-      // Analyze patterns
-      const analysis = analyzeAngularPatterns(files);
-      
-      // Generate report
-      const report = generateAngularPatternReport(analysis, options.format);
-      console.log(report);
-      
-      // Exit with error code if issues found
-      if (analysis.summary.ngDeepCount > 0 || analysis.summary.importantCount > 0) {
-        console.log(chalk.yellow('⚠ Anti-patterns detected. Run "modernize" command to fix them.\n'));
-      } else {
-        console.log(chalk.green('✓ No anti-patterns detected!\n'));
-      }
-      
-    } catch (error) {
-      console.error(chalk.red('✗ Error:'), error.message);
-      process.exit(1);
-    }
-  });
-
-// Modernize command (refactor ng-deep and !important)
-program
-  .command('modernize')
-  .description('Refactor SCSS files following Angular Material v15+ best practices')
-  .argument('[src]', 'Source directory to scan (optional if using angular.json)')
-  .option('--global-styles <path>', 'Path to global styles file', './src/styles.scss')
-  .option('--no-ng-deep', 'Skip ::ng-deep refactoring')
-  .option('--no-important', 'Skip !important refactoring')
-  .option('--dry-run', 'Preview changes without modifying files')
-  .option('--config <path>', 'Path to config file')
-  .option('--angular-json <path>', 'Path to angular.json file')
-  .option('--project <name>', 'Angular project name (uses default if not specified)')
-  .option('--no-angular', 'Disable angular.json integration')
-  .action(async (src, options) => {
-    try {
-      console.log(chalk.cyan.bold('\n🔧 Modernizing SCSS Files (Angular Material v15+ Best Practices)\n'));
-      
-      const config = loadConfig(options.config, {
-        useAngularJson: options.angular !== false,
-        angularJsonPath: options.angularJson,
-        projectName: options.project
-      });
-      if (src) config.src = src;
-      
-      if (options.dryRun) {
-        console.log(chalk.yellow('DRY RUN MODE - No files will be modified\n'));
-      }
-      
-      // Show Angular project info if available
-      if (config.angular) {
-        console.log(chalk.cyan(`Angular Project: ${config.angular.project}`));
-        console.log(chalk.gray(`Prefix: ${config.angular.prefix}`));
-        console.log(chalk.gray(`Style: ${config.angular.stylePreprocessor}\n`));
-      }
-      
-      console.log(chalk.gray(`Scanning: ${config.src}`));
-      console.log(chalk.gray(`Global styles: ${options.globalStyles}\n`));
-      
-      // Scan files
-      const files = await scanScssFiles(config.src, config.ignore);
-      console.log(chalk.green(`✓ Found ${files.length} SCSS files\n`));
-      
-      // Refactor patterns
-      const results = refactorAngularPatterns(files, {
-        removeNgDeep: options.ngDeep !== false,
-        removeImportant: options.important !== false,
-        createGlobalStyles: true,
-        globalStylesPath: options.globalStyles,
-        dryRun: options.dryRun
-      });
-      
-      // Show results
-      if (results.modified.length > 0) {
-        console.log(chalk.green(`✓ Modified ${results.modified.length} file(s)\n`));
-        
-        results.modified.forEach(file => {
-          console.log(chalk.white(`  ${path.basename(file.file)}:`));
-          file.changes.forEach(change => {
-            if (change.type === 'ng-deep-removed') {
-              console.log(chalk.yellow(`    - Removed ${change.count} ::ng-deep occurrence(s)`));
-            } else if (change.type === 'important-removed') {
-              console.log(chalk.yellow(`    - Removed ${change.count} !important declaration(s)`));
-            }
-          });
-        });
-        console.log();
-      }
-      
-      if (results.globalStyles.length > 0) {
-        console.log(chalk.cyan(`✓ Extracted ${results.globalStyles.length} style(s) to ${options.globalStyles}\n`));
-      }
-      
-      if (results.warnings.length > 0) {
-        console.log(chalk.yellow.bold('⚠ Warnings:\n'));
-        results.warnings.forEach(warning => {
-          console.log(chalk.yellow(`  ${warning.message}`));
-        });
-        console.log();
-      }
-      
-      if (results.modified.length === 0) {
-        console.log(chalk.green('✓ No changes needed - files already follow best practices!\n'));
-      } else if (!options.dryRun) {
-        console.log(chalk.bold.green('✓ Modernization complete!\n'));
-        console.log(chalk.gray('Next steps:'));
-        console.log(chalk.gray('  1. Review the modified files'));
-        console.log(chalk.gray('  2. Test your application'));
-        console.log(chalk.gray('  3. Consider using Angular Material theme mixins for component theming'));
-        console.log(chalk.gray('  4. Review extracted global styles and organize as needed\n'));
-      }
-      
-    } catch (error) {
-      console.error(chalk.red('✗ Error:'), error.message);
-      process.exit(1);
-    }
-  });
-
-// Detect Bootstrap command
-program
-  .command('detect-bootstrap')
-  .description('Detect Bootstrap classes and analyze migration to Angular Material')
-  .argument('[src]', 'Source directory to scan (optional if using angular.json)')
-  .option('--format <format>', 'Report format (table, json, markdown)', 'table')
-  .option('--config <path>', 'Path to config file')
-  .option('--angular-json <path>', 'Path to angular.json file')
-  .option('--project <name>', 'Angular project name (uses default if not specified)')
-  .option('--no-angular', 'Disable angular.json integration')
-  .action(async (src, options) => {
-    try {
-      console.log(chalk.cyan.bold('\n📦 Bootstrap to Material Migration Analysis\n'));
-      
-      const config = loadConfig(options.config, {
-        useAngularJson: options.angular !== false,
-        angularJsonPath: options.angularJson,
-        projectName: options.project
-      });
-      if (src) config.src = src;
-      
-      // Show Angular project info if available
-      if (config.angular) {
-        console.log(chalk.cyan(`Angular Project: ${config.angular.project}`));
-        console.log(chalk.gray(`Prefix: ${config.angular.prefix}`));
-        console.log(chalk.gray(`Style: ${config.angular.stylePreprocessor}\n`));
-      }
-      
-      console.log(chalk.gray(`Scanning: ${config.src}\n`));
-      
-      // Scan files - look for SCSS, HTML, and TS files
-      const allFiles = await scanTemplateFiles(config.src, config.ignore);
-      console.log(chalk.green(`✓ Found ${allFiles.length} files (SCSS, HTML, TS)\n`));
-      
-      // Detect Bootstrap
-      const detection = detectBootstrap(allFiles);
-      
-      // Generate report
-      const report = generateBootstrapReport(detection, options.format);
-      console.log(report);
-      
-      // Provide migration guidance
-      if (detection.summary.totalBootstrapClasses > 0) {
-        console.log(chalk.yellow('⚠ Bootstrap classes detected. Use "migrate-bootstrap" command to convert.\n'));
-        console.log(chalk.gray('Migration options:'));
-        console.log(chalk.gray('  • Components (btn, card, etc.) → Angular Material components'));
-        console.log(chalk.gray('  • Utilities (d-flex, spacing, etc.) → Custom utility classes'));
-        console.log(chalk.gray('  • Grid system → CSS Grid or Flexbox\n'));
-      } else {
-        console.log(chalk.green('✓ No Bootstrap classes detected!\n'));
-      }
-      
-    } catch (error) {
-      console.error(chalk.red('✗ Error:'), error.message);
-      process.exit(1);
-    }
-  });
-
-// Migrate Bootstrap command
-program
-  .command('migrate-bootstrap')
-  .description('Migrate Bootstrap classes to Angular Material MDC-based styles')
-  .argument('[src]', 'Source directory to scan (optional if using angular.json)')
-  .option('--custom-utilities <path>', 'Path to custom utilities file', './src/styles/utilities.scss')
-  .option('--no-custom-utilities', 'Skip creating custom utility classes')
-  .option('--no-remove-imports', 'Keep Bootstrap imports')
-  .option('--dry-run', 'Preview changes without modifying files')
-  .option('--config <path>', 'Path to config file')
-  .option('--angular-json <path>', 'Path to angular.json file')
-  .option('--project <name>', 'Angular project name (uses default if not specified)')
-  .option('--no-angular', 'Disable angular.json integration')
-  .action(async (src, options) => {
-    try {
-      console.log(chalk.cyan.bold('\n🔄 Migrating Bootstrap to Angular Material\n'));
-      
-      const config = loadConfig(options.config, {
-        useAngularJson: options.angular !== false,
-        angularJsonPath: options.angularJson,
-        projectName: options.project
-      });
-      if (src) config.src = src;
-      
-      if (options.dryRun) {
-        console.log(chalk.yellow('DRY RUN MODE - No files will be modified\n'));
-      }
-      
-      // Show Angular project info if available
-      if (config.angular) {
-        console.log(chalk.cyan(`Angular Project: ${config.angular.project}`));
-        console.log(chalk.gray(`Prefix: ${config.angular.prefix}`));
-        console.log(chalk.gray(`Style: ${config.angular.stylePreprocessor}\n`));
-      }
-      
-      console.log(chalk.gray(`Scanning: ${config.src}`));
-      console.log(chalk.gray(`Utilities output: ${options.customUtilities || './src/styles/utilities.scss'}\n`));
-      
-      // Scan files - look for SCSS, HTML, and TS files
-      const allFiles = await scanTemplateFiles(config.src, config.ignore);
-      console.log(chalk.green(`✓ Found ${allFiles.length} files (SCSS, HTML, TS)\n`));
-      
-      // Migrate Bootstrap
-      const results = migrateBootstrapToMaterial(allFiles, {
-        createCustomUtilities: options.customUtilities !== false,
-        customUtilitiesPath: options.customUtilities || './src/styles/utilities.scss',
-        removeBootstrapImports: options.removeImports !== false,
-        dryRun: options.dryRun
-      });
-      
-      // Show results
-      if (results.modified.length > 0) {
-        console.log(chalk.green(`✓ Modified ${results.modified.length} file(s)\n`));
-        
-        results.modified.slice(0, 10).forEach(file => {
-          console.log(chalk.white(`  ${path.basename(file.file)}:`));
-          file.changes.forEach(change => {
-            if (change.type === 'import-removed') {
-              console.log(chalk.yellow(`    - ${change.description}`));
-            }
-          });
-        });
-        if (results.modified.length > 10) {
-          console.log(chalk.gray(`  ... and ${results.modified.length - 10} more`));
-        }
-        console.log();
-      }
-      
-      if (results.customUtilities.length > 0) {
-        console.log(chalk.cyan(`✓ Generated ${results.customUtilities.length} custom utility class(es) in ${options.customUtilities || './src/styles/utilities.scss'}\n`));
-      }
-      
-      if (results.componentMigrations.length > 0) {
-        console.log(chalk.yellow(`⚠ ${results.componentMigrations.length} component(s) require manual migration\n`));
-      }
-      
-      if (results.warnings.length > 0) {
-        console.log(chalk.yellow.bold('⚠ Warnings:\n'));
-        results.warnings.slice(0, 5).forEach(warning => {
-          console.log(chalk.yellow(`  ${warning.message}`));
-          if (warning.variables) {
-            console.log(chalk.gray(`    Variables: ${warning.variables.join(', ')}`));
-          }
-        });
-        if (results.warnings.length > 5) {
-          console.log(chalk.gray(`  ... and ${results.warnings.length - 5} more warnings`));
-        }
-        console.log();
-      }
-      
-      if (results.modified.length === 0 && results.warnings.length === 0) {
-        console.log(chalk.green('✓ No Bootstrap code detected!\n'));
-      } else if (!options.dryRun) {
-        console.log(chalk.bold.green('✓ Migration complete!\n'));
-        console.log(chalk.gray('Next steps:'));
-        console.log(chalk.gray('  1. Review the modified SCSS files'));
-        console.log(chalk.gray('  2. Update HTML templates to use Angular Material components'));
-        console.log(chalk.gray('  3. Import custom utilities in your styles.scss'));
-        console.log(chalk.gray('  4. Install @angular/material if not already installed'));
-        console.log(chalk.gray('  5. Test your application thoroughly\n'));
-        console.log(chalk.cyan('Component Migration Guide:'));
-        console.log(chalk.gray('  • .btn → <button mat-button>'));
-        console.log(chalk.gray('  • .card → <mat-card>'));
-        console.log(chalk.gray('  • .form-control → <mat-form-field><input matInput></mat-form-field>'));
-        console.log(chalk.gray('  • See: https://material.angular.io/components\n'));
-      }
-      
-    } catch (error) {
-      console.error(chalk.red('✗ Error:'), error.message);
-      process.exit(1);
-    }
-  });
-
-// Analyze style organization command
-program
-  .command('analyze-organization')
-  .description('Analyze style organization and get recommendations for best practices')
-  .argument('[src]', 'Source directory to scan (optional if using angular.json)')
-  .option('--format <format>', 'Report format (table, json, markdown)', 'table')
-  .option('--config <path>', 'Path to config file')
-  .option('--angular-json <path>', 'Path to angular.json file')
-  .option('--project <name>', 'Angular project name (uses default if not specified)')
-  .option('--no-angular', 'Disable angular.json integration')
-  .action(async (src, options) => {
-    try {
-      console.log(chalk.cyan.bold('\n📋 Style Organization Analysis\n'));
-      
-      const config = loadConfig(options.config, {
-        useAngularJson: options.angular !== false,
-        angularJsonPath: options.angularJson,
-        projectName: options.project
-      });
-      if (src) config.src = src;
-      
-      // Show Angular project info if available
-      if (config.angular) {
-        console.log(chalk.cyan(`Angular Project: ${config.angular.project}`));
-        console.log(chalk.gray(`Prefix: ${config.angular.prefix}`));
-        console.log(chalk.gray(`Style: ${config.angular.stylePreprocessor}\n`));
-      }
-      
-      console.log(chalk.gray(`Scanning: ${config.src}\n`));
-      
-      // Scan files
-      const files = await scanScssFiles(config.src, config.ignore);
-      console.log(chalk.green(`✓ Found ${files.length} SCSS files\n`));
-      
-      // Analyze organization
-      const analysis = analyzeStyleOrganization(files, config);
-      
-      // Generate report
-      const report = generateOrganizationReport(analysis, options.format);
-      console.log(report);
-      
-      // Provide guidance
-      if (analysis.recommendations.length > 0) {
-        console.log(chalk.yellow.bold('💡 Next Steps:\n'));
-        console.log(chalk.gray('1. Review recommendations above'));
-        console.log(chalk.gray('2. Run "refactor" command to extract variables'));
-        console.log(chalk.gray('3. Run "modernize" to remove anti-patterns'));
-        console.log(chalk.gray('4. Consider restructuring based on suggested organization'));
-        console.log(chalk.gray('5. Use @use instead of @import for better modularity\n'));
-      } else {
-        console.log(chalk.green('✓ Your styles are well organized!\n'));
-      }
-      
-    } catch (error) {
-      console.error(chalk.red('✗ Error:'), error.message);
-      process.exit(1);
-    }
-  });
-
-program.parse();
+#!/usr/bin/env node
+
+const { Command } = require('commander');
+const chalk = require('chalk');
+const path = require('path');
+const { loadConfig } = require('../src/config');
+const { scanScssFiles, scanTemplateFiles } = require('../src/scanner');
+const { parseScss } = require('../src/parser');
+const { analyzeValues } = require('../src/analyzer');
+const { generateVariablesFile, generateReport } = require('../src/generator');
+const { refactorScssFiles } = require('../src/refactorer');
+const {
+  analyzeAngularPatterns,
+  refactorAngularPatterns,
+  generateAngularPatternReport,
+} = require('../src/ng-refactorer');
+const {
+  detectBootstrap,
+  migrateBootstrapToMaterial,
+  generateBootstrapReport,
+} = require('../src/bootstrap-migrator');
+const { analyzeStyleOrganization, generateOrganizationReport } = require('../src/style-organizer');
+const { generateThemeStructure, analyzeThemeReadiness } = require('../src/theme-utils');
+
+const program = new Command();
+
+program
+  .name('scss-extract')
+  .description(
+    'Analyzes Angular SCSS files and extracts repeated hardcoded values into reusable variables'
+  )
+  .version('1.0.0');
+
+// Analyze command
+program
+  .command('analyze')
+  .description('Dry-run analysis - identifies repeated values without modifying files')
+  .argument('[src]', 'Source directory to scan (optional if using angular.json)')
+  .option('--threshold <number>', 'Minimum repeat count threshold', parseInt)
+  .option('--format <format>', 'Report format (table, json, markdown)', 'table')
+  .option('--config <path>', 'Path to config file')
+  .option('--angular-json <path>', 'Path to angular.json file')
+  .option('--project <name>', 'Angular project name (uses default if not specified)')
+  .option('--no-angular', 'Disable angular.json integration')
+  .action(async (src, options) => {
+    try {
+      console.log(chalk.cyan.bold('\n🔍 SCSS Variable Extraction Analysis\n'));
+
+      const config = loadConfig(options.config, {
+        useAngularJson: options.angular !== false,
+        angularJsonPath: options.angularJson,
+        projectName: options.project,
+      });
+
+      // Override config with command-line options
+      if (src) config.src = src;
+      if (options.threshold) config.threshold = options.threshold;
+      if (options.format) config.reportFormat = options.format;
+
+      // Show Angular project info if available
+      if (config.angular) {
+        console.log(chalk.cyan(`Angular Project: ${config.angular.project}`));
+        console.log(chalk.gray(`Prefix: ${config.angular.prefix}`));
+        console.log(chalk.gray(`Style: ${config.angular.stylePreprocessor}\n`));
+      }
+
+      console.log(chalk.gray(`Scanning: ${config.src}`));
+      console.log(chalk.gray(`Threshold: ${config.threshold} occurrences\n`));
+
+      // Scan files
+      const files = await scanScssFiles(config.src, config.ignore);
+      console.log(chalk.green(`✓ Found ${files.length} SCSS files\n`));
+
+      // Parse all files
+      const allExtracted = {
+        colors: [],
+        spacing: [],
+        fontSizes: [],
+        fontWeights: [],
+        fontFamilies: [],
+        borderRadius: [],
+        shadows: [],
+        zIndex: [],
+        sizing: [],
+        lineHeight: [],
+        opacity: [],
+        transitions: [],
+      };
+
+      files.forEach(file => {
+        const content = require('fs').readFileSync(file, 'utf8');
+        const extracted = parseScss(content, file);
+
+        Object.keys(extracted).forEach(category => {
+          allExtracted[category].push(...extracted[category]);
+        });
+      });
+
+      // Analyze
+      const analysis = analyzeValues(allExtracted, config);
+
+      // Generate report
+      const report = generateReport(analysis, config.reportFormat, config);
+      console.log(report);
+    } catch (error) {
+      console.error(chalk.red('✗ Error:'), error.message);
+      process.exit(1);
+    }
+  });
+
+// Generate command
+program
+  .command('generate')
+  .description('Generate variables file only (does not modify existing SCSS files)')
+  .argument('[src]', 'Source directory to scan (optional if using angular.json)')
+  .option('--output <path>', 'Output path for variables file')
+  .option('--threshold <number>', 'Minimum repeat count threshold', parseInt)
+  .option('--config <path>', 'Path to config file')
+  .option('--angular-json <path>', 'Path to angular.json file')
+  .option('--project <name>', 'Angular project name (uses default if not specified)')
+  .option('--no-angular', 'Disable angular.json integration')
+  .action(async (src, options) => {
+    try {
+      console.log(chalk.cyan.bold('\n📝 Generating SCSS Variables File\n'));
+
+      const config = loadConfig(options.config, {
+        useAngularJson: options.angular !== false,
+        angularJsonPath: options.angularJson,
+        projectName: options.project,
+      });
+
+      // Override config with command-line options
+      if (src) config.src = src;
+      if (options.output) config.output = options.output;
+      if (options.threshold) config.threshold = options.threshold;
+
+      // Show Angular project info if available
+      if (config.angular) {
+        console.log(chalk.cyan(`Angular Project: ${config.angular.project}`));
+        console.log(chalk.gray(`Prefix: ${config.angular.prefix}`));
+        console.log(chalk.gray(`Style: ${config.angular.stylePreprocessor}\n`));
+      }
+
+      console.log(chalk.gray(`Scanning: ${config.src}`));
+      console.log(chalk.gray(`Output: ${config.output}\n`));
+
+      // Scan files
+      const files = await scanScssFiles(config.src, config.ignore);
+      console.log(chalk.green(`✓ Found ${files.length} SCSS files`));
+
+      // Parse all files
+      const allExtracted = {
+        colors: [],
+        spacing: [],
+        fontSizes: [],
+        fontWeights: [],
+        fontFamilies: [],
+        borderRadius: [],
+        shadows: [],
+        zIndex: [],
+        sizing: [],
+        lineHeight: [],
+        opacity: [],
+        transitions: [],
+      };
+
+      files.forEach(file => {
+        const content = require('fs').readFileSync(file, 'utf8');
+        const extracted = parseScss(content, file);
+
+        Object.keys(extracted).forEach(category => {
+          allExtracted[category].push(...extracted[category]);
+        });
+      });
+
+      // Analyze
+      const analysis = analyzeValues(allExtracted, config);
+
+      // Generate variables file
+      generateVariablesFile(analysis, config.output, config);
+
+      console.log(chalk.green(`\n✓ Generated variables file: ${config.output}`));
+
+      // Show summary
+      const totalVars = Object.values(analysis).reduce((sum, arr) => sum + arr.length, 0);
+      console.log(chalk.bold(`\nTotal variables extracted: ${totalVars}\n`));
+    } catch (error) {
+      console.error(chalk.red('✗ Error:'), error.message);
+      process.exit(1);
+    }
+  });
+
+// Refactor command
+program
+  .command('refactor')
+  .description('Full extraction + replacement (generates variables file and refactors SCSS files)')
+  .argument('[src]', 'Source directory to scan (optional if using angular.json)')
+  .option('--output <path>', 'Output path for variables file')
+  .option('--threshold <number>', 'Minimum repeat count threshold', parseInt)
+  .option('--config <path>', 'Path to config file')
+  .option('--angular-json <path>', 'Path to angular.json file')
+  .option('--project <name>', 'Angular project name (uses default if not specified)')
+  .option('--no-angular', 'Disable angular.json integration')
+  .action(async (src, options) => {
+    try {
+      console.log(chalk.cyan.bold('\n🔧 SCSS Refactoring - Full Extraction\n'));
+
+      const config = loadConfig(options.config, {
+        useAngularJson: options.angular !== false,
+        angularJsonPath: options.angularJson,
+        projectName: options.project,
+      });
+
+      // Override config with command-line options
+      if (src) config.src = src;
+      if (options.output) config.output = options.output;
+      if (options.threshold) config.threshold = options.threshold;
+
+      // Show Angular project info if available
+      if (config.angular) {
+        console.log(chalk.cyan(`Angular Project: ${config.angular.project}`));
+        console.log(chalk.gray(`Prefix: ${config.angular.prefix}`));
+        console.log(chalk.gray(`Style: ${config.angular.stylePreprocessor}\n`));
+      }
+
+      console.log(chalk.gray(`Scanning: ${config.src}`));
+      console.log(chalk.gray(`Output: ${config.output}\n`));
+
+      // Scan files
+      const files = await scanScssFiles(config.src, config.ignore);
+      console.log(chalk.green(`✓ Found ${files.length} SCSS files`));
+
+      // Parse all files
+      const allExtracted = {
+        colors: [],
+        spacing: [],
+        fontSizes: [],
+        fontWeights: [],
+        fontFamilies: [],
+        borderRadius: [],
+        shadows: [],
+        zIndex: [],
+        sizing: [],
+        lineHeight: [],
+        opacity: [],
+        transitions: [],
+      };
+
+      files.forEach(file => {
+        const content = require('fs').readFileSync(file, 'utf8');
+        const extracted = parseScss(content, file);
+
+        Object.keys(extracted).forEach(category => {
+          allExtracted[category].push(...extracted[category]);
+        });
+      });
+
+      // Analyze
+      const analysis = analyzeValues(allExtracted, config);
+
+      // Generate variables file
+      generateVariablesFile(analysis, config.output, config);
+      console.log(chalk.green(`✓ Generated variables file: ${config.output}`));
+
+      // Refactor files
+      const refactoredFiles = refactorScssFiles(files, analysis, config.output, config);
+      console.log(chalk.green(`✓ Refactored ${refactoredFiles.length} SCSS files`));
+
+      // Show summary
+      const totalVars = Object.values(analysis).reduce((sum, arr) => sum + arr.length, 0);
+      console.log(chalk.bold(`\nTotal variables extracted: ${totalVars}`));
+      console.log(chalk.bold(`Files modified: ${refactoredFiles.length}\n`));
+    } catch (error) {
+      console.error(chalk.red('✗ Error:'), error.message);
+      process.exit(1);
+    }
+  });
+
+// Analyze Angular patterns command (ng-deep, !important)
+program
+  .command('analyze-patterns')
+  .description('Analyze SCSS files for Angular Material v15+ anti-patterns (::ng-deep, !important)')
+  .argument('[src]', 'Source directory to scan (optional if using angular.json)')
+  .option('--format <format>', 'Report format (table, json, markdown)', 'table')
+  .option('--config <path>', 'Path to config file')
+  .option('--angular-json <path>', 'Path to angular.json file')
+  .option('--project <name>', 'Angular project name (uses default if not specified)')
+  .option('--no-angular', 'Disable angular.json integration')
+  .action(async (src, options) => {
+    try {
+      console.log(chalk.cyan.bold('\n🔍 Angular Anti-Pattern Analysis\n'));
+
+      const config = loadConfig(options.config, {
+        useAngularJson: options.angular !== false,
+        angularJsonPath: options.angularJson,
+        projectName: options.project,
+      });
+      if (src) config.src = src;
+
+      // Show Angular project info if available
+      if (config.angular) {
+        console.log(chalk.cyan(`Angular Project: ${config.angular.project}`));
+        console.log(chalk.gray(`Prefix: ${config.angular.prefix}`));
+        console.log(chalk.gray(`Style: ${config.angular.stylePreprocessor}\n`));
+      }
+
+      console.log(chalk.gray(`Scanning: ${config.src}\n`));
+
+      // Scan files
+      const files = await scanScssFiles(config.src, config.ignore);
+      console.log(chalk.green(`✓ Found ${files.length} SCSS files\n`));
+
+      // Analyze patterns
+      const analysis = analyzeAngularPatterns(files);
+
+      // Generate report
+      const report = generateAngularPatternReport(analysis, options.format);
+      console.log(report);
+
+      // Exit with error code if issues found
+      if (analysis.summary.ngDeepCount > 0 || analysis.summary.importantCount > 0) {
+        console.log(
+          chalk.yellow('⚠ Anti-patterns detected. Run "modernize" command to fix them.\n')
+        );
+      } else {
+        console.log(chalk.green('✓ No anti-patterns detected!\n'));
+      }
+    } catch (error) {
+      console.error(chalk.red('✗ Error:'), error.message);
+      process.exit(1);
+    }
+  });
+
+// Modernize command (refactor ng-deep and !important)
+program
+  .command('modernize')
+  .description('Refactor SCSS files following Angular Material v15+ best practices')
+  .argument('[src]', 'Source directory to scan (optional if using angular.json)')
+  .option('--global-styles <path>', 'Path to global styles file', './src/styles.scss')
+  .option('--no-ng-deep', 'Skip ::ng-deep refactoring')
+  .option('--no-important', 'Skip !important refactoring')
+  .option('--dry-run', 'Preview changes without modifying files')
+  .option('--config <path>', 'Path to config file')
+  .option('--angular-json <path>', 'Path to angular.json file')
+  .option('--project <name>', 'Angular project name (uses default if not specified)')
+  .option('--no-angular', 'Disable angular.json integration')
+  .action(async (src, options) => {
+    try {
+      console.log(
+        chalk.cyan.bold('\n🔧 Modernizing SCSS Files (Angular Material v15+ Best Practices)\n')
+      );
+
+      const config = loadConfig(options.config, {
+        useAngularJson: options.angular !== false,
+        angularJsonPath: options.angularJson,
+        projectName: options.project,
+      });
+      if (src) config.src = src;
+
+      if (options.dryRun) {
+        console.log(chalk.yellow('DRY RUN MODE - No files will be modified\n'));
+      }
+
+      // Show Angular project info if available
+      if (config.angular) {
+        console.log(chalk.cyan(`Angular Project: ${config.angular.project}`));
+        console.log(chalk.gray(`Prefix: ${config.angular.prefix}`));
+        console.log(chalk.gray(`Style: ${config.angular.stylePreprocessor}\n`));
+      }
+
+      console.log(chalk.gray(`Scanning: ${config.src}`));
+      console.log(chalk.gray(`Global styles: ${options.globalStyles}\n`));
+
+      // Scan files
+      const files = await scanScssFiles(config.src, config.ignore);
+      console.log(chalk.green(`✓ Found ${files.length} SCSS files\n`));
+
+      // Refactor patterns
+      const results = refactorAngularPatterns(files, {
+        removeNgDeep: options.ngDeep !== false,
+        removeImportant: options.important !== false,
+        createGlobalStyles: true,
+        globalStylesPath: options.globalStyles,
+        dryRun: options.dryRun,
+      });
+
+      // Show results
+      if (results.modified.length > 0) {
+        console.log(chalk.green(`✓ Modified ${results.modified.length} file(s)\n`));
+
+        results.modified.forEach(file => {
+          console.log(chalk.white(`  ${path.basename(file.file)}:`));
+          file.changes.forEach(change => {
+            if (change.type === 'ng-deep-removed') {
+              console.log(chalk.yellow(`    - Removed ${change.count} ::ng-deep occurrence(s)`));
+            } else if (change.type === 'important-removed') {
+              console.log(chalk.yellow(`    - Removed ${change.count} !important declaration(s)`));
+            }
+          });
+        });
+        console.log();
+      }
+
+      if (results.globalStyles.length > 0) {
+        console.log(
+          chalk.cyan(
+            `✓ Extracted ${results.globalStyles.length} style(s) to ${options.globalStyles}\n`
+          )
+        );
+      }
+
+      if (results.warnings.length > 0) {
+        console.log(chalk.yellow.bold('⚠ Warnings:\n'));
+        results.warnings.forEach(warning => {
+          console.log(chalk.yellow(`  ${warning.message}`));
+        });
+        console.log();
+      }
+
+      if (results.modified.length === 0) {
+        console.log(chalk.green('✓ No changes needed - files already follow best practices!\n'));
+      } else if (!options.dryRun) {
+        console.log(chalk.bold.green('✓ Modernization complete!\n'));
+        console.log(chalk.gray('Next steps:'));
+        console.log(chalk.gray('  1. Review the modified files'));
+        console.log(chalk.gray('  2. Test your application'));
+        console.log(
+          chalk.gray('  3. Consider using Angular Material theme mixins for component theming')
+        );
+        console.log(chalk.gray('  4. Review extracted global styles and organize as needed\n'));
+      }
+    } catch (error) {
+      console.error(chalk.red('✗ Error:'), error.message);
+      process.exit(1);
+    }
+  });
+
+// Detect Bootstrap command
+program
+  .command('detect-bootstrap')
+  .description('Detect Bootstrap classes and analyze migration to Angular Material')
+  .argument('[src]', 'Source directory to scan (optional if using angular.json)')
+  .option('--format <format>', 'Report format (table, json, markdown)', 'table')
+  .option('--config <path>', 'Path to config file')
+  .option('--angular-json <path>', 'Path to angular.json file')
+  .option('--project <name>', 'Angular project name (uses default if not specified)')
+  .option('--no-angular', 'Disable angular.json integration')
+  .action(async (src, options) => {
+    try {
+      console.log(chalk.cyan.bold('\n📦 Bootstrap to Material Migration Analysis\n'));
+
+      const config = loadConfig(options.config, {
+        useAngularJson: options.angular !== false,
+        angularJsonPath: options.angularJson,
+        projectName: options.project,
+      });
+      if (src) config.src = src;
+
+      // Show Angular project info if available
+      if (config.angular) {
+        console.log(chalk.cyan(`Angular Project: ${config.angular.project}`));
+        console.log(chalk.gray(`Prefix: ${config.angular.prefix}`));
+        console.log(chalk.gray(`Style: ${config.angular.stylePreprocessor}\n`));
+      }
+
+      console.log(chalk.gray(`Scanning: ${config.src}\n`));
+
+      // Scan files - look for SCSS, HTML, and TS files
+      const allFiles = await scanTemplateFiles(config.src, config.ignore);
+      console.log(chalk.green(`✓ Found ${allFiles.length} files (SCSS, HTML, TS)\n`));
+
+      // Detect Bootstrap
+      const detection = detectBootstrap(allFiles);
+
+      // Generate report
+      const report = generateBootstrapReport(detection, options.format);
+      console.log(report);
+
+      // Provide migration guidance
+      if (detection.summary.totalBootstrapClasses > 0) {
+        console.log(
+          chalk.yellow(
+            '⚠ Bootstrap classes detected. Use "migrate-bootstrap" command to convert.\n'
+          )
+        );
+        console.log(chalk.gray('Migration options:'));
+        console.log(chalk.gray('  • Components (btn, card, etc.) → Angular Material components'));
+        console.log(chalk.gray('  • Utilities (d-flex, spacing, etc.) → Custom utility classes'));
+        console.log(chalk.gray('  • Grid system → CSS Grid or Flexbox\n'));
+      } else {
+        console.log(chalk.green('✓ No Bootstrap classes detected!\n'));
+      }
+    } catch (error) {
+      console.error(chalk.red('✗ Error:'), error.message);
+      process.exit(1);
+    }
+  });
+
+// Migrate Bootstrap command
+program
+  .command('migrate-bootstrap')
+  .description('Migrate Bootstrap classes to Angular Material MDC-based styles')
+  .argument('[src]', 'Source directory to scan (optional if using angular.json)')
+  .option(
+    '--custom-utilities <path>',
+    'Path to custom utilities file',
+    './src/styles/utilities.scss'
+  )
+  .option('--no-custom-utilities', 'Skip creating custom utility classes')
+  .option('--no-remove-imports', 'Keep Bootstrap imports')
+  .option('--dry-run', 'Preview changes without modifying files')
+  .option('--config <path>', 'Path to config file')
+  .option('--angular-json <path>', 'Path to angular.json file')
+  .option('--project <name>', 'Angular project name (uses default if not specified)')
+  .option('--no-angular', 'Disable angular.json integration')
+  .action(async (src, options) => {
+    try {
+      console.log(chalk.cyan.bold('\n🔄 Migrating Bootstrap to Angular Material\n'));
+
+      const config = loadConfig(options.config, {
+        useAngularJson: options.angular !== false,
+        angularJsonPath: options.angularJson,
+        projectName: options.project,
+      });
+      if (src) config.src = src;
+
+      if (options.dryRun) {
+        console.log(chalk.yellow('DRY RUN MODE - No files will be modified\n'));
+      }
+
+      // Show Angular project info if available
+      if (config.angular) {
+        console.log(chalk.cyan(`Angular Project: ${config.angular.project}`));
+        console.log(chalk.gray(`Prefix: ${config.angular.prefix}`));
+        console.log(chalk.gray(`Style: ${config.angular.stylePreprocessor}\n`));
+      }
+
+      console.log(chalk.gray(`Scanning: ${config.src}`));
+      console.log(
+        chalk.gray(
+          `Utilities output: ${options.customUtilities || './src/styles/utilities.scss'}\n`
+        )
+      );
+
+      // Scan files - look for SCSS, HTML, and TS files
+      const allFiles = await scanTemplateFiles(config.src, config.ignore);
+      console.log(chalk.green(`✓ Found ${allFiles.length} files (SCSS, HTML, TS)\n`));
+
+      // Migrate Bootstrap
+      const results = migrateBootstrapToMaterial(allFiles, {
+        createCustomUtilities: options.customUtilities !== false,
+        customUtilitiesPath: options.customUtilities || './src/styles/utilities.scss',
+        removeBootstrapImports: options.removeImports !== false,
+        dryRun: options.dryRun,
+      });
+
+      // Show results
+      if (results.modified.length > 0) {
+        console.log(chalk.green(`✓ Modified ${results.modified.length} file(s)\n`));
+
+        results.modified.slice(0, 10).forEach(file => {
+          console.log(chalk.white(`  ${path.basename(file.file)}:`));
+          file.changes.forEach(change => {
+            if (change.type === 'import-removed') {
+              console.log(chalk.yellow(`    - ${change.description}`));
+            }
+          });
+        });
+        if (results.modified.length > 10) {
+          console.log(chalk.gray(`  ... and ${results.modified.length - 10} more`));
+        }
+        console.log();
+      }
+
+      if (results.customUtilities.length > 0) {
+        console.log(
+          chalk.cyan(
+            `✓ Generated ${results.customUtilities.length} custom utility class(es) in ${options.customUtilities || './src/styles/utilities.scss'}\n`
+          )
+        );
+      }
+
+      if (results.componentMigrations.length > 0) {
+        console.log(
+          chalk.yellow(
+            `⚠ ${results.componentMigrations.length} component(s) require manual migration\n`
+          )
+        );
+      }
+
+      if (results.warnings.length > 0) {
+        console.log(chalk.yellow.bold('⚠ Warnings:\n'));
+        results.warnings.slice(0, 5).forEach(warning => {
+          console.log(chalk.yellow(`  ${warning.message}`));
+          if (warning.variables) {
+            console.log(chalk.gray(`    Variables: ${warning.variables.join(', ')}`));
+          }
+        });
+        if (results.warnings.length > 5) {
+          console.log(chalk.gray(`  ... and ${results.warnings.length - 5} more warnings`));
+        }
+        console.log();
+      }
+
+      if (results.modified.length === 0 && results.warnings.length === 0) {
+        console.log(chalk.green('✓ No Bootstrap code detected!\n'));
+      } else if (!options.dryRun) {
+        console.log(chalk.bold.green('✓ Migration complete!\n'));
+        console.log(chalk.gray('Next steps:'));
+        console.log(chalk.gray('  1. Review the modified SCSS files'));
+        console.log(chalk.gray('  2. Update HTML templates to use Angular Material components'));
+        console.log(chalk.gray('  3. Import custom utilities in your styles.scss'));
+        console.log(chalk.gray('  4. Install @angular/material if not already installed'));
+        console.log(chalk.gray('  5. Test your application thoroughly\n'));
+        console.log(chalk.cyan('Component Migration Guide:'));
+        console.log(chalk.gray('  • .btn → <button mat-button>'));
+        console.log(chalk.gray('  • .card → <mat-card>'));
+        console.log(
+          chalk.gray('  • .form-control → <mat-form-field><input matInput></mat-form-field>')
+        );
+        console.log(chalk.gray('  • See: https://material.angular.io/components\n'));
+      }
+    } catch (error) {
+      console.error(chalk.red('✗ Error:'), error.message);
+      process.exit(1);
+    }
+  });
+
+// Analyze style organization command
+program
+  .command('analyze-organization')
+  .description('Analyze style organization and get recommendations for best practices')
+  .argument('[src]', 'Source directory to scan (optional if using angular.json)')
+  .option('--format <format>', 'Report format (table, json, markdown)', 'table')
+  .option('--config <path>', 'Path to config file')
+  .option('--angular-json <path>', 'Path to angular.json file')
+  .option('--project <name>', 'Angular project name (uses default if not specified)')
+  .option('--no-angular', 'Disable angular.json integration')
+  .action(async (src, options) => {
+    try {
+      console.log(chalk.cyan.bold('\n📋 Style Organization Analysis\n'));
+
+      const config = loadConfig(options.config, {
+        useAngularJson: options.angular !== false,
+        angularJsonPath: options.angularJson,
+        projectName: options.project,
+      });
+      if (src) config.src = src;
+
+      // Show Angular project info if available
+      if (config.angular) {
+        console.log(chalk.cyan(`Angular Project: ${config.angular.project}`));
+        console.log(chalk.gray(`Prefix: ${config.angular.prefix}`));
+        console.log(chalk.gray(`Style: ${config.angular.stylePreprocessor}\n`));
+      }
+
+      console.log(chalk.gray(`Scanning: ${config.src}\n`));
+
+      // Scan files
+      const files = await scanScssFiles(config.src, config.ignore);
+      console.log(chalk.green(`✓ Found ${files.length} SCSS files\n`));
+
+      // Analyze organization
+      const analysis = analyzeStyleOrganization(files, config);
+
+      // Generate report
+      const report = generateOrganizationReport(analysis, options.format);
+      console.log(report);
+
+      // Provide guidance
+      if (analysis.recommendations.length > 0) {
+        console.log(chalk.yellow.bold('💡 Next Steps:\n'));
+        console.log(chalk.gray('1. Review recommendations above'));
+        console.log(chalk.gray('2. Run "refactor" command to extract variables'));
+        console.log(chalk.gray('3. Run "modernize" to remove anti-patterns'));
+        console.log(chalk.gray('4. Consider restructuring based on suggested organization'));
+        console.log(chalk.gray('5. Use @use instead of @import for better modularity\n'));
+      } else {
+        console.log(chalk.green('✓ Your styles are well organized!\n'));
+      }
+    } catch (error) {
+      console.error(chalk.red('✗ Error:'), error.message);
+      process.exit(1);
+    }
+  });
+
+// Generate theme structure command
+program
+  .command('generate-themes')
+  .description('Generate theme structure for dark/light mode support with Angular Material')
+  .argument('[src]', 'Source directory to scan for analysis (optional)')
+  .option('--output <dir>', 'Output directory for theme files', './src/styles')
+  .option('--analyze', 'Analyze existing styles for theme readiness')
+  .option('--format <format>', 'Report format (table, json, markdown)', 'table')
+  .action(async (src, options) => {
+    try {
+      console.log(chalk.cyan.bold('\n🎨 Theme Structure Generator\n'));
+
+      const fs = require('fs');
+      const outputDir = path.resolve(options.output);
+
+      // Analyze existing styles if requested
+      if (options.analyze && src) {
+        console.log(chalk.gray(`Analyzing: ${src}\n`));
+        const config = loadConfig();
+        const files = await scanScssFiles(src, config.ignore);
+        const analysis = analyzeThemeReadiness(files);
+
+        console.log(chalk.blue.bold('Theme Readiness Analysis:\n'));
+        console.log(chalk.gray(`Total hardcoded colors: ${analysis.hardcodedColors.length}`));
+        console.log(chalk.gray(`Unique colors: ${analysis.colorUsage.size}`));
+        console.log(
+          chalk.gray(`Components needing theme mixins: ${analysis.themeableComponents.length}\n`)
+        );
+
+        if (analysis.recommendations.length > 0) {
+          console.log(chalk.yellow.bold('📋 Recommendations:\n'));
+          analysis.recommendations.forEach(rec => {
+            const icon = rec.priority === 'high' ? '🔴' : '🟡';
+            console.log(chalk.gray(`${icon} ${rec.message}`));
+          });
+          console.log();
+        }
+      }
+
+      // Generate theme files
+      console.log(chalk.gray(`Generating theme files in: ${outputDir}\n`));
+
+      const themeStructure = generateThemeStructure({
+        outputDir,
+        includeComponents: true,
+      });
+
+      // Create output directory if it doesn't exist
+      if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir, { recursive: true });
+      }
+
+      // Write theme files
+      const filesToWrite = {
+        '_theme-base.scss': themeStructure.files.base,
+        '_theme-light.scss': themeStructure.files.lightTheme,
+        '_theme-dark.scss': themeStructure.files.darkTheme,
+        'themes.scss': themeStructure.files.themeLoader,
+        '_css-variables.scss': themeStructure.files.cssVariables,
+      };
+
+      if (themeStructure.files.componentThemes) {
+        filesToWrite['_component-theme-mixin.scss'] = themeStructure.files.componentThemes;
+      }
+
+      Object.entries(filesToWrite).forEach(([filename, content]) => {
+        const filepath = path.join(outputDir, filename);
+        fs.writeFileSync(filepath, content, 'utf8');
+        console.log(chalk.green(`✓ Created ${filename}`));
+      });
+
+      console.log();
+      console.log(chalk.green.bold('✓ Theme structure generated!\n'));
+
+      // Show recommendations
+      console.log(chalk.blue.bold('📖 Usage Guide:\n'));
+      console.log(chalk.gray('1. Import themes.scss in your styles.scss:'));
+      console.log(chalk.cyan("   @use './styles/themes';"));
+      console.log();
+      console.log(chalk.gray('2. Add theme class to your app component:'));
+      console.log(chalk.cyan('   <div [class.dark-theme]="isDarkMode">'));
+      console.log(chalk.cyan('     <router-outlet></router-outlet>'));
+      console.log(chalk.cyan('   </div>'));
+      console.log();
+      console.log(chalk.gray('3. Toggle theme in your component:'));
+      console.log(chalk.cyan('   isDarkMode = false;'));
+      console.log(chalk.cyan('   toggleTheme() {'));
+      console.log(chalk.cyan('     this.isDarkMode = !this.isDarkMode;'));
+      console.log(chalk.cyan('   }'));
+      console.log();
+      console.log(chalk.gray('4. Use theme variables in components:'));
+      console.log(chalk.cyan("   @use '../../styles/theme-base' as base;"));
+      console.log(chalk.cyan('   .my-element {'));
+      console.log(chalk.cyan('     padding: base.$spacing-md;'));
+      console.log(chalk.cyan('   }'));
+      console.log();
+
+      // Show recommendations
+      console.log(chalk.yellow.bold('💡 Best Practices:\n'));
+      themeStructure.recommendations.forEach(rec => {
+        const icon = rec.priority === 'high' ? '🔴' : rec.priority === 'medium' ? '🟡' : '🟢';
+        console.log(chalk.gray(`${icon} [${rec.category}] ${rec.recommendation}`));
+      });
+      console.log();
+
+      // Show structure
+      console.log(chalk.blue.bold('📁 Recommended Directory Structure:\n'));
+      Object.entries(themeStructure.structure).forEach(([dir, files]) => {
+        console.log(chalk.cyan(dir));
+        Object.entries(files).forEach(([file, desc]) => {
+          console.log(chalk.gray(`  ├─ ${file} - ${desc}`));
+        });
+      });
+      console.log();
+    } catch (error) {
+      console.error(chalk.red('✗ Error:'), error.message);
+      process.exit(1);
+    }
+  });
+
+program.parse();