scss-variable-extractor 1.6.4 → 1.6.6

package/test/refactorer-edge-cases.test.js

@@ -1,353 +1,385 @@
-const { refactorFile } = require('../src/refactorer');
-
-describe('Refactorer Edge Cases', () => {
-  test('should handle rgba() color functions without partial replacements', () => {
-    const scss = `
-      .component {
-        background: rgba(255, 100, 50, 0.5);
-        color: rgba(100, 100, 100, 1);
-      }
-    `;
-    
-    const analysis = {
-      colors: [
-        { value: 'rgba(255, 100, 50, 0.5)', suggestedName: '$color-primary-light' }
-      ],
-      spacing: [
-        { value: '100px', suggestedName: '$spacing-xxl' }
-      ],
-      fontSizes: [],
-      fontWeights: [],
-      fontFamilies: [],
-      borderRadius: [],
-      shadows: [],
-      zIndex: [],
-      sizing: [],
-      lineHeight: [],
-      opacity: [
-        { value: '0.5', suggestedName: '$opacity-half' }
-      ],
-      transitions: []
-    };
-    
-    const result = refactorFile(scss, analysis, '/libs/styles/_variables.scss', '/app/test.scss', {});
-    
-    // Should replace complete rgba function
-    expect(result.content).toContain('background: $color-primary-light');
-    
-    // Should NOT do partial replacements inside rgba()
-    expect(result.content).toContain('rgba(100, 100, 100, 1)'); // Not rgba($spacing-xxl, $spacing-xxl, $spacing-xxl, 1)
-    expect(result.content).not.toContain('rgba($spacing-xxl');
-    expect(result.content).not.toContain('rgba(255, $spacing-xxl');
-  });
-
-  test('should handle calc() expressions without partial replacements', () => {
-    const scss = `
-      .component {
-        width: calc(100% - 16px);
-        height: calc(50vh + 8px);
-        margin: calc(16px / 2);
-      }
-    `;
-    
-    const analysis = {
-      colors: [],
-      spacing: [
-        { value: '16px', suggestedName: '$spacing-md' },
-        { value: '8px', suggestedName: '$spacing-sm' }
-      ],
-      fontSizes: [],
-      fontWeights: [],
-      fontFamilies: [],
-      borderRadius: [],
-      shadows: [],
-      zIndex: [],
-      sizing: [],
-      lineHeight: [],
-      opacity: [],
-      transitions: []
-    };
-    
-    const result = refactorFile(scss, analysis, '/libs/styles/_variables.scss', '/app/test.scss', {});
-    
-    // calc() values should be protected from replacement (safe zone)
-    const content = result.content;
-    
-    // Values inside calc() should NOT be replaced
-    expect(content).toContain('calc(100% - 16px)');
-    expect(content).toContain('calc(50vh + 8px)');
-    expect(content).toContain('calc(16px / 2)');
-  });
-
-  test('should handle negative values correctly', () => {
-    const scss = `
-      .component {
-        margin: -16px;
-        top: -8px;
-        z-index: -1;
-      }
-    `;
-    
-    const analysis = {
-      colors: [],
-      spacing: [
-        { value: '16px', suggestedName: '$spacing-md' },
-        { value: '8px', suggestedName: '$spacing-sm' }
-      ],
-      fontSizes: [],
-      fontWeights: [],
-      fontFamilies: [],
-      borderRadius: [],
-      shadows: [],
-      zIndex: [
-        { value: '1', suggestedName: '$z-index-1' }
-      ],
-      sizing: [],
-      lineHeight: [],
-      opacity: [],
-      transitions: []
-    };
-    
-    const result = refactorFile(scss, analysis, '/libs/styles/_variables.scss', '/app/test.scss', {});
-    
-    // Negative values should be protected (safe zone) to prevent -$variable syntax
-    expect(result.content).toContain('margin: -16px');
-    expect(result.content).toContain('top: -8px');
-    expect(result.content).toContain('z-index: -1');
-  });
-
-  test('should handle multiple values in shorthand properties', () => {
-    const scss = `
-      .component {
-        margin: 16px 8px;
-        padding: 16px 8px 16px 8px;
-        border-radius: 4px 2px;
-      }
-    `;
-    
-    const analysis = {
-      colors: [],
-      spacing: [
-        { value: '16px', suggestedName: '$spacing-md' },
-        { value: '8px', suggestedName: '$spacing-sm' }
-      ],
-      fontSizes: [],
-      fontWeights: [],
-      fontFamilies: [],
-      borderRadius: [
-        { value: '4px', suggestedName: '$border-radius-sm' },
-        { value: '2px', suggestedName: '$border-radius-xs' }
-      ],
-      shadows: [],
-      zIndex: [],
-      sizing: [],
-      lineHeight: [],
-      opacity: [],
-      transitions: []
-    };
-    
-    const result = refactorFile(scss, analysis, '/libs/styles/_variables.scss', '/app/test.scss', {});
-    
-    // Should replace individual values in shorthand
-    expect(result.content).toContain('$spacing-md');
-    expect(result.content).toContain('$spacing-sm');
-    expect(result.content).toContain('$border-radius-sm');
-    expect(result.content).toContain('$border-radius-xs');
-  });
-
-  test('should not replace values in CSS custom properties', () => {
-    const scss = `
-      :root {
-        --primary-color: #1976d2;
-        --spacing: 16px;
-      }
-      .component {
-        color: var(--primary-color);
-        padding: var(--spacing);
-      }
-    `;
-    
-    const analysis = {
-      colors: [
-        { value: '#1976d2', suggestedName: '$color-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', {});
-    
-    // CSS custom property declarations should be replaced (they're like SCSS variables)
-    // But var() references should be preserved
-    expect(result.content).toContain('var(--primary-color)');
-    expect(result.content).toContain('var(--spacing)');
-  });
-
-  test('should not replace values in attribute selectors', () => {
-    const scss = `
-      [data-size="16"] {
-        padding: 16px;
-      }
-      [data-color="#1976d2"] {
-        color: #1976d2;
-      }
-    `;
-    
-    const analysis = {
-      colors: [
-        { value: '#1976d2', suggestedName: '$color-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', {});
-    
-    // Should replace in property values (outside attribute selectors)
-    expect(result.content).toContain('padding: $spacing-md');
-    expect(result.content).toContain('color: $color-primary');
-    
-    // Should NOT replace in attribute selector values (safe zone)
-    expect(result.content).toContain('[data-size="16"]');
-    expect(result.content).toContain('[data-color="#1976d2"]');
-  });
-
-  test('should handle transform functions', () => {
-    const scss = `
-      .component {
-        transform: translate(10px, 20px);
-        transform: rotate(45deg);
-        transform: scale(2);
-      }
-    `;
-    
-    const analysis = {
-      colors: [],
-      spacing: [
-        { value: '10px', suggestedName: '$spacing-xs' },
-        { value: '20px', suggestedName: '$spacing-sm' }
-      ],
-      fontSizes: [],
-      fontWeights: [],
-      fontFamilies: [],
-      borderRadius: [],
-      shadows: [],
-      zIndex: [
-        { value: '2', suggestedName: '$z-index-2' }
-      ],
-      sizing: [],
-      lineHeight: [],
-      opacity: [],
-      transitions: []
-    };
-    
-    const result = refactorFile(scss, analysis, '/libs/styles/_variables.scss', '/app/test.scss', {});
-    
-    // Transform function arguments should be protected (safe zone)
-    const content = result.content;
-    expect(content).toContain('translate(10px, 20px)');
-    expect(content).toContain('scale(2)');
-    expect(content).toContain('rotate(45deg)');
-  });
-
-  test('should handle keyframe percentages', () => {
-    const scss = `
-      @keyframes fade {
-        0% { opacity: 0; }
-        50% { opacity: 0.5; }
-        100% { opacity: 1; }
-      }
-    `;
-    
-    const analysis = {
-      colors: [],
-      spacing: [],
-      fontSizes: [],
-      fontWeights: [],
-      fontFamilies: [],
-      borderRadius: [],
-      shadows: [],
-      zIndex: [],
-      sizing: [],
-      lineHeight: [],
-      opacity: [
-        { value: '0', suggestedName: '$opacity-transparent' },
-        { value: '0.5', suggestedName: '$opacity-half' },
-        { value: '1', suggestedName: '$opacity-full' }
-      ],
-      transitions: []
-    };
-    
-    const result = refactorFile(scss, analysis, '/libs/styles/_variables.scss', '/app/test.scss', {});
-    
-    // Keyframe selectors (0%, 50%, 100%) should not be replaced
-    expect(result.content).toContain('0%');
-    expect(result.content).toContain('50%');
-    expect(result.content).toContain('100%');
-    
-    // But opacity values should be replaced
-    expect(result.content).toContain('opacity: $opacity-transparent');
-    expect(result.content).toContain('opacity: $opacity-half');
-    expect(result.content).toContain('opacity: $opacity-full');
-  });
-
-  test('should handle comments containing values', () => {
-    const scss = `
-      /* Primary color is #1976d2 */
-      .component {
-        color: #1976d2; // Use #1976d2 for brand
-        padding: 16px; /* 16px is our standard spacing */
-      }
-    `;
-    
-    const analysis = {
-      colors: [
-        { value: '#1976d2', suggestedName: '$color-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', {});
-    
-    // Should replace in actual property values
-    expect(result.content).toContain('color: $color-primary');
-    expect(result.content).toContain('padding: $spacing-md');
-    
-    // Comments will likely be replaced too (current behavior)
-    // This might be acceptable or we could add comment detection to safe zones
-  });
-});
+const { refactorFile } = require('../src/refactorer');
+
+describe('Refactorer Edge Cases', () => {
+  test('should handle rgba() color functions without partial replacements', () => {
+    const scss = `
+      .component {
+        background: rgba(255, 100, 50, 0.5);
+        color: rgba(100, 100, 100, 1);
+      }
+    `;
+
+    const analysis = {
+      colors: [{ value: 'rgba(255, 100, 50, 0.5)', suggestedName: '$color-primary-light' }],
+      spacing: [{ value: '100px', suggestedName: '$spacing-xxl' }],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [{ value: '0.5', suggestedName: '$opacity-half' }],
+      transitions: [],
+    };
+
+    const result = refactorFile(
+      scss,
+      analysis,
+      '/libs/styles/_variables.scss',
+      '/app/test.scss',
+      {}
+    );
+
+    // Should replace complete rgba function
+    expect(result.content).toContain('background: $color-primary-light');
+
+    // Should NOT do partial replacements inside rgba()
+    expect(result.content).toContain('rgba(100, 100, 100, 1)'); // Not rgba($spacing-xxl, $spacing-xxl, $spacing-xxl, 1)
+    expect(result.content).not.toContain('rgba($spacing-xxl');
+    expect(result.content).not.toContain('rgba(255, $spacing-xxl');
+  });
+
+  test('should handle calc() expressions without partial replacements', () => {
+    const scss = `
+      .component {
+        width: calc(100% - 16px);
+        height: calc(50vh + 8px);
+        margin: calc(16px / 2);
+      }
+    `;
+
+    const analysis = {
+      colors: [],
+      spacing: [
+        { value: '16px', suggestedName: '$spacing-md' },
+        { value: '8px', suggestedName: '$spacing-sm' },
+      ],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: [],
+    };
+
+    const result = refactorFile(
+      scss,
+      analysis,
+      '/libs/styles/_variables.scss',
+      '/app/test.scss',
+      {}
+    );
+
+    // calc() values should be protected from replacement (safe zone)
+    const content = result.content;
+
+    // Values inside calc() should NOT be replaced
+    expect(content).toContain('calc(100% - 16px)');
+    expect(content).toContain('calc(50vh + 8px)');
+    expect(content).toContain('calc(16px / 2)');
+  });
+
+  test('should handle negative values correctly', () => {
+    const scss = `
+      .component {
+        margin: -16px;
+        top: -8px;
+        z-index: -1;
+      }
+    `;
+
+    const analysis = {
+      colors: [],
+      spacing: [
+        { value: '16px', suggestedName: '$spacing-md' },
+        { value: '8px', suggestedName: '$spacing-sm' },
+      ],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [{ value: '1', suggestedName: '$z-index-1' }],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: [],
+    };
+
+    const result = refactorFile(
+      scss,
+      analysis,
+      '/libs/styles/_variables.scss',
+      '/app/test.scss',
+      {}
+    );
+
+    // Negative values should be protected (safe zone) to prevent -$variable syntax
+    expect(result.content).toContain('margin: -16px');
+    expect(result.content).toContain('top: -8px');
+    expect(result.content).toContain('z-index: -1');
+  });
+
+  test('should handle multiple values in shorthand properties', () => {
+    const scss = `
+      .component {
+        margin: 16px 8px;
+        padding: 16px 8px 16px 8px;
+        border-radius: 4px 2px;
+      }
+    `;
+
+    const analysis = {
+      colors: [],
+      spacing: [
+        { value: '16px', suggestedName: '$spacing-md' },
+        { value: '8px', suggestedName: '$spacing-sm' },
+      ],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [
+        { value: '4px', suggestedName: '$border-radius-sm' },
+        { value: '2px', suggestedName: '$border-radius-xs' },
+      ],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: [],
+    };
+
+    const result = refactorFile(
+      scss,
+      analysis,
+      '/libs/styles/_variables.scss',
+      '/app/test.scss',
+      {}
+    );
+
+    // Should replace individual values in shorthand
+    expect(result.content).toContain('$spacing-md');
+    expect(result.content).toContain('$spacing-sm');
+    expect(result.content).toContain('$border-radius-sm');
+    expect(result.content).toContain('$border-radius-xs');
+  });
+
+  test('should not replace values in CSS custom properties', () => {
+    const scss = `
+      :root {
+        --primary-color: #1976d2;
+        --spacing: 16px;
+      }
+      .component {
+        color: var(--primary-color);
+        padding: var(--spacing);
+      }
+    `;
+
+    const analysis = {
+      colors: [{ value: '#1976d2', suggestedName: '$color-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',
+      {}
+    );
+
+    // CSS custom property declarations should be replaced (they're like SCSS variables)
+    // But var() references should be preserved
+    expect(result.content).toContain('var(--primary-color)');
+    expect(result.content).toContain('var(--spacing)');
+  });
+
+  test('should not replace values in attribute selectors', () => {
+    const scss = `
+      [data-size="16"] {
+        padding: 16px;
+      }
+      [data-color="#1976d2"] {
+        color: #1976d2;
+      }
+    `;
+
+    const analysis = {
+      colors: [{ value: '#1976d2', suggestedName: '$color-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',
+      {}
+    );
+
+    // Should replace in property values (outside attribute selectors)
+    expect(result.content).toContain('padding: $spacing-md');
+    expect(result.content).toContain('color: $color-primary');
+
+    // Should NOT replace in attribute selector values (safe zone)
+    expect(result.content).toContain('[data-size="16"]');
+    expect(result.content).toContain('[data-color="#1976d2"]');
+  });
+
+  test('should handle transform functions', () => {
+    const scss = `
+      .component {
+        transform: translate(10px, 20px);
+        transform: rotate(45deg);
+        transform: scale(2);
+      }
+    `;
+
+    const analysis = {
+      colors: [],
+      spacing: [
+        { value: '10px', suggestedName: '$spacing-xs' },
+        { value: '20px', suggestedName: '$spacing-sm' },
+      ],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [{ value: '2', suggestedName: '$z-index-2' }],
+      sizing: [],
+      lineHeight: [],
+      opacity: [],
+      transitions: [],
+    };
+
+    const result = refactorFile(
+      scss,
+      analysis,
+      '/libs/styles/_variables.scss',
+      '/app/test.scss',
+      {}
+    );
+
+    // Transform function arguments should be protected (safe zone)
+    const content = result.content;
+    expect(content).toContain('translate(10px, 20px)');
+    expect(content).toContain('scale(2)');
+    expect(content).toContain('rotate(45deg)');
+  });
+
+  test('should handle keyframe percentages', () => {
+    const scss = `
+      @keyframes fade {
+        0% { opacity: 0; }
+        50% { opacity: 0.5; }
+        100% { opacity: 1; }
+      }
+    `;
+
+    const analysis = {
+      colors: [],
+      spacing: [],
+      fontSizes: [],
+      fontWeights: [],
+      fontFamilies: [],
+      borderRadius: [],
+      shadows: [],
+      zIndex: [],
+      sizing: [],
+      lineHeight: [],
+      opacity: [
+        { value: '0', suggestedName: '$opacity-transparent' },
+        { value: '0.5', suggestedName: '$opacity-half' },
+        { value: '1', suggestedName: '$opacity-full' },
+      ],
+      transitions: [],
+    };
+
+    const result = refactorFile(
+      scss,
+      analysis,
+      '/libs/styles/_variables.scss',
+      '/app/test.scss',
+      {}
+    );
+
+    // Keyframe selectors (0%, 50%, 100%) should not be replaced
+    expect(result.content).toContain('0%');
+    expect(result.content).toContain('50%');
+    expect(result.content).toContain('100%');
+
+    // But opacity values should be replaced
+    expect(result.content).toContain('opacity: $opacity-transparent');
+    expect(result.content).toContain('opacity: $opacity-half');
+    expect(result.content).toContain('opacity: $opacity-full');
+  });
+
+  test('should handle comments containing values', () => {
+    const scss = `
+      /* Primary color is #1976d2 */
+      .component {
+        color: #1976d2; // Use #1976d2 for brand
+        padding: 16px; /* 16px is our standard spacing */
+      }
+    `;
+
+    const analysis = {
+      colors: [{ value: '#1976d2', suggestedName: '$color-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',
+      {}
+    );
+
+    // Should replace in actual property values
+    expect(result.content).toContain('color: $color-primary');
+    expect(result.content).toContain('padding: $spacing-md');
+
+    // Comments will likely be replaced too (current behavior)
+    // This might be acceptable or we could add comment detection to safe zones
+  });
+});