chakra-ui/panda @pandacss/generator@1.11.0 on GitHub

Minor Changes

78869ae: ### Added: Multi-block conditions with object syntax

Allow a single condition to generate multiple independent CSS blocks using a declarative object syntax with @slot
markers.

This is useful for defining conditions like hover-for-desktop + active-for-touch in one condition, where each block
needs its own at-rule.

Config:

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  conditions: {
    extend: {
      hoverActive: {
        '@media (hover: hover)': {
          '&:is(:hover, [data-hover])': '@slot',
        },
        '@media (hover: none)': {
          '&:is(:active, [data-active])': '@slot',
        },
      },
    },
  },
})

Usage:

css({ _hoverActive: { bg: 'red' } })

Generated CSS:

@media (hover: hover) {
  .hoverActive\:bg_red:is(:hover, [data-hover]) {
    background: red;
  }
}
@media (hover: none) {
  .hoverActive\:bg_red:is(:active, [data-active]) {
    background: red;
  }
}

This is backward compatible — existing string and string[] conditions continue to work as before.

Patch Changes

Updated dependencies [055e69c]
Updated dependencies [78869ae]
- @pandacss/core@1.11.0
- @pandacss/types@1.11.0
- @pandacss/logger@1.11.0
- @pandacss/token-dictionary@1.11.0
- @pandacss/is-valid-prop@1.11.0
- @pandacss/shared@1.11.0