scss-variable-extractor 1.4.0 → 1.5.2

package/README.md

@@ -342,7 +342,8 @@ npx scss-extract migrate-bootstrap ./src --custom-utilities ./src/utilities.scss
 - `[src]` - Source directory to scan (optional, auto-detected from angular.json)
 
 **Options:**
-- `--custom-utilities <path>` - Path for custom utilities file (default: `./src/utilities.scss`)
+- `--custom-utilities <path>` - Path for custom utilities file (default: `./src/styles/utilities.scss`)
+- `--no-custom-utilities` - Skip creating custom utility classes
 - `--dry-run` - Preview changes without modifying files
 - `--angular-json <path>` - Path to angular.json file
 - `--project <name>` - Specify which project to use
@@ -408,7 +409,13 @@ npx scss-extract migrate-bootstrap --dry-run
 # 3. Apply migration
 npx scss-extract migrate-bootstrap
 
-# 4. Review changes and test components
+# 4. Apply migration with custom utilities path
+npx scss-extract migrate-bootstrap --custom-utilities ./custom/utilities.scss
+
+# 5. Skip utilities generation
+npx scss-extract migrate-bootstrap --no-custom-utilities
+
+# 6. Review changes and test components
 # Manual review of generated utilities.scss and component templates
 ```
 
@@ -701,6 +708,55 @@ MIT License - see [LICENSE](./LICENSE) file for details
 
 ## Changelog
 
+### 1.5.2 (2026-02-12)
+
+- **Fixed:** `migrate-bootstrap` command option renamed from `--utilities` to `--custom-utilities` to work with `--no-custom-utilities`
+- **Fixed:** Default utilities path corrected to `./src/styles/utilities.scss`
+
+### 1.5.1 (2026-02-12)
+
+- **Enhanced:** HTML class detection now handles spaces around `=` (e.g., `class = "py-3"`)
+- **Added:** Support for backtick quotes in class attributes (e.g., `class=\`py-3\``)
+- **Added:** Support for Angular property binding (e.g., `[class]="py-3"`)
+- **Improved:** More robust Bootstrap class detection across different HTML/template formats
+
+### 1.5.0 (2026-02-12)
+
+- **Fixed:** Bootstrap detection now scans SCSS class selectors (`.py-3`, `.mt-4`, etc.)
+- **Enhanced:** Bootstrap commands now scan SCSS, HTML, and TypeScript files
+- **Added:** New `scanTemplateFiles` function for comprehensive file scanning
+- **Improved:** Bootstrap class detection with deduplication
+
+### 1.4.0 (2026-02-12)
+
+- **Added:** Bootstrap to Angular Material migration capability
+- **Added:** `detect-bootstrap` command for analyzing Bootstrap usage
+- **Added:** `migrate-bootstrap` command for converting Bootstrap classes
+- **Added:** Custom utilities generation for flex/grid/spacing classes
+- **Added:** Material Design spacing scale (0, 4px, 8px, 16px, 24px, 48px)
+- 100+ Bootstrap class mappings
+
+### 1.3.0 (2026-02-12)
+
+- **Added:** Angular.json integration for automatic project configuration
+- **Added:** Auto-detection of source directory and style preprocessor
+- **Added:** Support for multi-project Angular workspaces
+- All commands support `--angular-json`, `--project`, `--no-angular` options
+
+### 1.2.0 (2026-02-12)
+
+- **Added:** Angular Material v15+ pattern refactoring
+- **Added:** `analyze-patterns` command to detect anti-patterns
+- **Added:** `modernize` command to remove `::ng-deep` and `!important`
+- Best practice enforcement with migration suggestions
+
+### 1.1.0 (2026-02-12)
+
+- **Added:** Global installation support via npm link/publish
+- **Added:** Positional `[src]` argument for all commands
+- **Enhanced:** Scan any folder in your project
+- **Improved:** CLI help and documentation
+
 ### 1.0.0 (2026-02-12)
 
 - Initial release

package/bin/cli.js

@@ -4,7 +4,7 @@ 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');
@@ -448,19 +448,9 @@ program
       
       console.log(chalk.gray(`Scanning: ${config.src}\n`));
       
-      // Scan files - look for HTML and SCSS files
-      const scssFiles = await scanScssFiles(config.src, config.ignore);
-      const htmlPattern = path.join(config.src, '**/*.html').replace(/\\/g, '/');
-      const glob = require('glob');
-      const htmlFiles = await new Promise((resolve, reject) => {
-        glob(htmlPattern, { ignore: config.ignore }, (err, files) => {
-          if (err) reject(err);
-          else resolve(files.map(f => path.resolve(f)));
-        });
-      });
-      
-      const allFiles = [...scssFiles, ...htmlFiles];
-      console.log(chalk.green(`✓ Found ${scssFiles.length} SCSS and ${htmlFiles.length} HTML files\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);
@@ -491,7 +481,7 @@ 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('--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')
@@ -522,26 +512,16 @@ program
       }
       
       console.log(chalk.gray(`Scanning: ${config.src}`));
-      console.log(chalk.gray(`Utilities output: ${options.utilities}\n`));
-      
-      // Scan files
-      const scssFiles = await scanScssFiles(config.src, config.ignore);
-      const htmlPattern = path.join(config.src, '**/*.html').replace(/\\/g, '/');
-      const glob = require('glob');
-      const htmlFiles = await new Promise((resolve, reject) => {
-        glob(htmlPattern, { ignore: config.ignore }, (err, files) => {
-          if (err) reject(err);
-          else resolve(files.map(f => path.resolve(f)));
-        });
-      });
+      console.log(chalk.gray(`Utilities output: ${options.customUtilities || './src/styles/utilities.scss'}\n`));
       
-      const allFiles = [...scssFiles, ...htmlFiles];
-      console.log(chalk.green(`✓ Found ${scssFiles.length} SCSS and ${htmlFiles.length} HTML files\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,
+        customUtilitiesPath: options.customUtilities || './src/styles/utilities.scss',
         removeBootstrapImports: options.removeImports !== false,
         dryRun: options.dryRun
       });
@@ -565,7 +545,7 @@ program
       }
       
       if (results.customUtilities.length > 0) {
-        console.log(chalk.cyan(`✓ Generated ${results.customUtilities.length} custom utility class(es) in ${options.utilities}\n`));
+        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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scss-variable-extractor",
-  "version": "1.4.0",
+  "version": "1.5.2",
   "description": "Analyzes Angular SCSS files and extracts repeated hardcoded values into reusable variables",
   "bin": {
     "scss-extract": "./bin/cli.js"

package/src/bootstrap-migrator.js

@@ -160,28 +160,60 @@ function detectBootstrapInFile(content, filePath) {
     utilities: 0
   };
 
-  // Detect class attributes in templates (if included in SCSS via ::ng-deep)
-  const classRegex = /class=["']([^"']+)["']/g;
-  let match;
+  const foundClasses = new Set();
+
+  // Detect class attributes in HTML/TS templates (with optional whitespace)
+  // Supports: class="...", class='...', class=`...`, [class]="..."
+  const classPatterns = [
+    /class\s*=\s*["']([^"']+)["']/g,
+    /class\s*=\s*`([^`]+)`/g,
+    /\[class\]\s*=\s*["']([^"']+)["']/g
+  ];
   
-  while ((match = classRegex.exec(content)) !== null) {
-    const classes = match[1].split(/\s+/);
-    classes.forEach(cls => {
-      if (isBootstrapClass(cls)) {
-        const mapping = getBootstrapMapping(cls);
-        detected.classes.push({
-          class: cls,
-          line: getLineNumber(content, match.index),
-          mapping: mapping,
-          type: mapping.component ? 'component' : 'utility'
-        });
-        
-        if (mapping.material) detected.materialMappable++;
-        if (mapping.needsCustom) detected.needsCustomStyles++;
-        if (mapping.component) detected.components++;
-        else detected.utilities++;
-      }
-    });
+  classPatterns.forEach(classRegex => {
+    let match;
+    while ((match = classRegex.exec(content)) !== null) {
+      const classes = match[1].split(/\s+/);
+      classes.forEach(cls => {
+        if (cls && isBootstrapClass(cls) && !foundClasses.has(cls)) {
+          foundClasses.add(cls);
+          const mapping = getBootstrapMapping(cls);
+          detected.classes.push({
+            class: cls,
+            line: getLineNumber(content, match.index),
+            mapping: mapping,
+            type: mapping.component ? 'component' : 'utility'
+          });
+          
+          if (mapping.material) detected.materialMappable++;
+          if (mapping.needsCustom) detected.needsCustomStyles++;
+          if (mapping.component) detected.components++;
+          else detected.utilities++;
+        }
+      });
+    }
+  });
+
+  // Detect CSS class selectors in SCSS files (e.g., .py-3, .mt-4)
+  const selectorRegex = /\.([a-z][a-z0-9-]*)/gi;
+  let match;
+  while ((match = selectorRegex.exec(content)) !== null) {
+    const cls = match[1];
+    if (cls && isBootstrapClass(cls) && !foundClasses.has(cls)) {
+      foundClasses.add(cls);
+      const mapping = getBootstrapMapping(cls);
+      detected.classes.push({
+        class: cls,
+        line: getLineNumber(content, match.index),
+        mapping: mapping,
+        type: mapping.component ? 'component' : 'utility'
+      });
+      
+      if (mapping.material) detected.materialMappable++;
+      if (mapping.needsCustom) detected.needsCustomStyles++;
+      if (mapping.component) detected.components++;
+      else detected.utilities++;
+    }
   }
 
   // Detect Bootstrap variables

package/src/scanner.js

@@ -25,6 +25,31 @@ async function scanScssFiles(srcPath, ignorePatterns = []) {
   });
 }
 
+/**
+ * Recursively scans for SCSS and template files (HTML, TS) in the given source directory
+ * @param {string} srcPath - Source directory to scan
+ * @param {Array<string>} ignorePatterns - Patterns to ignore
+ * @returns {Promise<Array<string>>} - Array of absolute file paths
+ */
+async function scanTemplateFiles(srcPath, ignorePatterns = []) {
+  return new Promise((resolve, reject) => {
+    const pattern = path.join(srcPath, '**/*.{scss,html,ts}').replace(/\\/g, '/');
+    
+    glob(pattern, {
+      ignore: ignorePatterns
+    }, (err, files) => {
+      if (err) {
+        reject(err);
+      } else {
+        // Ensure absolute paths
+        const absoluteFiles = files.map(f => path.resolve(f));
+        resolve(absoluteFiles);
+      }
+    });
+  });
+}
+
 module.exports = {
-  scanScssFiles
+  scanScssFiles,
+  scanTemplateFiles
 };

package/test/bootstrap-migrator.test.js

@@ -77,6 +77,44 @@ describe('Bootstrap Migrator', () => {
       expect(results.summary.filesWithBootstrap).toBe(0);
       expect(results.summary.totalBootstrapClasses).toBe(0);
     });
+
+    test('should detect Bootstrap classes in SCSS selectors', () => {
+      // Create a temp SCSS file with Bootstrap class selectors
+      const tempScssPath = path.join(__dirname, 'fixtures/apps/subapp/src/app/bootstrap-component/temp-scss-test.scss');
+      const scssContent = `
+.component {
+  .py-3 {
+    color: blue;
+  }
+  
+  .mt-4 {
+    background: red;
+  }
+  
+  .d-flex {
+    display: flex;
+  }
+}
+`;
+      fs.writeFileSync(tempScssPath, scssContent, 'utf8');
+      
+      try {
+        const results = detectBootstrap([tempScssPath]);
+        
+        expect(results.summary.filesWithBootstrap).toBe(1);
+        expect(results.summary.totalBootstrapClasses).toBeGreaterThan(0);
+        
+        const classNames = results.files[0].classes.map(c => c.class);
+        expect(classNames).toContain('py-3');
+        expect(classNames).toContain('mt-4');
+        expect(classNames).toContain('d-flex');
+      } finally {
+        // Clean up
+        if (fs.existsSync(tempScssPath)) {
+          fs.unlinkSync(tempScssPath);
+        }
+      }
+    });
   });
 
   describe('migrateBootstrapToMaterial', () => {

package/test/scanner.test.js

@@ -1,4 +1,4 @@
-const { scanScssFiles } = require('../src/scanner');
+const { scanScssFiles, scanTemplateFiles } = require('../src/scanner');
 const path = require('path');
 
 describe('Scanner', () => {
@@ -22,4 +22,11 @@ describe('Scanner', () => {
     
     expect(files.every(f => path.isAbsolute(f))).toBe(true);
   });
+
+  test('should find template files (SCSS, HTML, TS) in directory', async () => {
+    const files = await scanTemplateFiles(fixturesPath);
+    
+    expect(files.length).toBeGreaterThan(0);
+    expect(files.every(f => f.endsWith('.scss') || f.endsWith('.html') || f.endsWith('.ts'))).toBe(true);
+  });
 });