Add variant prefix to last class in a selector, not the first

[adamwathan]

Fixes #464.

Prior to this PR, responsive variants naively added the screen prefix right at the beginning of a selector, so:

.group .group-hover\:bg-red { ... }

...would become:

.sm\:group .group-hover\:bg-red { ... }

As pointed out in #464, it's much more intuitive to expect this:

.group .sm\:group-hover\:bg-red { ... }

This PR fixes this issue by always adding prefixes to the last class in a selector. There is a chance that in the future we discover this is not preferable for some variant idea we haven't thought of yet, but right now this feels right and is a simple-ish change.

In the future (once we add the ability to register custom variants through plugins), we intend to defer control of how responsive prefixes are applied to the variant plugin itself, so it's all gonna be fine.

[reinink]

Nicely done. Seems like a real logical way to fix this, at least for now.

[molfar]

I think prefix (responsive or other) should be added to the first selector, not last. As an example, we have simple sidebar, and want to show it in expanded state in large screens.

.sidebar li a span.text { @apply .hidden; }
@responsive {
  .sidebar-expanded li a span.text { @apply .inline; }
}

<div class="sidebar xl:sidebar-expanded">
    <a href="#"><img src="icon.png"> <span class="text">Menu Item Name</span></a>
</div>

Expected output of css is:

.sidebar li a span { display: hidden; }
@media (min-width: 1200px) {
    .xl\:sidebar-expanded li a span.text { display: inline; }
}

But actual output adds responsive prefix to last selector, and makes this rule useless.

.sidebar li a span { display: hidden; }
@media (min-width: 1200px) {
   .sidebar-expanded li a span.xl\:text { display: inline; }
}