scss-variable-extractor 1.1.0 → 1.5.1

package/bin/cli.js

@@ -4,11 +4,13 @@ const { Command } = require('commander');
 const chalk = require('chalk');
 const path = require('path');
 const { loadConfig } = require('../src/config');
-const { scanScssFiles } = require('../src/scanner');
+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 program = new Command();
 
@@ -21,21 +23,35 @@ program
 program
   .command('analyze')
   .description('Dry-run analysis - identifies repeated values without modifying files')
-  .argument('<src>', 'Source directory to scan')
+  .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);
+      const config = loadConfig(options.config, {
+        useAngularJson: options.angular !== false,
+        angularJsonPath: options.angularJson,
+        projectName: options.project
+      });
       
       // Override config with command-line options
-      config.src = src;
+      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`));
       
@@ -85,21 +101,35 @@ program
 program
   .command('generate')
   .description('Generate variables file only (does not modify existing SCSS files)')
-  .argument('<src>', 'Source directory to scan')
+  .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);
+      const config = loadConfig(options.config, {
+        useAngularJson: options.angular !== false,
+        angularJsonPath: options.angularJson,
+        projectName: options.project
+      });
       
       // Override config with command-line options
-      config.src = src;
+      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`));
       
@@ -154,21 +184,35 @@ program
 program
   .command('refactor')
   .description('Full extraction + replacement (generates variables file and refactors SCSS files)')
-  .argument('<src>', 'Source directory to scan')
+  .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);
+      const config = loadConfig(options.config, {
+        useAngularJson: options.angular !== false,
+        angularJsonPath: options.angularJson,
+        projectName: options.project
+      });
       
       // Override config with command-line options
-      config.src = src;
+      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`));
       
@@ -223,4 +267,326 @@ program
     }
   });
 
+// 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('--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.utilities}\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.utilities,
+        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.utilities}\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);
+    }
+  });
+
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scss-variable-extractor",
-  "version": "1.1.0",
+  "version": "1.5.1",
   "description": "Analyzes Angular SCSS files and extracts repeated hardcoded values into reusable variables",
   "bin": {
     "scss-extract": "./bin/cli.js"
@@ -10,7 +10,11 @@
     "test": "jest",
     "analyze": "node bin/cli.js analyze .",
     "generate": "node bin/cli.js generate .",
-    "refactor": "node bin/cli.js refactor ."
+    "refactor": "node bin/cli.js refactor .",
+    "analyze-patterns": "node bin/cli.js analyze-patterns .",
+    "modernize": "node bin/cli.js modernize .",
+    "detect-bootstrap": "node bin/cli.js detect-bootstrap .",
+    "migrate-bootstrap": "node bin/cli.js migrate-bootstrap ."
   },
   "keywords": [
     "angular",