eslint-plugin-vanilla-extract/src/css-rules/shared-utils/__tests__/recipe-property-processor.test.ts

import tsParser from '@typescript-eslint/parser';
import { run } from 'eslint-vitest-rule-tester';
import alphabeticalOrderRule from '../../alphabetical-order/rule-definition.js';

run({
  name: 'vanilla-extract/recipe-property-processor-tests',
  rule: alphabeticalOrderRule,
  languageOptions: {
    parser: tsParser,
    parserOptions: {
      ecmaVersion: 2022,
      sourceType: 'module',
    },
  },
  valid: [
    // Test for recipe with spread element (should trigger the early return)
    `
      import { recipe } from '@vanilla-extract/recipes';
      import { style } from '@vanilla-extract/css';
      
      const baseStyle = style({ backgroundColor: 'blue', color: 'white' });
      
      const myRecipe = recipe({
        base: baseStyle,
        ...{ someSpreadProperty: true },
        variants: {
          size: {
            small: style({ fontSize: '1.2rem', padding: '4rem' }),
            large: style({ fontSize: '1.8rem', padding: '12rem' })
          }
        }
      });
    `,

    // Test for recipe with computed property (non-Identifier key)
    `
      import { recipe } from '@vanilla-extract/recipes';
      import { style } from '@vanilla-extract/css';
      
      const propName = 'dynamicProp';
      const baseStyle = style({ backgroundColor: 'blue', color: 'white' });
      
      const myRecipe = recipe({
        base: baseStyle,
        [propName]: style({ fontSize: '1.4rem' }),
        variants: {
          size: {
            small: style({ fontSize: '1.2rem', padding: '4rem' }),
            large: style({ fontSize: '1.8rem', padding: '12rem' })
          }
        }
      });
    `,

    // Test for recipe with non-object values (should skip processing)
    `
      import { recipe } from '@vanilla-extract/recipes';
      import { style } from '@vanilla-extract/css';
      
      const baseStyle = style({ backgroundColor: 'blue', color: 'white' });
      
      const myRecipe = recipe({
        base: baseStyle,
        nonObjectProp: 'string value',
        numericProp: 42,
        booleanProp: true,
        nullProp: null,
        variants: {
          size: {
            small: style({ fontSize: '1.2rem', padding: '4rem' }),
            large: style({ fontSize: '1.8rem', padding: '12rem' })
          }
        }
      });
    `,
  ],
  invalid: [
    // Basic recipe with incorrect ordering in style calls
    {
      code: `
        import { recipe } from '@vanilla-extract/recipes';
        import { style } from '@vanilla-extract/css';
        
        const baseStyle = style({ color: 'blue', backgroundColor: 'white' });
        
        const myRecipe = recipe({
          base: baseStyle,
          variants: {
            size: {
              small: style({ padding: '4rem', fontSize: '1.2rem' }),
              large: style({ padding: '12rem', fontSize: '1.8rem' })
            }
          }
        });
      `,
      errors: [
        { messageId: 'alphabeticalOrder' },
        { messageId: 'alphabeticalOrder' },
        { messageId: 'alphabeticalOrder' },
      ],
      output: `
        import { recipe } from '@vanilla-extract/recipes';
        import { style } from '@vanilla-extract/css';
        
        const baseStyle = style({ backgroundColor: 'white', color: 'blue' });
        
        const myRecipe = recipe({
          base: baseStyle,
          variants: {
            size: {
              small: style({ fontSize: '1.2rem', padding: '4rem' }),
              large: style({ fontSize: '1.8rem', padding: '12rem' })
            }
          }
        });
      `,
    },
  ],
});