Enforce the order of some variants

[RobinMalfait]

The order of variants can be important for certain scenario's.

For example, if you have:

<div class="group-hover:dark:text-center"></div>

This would result in:

.group:hover .dark .group-hover\:dark\:text-center {
  text-align: center;
}

This requires the following DOM structure:

<div class="group">
  <div class="dark">
    <div class="group-hover:dark:text-center"></div>
  </div>
</div>

However, switching the order might be useful.

<div class="dark:group-hover:text-center"></div>

This would result in:

.dark .group:hover .dark\:group-hover\:text-center {
  text-align: center;
}

This requires the following DOM structure:

<div class="dark">
  <div class="group">
    <div class="group-hover:dark:text-center"></div>
  </div>
</div>

This is a contrived example, but there are scenarios (see our Typography plugin) where it does make sense to switch the order sometimes.
However, in some scenario's it doesn't make sense because you would generate invalid css selectors (well.. not invalid, but selectors that won't work).

Such an example is when you have hover:before:text-center vs before:hover:text-center. This would result in:

.hover\:before\:text-center::before:hover { /* This is useless, because you can't hover a ::before element */
  content: var(--tw-content);
  text-align: center;
}

.before\:hover\:text-center:hover::before {
  content: var(--tw-content);
  text-align: center;
}

To fix this, we move all the pseudo elements to the back of the selector, otherwise the selector wouldn't even work. This is implemented on a selector level and not on a variant API level. Which means that this would also work for third party plugins.
With this PR, the examples we used earlier (hover:before:text-center vs before:hover:text-center) would result in:

.hover\:before\:text-center:hover::before { /* This now has :hover::before, even if the class in the HTML is different */
  content: var(--tw-content);
  text-align: center;
}

.before\:hover\:text-center:hover::before {
  content: var(--tw-content);
  text-align: center;
}

The cool part here is that we didn't change the base selector found in the HTML. This is because of the new addVariant API introduced in #5809.
We only append and prepend selector parts to the existing base class (the candidate found in the HTML), instead of re-building the selector from scratch.

This PR does mean that if you used hover:before:text-center in one file, and before:hover:text-center in the other, that there is a bit of duplication going on. Maybe that's fine, maybe in the future we can warn about this to enforce consistency. But at least it will work now instead of introducing a bug.

Fixes: #6016