Handle variants on complex selectors

[thecrypticace]

For a utility .foo.bar we would replace the candidate class in-place. This resulted in a problem where we'd produce something like the following for peer-checked:bar:

.foo.peer:checked ~ .peer-checked\:bar {
    /* ... */
}

This is obviously a mistake as it completely mangles the original meaning of the selector. This PR fixes this.

Fixes #9056

---

This, however, opens an interesting question:

When given a utility like .foo .bar the replacement is fairly simple for either hover:foo or hover:bar. But what about group-hover:foo, peer-checked:foo, group-hover:bar, and peer-checked:bar?

With this there are obvious interpretations for foo but not necessarily so for bar:

/* Given the utility */
.foo .bar { color: red; }

/* obvious interpretations for `foo` */
.group:hover .group-hover\:foo .bar { color: green; }
.peer:checked ~ .peer-checked\:foo .bar { color: green; }

/* ambiguous interpretations for `bar` */
.group:hover .foo .group-hover\:bar { color: green; }
.foo .group:hover .group-hover\:bar { color: green; }

.peer:checked ~ .foo .peer-checked\:bar { color: green; }
.foo .peer:checked ~ .peer-checked\:bar { color: green; }

We've decided that, while it may not suit all use cases, the best way to approach this is to slot in the entire variant selector in the spot where the class candidate is. As such the variants for foo and bar above will produce the following:

.group:hover .group-hover\:foo .bar { color: green; }
.peer:checked ~ .peer-checked\:foo .bar { color: green; }
.foo .group:hover .group-hover\:bar { color: green; }
.foo .peer:checked ~ .peer-checked\:bar { color: green; }