Add support for defining simple custom utilities in CSS via @utility

[thecrypticace]

This PR allows you to add custom utilities to your project via the new @utility rule.

For example, given the following:

@utility text-trim {
  text-box-trim: both;
  text-box-edge: cap alphabetic;
}

A new text-trim utility is available and can be used directly or with variants:

<div class="text-trim">...</div>
<div class="hover:text-trim">...</div>
<div class="lg:dark:text-trim">...</div>

If a utility is defined more than one time the latest definition will be used:

@utility text-trim {
  text-box-trim: both;
  text-box-edge: cap alphabetic;
}

@utility text-trim {
  text-box-trim: both;
  text-box-edge: cap ideographic;
}

Then using text-trim will produce the following CSS:

.text-trim {
  text-box-trim: both;
  text-box-edge: cap ideographic;
}

You may also override specific existing utilities with this — for example to add a text-rendering property to the text-sm utility:

@utility text-sm {
  font-size: var(--font-size-sm, 0.875rem);
  line-height: var(--font-size-sm--line-height, 1.25rem);
  text-rendering: optimizeLegibility;
}

Though it's preferred, should you not need to add properties, to override the theme instead.

Lastly, utilities with special characters do not need to be escaped like you would for a class name in a selector:

@utility push-1/2 {
  right: 50%;
}

We do however explicitly error on certain patterns that we want to reserve for future use, for example push-* and push-[15px].