Sprinkles and Pseudo Classes

[Filippinifra]

I honestly like sprinkles and we are using it in our company but there is a problem I'm facing up:
how can I use the possible values defined in sprinkles under a pseudo class?
for example:

I defined in my sprinkle file

const colorProperties = defineProperties({
  properties: {
    backgroundColor: colors,
  },
});

when I use it in sprinkle it is correctly working like that

export const wrapperClass = sprinkles({
    backgroundColor: "base-200",
  })

but if I try to use it under a disabled pseudo class it throw me an error:

export const wrapperClass = sprinkles({
    backgroundColor: "base-200",

    ":disabled":{
       backgroundColor: "disabled-100",
    }
  })

I have the same problem for "selectors" object.
Thank you

[askoufis]

You can use selectors with sprinkles by defining a condition with a selector property:

// sprinkles.css.ts
const colors = ["base-200", "disabled-200"];

const colorProperties = defineProperties({
  conditions: {
    default: {},
    disabled: { selector: "&:disabled" },
  },
  defaultCondition: "default",
  properties: {
    backgroundColor: colors,
  },
});

// App.tsx
<div className={sprinkles({ backgroundColor: { default: "base-200", disabled: "disabled-100" } )} />

[Filippinifra]

I try the same with an array of values, like this

// sprinkles.css.ts
const cursorValues = ["pointer", "not-allowed"];

const cursorProperties = defineProperties({
  conditions: {
    default: {},
    disabled: { selector: "&:disabled" },
  },
  defaultCondition: "default",
  properties: {
    cursor: cursorValues,
  },
});

// App.tsx
<div className={sprinkles({ cursor: { default: "pointer", disabled: "not-allowed" } )} />

and it is working... but still remain that I need an object instead of an array to define my colors

[askoufis]

Oh my bad. You can use an array if the values are real CSS values. OR you can use an object to map your custom names to CSS values. So cursor works, because pointer and not-allowed are valid values for that property.

So for color, if you want custom color names then you need an object:

// sprinkles.css.ts
const colors = {
  "base-200": "rgb(228, 228, 231)",
  "disabled-200": "rgb(161, 161, 170)",
  green: "#90EE90",
  redLight: "#f9aeae",
  red: "red",
};

const colorProperties = defineProperties({
  conditions: {
    default: {},
    disabled: { selector: "&:disabled" },
  },
  defaultCondition: "default",
  properties: {
    backgroundColor: colors,
  },
});

// App.tsx
<div className={sprinkles({ backgroundColor: { default: "base-200", disabled: "disabled-100" } )} />

[Filippinifra]

thank you that's great! I'm solving all my problems, I have a last one:

is there a way to define this use case in sprinkles?

const wrapperClass = style({
   selectors: {
      [`${buttonClass()}:enabled:active &`]: {
           fill: colors["text-text-primary"],
           stroke: colors["text-text-primary"],
       },
       [`${buttonClass()}:focus-visible &`]: {
           fill: colors["text-text-inverse"],
           stroke: colors["text-text-inverse"],
        },
    }
})

because the problem is that buttonClass is a "recipe" class

[askoufis]

If you're just trying to target your button you can just have a dummy class (just an empty style() call) on the button, instead of your button recipe, and then replace buttonClass() with that. Though at that point you're better off putting these selectors in that class:

const buttonClass = style({
   selectors: {
      ['&:enabled:active']: {
           fill: colors["text-text-primary"],
           stroke: colors["text-text-primary"],
       },
       ['&:focus-visible']: {
           fill: colors["text-text-inverse"],
           stroke: colors["text-text-inverse"],
        },
    }
})

But I might be misunderstanding your problem.

[Filippinifra]

you are right, thank you!