Add ability to specify variant based on other selector.

[zmitry]

Along with media queries I want to specify custom selectors an being able to apply variant based on that.
Quite similar to what taliwind does. You specify some complex selector and then you can specify your css rule.

group-hover:bg-red

import { createCss } from '@stitches/react';

export const { styled, css, global, keyframes, getCssString, theme } = createCss({
  theme: {
    colors: {
      gray400: 'gainsboro',
      gray500: 'lightgray',
    },
  },
  media: {
    bp1: '(min-width: 480px)',
  },
  selectors: {
   touch: ':hover, :focus-visible, :focus-within'
  },
});
css({
 variants: {
    variant: {
      first: {},
      second: {}
    }
  },
  "@touch": {variant: 'first'},
  "@bp1": {variant: 'second'}
})

[peduarte]

Thanks! Converting this to a discussion.

At this current stage, we're not considering any extra features. But for the sake of transparency, I'm happy to hear people's thoughts about:

• API ideas
• API bloat
• Necessity
• Architecture impacts

[zmitry]

I think this feature won't cause api bloat, you can just add selectors property to theme definition as it's done in vanila extract and it will be kind of the same api behavior as with media.