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

[segunadebayo]

@theMasix, I recommend leveraging cascade layers instead of relying on the order of the generated css.

I'm not sure how you designed the gap polyfill, but here's an example of how I might implement this:

export default defineConfig({
  utilities: {
    extend: {
      gap: {
        transform(value) {
          return {
            '@layer polyfill': {
              '& > * + *': { marginTop: value },
            },
          }
        },
      },
    },
  },
})

Naturally, Panda will register this in the utilities.polyfill layer, which has less precedence over the utilities layer.

With that, system props will always override the polyfills. This is just a rough guess, but I'm sure you get the gist.