scss-variable-extractor 1.6.0 → 1.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scss-variable-extractor",
-  "version": "1.6.0",
+  "version": "1.6.3",
   "description": "Analyzes Angular SCSS files and extracts repeated hardcoded values into reusable variables",
   "bin": {
     "scss-extract": "./bin/cli.js"
@@ -14,7 +14,10 @@
     "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 ."
+    "migrate-bootstrap": "node bin/cli.js migrate-bootstrap .",
+    "release": "npm test && npm version patch && npm publish && git push --follow-tags",
+    "release:minor": "npm test && npm version minor && npm publish && git push --follow-tags",
+    "release:major": "npm test && npm version major && npm publish && git push --follow-tags"
   },
   "keywords": [
     "angular",

package/src/refactorer.js

@@ -57,7 +57,7 @@ function refactorFile(content, analysis, variablesFilePath, currentFilePath, con
     
     // Check if replacements are in safe zones
     matches.forEach(m => {
-      if (!isInSafeZone(content, m.index)) {
+      if (!isInSafeZone(content, m.index, m.matched)) {
         // Replace the value
         const before = newContent;
         newContent = replaceAt(newContent, m.matched, variableName, m.index);
@@ -109,14 +109,31 @@ function buildValueMap(analysis) {
 function createReplacementRegex(value) {
   // Escape special regex characters
   const escaped = value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-  // Match the value with word boundaries or specific contexts
-  return new RegExp(escaped, 'g');
+  
+  // Add appropriate boundaries based on value type to prevent partial matches
+  
+  if (/^#[0-9a-fA-F]+$/.test(value)) {
+    // Hex colors - no word boundary before #, but check after
+    return new RegExp(`${escaped}\\b`, 'g');
+  } else if (/\d+(?:px|%|em|rem|vh|vw|pt|ch|ex)$/.test(value)) {
+    // Values with CSS units - ensure not part of larger number
+    return new RegExp(`(?<!\\d)${escaped}\\b`, 'g');
+  } else if (/^-?\d+(?:\.\d+)?$/.test(value)) {
+    // Pure numbers (including decimals) - ensure not part of larger number
+    return new RegExp(`(?<!\\d)${escaped}(?!\\d)`, 'g');
+  } else if (/^rgba?\(/.test(value)) {
+    // RGB/RGBA colors - match complete function
+    return new RegExp(escaped, 'g');
+  } else {
+    // Other values (keywords, etc.) - use word boundaries
+    return new RegExp(`\\b${escaped}\\b`, 'g');
+  }
 }
 
 /**
  * Checks if a position in content is in a safe zone (should not be replaced)
  */
-function isInSafeZone(content, position) {
+function isInSafeZone(content, position, matchedValue) {
   // Check for variable declarations
   const lineStart = content.lastIndexOf('\n', position);
   const lineEnd = content.indexOf('\n', position);
@@ -127,6 +144,29 @@ function isInSafeZone(content, position) {
     return true;
   }
   
+  // Check if we're in the middle of a larger number or value
+  const charBefore = content.charAt(position - 1);
+  const charAfter = content.charAt(position + matchedValue.length);
+  
+  // Prevent replacement if surrounded by digits (partial number match)
+  if (/\d/.test(charBefore) || (/^\d+$/.test(matchedValue) && /\d/.test(charAfter))) {
+    return true;
+  }
+  
+  // Prevent replacement within hex colors
+  if (/[0-9a-fA-F]/.test(charBefore) || /[0-9a-fA-F]/.test(charAfter)) {
+    // Look back further to check if we're in a hex color
+    const lookBehind = content.substring(Math.max(0, position - 10), position);
+    if (/#[0-9a-fA-F]*$/.test(lookBehind)) {
+      return true;
+    }
+  }
+  
+  // Prevent replacement if it would create invalid variable concatenation
+  if (charBefore === '$' || charAfter === '$') {
+    return true;
+  }
+  
   // Check for @use, @forward, @import
   if (/@(?:use|forward|import)/.test(line)) {
     return true;

package/test/refactorer.test.js

@@ -124,4 +124,88 @@ describe('Refactorer', () => {
     // Should not replace in variable declaration
     expect(result.content).toContain('$my-color: #1976d2');
   });
+
+  test('should not do partial replacements within larger values', () => {
+    const scss = `
+      @media (min-width: 768px) {
+        .container {
+          width: 233px;
+          padding: 8px;
+          z-index: 100;
+        }
+      }
+    `;
+    
+    const analysis = {
+      colors: [],
+      spacing: [
+        { value: '8px', suggestedName: '$spacing-sm' }
+      ],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [
+        { value: '100', suggestedName: '$z-index-modal' }
+      ],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: []
+    };
+    
+    const result = refactorFile(scss, analysis, '/libs/styles/_variables.scss', '/app/test.scss', {});
+    
+    // Should replace complete values
+    expect(result.content).toContain('padding: $spacing-sm');
+    expect(result.content).toContain('z-index: $z-index-modal');
+    
+    // Should NOT do partial replacements
+    expect(result.content).toContain('768px'); // Not 76$spacing-smpx
+    expect(result.content).toContain('233px'); // Not 2$spacing-sm$spacing-smpx
+    expect(result.content).not.toContain('76$spacing-sm');
+    expect(result.content).not.toContain('$z-index23');
+  });
+
+  test('should not replace characters within hex colors', () => {
+    const scss = `
+      .component {
+        background: #a2dab1;
+        border-color: #ff2244;
+        color: #333;
+      }
+    `;
+    
+    const analysis = {
+      colors: [
+        { value: '#a2dab1', suggestedName: '$color-success' },
+        { value: '#333', suggestedName: '$color-text' }
+      ],
+      spacing: [],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [
+        { value: '2', suggestedName: '$z-index-2' }
+      ],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: []
+    };
+    
+    const result = refactorFile(scss, analysis, '/libs/styles/_variables.scss', '/app/test.scss', {});
+    
+    // Should replace complete hex colors
+    expect(result.content).toContain('background: $color-success');
+    expect(result.content).toContain('color: $color-text');
+    
+    // Should NOT replace digits within hex colors
+    expect(result.content).toContain('#ff2244'); // Not #ff$z-index-2$z-index-244
+    expect(result.content).not.toContain('#a$z-index-2dab1');
+    expect(result.content).not.toContain('#ff$z-index-2');
+  });
 });