Property Order Breaks Styling Consistency

[xeramiya]

Description

Even if the order of properties passed to the style utility is the same, the styles reflected may differ.
A previous update (#3279) changed the priority of properties, but this does not appear to be enough on its own.

Link to Reproduction

https://play.panda-css.com/IYEF1PrF_B

Steps to reproduce

1. Prepare two or more HTML elements.
2. Use two shorthand properties that have the same priority and include longhand property to style each component. - Prepare properties that have exactly the same values and properties that do not.

• When adding properties that have exactly the same values to the style utility, make sure they are at the end.

3. The order of styles applied to elements differs from the order in which they are described in the style utility.

↑ In this example, the default color of borderRight is reflected only for the ‘A🐼’ element.

borderColor and borderRight both have the same priority (shorthandsOfLonghands). There is no mistake in this itself, but since both contain border-right-color, the above conflict occurs.

JS Framework

No response

Panda CSS Version

0.54.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

In specifications prior to #3279, borderColor had a higher priority than borderRight, which is why we were able to notice this behaviour.

I'm always saved by cute pandas. Thanks!

[segunadebayo]

This is always a chicken and egg problem which is way I would recommend always using longhand properties to get the best experience. First, borderRightWidth then borderRightColor or even borderColor.

Taming CSS ordering is an impossible task, what’s why we defined a clear order for now.

Thanks for understanding.