Feature Request: Generate multiple independent selectors from a single condition (not nested like mixed conditions)

[devunt]

Description

PandaCSS currently supports mixed conditions that create nested selectors, but there's no way to generate multiple independent selectors from a single condition.

Current Behavior - Mixed Conditions

conditions: {
  extend: {
    supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
  }
}

Generates:

@media (hover: hover) and (pointer: fine) {
  &:hover {
    /* styles */
  }
}

Desired Behavior

// Usage
css({
  _dark: {
    backgroundColor: 'gray.950'
  }
})

Should generate:

.dark & {
  background-color: rgb(10, 10, 10);
}

@media (prefers-color-scheme: dark) {
  &:not(.light *) {
    background-color: rgb(10, 10, 10);
  }
}

Use Case

Dark mode that supports both system preferences and manual toggling without duplicating semantic token values:

// Current: must duplicate values
semanticTokens: {
  colors: {
    'bg.primary': {
      value: { 
        base: '{colors.white}',
        _dark: '{colors.gray.950}',      // for .dark class
        _osDark: '{colors.gray.950}'      // for media query - duplicate!
      }
    }
  }
}

Related

• Mixed conditions documentation: https://panda-css.com/docs/customization/conditions#mixed-conditions
• This is different from mixed conditions as it generates independent rules, not nested ones

[segunadebayo]

That's a good point. How do you imagine this could be designed in the panda.config.ts?