Recipe specific conditions

[isBatak]

Description

It would be helpful to support recipe-specific conditions, similar to the global conditions feature, but scoped to individual recipes.

Problem Statement/Justification

When building recipes, it's common to apply one-off selectors like &[data-type="success"]. Currently, these have to be repeated multiple times throughout the recipe, which adds duplication and makes the recipe harder to maintain.

Example:

export const recipe = defineRecipe({
  base: {
    '&[data-type="success"]': { /* styles */ }
  },
  variants: {
    variant: {
      solid: {
        '&[data-type="success"]': { /* styles */ }
      }
    }
  }
})

Proposed Solution or API

Allow recipes to define local conditions that can be reused across the recipe.

export const recipe = defineRecipe({
  conditions: {
    success: '&[data-type="success"]',
  },
  base: {
    _success: { /* styles */ }
  },
  variants: {
    variant: {
      solid: {
        _success: { /* styles */ }
      }
    }
  }
})

Benefits:

• Reduces repetition of complex selectors
• Improves readability and maintainability

Alternatives

No response

Additional Information

[adbutterfield]

The workaround I use for this kind of thing, is to just pull out the styles like this:

const successStyles = css.raw({
  '&[data-type="success"]': {
    // styles
  }
});

And then you can use it like:

export const recipe = defineRecipe({
  base: successStyles,
  variants: {
    variant: {
      solid: successStyles,
    },
  },
});

[isBatak]

Or you can pull out the selector, which is more suitable if you have different styles.

const _success = '&[data-type="success"]';

export const recipe = defineRecipe({
  base: {
   [_success]: { 
     px: '2',
   }
  },
  variants: {
    variant: {
      solid: {
        [_success]: {
          color: 'green.500',
        }
      },
      subtle: {
        [_success]: {
          color: 'green.300',
        }
      }
    }
  }
})

[adbutterfield]

We also do that kind of thing in some places.