scss-variable-extractor 1.6.4 → 1.6.6

package/src/theme-utils.js

@@ -0,0 +1,432 @@
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Generates SCSS theme structure for Angular Material applications
+ * Supports dark and light themes with proper variable organization
+ * @param {Object} options - Configuration options
+ * @returns {Object} - Theme files content and recommendations
+ */
+function generateThemeStructure(options = {}) {
+  const {
+    outputDir = './src/styles',
+    includeComponents = true,
+    themePalettes = {
+      primary: { light: '#1976d2', dark: '#90caf9' },
+      accent: { light: '#ff4081', dark: '#ff4081' },
+      warn: { light: '#f44336', dark: '#f44336' },
+    },
+  } = options;
+
+  const themeFiles = {
+    base: generateBaseTheme(),
+    lightTheme: generateLightTheme(themePalettes),
+    darkTheme: generateDarkTheme(themePalettes),
+    themeLoader: generateThemeLoader(),
+    componentThemes: includeComponents ? generateComponentThemeTemplate() : null,
+    cssVariables: generateCSSVariables(themePalettes),
+  };
+
+  return {
+    files: themeFiles,
+    recommendations: getThemeRecommendations(),
+    structure: getRecommendedStructure(),
+  };
+}
+
+/**
+ * Generates base theme file with shared variables
+ */
+function generateBaseTheme() {
+  return `// Base theme configuration
+// Shared variables used across all themes
+
+// Spacing scale (t-shirt sizing)
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 24px;
+$spacing-xl: 32px;
+$spacing-xxl: 48px;
+
+// Typography scale
+$font-size-xs: 12px;
+$font-size-sm: 14px;
+$font-size-md: 16px;
+$font-size-lg: 18px;
+$font-size-xl: 24px;
+$font-size-xxl: 32px;
+
+// Font weights
+$font-weight-light: 300;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+
+// Border radius
+$border-radius-sm: 4px;
+$border-radius-md: 8px;
+$border-radius-lg: 16px;
+$border-radius-round: 50%;
+
+// Z-index layers
+$z-index-dropdown: 1000;
+$z-index-sticky: 1020;
+$z-index-fixed: 1030;
+$z-index-modal-backdrop: 1040;
+$z-index-modal: 1050;
+$z-index-popover: 1060;
+$z-index-tooltip: 1070;
+
+// Transitions
+$transition-fast: 150ms ease-in-out;
+$transition-normal: 300ms ease-in-out;
+$transition-slow: 500ms ease-in-out;
+
+// Box shadows
+$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+`;
+}
+
+/**
+ * Generates light theme variables
+ */
+function generateLightTheme(palettes) {
+  return `// Light theme colors
+// These colors are optimized for light backgrounds
+
+// Primary colors
+$primary-light: ${palettes.primary.light};
+$primary-light-contrast: #ffffff;
+
+// Accent colors
+$accent-light: ${palettes.accent.light};
+$accent-light-contrast: #ffffff;
+
+// Warn colors
+$warn-light: ${palettes.warn.light};
+$warn-light-contrast: #ffffff;
+
+// Background colors
+$background-light: #fafafa;
+$surface-light: #ffffff;
+$card-light: #ffffff;
+
+// Text colors
+$text-primary-light: rgba(0, 0, 0, 0.87);
+$text-secondary-light: rgba(0, 0, 0, 0.60);
+$text-disabled-light: rgba(0, 0, 0, 0.38);
+$text-hint-light: rgba(0, 0, 0, 0.38);
+
+// Divider colors
+$divider-light: rgba(0, 0, 0, 0.12);
+$border-light: rgba(0, 0, 0, 0.12);
+
+// State colors
+$hover-light: rgba(0, 0, 0, 0.04);
+$selected-light: rgba(0, 0, 0, 0.08);
+$focused-light: rgba(0, 0, 0, 0.12);
+`;
+}
+
+/**
+ * Generates dark theme variables
+ */
+function generateDarkTheme(palettes) {
+  return `// Dark theme colors
+// These colors are optimized for dark backgrounds
+
+// Primary colors
+$primary-dark: ${palettes.primary.dark};
+$primary-dark-contrast: rgba(0, 0, 0, 0.87);
+
+// Accent colors
+$accent-dark: ${palettes.accent.dark};
+$accent-dark-contrast: rgba(0, 0, 0, 0.87);
+
+// Warn colors
+$warn-dark: ${palettes.warn.dark};
+$warn-dark-contrast: #ffffff;
+
+// Background colors
+$background-dark: #303030;
+$surface-dark: #424242;
+$card-dark: #424242;
+
+// Text colors
+$text-primary-dark: rgba(255, 255, 255, 0.87);
+$text-secondary-dark: rgba(255, 255, 255, 0.70);
+$text-disabled-dark: rgba(255, 255, 255, 0.50);
+$text-hint-dark: rgba(255, 255, 255, 0.50);
+
+// Divider colors
+$divider-dark: rgba(255, 255, 255, 0.12);
+$border-dark: rgba(255, 255, 255, 0.12);
+
+// State colors
+$hover-dark: rgba(255, 255, 255, 0.04);
+$selected-dark: rgba(255, 255, 255, 0.08);
+$focused-dark: rgba(255, 255, 255, 0.12);
+`;
+}
+
+/**
+ * Generates theme loader that switches between light and dark
+ */
+function generateThemeLoader() {
+  return `@use '@angular/material' as mat;
+@use './theme-base' as base;
+@use './theme-light' as light;
+@use './theme-dark' as dark;
+
+// Include the common styles for Angular Material
+@include mat.core();
+
+// Define the light theme
+$light-theme: mat.define-light-theme((
+  color: (
+    primary: mat.define-palette(mat.$indigo-palette),
+    accent: mat.define-palette(mat.$pink-palette),
+    warn: mat.define-palette(mat.$red-palette),
+  ),
+  typography: mat.define-typography-config(),
+  density: 0,
+));
+
+// Define the dark theme
+$dark-theme: mat.define-dark-theme((
+  color: (
+    primary: mat.define-palette(mat.$blue-palette),
+    accent: mat.define-palette(mat.$pink-palette),
+    warn: mat.define-palette(mat.$red-palette),
+  ),
+  typography: mat.define-typography-config(),
+  density: 0,
+));
+
+// Apply the light theme by default
+@include mat.all-component-themes($light-theme);
+
+// Apply the dark theme when the 'dark-theme' class is present
+.dark-theme {
+  @include mat.all-component-colors($dark-theme);
+  
+  // Custom dark theme variables
+  --background-color: #{dark.$background-dark};
+  --surface-color: #{dark.$surface-dark};
+  --text-primary: #{dark.$text-primary-dark};
+  --text-secondary: #{dark.$text-secondary-dark};
+  --divider-color: #{dark.$divider-dark};
+}
+
+// Light theme custom variables (default)
+:root {
+  --background-color: #{light.$background-light};
+  --surface-color: #{light.$surface-light};
+  --text-primary: #{light.$text-primary-light};
+  --text-secondary: #{light.$text-secondary-light};
+  --divider-color: #{light.$divider-light};
+}
+`;
+}
+
+/**
+ * Generates component theme template
+ */
+function generateComponentThemeTemplate() {
+  return `// Component-specific theme mixin
+// Use this pattern for components that need theme-aware styles
+
+@mixin component-theme($theme) {
+  $color-config: mat.get-color-config($theme);
+  
+  @if $color-config != null {
+    $primary: map.get($color-config, 'primary');
+    $accent: map.get($color-config, 'accent');
+    $warn: map.get($color-config, 'warn');
+    $foreground: map.get($color-config, 'foreground');
+    $background: map.get($color-config, 'background');
+
+    .my-component {
+      background-color: mat.get-color-from-palette($background, 'card');
+      color: mat.get-color-from-palette($foreground, 'text');
+      
+      &__header {
+        background-color: mat.get-color-from-palette($primary);
+        color: mat.get-color-from-palette($primary, 'default-contrast');
+      }
+      
+      &__accent {
+        color: mat.get-color-from-palette($accent);
+      }
+    }
+  }
+}
+
+// Include this mixin in your theme files:
+// @include component-theme($light-theme);
+// .dark-theme { @include component-theme($dark-theme); }
+`;
+}
+
+/**
+ * Generates CSS custom properties for runtime theme switching
+ */
+function generateCSSVariables(palettes) {
+  return `// CSS Custom Properties for runtime theme switching
+// These can be changed dynamically with JavaScript
+
+:root {
+  // Colors
+  --color-primary: ${palettes.primary.light};
+  --color-accent: ${palettes.accent.light};
+  --color-warn: ${palettes.warn.light};
+  
+  // Usage in components:
+  // color: var(--color-primary);
+  // background-color: var(--color-accent);
+}
+
+.dark-theme {
+  --color-primary: ${palettes.primary.dark};
+  --color-accent: ${palettes.accent.dark};
+  --color-warn: ${palettes.warn.dark};
+}
+`;
+}
+
+/**
+ * Provides recommendations for theme organization
+ */
+function getThemeRecommendations() {
+  return [
+    {
+      category: 'Structure',
+      recommendation:
+        'Organize themes in src/styles/ directory with separate files for base, light, and dark themes',
+      priority: 'high',
+    },
+    {
+      category: 'Variables',
+      recommendation:
+        'Use SCSS variables for build-time values and CSS custom properties for runtime theme switching',
+      priority: 'high',
+    },
+    {
+      category: 'Component Styles',
+      recommendation:
+        'Create theme mixins for components that need theme-aware styles instead of using ::ng-deep',
+      priority: 'high',
+    },
+    {
+      category: 'Global Styles',
+      recommendation:
+        'Move cross-cutting styles that affect multiple components to global theme files',
+      priority: 'medium',
+    },
+    {
+      category: 'Encapsulation',
+      recommendation:
+        'Avoid ViewEncapsulation.None unless absolutely necessary; use theme mixins instead',
+      priority: 'medium',
+    },
+    {
+      category: 'Performance',
+      recommendation:
+        'Use CSS custom properties sparingly; SCSS variables are optimized at build time',
+      priority: 'low',
+    },
+  ];
+}
+
+/**
+ * Returns recommended directory structure
+ */
+function getRecommendedStructure() {
+  return {
+    'src/styles/': {
+      '_theme-base.scss': 'Shared variables (spacing, typography, shadows, etc.)',
+      '_theme-light.scss': 'Light theme color variables',
+      '_theme-dark.scss': 'Dark theme color variables',
+      'themes.scss': 'Theme loader and Material theme configuration',
+      '_variables.scss': 'Extracted hardcoded values (generated)',
+      'global-overrides.scss': 'Global styles extracted from ::ng-deep usage',
+      'utilities.scss': 'Utility classes for common patterns',
+    },
+  };
+}
+
+/**
+ * Analyzes existing styles and suggests theme organization
+ */
+function analyzeThemeReadiness(scssFiles) {
+  const analysis = {
+    hardcodedColors: [],
+    themeableComponents: [],
+    colorUsage: new Map(),
+    recommendations: [],
+  };
+
+  scssFiles.forEach(filePath => {
+    const content = fs.readFileSync(filePath, 'utf8');
+
+    // Find hardcoded colors
+    const colorMatches = content.matchAll(/#[0-9a-fA-F]{3,6}\b|rgba?\([^)]+\)/g);
+    for (const match of colorMatches) {
+      const color = match[0];
+      const count = analysis.colorUsage.get(color) || 0;
+      analysis.colorUsage.set(color, count + 1);
+
+      analysis.hardcodedColors.push({
+        file: filePath,
+        color,
+        line: getLineNumber(content, match.index),
+      });
+    }
+
+    // Find components that might benefit from theme mixins
+    if (content.includes('::ng-deep') || content.includes('!important')) {
+      analysis.themeableComponents.push(filePath);
+    }
+  });
+
+  // Generate recommendations
+  analysis.colorUsage.forEach((count, color) => {
+    if (count > 3) {
+      analysis.recommendations.push({
+        type: 'extract-color',
+        message: `Color ${color} used ${count} times - consider extracting to theme variable`,
+        priority: 'high',
+      });
+    }
+  });
+
+  if (analysis.themeableComponents.length > 0) {
+    analysis.recommendations.push({
+      type: 'create-theme-mixins',
+      message: `${analysis.themeableComponents.length} component(s) could benefit from theme mixins`,
+      priority: 'medium',
+      files: analysis.themeableComponents,
+    });
+  }
+
+  return analysis;
+}
+
+/**
+ * Helper function to get line number from content and index
+ */
+function getLineNumber(content, index) {
+  return content.substring(0, index).split('\n').length;
+}
+
+module.exports = {
+  generateThemeStructure,
+  analyzeThemeReadiness,
+  getThemeRecommendations,
+  getRecommendedStructure,
+};

package/test/analyzer.test.js

@@ -1,107 +1,107 @@
-const { analyzeValues, generateVariableName } = require('../src/analyzer');
-const { DEFAULT_CONFIG } = require('../src/config');
-
-describe('Analyzer', () => {
-  test('should count repeated values', () => {
-    const extracted = {
-      colors: [
-        { value: '#1976d2', file: 'a.scss', line: 1 },
-        { value: '#1976d2', file: 'b.scss', line: 1 },
-        { value: '#fff', file: 'a.scss', line: 2 }
-      ],
-      spacing: [],
-      fontSizes: [],
-      fontWeights: [],
-      fontFamilies: [],
-      borderRadius: [],
-      shadows: [],
-      zIndex: [],
-      sizing: [],
-      lineHeight: [],
-      opacity: [],
-      transitions: []
-    };
-    
-    const analysis = analyzeValues(extracted, DEFAULT_CONFIG);
-    
-    expect(analysis.colors.length).toBeGreaterThan(0);
-    const primaryColor = analysis.colors.find(c => c.value === '#1976d2');
-    expect(primaryColor.count).toBe(2);
-  });
-  
-  test('should filter by threshold', () => {
-    const extracted = {
-      colors: [
-        { value: '#1976d2', file: 'a.scss', line: 1 },
-        { value: '#fff', file: 'a.scss', line: 2 }
-      ],
-      spacing: [],
-      fontSizes: [],
-      fontWeights: [],
-      fontFamilies: [],
-      borderRadius: [],
-      shadows: [],
-      zIndex: [],
-      sizing: [],
-      lineHeight: [],
-      opacity: [],
-      transitions: []
-    };
-    
-    const config = { ...DEFAULT_CONFIG, threshold: 2 };
-    const analysis = analyzeValues(extracted, config);
-    
-    // No colors should pass threshold of 2
-    expect(analysis.colors.length).toBe(0);
-  });
-  
-  test('should generate spacing variable names with t-shirt sizing', () => {
-    const name = generateVariableName('spacing', '16px', [], DEFAULT_CONFIG);
-    
-    expect(name).toBe('$spacing-md');
-  });
-  
-  test('should generate color variable names', () => {
-    const name = generateVariableName('colors', '#1976d2', []);
-    
-    expect(name).toContain('$color-');
-  });
-  
-  test('should generate font-size variable names', () => {
-    const name = generateVariableName('fontSizes', '14px', []);
-    
-    expect(name).toBe('$font-size-sm');
-  });
-  
-  test('should generate font-weight variable names', () => {
-    const name = generateVariableName('fontWeights', '500', []);
-    
-    expect(name).toBe('$font-weight-medium');
-  });
-  
-  test('should count unique files', () => {
-    const extracted = {
-      colors: [
-        { value: '#1976d2', file: 'a.scss', line: 1 },
-        { value: '#1976d2', file: 'a.scss', line: 5 },
-        { value: '#1976d2', file: 'b.scss', line: 1 }
-      ],
-      spacing: [],
-      fontSizes: [],
-      fontWeights: [],
-      fontFamilies: [],
-      borderRadius: [],
-      shadows: [],
-      zIndex: [],
-      sizing: [],
-      lineHeight: [],
-      opacity: [],
-      transitions: []
-    };
-    
-    const analysis = analyzeValues(extracted, DEFAULT_CONFIG);
-    
-    const primaryColor = analysis.colors.find(c => c.value === '#1976d2');
-    expect(primaryColor.fileCount).toBe(2);
-  });
-});
+const { analyzeValues, generateVariableName } = require('../src/analyzer');
+const { DEFAULT_CONFIG } = require('../src/config');
+
+describe('Analyzer', () => {
+  test('should count repeated values', () => {
+    const extracted = {
+      colors: [
+        { value: '#1976d2', file: 'a.scss', line: 1 },
+        { value: '#1976d2', file: 'b.scss', line: 1 },
+        { value: '#fff', file: 'a.scss', line: 2 },
+      ],
+      spacing: [],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: [],
+    };
+
+    const analysis = analyzeValues(extracted, DEFAULT_CONFIG);
+
+    expect(analysis.colors.length).toBeGreaterThan(0);
+    const primaryColor = analysis.colors.find(c => c.value === '#1976d2');
+    expect(primaryColor.count).toBe(2);
+  });
+
+  test('should filter by threshold', () => {
+    const extracted = {
+      colors: [
+        { value: '#1976d2', file: 'a.scss', line: 1 },
+        { value: '#fff', file: 'a.scss', line: 2 },
+      ],
+      spacing: [],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: [],
+    };
+
+    const config = { ...DEFAULT_CONFIG, threshold: 2 };
+    const analysis = analyzeValues(extracted, config);
+
+    // No colors should pass threshold of 2
+    expect(analysis.colors.length).toBe(0);
+  });
+
+  test('should generate spacing variable names with t-shirt sizing', () => {
+    const name = generateVariableName('spacing', '16px', [], DEFAULT_CONFIG);
+
+    expect(name).toBe('$spacing-md');
+  });
+
+  test('should generate color variable names', () => {
+    const name = generateVariableName('colors', '#1976d2', []);
+
+    expect(name).toContain('$color-');
+  });
+
+  test('should generate font-size variable names', () => {
+    const name = generateVariableName('fontSizes', '14px', []);
+
+    expect(name).toBe('$font-size-sm');
+  });
+
+  test('should generate font-weight variable names', () => {
+    const name = generateVariableName('fontWeights', '500', []);
+
+    expect(name).toBe('$font-weight-medium');
+  });
+
+  test('should count unique files', () => {
+    const extracted = {
+      colors: [
+        { value: '#1976d2', file: 'a.scss', line: 1 },
+        { value: '#1976d2', file: 'a.scss', line: 5 },
+        { value: '#1976d2', file: 'b.scss', line: 1 },
+      ],
+      spacing: [],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: [],
+    };
+
+    const analysis = analyzeValues(extracted, DEFAULT_CONFIG);
+
+    const primaryColor = analysis.colors.find(c => c.value === '#1976d2');
+    expect(primaryColor.fileCount).toBe(2);
+  });
+});