How to maintain the order of CSS declarations?

[phongphongg]

Is there a way to maintain the order of CSS declarations?

Link: https://play.panda-css.com/GACxJoJjMd

Even though I declared _pressed after _hover, after building, it becomes _pressed before _hover. This causes the style of _pressed to be overridden.

[koba04]

I have the same issue and had to define _pressed inside _hover as well.

css({
  color: {
    _hover: {
      base: 'red'
      _pressed: 'blue'
    },
    _pressed: 'blue'
  }
}

[kysley]

Being able to use condition shortcuts in arbitrary queries would help 👀 &:not(_pressed) as an example