Support for configuring variant priorities in recipes

[oil-oil]

Description

Support for configuring variant priorities in recipes.

Problem Statement/Justification

When I write such a variant in a recipe:

variants: {
    size: {
      xs: { px: '8px', py: '4px', fontSize: '0.55rem', borderRadius: '8px' },
      sm: { px: '10px', py: '6px', fontSize: '0.7rem', borderRadius: '10px' },
      md: { px: '12px', py: '8px', fontSize: '0.85rem', borderRadius: '12px' },
      lg: { px: '14px', py: '10px', fontSize: '1rem', borderRadius: '14px' },
      xl: { px: '16px', py: '12px', fontSize: '1.15rem', borderRadius: '16px' },
    },
    shape: {
      circle: { borderRadius: '25px' },
      square: { borderRadius: '0' },
    },

I've found that the order of the key of the passed-in object parameters affects the style:

<button className={button({ size: 'lg', shape: 'square' })}>
        Button
      </button>
      <button className={button({ shape: 'square', size: 'lg' })}>
        Button
      </button>

Since I'm using the borderRadius property in both variants, it's possible that due to the different order of the keys, the later key overwrites the earlier one. But usually, there is no concept of order for the keys of an object, they should all belong to the hierarchy, because the order of the keys is difficult to control after the object has been used with an expander, or if the properties of that variant are passed in by props.

https://play.panda-css.com/lS-v1Y47O5

Proposed Solution or API

Adjusts the priority of variants to be determined by the order in which they are defined in the recipe, with later-defined variants overriding a style in a first-defined variant if it already exists.

For example, the shape variant I'm defining here should override one of the borderRaius already defined in the size variant:

variants: {
    size: {
      xs: { px: '8px', py: '4px', fontSize: '0.55rem', borderRadius: '8px' },
      sm: { px: '10px', py: '6px', fontSize: '0.7rem', borderRadius: '10px' },
      md: { px: '12px', py: '8px', fontSize: '0.85rem', borderRadius: '12px' },
      lg: { px: '14px', py: '10px', fontSize: '1rem', borderRadius: '14px' },
      xl: { px: '16px', py: '12px', fontSize: '1.15rem', borderRadius: '16px' },
    },
    shape: {
      circle: { borderRadius: '25px' },
      square: { borderRadius: '0' },
    },

Alternatives

Currently I can override the presence of size and shape in a component with compound variants:

 {
      size: "xs",
      shape: "square",
      css: { borderRadius: "0" },
    },
 {
      size: "sm",
      shape: "square",
      css: { borderRadius: "0" },
    },
//...

But each of my sizes is the same style when shape is square, it would be a pain to declare them all manually, is it possible to implement a mechanism similar to wildcard character:

 {
      size: "*",
      shape: "square",
      css: { borderRadius: "0" },
    },
//...

If the * symbol is used it represents a match for all sizes.

Additional Information

No response