Feature Request: Responsive Recipe Variants (Conditions)

[tkofh]

Hey Vanilla Extract Team,

I think it would be fantastic if recipe variants could support the same conditions system in sprinkles. Something like this:

import {recipe} from '@vanilla-extract/recipes'

export const stack = recipe({
    base: {
        display: 'flex',
        flexDirection: 'column',
    },

    variants: {
        space: {
            small: { gap: '8px' },
            medium: { gap: '16px' },
            large: { gap: '24px' },
        },
        align: {
            start: { alignItems: 'flex-start' },
            stretch: { alignItems: 'stretch' },
        }
    },
    
    defaultVariants: {
        space: 'small',
        align: 'start',
    },

    conditions: {
        mobile: {},
        tablet: { '@media': 'screen and (min-width: 768px)' },
        desktop: { '@media': 'screen and (min-width: 1024px)' }
    },
    defaultCondition: 'mobile',
    responsiveArray: ['mobile', 'tablet', 'desktop'],
})

const className = stack({
    space: ['small', 'large'],
    align: {
        mobile: 'stretch',
        tablet: 'start'
    }
})

There are two major advantages I see here:

• You get the chance to set some default styles, which you don't with a normal sprinkles function.
• You can make the variant names map to many and different properties than the name of the variant itself. This is sort of like shorthands on steroids

[mattcompiles]

Hey 👋

Something like this would be possible, but we explicitly chose to not include it because it would break being able to compose recipes up with existing classes, including using Sprinkles within your Recipes.

If you wanted to go all in on Recipes and didn't want to allow class composition at all, you could build a different version of the Recipe API, however this isn't something we'd include in the core API as we feel class composition is an important feature to fit in with the other vanilla-extract APIs.

[tkofh]

Makes sense, I figured there was a real reason this wasn't included out of the box.

I guess I'm struggling then to decide whether to use recipes at all, given that I need to use sprinkles to get the responsive props. Should recipes get preference where possible? Or avoided entirely and the API for components should be wrapper functions around sprinkles?

I'm sure the answer is that it depends, just wondering if there's any guidance someone with more experience can share in making that decision.

[mattcompiles]

The answer is definitely that it depends 😅. Our design system doesn't yet use the Recipe API but we utilise Sprinkles heavily. If you need runtime responsive props then you probably want to build something directly on top of Sprinkles, but for more concrete use-cases you could use Recipes.

[tkofh]

Appreciate the guidance 😄 I'll keep an eye on Braid for examples of using recipes, thanks!

[azuline]

it would break being able to compose recipes up with existing classes

can you elaborate a bit on how responsive recipe application would break class composition? i don't think i understand the problem.

[osdiab]

Hi, I ran into this issue and was wondering if there was a better way to have recipes work with conditions than just having to copy paste all the keys as new members for each condition as I did in this file while experimenting with the concept:

https://github.com/osdiab/personal-website/blob/f8216c0bc33613bc150af8729e18dc319af1cbf8/apps/web/src/app/header.css.ts

In this example I make a stackCss recipe that contains a snippet convenient for making stack layouts in CSS, but I want to be able to say "on small screens make it be a vertical stack, on bigger screens make it be a horizontal stack". Right now it seems like maybe my best bet is to not use recipes and instead to just make my own function that outputs a set of styles, but before I abandon the recipes approach would love to know if I'm missing an alternative. Thanks!