scss-variable-extractor 1.6.4 → 1.6.6

package/src/refactorer.js

@@ -1,322 +1,329 @@
-const fs = require('fs');
-const path = require('path');
-
-/**
- * Refactors SCSS files by replacing hardcoded values with variable references
- * @param {Array<string>} scssFiles - Array of SCSS file paths
- * @param {Object} analysis - Analysis results with variable mappings
- * @param {string} variablesFilePath - Path to the generated variables file
- * @param {Object} config - Configuration
- */
-function refactorScssFiles(scssFiles, analysis, variablesFilePath, config) {
-  const refactoredFiles = [];
-  
-  scssFiles.forEach(filePath => {
-    const content = fs.readFileSync(filePath, 'utf8');
-    const refactored = refactorFile(content, analysis, variablesFilePath, filePath, config);
-    
-    if (refactored.modified) {
-      fs.writeFileSync(filePath, refactored.content, 'utf8');
-      refactoredFiles.push({
-        path: filePath,
-        changes: refactored.changes
-      });
-    }
-  });
-  
-  return refactoredFiles;
-}
-
-/**
- * Refactors a single SCSS file
- */
-function refactorFile(content, analysis, variablesFilePath, currentFilePath, config) {
-  let newContent = content;
-  let modified = false;
-  const changes = [];
-  
-  // Build value-to-variable mapping
-  const valueMap = buildValueMap(analysis);
-  
-  // Check if file already has @use import for variables
-  const hasVariablesImport = content.includes('@use') && content.includes('variables');
-  
-  // Replace values with variables
-  // 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;
-    // 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],
-        fullMatch: match
-      });
-    }
-    
-    // Check if replacements are in safe zones
-    // 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);
-        
-        if (before !== newContent) {
-          modified = true;
-          changes.push({
-            from: value,
-            to: variableName
-          });
-        }
-      }
-    });
-  });
-  
-  // Add @use import if modified and not already present
-  if (modified && !hasVariablesImport) {
-    const relativePath = getRelativeImportPath(currentFilePath, variablesFilePath);
-    const useStatement = `@use '${relativePath}' as *;\n\n`;
-    newContent = useStatement + newContent;
-  }
-  
-  return {
-    content: newContent,
-    modified,
-    changes
-  };
-}
-
-/**
- * Builds a map of values to variable names
- */
-function buildValueMap(analysis) {
-  const valueMap = {};
-  
-  Object.keys(analysis).forEach(category => {
-    analysis[category].forEach(item => {
-      // Use normalized value as key for consistent matching
-      valueMap[item.value] = item.suggestedName;
-    });
-  });
-  
-  return valueMap;
-}
-
-/**
- * Creates a regex for replacing a specific value
- */
-function createReplacementRegex(value) {
-  // Escape special regex characters
-  const escaped = value.replace(/[.*+?^${}()|[\]\\]/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/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');
-  } 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, 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);
-  
-  // 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;
-  }
-  
-  // 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))) {
-    if (DEBUG) console.log(`    → SAFE: Surrounded by digits`);
-    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)) {
-      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;
-  }
-  
-  // Check for @use, @forward, @import
-  if (/@(?:use|forward|import)/.test(line)) {
-    return true;
-  }
-  
-  // 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;
-  }
-  
-  // Check for content property
-  if (/content\s*:\s*[^;]*$/.test(beforeContext)) {
-    return true;
-  }
-  
-  // Check for interpolation #{}
-  if (/#\{[^}]*$/.test(beforeContext)) {
-    return true;
-  }
-  
-  // Check for Material functions
-  if (/mat\.\w+\([^)]*$/.test(beforeContext)) {
-    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;
-  }
-  
-  // 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;
-}
-
-/**
- * Replaces value at specific index
- */
-function replaceAt(content, searchValue, replaceValue, startIndex) {
-  // Find the exact position and replace
-  const before = content.substring(0, startIndex);
-  const after = content.substring(startIndex);
-  
-  // Replace first occurrence in 'after'
-  const replaced = after.replace(searchValue, replaceValue);
-  
-  return before + replaced;
-}
-
-/**
- * Gets relative import path from current file to variables file
- */
-function getRelativeImportPath(fromFile, toFile) {
-  const fromDir = path.dirname(fromFile);
-  let relativePath = path.relative(fromDir, toFile);
-  
-  // Convert to forward slashes for imports
-  relativePath = relativePath.replace(/\\/g, '/');
-  
-  // Remove .scss extension
-  relativePath = relativePath.replace(/\.scss$/, '');
-  
-  // Add ./ prefix if not starting with ../
-  if (!relativePath.startsWith('..')) {
-    relativePath = './' + relativePath;
-  }
-  
-  return relativePath;
-}
-
-module.exports = {
-  refactorScssFiles,
-  refactorFile
-};
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Refactors SCSS files by replacing hardcoded values with variable references
+ * @param {Array<string>} scssFiles - Array of SCSS file paths
+ * @param {Object} analysis - Analysis results with variable mappings
+ * @param {string} variablesFilePath - Path to the generated variables file
+ * @param {Object} config - Configuration
+ */
+function refactorScssFiles(scssFiles, analysis, variablesFilePath, config) {
+  const refactoredFiles = [];
+
+  scssFiles.forEach(filePath => {
+    const content = fs.readFileSync(filePath, 'utf8');
+    const refactored = refactorFile(content, analysis, variablesFilePath, filePath, config);
+
+    if (refactored.modified) {
+      fs.writeFileSync(filePath, refactored.content, 'utf8');
+      refactoredFiles.push({
+        path: filePath,
+        changes: refactored.changes,
+      });
+    }
+  });
+
+  return refactoredFiles;
+}
+
+/**
+ * Refactors a single SCSS file
+ */
+function refactorFile(content, analysis, variablesFilePath, currentFilePath, config) {
+  let newContent = content;
+  let modified = false;
+  const changes = [];
+
+  // Build value-to-variable mapping
+  const valueMap = buildValueMap(analysis);
+
+  // Check if file already has @use import for variables
+  const hasVariablesImport = content.includes('@use') && content.includes('variables');
+
+  // Replace values with variables
+  // 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;
+    // 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],
+        fullMatch: match,
+      });
+    }
+
+    // Check if replacements are in safe zones
+    // 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);
+
+        if (before !== newContent) {
+          modified = true;
+          changes.push({
+            from: value,
+            to: variableName,
+          });
+        }
+      }
+    });
+  });
+
+  // Add @use import if modified and not already present
+  if (modified && !hasVariablesImport) {
+    const relativePath = getRelativeImportPath(currentFilePath, variablesFilePath);
+    const useStatement = `@use '${relativePath}' as *;\n\n`;
+    newContent = useStatement + newContent;
+  }
+
+  return {
+    content: newContent,
+    modified,
+    changes,
+  };
+}
+
+/**
+ * Builds a map of values to variable names
+ */
+function buildValueMap(analysis) {
+  const valueMap = {};
+
+  Object.keys(analysis).forEach(category => {
+    analysis[category].forEach(item => {
+      // Use normalized value as key for consistent matching
+      valueMap[item.value] = item.suggestedName;
+    });
+  });
+
+  return valueMap;
+}
+
+/**
+ * Creates a regex for replacing a specific value
+ */
+function createReplacementRegex(value) {
+  // Escape special regex characters
+  const escaped = value.replace(/[.*+?^${}()|[\]\\]/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/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');
+  } 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, 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);
+
+  // 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;
+  }
+
+  // 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))) {
+    if (DEBUG) console.log(`    → SAFE: Surrounded by digits`);
+    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)) {
+      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;
+  }
+
+  // Check for @use, @forward, @import
+  if (/@(?:use|forward|import)/.test(line)) {
+    return true;
+  }
+
+  // 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;
+  }
+
+  // Check for content property
+  if (/content\s*:\s*[^;]*$/.test(beforeContext)) {
+    return true;
+  }
+
+  // Check for interpolation #{}
+  if (/#\{[^}]*$/.test(beforeContext)) {
+    return true;
+  }
+
+  // Check for Material functions
+  if (/mat\.\w+\([^)]*$/.test(beforeContext)) {
+    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;
+  }
+
+  // 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;
+}
+
+/**
+ * Replaces value at specific index
+ */
+function replaceAt(content, searchValue, replaceValue, startIndex) {
+  // Find the exact position and replace
+  const before = content.substring(0, startIndex);
+  const after = content.substring(startIndex);
+
+  // Replace first occurrence in 'after'
+  const replaced = after.replace(searchValue, replaceValue);
+
+  return before + replaced;
+}
+
+/**
+ * Gets relative import path from current file to variables file
+ */
+function getRelativeImportPath(fromFile, toFile) {
+  const fromDir = path.dirname(fromFile);
+  let relativePath = path.relative(fromDir, toFile);
+
+  // Convert to forward slashes for imports
+  relativePath = relativePath.replace(/\\/g, '/');
+
+  // Remove .scss extension
+  relativePath = relativePath.replace(/\.scss$/, '');
+
+  // Add ./ prefix if not starting with ../
+  if (!relativePath.startsWith('..')) {
+    relativePath = './' + relativePath;
+  }
+
+  return relativePath;
+}
+
+module.exports = {
+  refactorScssFiles,
+  refactorFile,
+};