cva() responsive variants?

[traviswimer]

Subject

cva() recipes

Description

On the "Recipes" page under Limitations, the docs say this:

Recipes created from cva cannot have responsive or conditional values. Only layer recipes can have responsive or conditional values.

But if you try to use breakpoints in your cva variants, it does seem to output CSS with the correct media queries. For example:

const myRecipe = cva({
  base: {
    width: "100%",
  },
  variants: {
    type: {
      something: {
        md: {
          width: "50%",
        },
      },
      somethingElse: {
        md: {
          width: "75%",
        },
      },
    },
  },
});

Am I misunderstanding what "responsive" means here or is the documentation incorrect?

[segunadebayo]

If you write the responsive styles within the variant, it should work as expected.

What we mean in the docs is if you do:

myRecipe({ type: { md: "something", lg: "somethingElse" } })

This will not work.

[traviswimer]

Thanks! That makes sense.