scss-variable-extractor 1.6.3 → 1.6.4

package/package.json

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

package/src/refactorer.js

@@ -42,12 +42,17 @@ function refactorFile(content, analysis, variablesFilePath, currentFilePath, con
   const hasVariablesImport = content.includes('@use') && content.includes('variables');
   
   // Replace values with variables
-  Object.entries(valueMap).forEach(([value, variableName]) => {
+  // Sort by value length (longest first) to avoid partial replacements
+  // E.g., replace "0.5" before "0" to prevent "0.5" becoming "$var.5"
+  const sortedEntries = Object.entries(valueMap).sort((a, b) => b[0].length - a[0].length);
+  
+  sortedEntries.forEach(([value, variableName]) => {
     const regex = createReplacementRegex(value);
     const matches = [];
     
     let match;
-    while ((match = regex.exec(content)) !== null) {
+    // Find matches in the current state of newContent (after previous replacements)
+    while ((match = regex.exec(newContent)) !== null) {
       matches.push({
         index: match.index,
         matched: match[0],
@@ -56,8 +61,11 @@ function refactorFile(content, analysis, variablesFilePath, currentFilePath, con
     }
     
     // Check if replacements are in safe zones
-    matches.forEach(m => {
-      if (!isInSafeZone(content, m.index, m.matched)) {
+    // Process matches in reverse order (highest index first) to avoid position shifts
+    matches.reverse().forEach(m => {
+      const inSafeZone = isInSafeZone(newContent, m.index, m.matched);
+      
+      if (!inSafeZone) {
         // Replace the value
         const before = newContent;
         newContent = replaceAt(newContent, m.matched, variableName, m.index);
@@ -119,8 +127,10 @@ function createReplacementRegex(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');
+    // Pure numbers/decimals (unitless) - ensure not part of larger number or before units
+    // Negative lookbehind: not preceded by digit
+    // Negative lookahead: not followed by digit, unit letters, or % (for keyframe selectors)
+    return new RegExp(`(?<!\\d)${escaped}(?!\\d|[a-z%])`, 'g');
   } else if (/^rgba?\(/.test(value)) {
     // RGB/RGBA colors - match complete function
     return new RegExp(escaped, 'g');
@@ -134,13 +144,19 @@ function createReplacementRegex(value) {
  * Checks if a position in content is in a safe zone (should not be replaced)
  */
 function isInSafeZone(content, position, matchedValue) {
+  const DEBUG = false; // Enable for debugging
+  
   // Check for variable declarations
   const lineStart = content.lastIndexOf('\n', position);
   const lineEnd = content.indexOf('\n', position);
   const line = content.substring(lineStart, lineEnd);
   
-  if (line.includes('$') && line.includes(':')) {
-    // This is a variable declaration line
+  // Check if this line is a variable declaration: $variable-name: value;
+  // Match pattern: optional whitespace, $, identifier, optional whitespace, colon
+  const varDeclMatch = line.match(/^\s*\$([\w-]+)\s*:/);
+  if (varDeclMatch) {
+    // This line IS a variable declaration
+    if (DEBUG) console.log(`    → SAFE: Variable declaration line`);
     return true;
   }
   
@@ -150,6 +166,7 @@ function isInSafeZone(content, position, matchedValue) {
   
   // Prevent replacement if surrounded by digits (partial number match)
   if (/\d/.test(charBefore) || (/^\d+$/.test(matchedValue) && /\d/.test(charAfter))) {
+    if (DEBUG) console.log(`    → SAFE: Surrounded by digits`);
     return true;
   }
   
@@ -158,12 +175,19 @@ function isInSafeZone(content, position, matchedValue) {
     // 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)) {
+      if (DEBUG) console.log(`    → SAFE: Inside hex color`);
       return true;
     }
   }
   
   // Prevent replacement if it would create invalid variable concatenation
   if (charBefore === '$' || charAfter === '$') {
+    if (DEBUG) console.log(`    → SAFE: Near $ symbol`);
+    return true;
+  }
+  
+  // Prevent replacement for negative values (e.g., -16px should not become -$spacing-md)
+  if (charBefore === '-' && /^\d/.test(matchedValue)) {
     return true;
   }
   
@@ -172,8 +196,19 @@ function isInSafeZone(content, position, matchedValue) {
     return true;
   }
   
-  // Check for url()
-  const beforeContext = content.substring(Math.max(0, position - 50), position);
+  // Check for url(), calc(), transform functions, and other contexts
+  const beforeContext = content.substring(Math.max(0, position - 100), position);
+  
+  // Prevent replacement inside calc() expressions
+  if (/calc\s*\([^)]*$/.test(beforeContext)) {
+    return true;
+  }
+  
+  // Prevent replacement inside transform functions
+  if (/(?:translate|rotate|scale|skew|matrix|perspective)\s*\([^)]*$/.test(beforeContext)) {
+    return true;
+  }
+  
   if (/url\s*\(\s*[^)]*$/.test(beforeContext)) {
     return true;
   }
@@ -193,18 +228,56 @@ function isInSafeZone(content, position, matchedValue) {
     return true;
   }
   
+  // Prevent replacement inside attribute selectors
+  if (/\[[^\]]*$/.test(beforeContext) && 
+      /^[^\[]*\]/.test(content.substring(position, position + 50))) {
+    if (DEBUG) console.log(`    → SAFE: Inside attribute selector`);
+    return true;
+  }
+  
+  // Prevent replacement in keyframe percentages (e.g., 0%, 50%, 100% in @keyframes)
+  // Check if we're in a @keyframes block and this position is before the opening brace
+  if (/@keyframes/.test(beforeContext)) {
+    // Check if we're in the selector part (before {) of a keyframe rule
+    // Get text from line start to current position and after
+    const lineBeforePos = content.substring(lineStart, position + matchedValue.length);
+    const lineAfterPos = content.substring(position + matchedValue.length, lineEnd);
+    
+    // If the line has a { after this position and before that { there's a %,
+    // and we haven't passed the { yet, we're in the selector
+    if (/%/.test(lineBeforePos) && /^\s*%/.test(content.substring(position + matchedValue.length, position + matchedValue.length + 5))) {
+      // We're right before the % in a keyframe selector
+      if (DEBUG) console.log(`    → SAFE: Keyframe percentage selector`);
+      return true;
+    }
+    if (/%[^{]*$/.test(lineBeforePos) && !lineBeforePos.includes('{')) {
+      // We're somewhere in a percentage before the {
+      if (DEBUG) console.log(`    → SAFE: Keyframe percentage line`);
+      return true;
+    }
+  }
+  
   // Check for comments
   const commentStart = content.lastIndexOf('/*', position);
   const commentEnd = content.lastIndexOf('*/', position);
   if (commentStart > commentEnd) {
+    if (DEBUG) console.log(`    → SAFE: Inside block comment`);
     return true;
   }
   
-  const lineCommentStart = content.lastIndexOf('//', lineStart);
-  if (lineCommentStart > lineStart && lineCommentStart < position) {
-    return true;
+  // Check for inline comments (//)
+  const lineContent = content.substring(lineStart, position + matchedValue.length);
+  const inlineCommentPos = lineContent.lastIndexOf('//');
+  if (inlineCommentPos !== -1) {
+    // Check if our position is after the // on this line
+    const posInLine = position - lineStart;
+    if (posInLine >= inlineCommentPos) {
+      if (DEBUG) console.log(`    → SAFE: Inside inline comment`);
+      return true;
+    }
   }
   
+  if (DEBUG) console.log(`    → NOT SAFE: Will replace`);
   return false;
 }
 

package/src/style-organizer.js

@@ -41,6 +41,11 @@ function analyzeStyleOrganization(scssFiles, config = {}) {
   const importMap = new Map(); // Track import statements
 
   scssFiles.forEach(filePath => {
+    // Skip if file doesn't exist (e.g., temp test files)
+    if (!fs.existsSync(filePath)) {
+      return;
+    }
+    
     const content = fs.readFileSync(filePath, 'utf8');
     const fileName = path.basename(filePath);
     const fileInfo = analyzeFile(content, filePath);

package/test/refactorer-edge-cases.test.js

@@ -0,0 +1,353 @@
+const { refactorFile } = require('../src/refactorer');
+
+describe('Refactorer Edge Cases', () => {
+  test('should handle rgba() color functions without partial replacements', () => {
+    const scss = `
+      .component {
+        background: rgba(255, 100, 50, 0.5);
+        color: rgba(100, 100, 100, 1);
+      }
+    `;
+    
+    const analysis = {
+      colors: [
+        { value: 'rgba(255, 100, 50, 0.5)', suggestedName: '$color-primary-light' }
+      ],
+      spacing: [
+        { value: '100px', suggestedName: '$spacing-xxl' }
+      ],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [
+        { value: '0.5', suggestedName: '$opacity-half' }
+      ],
+      transitions: []
+    };
+    
+    const result = refactorFile(scss, analysis, '/libs/styles/_variables.scss', '/app/test.scss', {});
+    
+    // Should replace complete rgba function
+    expect(result.content).toContain('background: $color-primary-light');
+    
+    // Should NOT do partial replacements inside rgba()
+    expect(result.content).toContain('rgba(100, 100, 100, 1)'); // Not rgba($spacing-xxl, $spacing-xxl, $spacing-xxl, 1)
+    expect(result.content).not.toContain('rgba($spacing-xxl');
+    expect(result.content).not.toContain('rgba(255, $spacing-xxl');
+  });
+
+  test('should handle calc() expressions without partial replacements', () => {
+    const scss = `
+      .component {
+        width: calc(100% - 16px);
+        height: calc(50vh + 8px);
+        margin: calc(16px / 2);
+      }
+    `;
+    
+    const analysis = {
+      colors: [],
+      spacing: [
+        { value: '16px', suggestedName: '$spacing-md' },
+        { value: '8px', suggestedName: '$spacing-sm' }
+      ],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: []
+    };
+    
+    const result = refactorFile(scss, analysis, '/libs/styles/_variables.scss', '/app/test.scss', {});
+    
+    // calc() values should be protected from replacement (safe zone)
+    const content = result.content;
+    
+    // Values inside calc() should NOT be replaced
+    expect(content).toContain('calc(100% - 16px)');
+    expect(content).toContain('calc(50vh + 8px)');
+    expect(content).toContain('calc(16px / 2)');
+  });
+
+  test('should handle negative values correctly', () => {
+    const scss = `
+      .component {
+        margin: -16px;
+        top: -8px;
+        z-index: -1;
+      }
+    `;
+    
+    const analysis = {
+      colors: [],
+      spacing: [
+        { value: '16px', suggestedName: '$spacing-md' },
+        { value: '8px', suggestedName: '$spacing-sm' }
+      ],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [
+        { value: '1', suggestedName: '$z-index-1' }
+      ],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: []
+    };
+    
+    const result = refactorFile(scss, analysis, '/libs/styles/_variables.scss', '/app/test.scss', {});
+    
+    // Negative values should be protected (safe zone) to prevent -$variable syntax
+    expect(result.content).toContain('margin: -16px');
+    expect(result.content).toContain('top: -8px');
+    expect(result.content).toContain('z-index: -1');
+  });
+
+  test('should handle multiple values in shorthand properties', () => {
+    const scss = `
+      .component {
+        margin: 16px 8px;
+        padding: 16px 8px 16px 8px;
+        border-radius: 4px 2px;
+      }
+    `;
+    
+    const analysis = {
+      colors: [],
+      spacing: [
+        { value: '16px', suggestedName: '$spacing-md' },
+        { value: '8px', suggestedName: '$spacing-sm' }
+      ],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [
+        { value: '4px', suggestedName: '$border-radius-sm' },
+        { value: '2px', suggestedName: '$border-radius-xs' }
+      ],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: []
+    };
+    
+    const result = refactorFile(scss, analysis, '/libs/styles/_variables.scss', '/app/test.scss', {});
+    
+    // Should replace individual values in shorthand
+    expect(result.content).toContain('$spacing-md');
+    expect(result.content).toContain('$spacing-sm');
+    expect(result.content).toContain('$border-radius-sm');
+    expect(result.content).toContain('$border-radius-xs');
+  });
+
+  test('should not replace values in CSS custom properties', () => {
+    const scss = `
+      :root {
+        --primary-color: #1976d2;
+        --spacing: 16px;
+      }
+      .component {
+        color: var(--primary-color);
+        padding: var(--spacing);
+      }
+    `;
+    
+    const analysis = {
+      colors: [
+        { value: '#1976d2', suggestedName: '$color-primary' }
+      ],
+      spacing: [
+        { value: '16px', suggestedName: '$spacing-md' }
+      ],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: []
+    };
+    
+    const result = refactorFile(scss, analysis, '/libs/styles/_variables.scss', '/app/test.scss', {});
+    
+    // CSS custom property declarations should be replaced (they're like SCSS variables)
+    // But var() references should be preserved
+    expect(result.content).toContain('var(--primary-color)');
+    expect(result.content).toContain('var(--spacing)');
+  });
+
+  test('should not replace values in attribute selectors', () => {
+    const scss = `
+      [data-size="16"] {
+        padding: 16px;
+      }
+      [data-color="#1976d2"] {
+        color: #1976d2;
+      }
+    `;
+    
+    const analysis = {
+      colors: [
+        { value: '#1976d2', suggestedName: '$color-primary' }
+      ],
+      spacing: [
+        { value: '16px', suggestedName: '$spacing-md' }
+      ],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: []
+    };
+    
+    const result = refactorFile(scss, analysis, '/libs/styles/_variables.scss', '/app/test.scss', {});
+    
+    // Should replace in property values (outside attribute selectors)
+    expect(result.content).toContain('padding: $spacing-md');
+    expect(result.content).toContain('color: $color-primary');
+    
+    // Should NOT replace in attribute selector values (safe zone)
+    expect(result.content).toContain('[data-size="16"]');
+    expect(result.content).toContain('[data-color="#1976d2"]');
+  });
+
+  test('should handle transform functions', () => {
+    const scss = `
+      .component {
+        transform: translate(10px, 20px);
+        transform: rotate(45deg);
+        transform: scale(2);
+      }
+    `;
+    
+    const analysis = {
+      colors: [],
+      spacing: [
+        { value: '10px', suggestedName: '$spacing-xs' },
+        { value: '20px', suggestedName: '$spacing-sm' }
+      ],
+      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', {});
+    
+    // Transform function arguments should be protected (safe zone)
+    const content = result.content;
+    expect(content).toContain('translate(10px, 20px)');
+    expect(content).toContain('scale(2)');
+    expect(content).toContain('rotate(45deg)');
+  });
+
+  test('should handle keyframe percentages', () => {
+    const scss = `
+      @keyframes fade {
+        0% { opacity: 0; }
+        50% { opacity: 0.5; }
+        100% { opacity: 1; }
+      }
+    `;
+    
+    const analysis = {
+      colors: [],
+      spacing: [],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [
+        { value: '0', suggestedName: '$opacity-transparent' },
+        { value: '0.5', suggestedName: '$opacity-half' },
+        { value: '1', suggestedName: '$opacity-full' }
+      ],
+      transitions: []
+    };
+    
+    const result = refactorFile(scss, analysis, '/libs/styles/_variables.scss', '/app/test.scss', {});
+    
+    // Keyframe selectors (0%, 50%, 100%) should not be replaced
+    expect(result.content).toContain('0%');
+    expect(result.content).toContain('50%');
+    expect(result.content).toContain('100%');
+    
+    // But opacity values should be replaced
+    expect(result.content).toContain('opacity: $opacity-transparent');
+    expect(result.content).toContain('opacity: $opacity-half');
+    expect(result.content).toContain('opacity: $opacity-full');
+  });
+
+  test('should handle comments containing values', () => {
+    const scss = `
+      /* Primary color is #1976d2 */
+      .component {
+        color: #1976d2; // Use #1976d2 for brand
+        padding: 16px; /* 16px is our standard spacing */
+      }
+    `;
+    
+    const analysis = {
+      colors: [
+        { value: '#1976d2', suggestedName: '$color-primary' }
+      ],
+      spacing: [
+        { value: '16px', suggestedName: '$spacing-md' }
+      ],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: []
+    };
+    
+    const result = refactorFile(scss, analysis, '/libs/styles/_variables.scss', '/app/test.scss', {});
+    
+    // Should replace in actual property values
+    expect(result.content).toContain('color: $color-primary');
+    expect(result.content).toContain('padding: $spacing-md');
+    
+    // Comments will likely be replaced too (current behavior)
+    // This might be acceptable or we could add comment detection to safe zones
+  });
+});

package/test/refactorer.test.js

@@ -208,4 +208,50 @@ describe('Refactorer', () => {
     expect(result.content).not.toContain('#a$z-index-2dab1');
     expect(result.content).not.toContain('#ff$z-index-2');
   });
+
+  test('should not replace unitless values before CSS units', () => {
+    const scss = `
+      .component {
+        opacity: 0.5;
+        line-height: 0.5em;
+        font-size: 2rem;
+        padding: 2px;
+      }
+    `;
+    
+    const analysis = {
+      colors: [],
+      spacing: [
+        { value: '2px', suggestedName: '$spacing-xs' }
+      ],
+      fontSizes: [
+        { value: '2rem', suggestedName: '$font-size-lg' }
+      ],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [
+        { value: '0.5', suggestedName: '$opacity-half' }
+      ],
+      transitions: []
+    };
+    
+    const result = refactorFile(scss, analysis, '/libs/styles/_variables.scss', '/app/test.scss', {});
+    
+    // Should replace complete unitless value
+    expect(result.content).toContain('opacity: $opacity-half');
+    
+    // Should replace complete values with units
+    expect(result.content).toContain('padding: $spacing-xs');
+    expect(result.content).toContain('font-size: $font-size-lg');
+    
+    // Should NOT replace unitless value before units (0.5 before em, 2 before rem/px)
+    expect(result.content).toContain('line-height: 0.5em');
+    expect(result.content).not.toContain('$opacity-halfem');
+    expect(result.content).not.toContain('line-height: $opacity-half');
+  });
 });