Merge 0bd37dd744 into 62b1844b44

src/css-rules/alphabetical-order/__tests__/recipe.test.ts

@@ -36,6 +36,18 @@ run({
         }
       });
     `,
+
+    // Recipe with base as array (ComplexStyleRule)
+    `
+      import { recipe } from '@vanilla-extract/recipes';
+
+      const myRecipe = recipe({
+        base: [{
+          alignItems: 'center',
+          display: 'flex'
+        }],
+      });
+    `,
   ],
   invalid: [
     // Recipe with incorrect ordering
@@ -88,5 +100,28 @@ run({
         });
       `,
     },
+
+    // Recipe with base array in incorrect order
+    {
+      code: `
+        import { recipe } from '@vanilla-extract/recipes';
+        const myRecipe = recipe({
+          base: [{
+            display: 'flex',
+            alignItems: 'center'
+          }],
+        });
+      `,
+      errors: [{ messageId: 'alphabeticalOrder' }],
+      output: `
+        import { recipe } from '@vanilla-extract/recipes';
+        const myRecipe = recipe({
+          base: [{
+            alignItems: 'center',
+            display: 'flex'
+          }],
+        });
+      `,
+    },
   ],
 });

src/css-rules/concentric-order/__tests__/recipe.test.ts

@@ -41,6 +41,20 @@ run({
         }
       });
     `,
+
+    // Recipe with base as array (ComplexStyleRule)
+    `
+      import { recipe } from '@vanilla-extract/recipes';
+
+      const myRecipe = recipe({
+        base: [{
+          position: 'relative',
+          display: 'flex',
+          backgroundColor: 'white',
+          width: '100%'
+        }],
+      });
+    `,
   ],
   invalid: [
     // Recipe with incorrect ordering
@@ -97,5 +111,32 @@ run({
         });
       `,
     },
+
+    // Recipe with base array in incorrect order
+    {
+      code: `
+        import { recipe } from '@vanilla-extract/recipes';
+        const myRecipe = recipe({
+          base: [{
+            backgroundColor: 'white',
+            width: '100%',
+            display: 'flex',
+            position: 'relative'
+          }],
+        });
+      `,
+      errors: [{ messageId: 'incorrectOrder' }],
+      output: `
+        import { recipe } from '@vanilla-extract/recipes';
+        const myRecipe = recipe({
+          base: [{
+            position: 'relative',
+            display: 'flex',
+            backgroundColor: 'white',
+            width: '100%'
+          }],
+        });
+      `,
+    },
   ],
 });

src/css-rules/custom-order/__tests__/recipe.test.ts

@@ -88,6 +88,29 @@ run({
         },
       ],
     },
+
+    // Recipe with base as array (ComplexStyleRule)
+    {
+      code: `
+        import { recipe } from '@vanilla-extract/recipes';
+
+        const myRecipe = recipe({
+          base: [{
+            width: '100%',
+            margin: 0,
+            display: 'flex',
+            alignItems: 'center',
+            backgroundColor: 'white'
+          }],
+        });
+      `,
+      options: [
+        {
+          groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
+          sortRemainingProperties: 'concentric',
+        },
+      ],
+    },
   ],
   invalid: [
     // Recipe with incorrect ordering (concentric for remaining)
@@ -207,5 +230,40 @@ run({
         });
       `,
     },
+
+    // Recipe with base array in incorrect order
+    {
+      code: `
+        import { recipe } from '@vanilla-extract/recipes';
+        const myRecipe = recipe({
+          base: [{
+            backgroundColor: 'white',
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            margin: 0
+          }],
+        });
+      `,
+      options: [
+        {
+          groupOrder: ['dimensions', 'margin', 'font', 'border', 'boxShadow'],
+          sortRemainingProperties: 'concentric',
+        },
+      ],
+      errors: [{ messageId: 'incorrectOrder' }],
+      output: `
+        import { recipe } from '@vanilla-extract/recipes';
+        const myRecipe = recipe({
+          base: [{
+            width: '100%',
+            margin: 0,
+            display: 'flex',
+            alignItems: 'center',
+            backgroundColor: 'white'
+          }],
+        });
+      `,
+    },
   ],
 });

src/css-rules/shared-utils/recipe-property-processor.ts

@@ -1,5 +1,6 @@
 import type { Rule } from 'eslint';
 import { TSESTree } from '@typescript-eslint/utils';
+import { processStyleNode } from './style-node-processor.js';
 
 /**
  * Processes the `base` and `variants` properties of a recipe object.
@@ -8,11 +9,12 @@ import { TSESTree } from '@typescript-eslint/utils';
  * @param processProperty A callback function to process each property object (e.g., for alphabetical or concentric ordering).
  *
  * This function iterates through the properties of the recipe object:
- * - For the `base` property, it directly processes the object.
+ * - For the `base` property, it processes object or array style nodes.
- * - For the `variants` property, it processes each variant's options individually.
+ * - For the `variants` property, it processes each variant option as object or array style nodes.
  *
  * The function skips any non-Property nodes or nodes without an Identifier key.
- * It only processes ObjectExpression values to ensure type safety.
+ * It delegates node handling to `processStyleNode`, which safely supports
+ * ObjectExpression and ArrayExpression values.
  */
 export const processRecipeProperties = (
   ruleContext: Rule.RuleContext,
@@ -25,8 +27,8 @@ export const processRecipeProperties = (
     }
 
     // Process the `base` property
-    if (property.key.name === 'base' && property.value.type === 'ObjectExpression') {
+    if (property.key.name === 'base') {
-      processProperty(ruleContext, property.value);
+      processStyleNode(ruleContext, property.value, processProperty);
     }
 
     // Process the `variants` property
@@ -34,8 +36,8 @@ export const processRecipeProperties = (
       property.value.properties.forEach((variantProperty) => {
         if (variantProperty.type === 'Property' && variantProperty.value.type === 'ObjectExpression') {
           variantProperty.value.properties.forEach((optionProperty) => {
-            if (optionProperty.type === 'Property' && optionProperty.value.type === 'ObjectExpression') {
+            if (optionProperty.type === 'Property') {
-              processProperty(ruleContext, optionProperty.value);
+              processStyleNode(ruleContext, optionProperty.value, processProperty);
             }
           });
         }