How to use pseudo elements in sprinkles

[0916dhkim]

Is there a way to style pseudo elements with sprinkles?

I'd like to do something like this:

<input
  type="range"
  className={sprinkles(
    "::-webkit-slider-thumb": {
      background: {
        lightMode: "black",
        darkMode: "black",
      },
    },
  )}
/>

[askoufis]

Something like this should work:

const webkitSliderThumbProperties = defineProperties({
  conditions: { light: {}, dark: {} },
  defaultCondition: "light",
  properties: {
    // Call this whatever you want
    webkitSliderThumbBackground: {
      black: {
        selectors: {
          ["&::-webkit-slider-thumb"]: {
            background: "black",
          },
        },
      },
      // Add more variants here
    },
  },
});

It would be a bit verbose if you wants lots of colours, but you could easily create a function that takes all your vars and creates all the variants for you.