scss-variable-extractor 1.0.0

package/test/analyzer.test.js

@@ -0,0 +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);
+  });
+});

package/test/fixtures/apps/subapp/src/app/component-a/component-a.component.scss

@@ -0,0 +1,47 @@
+.component-a {
+  background-color: #1976d2;
+  color: rgba(0, 0, 0, 0.87);
+  padding: 16px;
+  margin: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  
+  .header {
+    background-color: #1976d2;
+    padding: 24px;
+    margin-bottom: 16px;
+    font-size: 20px;
+    font-weight: 700;
+  }
+  
+  .content {
+    padding: 16px;
+    font-size: 14px;
+    line-height: 1.5;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  
+  .button {
+    padding: 8px 16px;
+    background-color: #1976d2;
+    color: white;
+    border-radius: 4px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    
+    &:hover {
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      opacity: 0.9;
+    }
+  }
+  
+  .footer {
+    margin-top: 24px;
+    padding: 8px;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.54);
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+  }
+}

package/test/fixtures/apps/subapp/src/app/component-b/component-b.component.scss

@@ -0,0 +1,52 @@
+.component-b {
+  background-color: white;
+  padding: 16px;
+  margin: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  
+  .title {
+    color: #1976d2;
+    font-size: 20px;
+    font-weight: 700;
+    margin-bottom: 16px;
+  }
+  
+  .description {
+    color: rgba(0, 0, 0, 0.87);
+    font-size: 14px;
+    line-height: 1.5;
+    padding: 8px;
+  }
+  
+  .actions {
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    
+    .action-button {
+      padding: 8px 16px;
+      margin-right: 8px;
+      background-color: #1976d2;
+      color: white;
+      border-radius: 4px;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:hover {
+        opacity: 0.9;
+      }
+      
+      &.secondary {
+        background-color: rgba(0, 0, 0, 0.1);
+        color: rgba(0, 0, 0, 0.87);
+      }
+    }
+  }
+  
+  .metadata {
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.54);
+    padding: 8px;
+  }
+}

package/test/fixtures/libs/styles/_existing-variables.scss

@@ -0,0 +1,16 @@
+// Existing Variables
+// These should not be extracted again
+
+$existing-primary-color: #2196f3;
+$existing-spacing: 12px;
+$existing-font-size: 16px;
+
+// Color palette
+$palette-red: #f44336;
+$palette-green: #4caf50;
+$palette-blue: #2196f3;
+
+// Spacing scale
+$space-small: 8px;
+$space-medium: 16px;
+$space-large: 24px;

package/test/generator.test.js

@@ -0,0 +1,149 @@
+const { generateVariablesFile, generateReport } = require('../src/generator');
+const { DEFAULT_CONFIG } = require('../src/config');
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+
+describe('Generator', () => {
+  let tempDir;
+  
+  beforeEach(() => {
+    tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'scss-test-'));
+  });
+  
+  afterEach(() => {
+    if (fs.existsSync(tempDir)) {
+      fs.rmSync(tempDir, { recursive: true, force: true });
+    }
+  });
+  
+  test('should generate variables file', () => {
+    const analysis = {
+      colors: [
+        { value: '#1976d2', count: 5, suggestedName: '$color-brand-primary' }
+      ],
+      spacing: [
+        { value: '16px', count: 10, suggestedName: '$spacing-md' }
+      ],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: []
+    };
+    
+    const outputPath = path.join(tempDir, '_variables.scss');
+    generateVariablesFile(analysis, outputPath, DEFAULT_CONFIG);
+    
+    expect(fs.existsSync(outputPath)).toBe(true);
+    
+    const content = fs.readFileSync(outputPath, 'utf8');
+    expect(content).toContain('$color-brand-primary');
+    expect(content).toContain('#1976d2');
+    expect(content).toContain('$spacing-md');
+    expect(content).toContain('16px');
+  });
+  
+  test('should include header with version and timestamp', () => {
+    const analysis = {
+      colors: [],
+      spacing: [],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: []
+    };
+    
+    const outputPath = path.join(tempDir, '_variables.scss');
+    const content = generateVariablesFile(analysis, outputPath, DEFAULT_CONFIG);
+    
+    expect(content).toContain('Auto-generated SCSS Variables');
+    expect(content).toContain('scss-variable-extractor');
+    expect(content).toContain('DO NOT EDIT');
+  });
+  
+  test('should generate table report', () => {
+    const analysis = {
+      colors: [
+        { value: '#1976d2', count: 5, fileCount: 3, suggestedName: '$color-brand-primary' }
+      ],
+      spacing: [],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: []
+    };
+    
+    const report = generateReport(analysis, 'table', DEFAULT_CONFIG);
+    
+    expect(report).toContain('#1976d2');
+    expect(report).toContain('$color-brand-primary');
+  });
+  
+  test('should generate JSON report', () => {
+    const analysis = {
+      colors: [
+        { value: '#1976d2', count: 5, suggestedName: '$color-brand-primary' }
+      ],
+      spacing: [],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: []
+    };
+    
+    const report = generateReport(analysis, 'json', DEFAULT_CONFIG);
+    const parsed = JSON.parse(report);
+    
+    expect(parsed.colors).toHaveLength(1);
+    expect(parsed.colors[0].value).toBe('#1976d2');
+  });
+  
+  test('should generate Markdown report', () => {
+    const analysis = {
+      colors: [
+        { value: '#1976d2', count: 5, fileCount: 3, suggestedName: '$color-brand-primary' }
+      ],
+      spacing: [],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: []
+    };
+    
+    const report = generateReport(analysis, 'markdown', DEFAULT_CONFIG);
+    
+    expect(report).toContain('# SCSS Variable Extraction Analysis');
+    expect(report).toContain('## Colors');
+    expect(report).toContain('#1976d2');
+  });
+});

package/test/parser.test.js

@@ -0,0 +1,131 @@
+const { parseScss } = require('../src/parser');
+
+describe('Parser', () => {
+  test('should extract hex colors', () => {
+    const scss = `
+      .test {
+        color: #1976d2;
+        background: #fff;
+      }
+    `;
+    
+    const result = parseScss(scss, 'test.scss');
+    
+    expect(result.colors.length).toBeGreaterThan(0);
+    expect(result.colors.some(c => c.value === '#1976d2')).toBe(true);
+  });
+  
+  test('should extract rgba colors', () => {
+    const scss = `
+      .test {
+        color: rgba(0, 0, 0, 0.87);
+      }
+    `;
+    
+    const result = parseScss(scss, 'test.scss');
+    
+    expect(result.colors.some(c => c.value.includes('rgba'))).toBe(true);
+  });
+  
+  test('should extract spacing values', () => {
+    const scss = `
+      .test {
+        padding: 16px;
+        margin: 8px;
+      }
+    `;
+    
+    const result = parseScss(scss, 'test.scss');
+    
+    expect(result.spacing.length).toBeGreaterThan(0);
+  });
+  
+  test('should extract font sizes', () => {
+    const scss = `
+      .test {
+        font-size: 14px;
+      }
+    `;
+    
+    const result = parseScss(scss, 'test.scss');
+    
+    expect(result.fontSizes.length).toBeGreaterThan(0);
+  });
+  
+  test('should extract font weights', () => {
+    const scss = `
+      .test {
+        font-weight: 500;
+        font-weight: bold;
+      }
+    `;
+    
+    const result = parseScss(scss, 'test.scss');
+    
+    expect(result.fontWeights.length).toBeGreaterThan(0);
+  });
+  
+  test('should not extract from variable declarations', () => {
+    const scss = `
+      $my-color: #1976d2;
+      .test {
+        color: $my-color;
+      }
+    `;
+    
+    const result = parseScss(scss, 'test.scss');
+    
+    // Should not extract the color from variable declaration
+    expect(result.colors.length).toBe(0);
+  });
+  
+  test('should not extract from url() functions', () => {
+    const scss = `
+      .test {
+        background: url('image.png');
+      }
+    `;
+    
+    const result = parseScss(scss, 'test.scss');
+    
+    // Should not extract anything from url
+    expect(result.colors.length).toBe(0);
+  });
+  
+  test('should extract border radius', () => {
+    const scss = `
+      .test {
+        border-radius: 4px;
+        border-radius: 50%;
+      }
+    `;
+    
+    const result = parseScss(scss, 'test.scss');
+    
+    expect(result.borderRadius.length).toBeGreaterThan(0);
+  });
+  
+  test('should extract z-index values', () => {
+    const scss = `
+      .test {
+        z-index: 100;
+      }
+    `;
+    
+    const result = parseScss(scss, 'test.scss');
+    
+    expect(result.zIndex.length).toBeGreaterThan(0);
+  });
+  
+  test('should extract opacity values', () => {
+    const scss = `
+      .test {
+        opacity: 0.9;
+      }
+    `;
+    
+    const result = parseScss(scss, 'test.scss');
+    
+    expect(result.opacity.length).toBeGreaterThan(0);
+  });
+});

package/test/refactorer.test.js

@@ -0,0 +1,127 @@
+const { refactorFile } = require('../src/refactorer');
+
+describe('Refactorer', () => {
+  test('should replace hardcoded values with variables', () => {
+    const scss = `
+      .test {
+        color: #1976d2;
+        padding: 16px;
+      }
+    `;
+    
+    const analysis = {
+      colors: [
+        { value: '#1976d2', suggestedName: '$color-brand-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', {});
+    
+    expect(result.modified).toBe(true);
+    expect(result.content).toContain('$color-brand-primary');
+    expect(result.content).toContain('$spacing-md');
+  });
+  
+  test('should add @use import when modified', () => {
+    const scss = `
+      .test {
+        color: #1976d2;
+      }
+    `;
+    
+    const analysis = {
+      colors: [
+        { value: '#1976d2', suggestedName: '$color-brand-primary' }
+      ],
+      spacing: [],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: []
+    };
+    
+    const result = refactorFile(scss, analysis, '/libs/styles/_variables.scss', '/app/test.scss', {});
+    
+    expect(result.content).toContain('@use');
+    expect(result.content).toContain('variables');
+  });
+  
+  test('should not modify if no values match', () => {
+    const scss = `
+      .test {
+        color: #000;
+      }
+    `;
+    
+    const analysis = {
+      colors: [
+        { value: '#1976d2', suggestedName: '$color-brand-primary' }
+      ],
+      spacing: [],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: []
+    };
+    
+    const result = refactorFile(scss, analysis, '/libs/styles/_variables.scss', '/app/test.scss', {});
+    
+    expect(result.modified).toBe(false);
+  });
+  
+  test('should not replace values in variable declarations', () => {
+    const scss = `
+      $my-color: #1976d2;
+      .test {
+        color: $my-color;
+      }
+    `;
+    
+    const analysis = {
+      colors: [
+        { value: '#1976d2', suggestedName: '$color-brand-primary' }
+      ],
+      spacing: [],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: []
+    };
+    
+    const result = refactorFile(scss, analysis, '/libs/styles/_variables.scss', '/app/test.scss', {});
+    
+    // Should not replace in variable declaration
+    expect(result.content).toContain('$my-color: #1976d2');
+  });
+});

package/test/scanner.test.js

@@ -0,0 +1,25 @@
+const { scanScssFiles } = require('../src/scanner');
+const path = require('path');
+
+describe('Scanner', () => {
+  const fixturesPath = path.join(__dirname, 'fixtures/apps/subapp/src');
+  
+  test('should find SCSS files in directory', async () => {
+    const files = await scanScssFiles(fixturesPath);
+    
+    expect(files.length).toBeGreaterThan(0);
+    expect(files.every(f => f.endsWith('.scss'))).toBe(true);
+  });
+  
+  test('should ignore specified patterns', async () => {
+    const files = await scanScssFiles(fixturesPath, ['**/component-b/**']);
+    
+    expect(files.every(f => !f.includes('component-b'))).toBe(true);
+  });
+  
+  test('should return absolute paths', async () => {
+    const files = await scanScssFiles(fixturesPath);
+    
+    expect(files.every(f => path.isAbsolute(f))).toBe(true);
+  });
+});