Vanilla extract equivalent of stitches responsive variants

[Code-Victor]

I'm coming from stitches CSS-in-JS and I'm looking for a similar API so I can migrate easily. So far, I've found Recipes and Sprinkles which solve all my issues except for the responsive variants. Is there any way to have a similar feature in vanilla extract?
Thank you.

[lloydjatkinson]

Also interested!

[alcaroff]

Did you try to use sprinkles conditions? 👀
In my sprinkles I have:

conditions: {
	base: {}, /* Mobile. */
	desktop: { '@media': breakpoints.desktop },
	tablet: { '@media': breakpoints.tablet },
	hover: { selector: '&:hover' },
	active: { selector: '&:active' },
},

So I can use it like:

sprinkles({
	color: {
		base: 'red',
        	tablet: 'white',
		desktop: 'violet',
	}
})

[lloydjatkinson]

Do you have an example of using that in components?

[6mint]

You can use the sprinkles function in .css.ts as well as in components. So a react example would be:

<div
  className={sprinkles({
    color: {
      base: "red",
      tablet: "white",
      desktop: "violet",
    },
  })}
/>

[6mint]

A corresponding sprinkles definition could look like this:

const colorProperties = defineProperties({
  conditions: {
    base: {} /* Mobile. */,
    tablet: { "@media": "@media (width >= 768px)" },
    desktop: { "@media": "@media (width >= 1024px)" },
  },
  defaultCondition: "base",
  properties: {
    color: {
        red: "#ff0000",
        white: "#ffffff",
        violet: "#571671",
    },
  },
});

export const sprinkles = createSprinkles(
    colorProperties
);