Allow users to customize default variant placement

[adamwathan]

This PR makes it possible for users to customize where the default (unaltered) variant for a utility is placed in the final CSS relative to other variants generated for that utility.

This is done by explicitly specifying default in the variant list if you want the default variant to be placed anywhere other than first in the list.

For example, this CSS:

@variants focus, default, hover {
  .order-2 {
    order: 2
  }
}

...will generate this output:

.focus\:order-2:focus {
  order: 2
}

.order-2 {
  order: 2
}

.hover\:order-2:hover {
  order: 2
}

If the default variant is not specified in the list, the default variant will be invisibly prepended to the variants list, ensuring that the default variant is always rendered first.

This feature is useful in situations where you want to create a custom variant that should still be overridable by a default variant when necessary, like outlined by @benface here:

#496 (comment)

[codytooker]

@xpromx

Or even

function ensureIncludesDefault(variants) {
  return [...new Set(['default', ...variants].reverse())].reverse()
}