Selectors with sprinkles

[craigbilner]

Hi, I may have misunderstood how sprinkles works, but how do I create shorthand properties in sprinkles and then use with selectors? e.g.

{
    selectors: {
        "&:hover": sprinkles({
            bg: "myColor"
        }),
    },
},

[rothsandro]

I don't think that this is possible. The sprinkles function returns one or more class names but the style function does not accept class names as part of a style object.

You could add :hover as a condition to your sprinkles (defineProperties()) and then pass an array to your style function with your sprinkles and custom styles:

const styles = style([
  sprinkles({ bg: { hover: "myColor" }}),
  { /* other styles, selectors, ... */ }
]);

Remember that each property/value/condition combination generates a separate class even if you don't use it anywhere in the application. So depending how often you actually need to change the background color on hover it may be better to not include this in sprinkles but in a regular style() function instead.

[craigbilner]

Thanks @rothsandro, the problem with putting more in sprinkles means you end up with combinatorial explosions which I've stepped back from. In this case I only wanted to get the benefits of shorthand props (as I had in stitches) so have just given them up instead.