Redundant class names added to compound variants

[PeterW570]

In a recipe, if you create some 'empty' variants, so that you can create compoundVariants that apply some styles, your component will get class names for each of these variants even though they don't directly apply any styling so are redundant.

Example:

export const button = recipe({
  variants: {
    variant: { primary: {}, secondary: {} },
    active: { true: {}, false: {} },
    size: {
      small: { padding: 12 },
      medium: { padding: 16 },
      large: { padding: 24 }
    },
  },
  compoundVariants: [
    {
      variants: {
        variant: 'primary',
        active: false,
      },
      style: {
        ...
      },
      variants: {
        variant: 'primary',
        active: true,
      },
      style: {
        ...
      }
    }
  ],
});

If you do:

<button class="${button({ variant: "primary", active: false })}">
    Hello world
</button>

You get:

<button class="button__ehm9ng0 button_button_variant_primary__ehm9ng1 button_button_active_false__ehm9ng4 button_button_compound_0__ehm9ng8">
    Hello world
</button>

Even though the button_button_variant_primary__ehm9ng1 button_button_active_false__ehm9ng4 classes don't actually do anything.

The code in this commit seems to fix it, so that instead you get:

<button class="button__ehm9ng0 button_button_compound_0__ehm9ng4">
    Hello world
</button>

[PeterW570]

I've created a PR #1581 with my change