Allow the MediaQueries selector to use ComplexStyleRules

[GeeWizWow]

Running into this issue with media queries, but it may also be applicable to other Query types as well.

Currently the below is unsupported, it would be nice if it was. Alternatively if there's a better solution I'm all ears.

const typography = createSprinkles(
    defineProperties({
        properties: {
            level: {
                large: { fontSize: 100 },
                small: { fontSize: 10 },
            },
        },
    })
);

const button = style({
    '@media': {
        'screen and (max-width: 744px)': [ typography({ level: 'small' }) ],
        'screen and (min-width: 744px)': [ typography({ level: 'large' }) ],
    },
});

const label= style({
    '@media': {
        'screen and (max-width: 1920px)': [ typography({ level: 'small' }) ],
        'screen and (min-width: 1920px)': [ typography({ level: 'large' }) ],
    },
});

The solution I'm using in the mean time, but obviously, this introduces duplicate style rules that could otherwise be a common class:

const large =  { fontSize: 100 };
const small =  { fontSize: 10 };

const button = style({
    '@media': {
        'screen and (max-width: 744px)': { ...small },
        'screen and (min-width: 744px)': { ...large },
    },
});

[askoufis]

The result of calling typography(...) is just a string of concatenated classnames, so it makes sense that it wouldn't work being passed to a media query selector.

Sprinkles has conditions API for these kinds of use cases.

[GeeWizWow]

Thanks, that makes sense, appreciate the clarification!

Whilst you're here can I draw your attention to an unrelated PR? #1155
It's in need of a review or bump from a maintainer.