scss-variable-extractor 1.0.0

package/src/parser.js

@@ -0,0 +1,421 @@
+const fs = require('fs');
+
+/**
+ * Regular expressions for matching various CSS/SCSS value types
+ */
+const PATTERNS = {
+  // Hex colors: #RGB, #RRGGBB, #RRGGBBAA
+  hexColor: /#([0-9a-fA-F]{3,8})\b/g,
+  
+  // RGB/RGBA colors
+  rgbColor: /rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)/g,
+  
+  // Named colors (common ones)
+  namedColor: /\b(red|blue|green|white|black|gray|grey|yellow|orange|purple|pink|brown|cyan|magenta|transparent)\b/g,
+  
+  // Pixel values
+  pixelValue: /\b(\d+)px\b/g,
+  
+  // Percentage values
+  percentValue: /\b(\d+)%\b/g,
+  
+  // Font weight values
+  fontWeight: /\b(bold|normal|lighter|bolder|[1-9]00)\b/g,
+  
+  // Decimal values (for opacity, line-height)
+  decimalValue: /\b(0?\.\d+|1\.\d+|[2-9]\.\d+)\b/g,
+  
+  // Box shadow
+  boxShadow: /(-?\d+px\s+){2,4}(rgba?\([^)]+\)|#[0-9a-fA-F]{3,8}|\w+)/g,
+  
+  // Font family
+  fontFamily: /(['"][^'"]+['"](?:\s*,\s*(?:sans-serif|serif|monospace|cursive|fantasy))?)/g,
+  
+  // Transition
+  transition: /\b(all|none|[\w-]+)\s+[\d.]+m?s\s+(?:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier\([^)]+\))/g,
+  
+  // Variable declaration (to skip)
+  variableDeclaration: /\$[\w-]+\s*:/g,
+  
+  // URL function (to skip)
+  urlFunction: /url\([^)]+\)/g,
+  
+  // Content property (to skip string literals)
+  contentProperty: /content\s*:\s*[^;]+;/g,
+  
+  // String interpolation (to skip)
+  interpolation: /#\{[^}]+\}/g,
+  
+  // @use and @forward statements (to skip)
+  useForward: /@(?:use|forward)\s+[^;]+;/g,
+  
+  // Material palette functions (to skip)
+  materialFunctions: /mat\.(?:define-palette|get-color-from-palette|define-(?:light|dark)-theme|all-component-themes)\([^)]*\)/g
+};
+
+/**
+ * Extracts hardcoded values from SCSS content
+ * @param {string} content - SCSS file content
+ * @param {string} filePath - Path to the file (for context)
+ * @returns {Object} - Extracted values categorized by type
+ */
+function parseScss(content, filePath) {
+  const extracted = {
+    colors: [],
+    spacing: [],
+    fontSizes: [],
+    fontWeights: [],
+    fontFamilies: [],
+    borderRadius: [],
+    shadows: [],
+    zIndex: [],
+    sizing: [],
+    lineHeight: [],
+    opacity: [],
+    transitions: []
+  };
+  
+  // Remove comments
+  let cleanContent = content.replace(/\/\*[\s\S]*?\*\//g, '');
+  cleanContent = cleanContent.replace(/\/\/.*/g, '');
+  
+  // Remove safe zones (values we should not extract)
+  const safeZones = [];
+  
+  // Mark variable declarations - entire lines with $variable:
+  let match;
+  const varDeclPattern = /\$[\w-]+\s*:[^;]+;/g;
+  while ((match = varDeclPattern.exec(cleanContent)) !== null) {
+    safeZones.push({ start: match.index, end: match.index + match[0].length });
+  }
+  
+  // Mark other safe zones
+  const markers = [
+    PATTERNS.urlFunction,
+    PATTERNS.contentProperty,
+    PATTERNS.interpolation,
+    PATTERNS.useForward,
+    PATTERNS.materialFunctions
+  ];
+  
+  markers.forEach(pattern => {
+    pattern.lastIndex = 0;
+    while ((match = pattern.exec(cleanContent)) !== null) {
+      safeZones.push({ start: match.index, end: match.index + match[0].length });
+    }
+  });
+  
+  // Helper to check if position is in safe zone
+  const isInSafeZone = (pos) => {
+    return safeZones.some(zone => pos >= zone.start && pos < zone.end);
+  };
+  
+  // Extract colors (hex)
+  PATTERNS.hexColor.lastIndex = 0;
+  while ((match = PATTERNS.hexColor.exec(cleanContent)) !== null) {
+    if (!isInSafeZone(match.index)) {
+      extracted.colors.push({
+        value: match[0],
+        line: getLineNumber(cleanContent, match.index),
+        file: filePath,
+        context: getContext(cleanContent, match.index)
+      });
+    }
+  }
+  
+  // Extract colors (rgb/rgba)
+  PATTERNS.rgbColor.lastIndex = 0;
+  while ((match = PATTERNS.rgbColor.exec(cleanContent)) !== null) {
+    if (!isInSafeZone(match.index)) {
+      extracted.colors.push({
+        value: match[0],
+        line: getLineNumber(cleanContent, match.index),
+        file: filePath,
+        context: getContext(cleanContent, match.index)
+      });
+    }
+  }
+  
+  // Extract named colors
+  PATTERNS.namedColor.lastIndex = 0;
+  while ((match = PATTERNS.namedColor.exec(cleanContent)) !== null) {
+    if (!isInSafeZone(match.index)) {
+      const ctx = getContext(cleanContent, match.index);
+      // Only extract if it looks like a color value (not in selectors)
+      if (ctx.includes(':')) {
+        extracted.colors.push({
+          value: match[0],
+          line: getLineNumber(cleanContent, match.index),
+          file: filePath,
+          context: ctx
+        });
+      }
+    }
+  }
+  
+  // Extract pixel values (categorize by property)
+  PATTERNS.pixelValue.lastIndex = 0;
+  while ((match = PATTERNS.pixelValue.exec(cleanContent)) !== null) {
+    if (!isInSafeZone(match.index)) {
+      const ctx = getContext(cleanContent, match.index);
+      const property = extractPropertyAtPosition(cleanContent, match.index);
+      
+      if (isFontSizeProperty(property)) {
+        extracted.fontSizes.push({
+          value: match[0],
+          line: getLineNumber(cleanContent, match.index),
+          file: filePath,
+          context: ctx,
+          property
+        });
+      } else if (isSpacingProperty(property)) {
+        extracted.spacing.push({
+          value: match[0],
+          line: getLineNumber(cleanContent, match.index),
+          file: filePath,
+          context: ctx,
+          property
+        });
+      } else if (isSizingProperty(property)) {
+        extracted.sizing.push({
+          value: match[0],
+          line: getLineNumber(cleanContent, match.index),
+          file: filePath,
+          context: ctx,
+          property
+        });
+      } else if (isBorderRadiusProperty(property)) {
+        extracted.borderRadius.push({
+          value: match[0],
+          line: getLineNumber(cleanContent, match.index),
+          file: filePath,
+          context: ctx,
+          property
+        });
+      } else if (isLineHeightProperty(property)) {
+        extracted.lineHeight.push({
+          value: match[0],
+          line: getLineNumber(cleanContent, match.index),
+          file: filePath,
+          context: ctx,
+          property
+        });
+      }
+    }
+  }
+  
+  // Extract percentage values (for border-radius)
+  PATTERNS.percentValue.lastIndex = 0;
+  while ((match = PATTERNS.percentValue.exec(cleanContent)) !== null) {
+    if (!isInSafeZone(match.index)) {
+      const ctx = getContext(cleanContent, match.index);
+      const property = extractPropertyAtPosition(cleanContent, match.index);
+      
+      if (isBorderRadiusProperty(property)) {
+        extracted.borderRadius.push({
+          value: match[0],
+          line: getLineNumber(cleanContent, match.index),
+          file: filePath,
+          context: ctx,
+          property
+        });
+      } else if (isOpacityProperty(property)) {
+        extracted.opacity.push({
+          value: match[0],
+          line: getLineNumber(cleanContent, match.index),
+          file: filePath,
+          context: ctx,
+          property
+        });
+      }
+    }
+  }
+  
+  // Extract font weights
+  PATTERNS.fontWeight.lastIndex = 0;
+  while ((match = PATTERNS.fontWeight.exec(cleanContent)) !== null) {
+    if (!isInSafeZone(match.index)) {
+      const ctx = getContext(cleanContent, match.index);
+      const property = extractPropertyAtPosition(cleanContent, match.index);
+      
+      if (property && property.includes('font-weight')) {
+        extracted.fontWeights.push({
+          value: match[0],
+          line: getLineNumber(cleanContent, match.index),
+          file: filePath,
+          context: ctx,
+          property
+        });
+      }
+    }
+  }
+  
+  // Extract font families
+  PATTERNS.fontFamily.lastIndex = 0;
+  while ((match = PATTERNS.fontFamily.exec(cleanContent)) !== null) {
+    if (!isInSafeZone(match.index)) {
+      const ctx = getContext(cleanContent, match.index);
+      const property = extractPropertyAtPosition(cleanContent, match.index);
+      
+      if (property && property.includes('font-family')) {
+        extracted.fontFamilies.push({
+          value: match[0],
+          line: getLineNumber(cleanContent, match.index),
+          file: filePath,
+          context: ctx,
+          property
+        });
+      }
+    }
+  }
+  
+  // Extract box shadows
+  PATTERNS.boxShadow.lastIndex = 0;
+  while ((match = PATTERNS.boxShadow.exec(cleanContent)) !== null) {
+    if (!isInSafeZone(match.index)) {
+      const ctx = getContext(cleanContent, match.index);
+      const property = extractPropertyAtPosition(cleanContent, match.index);
+      
+      if (property && property.includes('box-shadow')) {
+        extracted.shadows.push({
+          value: match[0],
+          line: getLineNumber(cleanContent, match.index),
+          file: filePath,
+          context: ctx,
+          property
+        });
+      }
+    }
+  }
+  
+  // Extract decimal values (opacity, line-height)
+  PATTERNS.decimalValue.lastIndex = 0;
+  while ((match = PATTERNS.decimalValue.exec(cleanContent)) !== null) {
+    if (!isInSafeZone(match.index)) {
+      const ctx = getContext(cleanContent, match.index);
+      const property = extractPropertyAtPosition(cleanContent, match.index);
+      
+      if (isOpacityProperty(property)) {
+        extracted.opacity.push({
+          value: match[0],
+          line: getLineNumber(cleanContent, match.index),
+          file: filePath,
+          context: ctx,
+          property
+        });
+      } else if (isLineHeightProperty(property)) {
+        extracted.lineHeight.push({
+          value: match[0],
+          line: getLineNumber(cleanContent, match.index),
+          file: filePath,
+          context: ctx,
+          property
+        });
+      }
+    }
+  }
+  
+  // Extract transitions
+  PATTERNS.transition.lastIndex = 0;
+  while ((match = PATTERNS.transition.exec(cleanContent)) !== null) {
+    if (!isInSafeZone(match.index)) {
+      extracted.transitions.push({
+        value: match[0],
+        line: getLineNumber(cleanContent, match.index),
+        file: filePath,
+        context: getContext(cleanContent, match.index)
+      });
+    }
+  }
+  
+  // Extract z-index values (pure integers in z-index context)
+  const zIndexRegex = /z-index\s*:\s*(\d+)/g;
+  while ((match = zIndexRegex.exec(cleanContent)) !== null) {
+    if (!isInSafeZone(match.index)) {
+      extracted.zIndex.push({
+        value: match[1],
+        line: getLineNumber(cleanContent, match.index),
+        file: filePath,
+        context: getContext(cleanContent, match.index)
+      });
+    }
+  }
+  
+  return extracted;
+}
+
+/**
+ * Gets line number for a position in text
+ */
+function getLineNumber(text, position) {
+  return text.substring(0, position).split('\n').length;
+}
+
+/**
+ * Gets surrounding context for a position
+ */
+function getContext(text, position, contextSize = 50) {
+  const start = Math.max(0, position - contextSize);
+  const end = Math.min(text.length, position + contextSize);
+  return text.substring(start, end).trim();
+}
+
+/**
+ * Extracts property name at a specific position in the content
+ * Looks backward from position to find the property name
+ */
+function extractPropertyAtPosition(content, position) {
+  // Find the start of the current line
+  const lineStart = content.lastIndexOf('\n', position) + 1;
+  const lineSegment = content.substring(lineStart, position);
+  
+  // Look for property: pattern before the position
+  const match = lineSegment.match(/([\w-]+)\s*:\s*[^:;]*$/);
+  return match ? match[1] : null;
+}
+
+/**
+ * Extracts property name from context (legacy, for other uses)
+ */
+function extractProperty(context) {
+  const match = context.match(/([\w-]+)\s*:/);
+  return match ? match[1] : null;
+}
+
+/**
+ * Property type checkers
+ */
+function isSpacingProperty(prop) {
+  if (!prop) return false;
+  return /^(padding|margin|gap|top|right|bottom|left)/.test(prop);
+}
+
+function isFontSizeProperty(prop) {
+  if (!prop) return false;
+  return prop === 'font-size';
+}
+
+function isSizingProperty(prop) {
+  if (!prop) return false;
+  return /^(width|height|min-width|max-width|min-height|max-height)/.test(prop);
+}
+
+function isBorderRadiusProperty(prop) {
+  if (!prop) return false;
+  return /border-radius/.test(prop);
+}
+
+function isLineHeightProperty(prop) {
+  if (!prop) return false;
+  return prop === 'line-height';
+}
+
+function isOpacityProperty(prop) {
+  if (!prop) return false;
+  return prop === 'opacity';
+}
+
+module.exports = {
+  parseScss,
+  PATTERNS
+};

package/src/refactorer.js

@@ -0,0 +1,209 @@
+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
+  Object.entries(valueMap).forEach(([value, variableName]) => {
+    const regex = createReplacementRegex(value);
+    const matches = [];
+    
+    let match;
+    while ((match = regex.exec(content)) !== null) {
+      matches.push({
+        index: match.index,
+        matched: match[0],
+        fullMatch: match
+      });
+    }
+    
+    // Check if replacements are in safe zones
+    matches.forEach(m => {
+      if (!isInSafeZone(content, m.index)) {
+        // 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, '\\$&');
+  // Match the value with word boundaries or specific contexts
+  return new RegExp(escaped, 'g');
+}
+
+/**
+ * Checks if a position in content is in a safe zone (should not be replaced)
+ */
+function isInSafeZone(content, position) {
+  // 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
+    return true;
+  }
+  
+  // Check for @use, @forward, @import
+  if (/@(?:use|forward|import)/.test(line)) {
+    return true;
+  }
+  
+  // Check for url()
+  const beforeContext = content.substring(Math.max(0, position - 50), position);
+  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;
+  }
+  
+  // Check for comments
+  const commentStart = content.lastIndexOf('/*', position);
+  const commentEnd = content.lastIndexOf('*/', position);
+  if (commentStart > commentEnd) {
+    return true;
+  }
+  
+  const lineCommentStart = content.lastIndexOf('//', lineStart);
+  if (lineCommentStart > lineStart && lineCommentStart < position) {
+    return true;
+  }
+  
+  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
+};

package/src/scanner.js

@@ -0,0 +1,29 @@
+const glob = require('glob');
+const path = require('path');
+
+/**
+ * Recursively scans for SCSS files 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 scanScssFiles(srcPath, ignorePatterns = []) {
+  return new Promise((resolve, reject) => {
+    const pattern = path.join(srcPath, '**/*.scss');
+    
+    glob(pattern, {
+      ignore: ignorePatterns,
+      absolute: true
+    }, (err, files) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve(files);
+      }
+    });
+  });
+}
+
+module.exports = {
+  scanScssFiles
+};

package/templates/_variables.scss.template

@@ -0,0 +1,56 @@
+//
+// Auto-generated SCSS Variables
+// Generated by scss-variable-extractor v{{version}}
+// Generated at: {{timestamp}}
+//
+// DO NOT EDIT THIS FILE MANUALLY
+// This file is auto-generated. Your changes will be overwritten.
+//
+
+// Colors
+// ────────────────────────────────────────
+{{colors}}
+
+// Spacing
+// ────────────────────────────────────────
+{{spacing}}
+
+// Font Sizes
+// ────────────────────────────────────────
+{{fontSizes}}
+
+// Font Weights
+// ────────────────────────────────────────
+{{fontWeights}}
+
+// Font Families
+// ────────────────────────────────────────
+{{fontFamilies}}
+
+// Border Radius
+// ────────────────────────────────────────
+{{borderRadius}}
+
+// Shadows
+// ────────────────────────────────────────
+{{shadows}}
+
+// Z-Index
+// ────────────────────────────────────────
+{{zIndex}}
+
+// Sizing
+// ────────────────────────────────────────
+{{sizing}}
+
+// Line Heights
+// ────────────────────────────────────────
+{{lineHeight}}
+
+// Opacity
+// ────────────────────────────────────────
+{{opacity}}
+
+// Transitions
+// ────────────────────────────────────────
+{{transitions}}