Skip to content

Condition order change breaks styles in 0.53.4 #3462

@adbutterfield

Description

@adbutterfield

Description

I actually noticed that v0.53.4 broke some styles for us a few months ago, but had too much other stuff to do to look into it...
Now I want to upgrade to v1.8.0 to try out the MCP, and remembered I'm blocked.

In the diff here: 57343c1
The change in packages/core/src/conditions.ts‎ on line 14 is causing us problems.

I have some style code like this:

_hover
  '& > :where(svg)': {
    color: 'green500',
  },
},

In v0.53.3 we get a style rule like:
.cBeaFD[data-hover]>:where(svg)
However from v0.53.4 we get a style rule like:
.cBeaFD>:where(svg)[data-hover]

The other important part, is that we're using custom conditions. Even if I set the custom condition as same as the default condition, I get the bug, so it's not an issue with my custom conditions.

You can see it working on v0.53.3 here:
https://stackblitz.com/edit/vitejs-vite-iulthdf7?file=panda.config.ts,src%2FApp.tsx&terminal=dev

And not working on v0.53.4 here:
https://stackblitz.com/edit/vitejs-vite-nfpwhetq?file=src%2FApp.tsx,panda.config.ts,package.json&terminal=dev

I verified it's the change on line line 14 by updating that code in v0.53.3 core package installed locally.

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-nfpwhetq?file=src%2FApp.tsx,panda.config.ts,package.json&terminal=dev

Steps to reproduce

Simply compare the two different reproductions.
v0.53.3

v0.53.4

JS Framework

No response

Panda CSS Version

0.53.4

Browser

No response

Operating System

  • macOS
  • Windows
  • Linux

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions