Skip to content

feat: support multi-block conditions with declarative object syntax#3497

Open
Copilot wants to merge 5 commits intomainfrom
copilot/support-multi-block-conditions
Open

feat: support multi-block conditions with declarative object syntax#3497
Copilot wants to merge 5 commits intomainfrom
copilot/support-multi-block-conditions

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Mar 18, 2026 •
edited
Loading

  • Add changeset file for the multi-block conditions feature (minor since it's a new feature)
  • Update documentation in website/content/docs/customization/conditions.mdx to document the new object syntax with @slot markers
Original prompt

This section details on the original issue you should resolve

<issue_title>Support multi-block conditions (OR-style conditions with different at-rules)</issue_title>
<issue_description>### Description

Allow a single condition to generate multiple independent CSS blocks, each wrapped in its own at-rule. This would enable defining hover-for-desktop + active-for-touch in one condition.

Problem Statement/Justification

When building responsive interactions, you often want hover feedback on devices with a pointer and active/press feedback on touch devices. This requires two separate @media blocks:

@media (hover: hover) { .el:hover { background: red; } }
@media (hover: none) { .el:active { background: red; } }

Currently, conditions only support [atRule, selector] pairs which nest into a single block. There's no way to define a condition that produces two independent blocks. We're forced to either:

  • Define two separate conditions (_hoverHover + _touchActive) and duplicate styles
  • Create per-property utilities with transform() that hardcode the media queries

Both workarounds scale poorly and lose the ergonomics of the condition system.

Proposed Solution or API

A new array-of-arrays syntax for conditions that generates multiple independent CSS blocks:

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

Usage stays the same:

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

Generated CSS:

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

This is backward compatible — parseCondition already handles nested arrays as type: "mixed". The change would be to detect Array<[atRule, selector]> and emit separate rule blocks instead of nesting them.

Alternatives

  • Per-property custom utilities with transform() — works but requires a separate utility for each CSS property (bg, color, opacity, etc.)
  • Helper function that spreads styles into both conditions — works but TypeScript struggles with complex Panda style types
  • Using a single combined selector &:is(:hover, :active) — loses the media query isolation, causing ghost hover on touch devices

Additional Information

No response</issue_description>

<agent_instructions>I see the point, but I'm not a fan of this. The array-of-arrays pattern feels like an implementation detail leaking into the API surface.

I'd prefer we take this as an opportunity to redesign the conditions API to be more declarative. Something like this:

const config = {
  conditions: {
    extend: {
      anyHover: {
        "@media (hover: hover)": {
          "&:hover": "@slot",
        },
      },
      hoverActive: {
        "@media (hover: hover)": {
          "&:is(:hover, [data-hover])": "@slot",
        },
        "@media (hover: none)": {
          "&:is(:active, [data-active])": "@slot",
        },
      },
    },
  },
}
```</agent_instructions>

## Comments on the Issue (you are @copilot in this section)

<comments>
<comment_new><author>@anubra266</author><body>
I see the point, but I'm not a fan of this. The array-of-arrays pattern feels like an implementation detail leaking into the API surface.

I'd prefer we take this as an opportunity to redesign the conditions API to be more declarative. Something like this:

```tsx
const config = {
  conditions: {
    extend: {
      anyHover: {
        "@media (hover: hover)": {
          "&:hover": "@slot",
        },
      },
      hoverActive: {
        "@media (hover: hover)": {
          "&:is(:hover, [data-hover])": "@slot",
        },
        "@media (hover: none)": {
          "&:is(:active, [data-active])": "@slot",
        },
      },
    },
  },
}
```</body></comment_new>
</comments>

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Mar 18, 2026 •
edited
Loading

🦋 Changeset detected

Latest commit: d076941

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 21 packages
Name Type
@pandacss/types Minor
@pandacss/core Minor
@pandacss/config Minor
@pandacss/generator Minor
@pandacss/dev Minor
@pandacss/logger Minor
@pandacss/mcp Minor
@pandacss/node Minor
@pandacss/parser Minor
@pandacss/preset-atlaskit Minor
@pandacss/preset-base Minor
@pandacss/preset-open-props Minor
@pandacss/preset-panda Minor
@pandacss/reporter Minor
@pandacss/studio Minor
@pandacss/token-dictionary Minor
@pandacss/astro-plugin-studio Minor
@pandacss/postcss Minor
@pandacss/extractor Minor
@pandacss/is-valid-prop Minor
@pandacss/shared Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 18, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
panda-docs Error Error Mar 23, 2026 4:29am
panda-playground Error Error Mar 23, 2026 4:29am
panda-studio Ready Ready Preview Mar 23, 2026 4:29am

Request Review

@anubra266
feat: support multi-block conditions with declarative object syntax u…
f96cd40 
…sing @slot markers

Co-authored-by: anubra266 <30869823+anubra266@users.noreply.github.com>
@anubra266
fix: address code review feedback - remove unnecessary type assertion…
0c2c0ac 
…, improve docs

Co-authored-by: anubra266 <30869823+anubra266@users.noreply.github.com>
Copilot AI changed the title [WIP] Add support for multi-block conditions with at-rules feat: support multi-block conditions with declarative object syntax Mar 18, 2026
Copilot AI requested a review from anubra266 March 18, 2026 19:27
@segunadebayo segunadebayo mentioned this pull request Mar 22, 2026
Open
@anubra266 anubra266 marked this pull request as ready for review March 25, 2026 09:00
astahmer
astahmer approved these changes Mar 25, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@astahmer astahmer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@astahmer astahmer astahmer approved these changes

@anubra266 anubra266 Awaiting requested review from anubra266

@segunadebayo segunadebayo Awaiting requested review from segunadebayo

Assignees

@anubra266 anubra266

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Support multi-block conditions (OR-style conditions with different at-rules)

3 participants

@astahmer @anubra266