scss-variable-extractor 1.6.4 → 1.6.6

package/src/analyzer.js

@@ -1,285 +1,285 @@
-/**
- * Analyzes extracted values and identifies repeated ones
- */
-
-/**
- * Analyzes all extracted values from multiple files
- * @param {Array<Object>} allExtracted - Array of extracted values from all files
- * @param {Object} config - Configuration object
- * @returns {Object} - Analysis results with repeated values
- */
-function analyzeValues(allExtracted, config) {
-  const analysis = {
-    colors: {},
-    spacing: {},
-    fontSizes: {},
-    fontWeights: {},
-    fontFamilies: {},
-    borderRadius: {},
-    shadows: {},
-    zIndex: {},
-    sizing: {},
-    lineHeight: {},
-    opacity: {},
-    transitions: {}
-  };
-  
-  // Count occurrences of each value
-  Object.keys(allExtracted).forEach(category => {
-    if (!config.categories[category]) return;
-    
-    allExtracted[category].forEach(item => {
-      const normalizedValue = normalizeValue(item.value, category);
-      
-      if (!analysis[category][normalizedValue]) {
-        analysis[category][normalizedValue] = {
-          value: item.value,
-          count: 0,
-          files: new Set(),
-          occurrences: []
-        };
-      }
-      
-      analysis[category][normalizedValue].count++;
-      analysis[category][normalizedValue].files.add(item.file);
-      analysis[category][normalizedValue].occurrences.push({
-        file: item.file,
-        line: item.line,
-        context: item.context,
-        property: item.property
-      });
-    });
-  });
-  
-  // Filter by threshold and generate variable names
-  const results = {};
-  
-  Object.keys(analysis).forEach(category => {
-    results[category] = [];
-    
-    Object.keys(analysis[category]).forEach(normalizedValue => {
-      const data = analysis[category][normalizedValue];
-      
-      if (data.count >= config.threshold) {
-        results[category].push({
-          value: data.value,
-          normalizedValue,
-          count: data.count,
-          fileCount: data.files.size,
-          files: Array.from(data.files),
-          occurrences: data.occurrences,
-          suggestedName: generateVariableName(category, data.value, data.occurrences, config)
-        });
-      }
-    });
-    
-    // Sort by count (descending)
-    results[category].sort((a, b) => b.count - a.count);
-  });
-  
-  return results;
-}
-
-/**
- * Normalizes value for comparison
- */
-function normalizeValue(value, category) {
-  if (category === 'colors') {
-    return normalizeColor(value);
-  }
-  return value.toLowerCase().trim();
-}
-
-/**
- * Normalizes color values for comparison
- */
-function normalizeColor(color) {
-  color = color.toLowerCase().trim();
-  
-  // Convert 3-digit hex to 6-digit
-  if (/^#[0-9a-f]{3}$/i.test(color)) {
-    color = '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
-  }
-  
-  // Normalize rgb/rgba spacing
-  color = color.replace(/\s+/g, '');
-  
-  return color;
-}
-
-/**
- * Generates a variable name based on category and value
- */
-function generateVariableName(category, value, occurrences, config) {
-  const prefix = getCategoryPrefix(category);
-  
-  if (category === 'spacing') {
-    return generateSpacingVariableName(value, config);
-  } else if (category === 'colors') {
-    return generateColorVariableName(value, occurrences);
-  } else if (category === 'fontSizes') {
-    return generateFontSizeVariableName(value);
-  } else if (category === 'fontWeights') {
-    return generateFontWeightVariableName(value);
-  } else if (category === 'fontFamilies') {
-    return prefix + sanitizeName(value);
-  } else if (category === 'borderRadius') {
-    return generateBorderRadiusVariableName(value);
-  } else if (category === 'shadows') {
-    return prefix + 'default';
-  } else if (category === 'zIndex') {
-    return prefix + value;
-  } else if (category === 'sizing') {
-    return prefix + value.replace('px', '');
-  } else if (category === 'lineHeight') {
-    return prefix + sanitizeName(value);
-  } else if (category === 'opacity') {
-    return prefix + sanitizeName(value);
-  } else if (category === 'transitions') {
-    return prefix + 'default';
-  }
-  
-  return prefix + 'value';
-}
-
-/**
- * Gets prefix for a category
- */
-function getCategoryPrefix(category) {
-  const prefixes = {
-    colors: '$color-',
-    spacing: '$spacing-',
-    fontSizes: '$font-size-',
-    fontWeights: '$font-weight-',
-    fontFamilies: '$font-family-',
-    borderRadius: '$border-radius-',
-    shadows: '$shadow-',
-    zIndex: '$z-index-',
-    sizing: '$size-',
-    lineHeight: '$line-height-',
-    opacity: '$opacity-',
-    transitions: '$transition-'
-  };
-  
-  return prefixes[category] || '$';
-}
-
-/**
- * Generates spacing variable name using t-shirt sizing
- */
-function generateSpacingVariableName(value, config) {
-  const spacingScale = config.spacingScale;
-  
-  // Try to match to spacing scale
-  for (const [size, scaleValue] of Object.entries(spacingScale)) {
-    if (scaleValue === value) {
-      return `$spacing-${size}`;
-    }
-  }
-  
-  // Fallback to pixel value
-  return `$spacing-${value.replace('px', '')}`;
-}
-
-/**
- * Generates color variable name
- */
-function generateColorVariableName(value, occurrences) {
-  // Try to detect common color patterns
-  const normalizedColor = normalizeColor(value);
-  
-  // Check for common Material colors
-  if (normalizedColor === '#1976d2' || normalizedColor === 'rgb(25,118,210)') {
-    return '$color-brand-primary';
-  }
-  if (normalizedColor === 'rgba(0,0,0,0.87)') {
-    return '$color-text-primary';
-  }
-  if (normalizedColor === 'rgba(0,0,0,0.54)') {
-    return '$color-text-secondary';
-  }
-  if (normalizedColor === '#ffffff' || normalizedColor === 'white') {
-    return '$color-white';
-  }
-  if (normalizedColor === '#000000' || normalizedColor === 'black') {
-    return '$color-black';
-  }
-  
-  // Try to derive from context
-  if (occurrences && occurrences.length > 0) {
-    const context = occurrences[0].context || '';
-    if (context.includes('background')) return '$color-background';
-    if (context.includes('border')) return '$color-border';
-    if (context.includes('text') || context.includes('color:')) return '$color-text';
-  }
-  
-  // Fallback to hex value
-  return '$color-' + sanitizeName(value);
-}
-
-/**
- * Generates font size variable name
- */
-function generateFontSizeVariableName(value) {
-  const sizeMap = {
-    '12px': 'xs',
-    '14px': 'sm',
-    '16px': 'md',
-    '18px': 'lg',
-    '20px': 'xl',
-    '24px': 'xxl'
-  };
-  
-  return `$font-size-${sizeMap[value] || value.replace('px', '')}`;
-}
-
-/**
- * Generates font weight variable name
- */
-function generateFontWeightVariableName(value) {
-  const weightMap = {
-    '300': 'light',
-    '400': 'normal',
-    '500': 'medium',
-    '600': 'semibold',
-    '700': 'bold',
-    'bold': 'bold',
-    'normal': 'normal'
-  };
-  
-  return `$font-weight-${weightMap[value] || value}`;
-}
-
-/**
- * Generates border radius variable name
- */
-function generateBorderRadiusVariableName(value) {
-  if (value === '50%') return '$border-radius-circle';
-  
-  const radiusMap = {
-    '2px': 'xs',
-    '4px': 'sm',
-    '8px': 'md',
-    '12px': 'lg',
-    '16px': 'xl'
-  };
-  
-  return `$border-radius-${radiusMap[value] || value.replace(/px|%/, '')}`;
-}
-
-/**
- * Sanitizes a value to be a valid variable name
- */
-function sanitizeName(value) {
-  return value
-    .replace(/[^a-zA-Z0-9-]/g, '-')
-    .replace(/-+/g, '-')
-    .replace(/^-|-$/g, '')
-    .toLowerCase();
-}
-
-module.exports = {
-  analyzeValues,
-  normalizeValue,
-  generateVariableName
-};
+/**
+ * Analyzes extracted values and identifies repeated ones
+ */
+
+/**
+ * Analyzes all extracted values from multiple files
+ * @param {Array<Object>} allExtracted - Array of extracted values from all files
+ * @param {Object} config - Configuration object
+ * @returns {Object} - Analysis results with repeated values
+ */
+function analyzeValues(allExtracted, config) {
+  const analysis = {
+    colors: {},
+    spacing: {},
+    fontSizes: {},
+    fontWeights: {},
+    fontFamilies: {},
+    borderRadius: {},
+    shadows: {},
+    zIndex: {},
+    sizing: {},
+    lineHeight: {},
+    opacity: {},
+    transitions: {},
+  };
+
+  // Count occurrences of each value
+  Object.keys(allExtracted).forEach(category => {
+    if (!config.categories[category]) return;
+
+    allExtracted[category].forEach(item => {
+      const normalizedValue = normalizeValue(item.value, category);
+
+      if (!analysis[category][normalizedValue]) {
+        analysis[category][normalizedValue] = {
+          value: item.value,
+          count: 0,
+          files: new Set(),
+          occurrences: [],
+        };
+      }
+
+      analysis[category][normalizedValue].count++;
+      analysis[category][normalizedValue].files.add(item.file);
+      analysis[category][normalizedValue].occurrences.push({
+        file: item.file,
+        line: item.line,
+        context: item.context,
+        property: item.property,
+      });
+    });
+  });
+
+  // Filter by threshold and generate variable names
+  const results = {};
+
+  Object.keys(analysis).forEach(category => {
+    results[category] = [];
+
+    Object.keys(analysis[category]).forEach(normalizedValue => {
+      const data = analysis[category][normalizedValue];
+
+      if (data.count >= config.threshold) {
+        results[category].push({
+          value: data.value,
+          normalizedValue,
+          count: data.count,
+          fileCount: data.files.size,
+          files: Array.from(data.files),
+          occurrences: data.occurrences,
+          suggestedName: generateVariableName(category, data.value, data.occurrences, config),
+        });
+      }
+    });
+
+    // Sort by count (descending)
+    results[category].sort((a, b) => b.count - a.count);
+  });
+
+  return results;
+}
+
+/**
+ * Normalizes value for comparison
+ */
+function normalizeValue(value, category) {
+  if (category === 'colors') {
+    return normalizeColor(value);
+  }
+  return value.toLowerCase().trim();
+}
+
+/**
+ * Normalizes color values for comparison
+ */
+function normalizeColor(color) {
+  color = color.toLowerCase().trim();
+
+  // Convert 3-digit hex to 6-digit
+  if (/^#[0-9a-f]{3}$/i.test(color)) {
+    color = '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
+  }
+
+  // Normalize rgb/rgba spacing
+  color = color.replace(/\s+/g, '');
+
+  return color;
+}
+
+/**
+ * Generates a variable name based on category and value
+ */
+function generateVariableName(category, value, occurrences, config) {
+  const prefix = getCategoryPrefix(category);
+
+  if (category === 'spacing') {
+    return generateSpacingVariableName(value, config);
+  } else if (category === 'colors') {
+    return generateColorVariableName(value, occurrences);
+  } else if (category === 'fontSizes') {
+    return generateFontSizeVariableName(value);
+  } else if (category === 'fontWeights') {
+    return generateFontWeightVariableName(value);
+  } else if (category === 'fontFamilies') {
+    return prefix + sanitizeName(value);
+  } else if (category === 'borderRadius') {
+    return generateBorderRadiusVariableName(value);
+  } else if (category === 'shadows') {
+    return prefix + 'default';
+  } else if (category === 'zIndex') {
+    return prefix + value;
+  } else if (category === 'sizing') {
+    return prefix + value.replace('px', '');
+  } else if (category === 'lineHeight') {
+    return prefix + sanitizeName(value);
+  } else if (category === 'opacity') {
+    return prefix + sanitizeName(value);
+  } else if (category === 'transitions') {
+    return prefix + 'default';
+  }
+
+  return prefix + 'value';
+}
+
+/**
+ * Gets prefix for a category
+ */
+function getCategoryPrefix(category) {
+  const prefixes = {
+    colors: '$color-',
+    spacing: '$spacing-',
+    fontSizes: '$font-size-',
+    fontWeights: '$font-weight-',
+    fontFamilies: '$font-family-',
+    borderRadius: '$border-radius-',
+    shadows: '$shadow-',
+    zIndex: '$z-index-',
+    sizing: '$size-',
+    lineHeight: '$line-height-',
+    opacity: '$opacity-',
+    transitions: '$transition-',
+  };
+
+  return prefixes[category] || '$';
+}
+
+/**
+ * Generates spacing variable name using t-shirt sizing
+ */
+function generateSpacingVariableName(value, config) {
+  const spacingScale = config.spacingScale;
+
+  // Try to match to spacing scale
+  for (const [size, scaleValue] of Object.entries(spacingScale)) {
+    if (scaleValue === value) {
+      return `$spacing-${size}`;
+    }
+  }
+
+  // Fallback to pixel value
+  return `$spacing-${value.replace('px', '')}`;
+}
+
+/**
+ * Generates color variable name
+ */
+function generateColorVariableName(value, occurrences) {
+  // Try to detect common color patterns
+  const normalizedColor = normalizeColor(value);
+
+  // Check for common Material colors
+  if (normalizedColor === '#1976d2' || normalizedColor === 'rgb(25,118,210)') {
+    return '$color-brand-primary';
+  }
+  if (normalizedColor === 'rgba(0,0,0,0.87)') {
+    return '$color-text-primary';
+  }
+  if (normalizedColor === 'rgba(0,0,0,0.54)') {
+    return '$color-text-secondary';
+  }
+  if (normalizedColor === '#ffffff' || normalizedColor === 'white') {
+    return '$color-white';
+  }
+  if (normalizedColor === '#000000' || normalizedColor === 'black') {
+    return '$color-black';
+  }
+
+  // Try to derive from context
+  if (occurrences && occurrences.length > 0) {
+    const context = occurrences[0].context || '';
+    if (context.includes('background')) return '$color-background';
+    if (context.includes('border')) return '$color-border';
+    if (context.includes('text') || context.includes('color:')) return '$color-text';
+  }
+
+  // Fallback to hex value
+  return '$color-' + sanitizeName(value);
+}
+
+/**
+ * Generates font size variable name
+ */
+function generateFontSizeVariableName(value) {
+  const sizeMap = {
+    '12px': 'xs',
+    '14px': 'sm',
+    '16px': 'md',
+    '18px': 'lg',
+    '20px': 'xl',
+    '24px': 'xxl',
+  };
+
+  return `$font-size-${sizeMap[value] || value.replace('px', '')}`;
+}
+
+/**
+ * Generates font weight variable name
+ */
+function generateFontWeightVariableName(value) {
+  const weightMap = {
+    300: 'light',
+    400: 'normal',
+    500: 'medium',
+    600: 'semibold',
+    700: 'bold',
+    bold: 'bold',
+    normal: 'normal',
+  };
+
+  return `$font-weight-${weightMap[value] || value}`;
+}
+
+/**
+ * Generates border radius variable name
+ */
+function generateBorderRadiusVariableName(value) {
+  if (value === '50%') return '$border-radius-circle';
+
+  const radiusMap = {
+    '2px': 'xs',
+    '4px': 'sm',
+    '8px': 'md',
+    '12px': 'lg',
+    '16px': 'xl',
+  };
+
+  return `$border-radius-${radiusMap[value] || value.replace(/px|%/, '')}`;
+}
+
+/**
+ * Sanitizes a value to be a valid variable name
+ */
+function sanitizeName(value) {
+  return value
+    .replace(/[^a-zA-Z0-9-]/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+    .toLowerCase();
+}
+
+module.exports = {
+  analyzeValues,
+  normalizeValue,
+  generateVariableName,
+};