Feature: Have the ability to change the order of statically-generated styles

[theMasix]

Description

TLDR; we need to change the order of styles of patterns in static generation

Problem Statement/Justification

To support ios < 14, we faced multiple issues where we decided to implement "flexBox gap" with margin. We target child elements and add margin to them. We apply this using our written gapPolyfill pattern.

Also, we have another pattern called systemProps where we generate some mx, my and other atomic styles to be used at runtime.

After fixing multiple issues, we now face a challenge with CSS specificity. Some gapPolyfill styles override the systemProps styles unintentionally.
Since we can not change our selector to manipulate specificity, we need to have control over the order of the static generation of patterns.

We must generate systemProps classes after the gapPolyfill classes.

How could we manipulate the order of statically-generated styles?

Proposed Solution or API

the staticCss in panda config would become an array instead of object.

Alternatives

No response

Additional Information

No response