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]

This is being addressed in #3497 which adds multi-block conditions using a declarative object syntax. Once merged, your dark mode use case would look like:

conditions: {
  extend: {
    dark: {
      '.dark &': '@slot',
      '@media (prefers-color-scheme: dark)': {
        '&:not(.light *)': '@slot',
      },
    },
  },
}

Usage stays the same:

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

Generated CSS:

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

No more duplicating token values across _dark and _osDark.