Panda v1.11.0

[anubra266]

What's new in v1.11.0

Added

Multi-block conditions with declarative object syntax

A single condition can now generate multiple independent CSS blocks using a declarative object syntax with @slot markers. This is useful for patterns like hover-on-desktop + active-on-touch, 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.

---

Fixed

• Fix panda codegen crashing with ERR_REQUIRE_ESM on Node 18 and Node 20.0–20.18. Pinned @csstools/postcss-cascade-layers back to 5.0.2 — v6 dropped CJS support and the two releases are functionally equivalent.

• Fix panda crashing with a TypeScript compiler options error when tsconfig.json uses string-form enum values like target: "ESNext". Panda now normalizes compilerOptions via ts.convertCompilerOptionsFromJson before passing them to ts-morph.

• Improve compiled JSX extraction so css props are correctly recognized from framework runtime helper output (React, Preact, Vue, Solid, and Qwik builds).

---

Full changelog: https://github.com/chakra-ui/panda/blob/main/CHANGELOG.md