Setting precedence of custom utilities

[mirite]

I have a custom utility:

@utility all-unset {
   all: unset;
}

I understandably need to have that utility always end up in the generated CSS before any other utilities. As it stands, it follows the normal rules for placement. For example:

<div class="p-4">
   <button class="all-unset p-4"></button>
</div>

wouldn't apply any padding to the button because the first usage of p-4 occurs before the first usage of all-unset. (Additionally, it seems that custom utilities are always generated after the built-ins, regardless of the source order)

Is there a way when defining an @utility to indicate its precedent? (sort of like how pl-4 will always occur after p-4)

Playground Link

[c-harding]

What exactly should the utility do? Which styles do you want to overwrite: inherited styles or user-styles?

[mirite]

In the case of this utility, it's to overwrite the inherited global styles

[c-harding]

To ignore inherited styles, you’ll want initial rather than unset. But in any case, you’ll need to choose a layer.

[wongjn]

You could consider putting the rule's declaration in @layer components:

@utility all-unset {
  @layer components {
    all: unset;
  }
}