diff --git a/src/css-rules/concentric-order/__tests__/recipe.test.ts b/src/css-rules/concentric-order/__tests__/recipe.test.ts index 0eff340..0704a85 100644 --- a/src/css-rules/concentric-order/__tests__/recipe.test.ts +++ b/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%' + }], + }); + `, + }, ], }); diff --git a/src/css-rules/shared-utils/recipe-property-processor.ts b/src/css-rules/shared-utils/recipe-property-processor.ts index 79ae722..beaa8a3 100644 --- a/src/css-rules/shared-utils/recipe-property-processor.ts +++ b/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 `variants` property, it processes each variant's options individually. + * - For the `base` property, it processes object or array style nodes. + * - 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') { - processProperty(ruleContext, property.value); + if (property.key.name === 'base') { + 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') { - processProperty(ruleContext, optionProperty.value); + if (optionProperty.type === 'Property') { + processStyleNode(ruleContext, optionProperty.value, processProperty); } }); }