swap the order of pseudo states

The current implementation had a strange side effect, that resulted in
incorrect class definitions. When you are combining the `:hover` and
`:focus` event, then there is no difference between `:hover:focus` and
`:focus:hover`.

However, when you use `:hover::file-selector-button` or `::file-selector-button:hover`,
then there is a big difference. In the first place, you can hover over the full file input
to apply changes to the `File selector button`.
In the second scenario you have to hover over the `File selector button` itself to apply changes.

You can think of it as function calls:
- focus(hover(text-center))

What you would expect is something like this:
`.focus\:hover\:text-center:hover:focus`, where `hover` is on the
inside, and `focus` is on the outside. However in the current
implementation this is implemented as
`.focus\:hover\:text-cener:focus:hover`

Author: RobinMalfait

tests/important-modifier-prefix.test.css

@@ -38,7 +38,7 @@
   }
 }
 @media (min-width: 1280px) {
-  .xl\:focus\:disabled\:\!tw-float-right:focus:disabled {
+  .xl\:focus\:disabled\:\!tw-float-right:disabled:focus {
     float: right !important;
   }
 }

tests/important-modifier.test.css

@@ -38,7 +38,7 @@
   }
 }
 @media (min-width: 1280px) {
-  .xl\:focus\:disabled\:\!float-right:focus:disabled {
+  .xl\:focus\:disabled\:\!float-right:disabled:focus {
     float: right !important;
   }
 }

tests/kitchen-sink.test.css

@@ -23,15 +23,15 @@
 .apply-test:hover {
   font-weight: 700;
 }
-.apply-test:focus:hover {
+.apply-test:hover:focus {
   font-weight: 700;
 }
 @media (min-width: 640px) {
   .apply-test {
     --tw-bg-opacity: 1;
     background-color: rgb(34 197 94 / var(--tw-bg-opacity));
   }
-  .apply-test:focus:nth-child(even) {
+  .apply-test:nth-child(even):focus {
     --tw-bg-opacity: 1;
     background-color: rgb(251 207 232 / var(--tw-bg-opacity));
   }
@@ -352,7 +352,7 @@ div {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
 }
-.focus\:hover\:font-light:focus:hover {
+.focus\:hover\:font-light:hover:focus {
   font-weight: 300;
 }
 .disabled\:font-bold:disabled {

tests/layer-at-rules.test.js

@@ -43,7 +43,7 @@ test('custom user-land utilities', () => {
       .hover\\:align-banana:hover {
         text-align: banana;
       }
-      .focus\\:hover\\:align-chocolate:focus:hover {
+      .focus\\:hover\\:align-chocolate:hover:focus {
         text-align: chocolate;
       }
     `)

tests/match-components.test.js

@@ -79,12 +79,12 @@ it('should be possible to matchComponents', () => {
         color: #f0f;
       }
 
-      .hover\\:card-\\[\\#f0f\\]:hover .hover\\:card-header:hover {
+      .hover\\:card-\\[\\#f0f\\]:hover .card-header {
         border-top-width: 3px;
         border-top-color: #f0f;
       }
 
-      .hover\\:card-\\[\\#f0f\\]:hover .hover\\:card-footer:hover {
+      .hover\\:card-\\[\\#f0f\\]:hover .card-footer {
         border-bottom-width: 3px;
         border-bottom-color: #f0f;
       }

tests/parallel-variants.test.js

@@ -42,7 +42,7 @@ test('basic parallel variants', async () => {
       .test\\:font-medium *::test {
         font-weight: 500;
       }
-      .hover\\:test\\:font-black:hover *::test {
+      .hover\\:test\\:font-black *::test:hover {
         font-weight: 900;
       }
       .test\\:font-bold::test {
@@ -51,7 +51,7 @@ test('basic parallel variants', async () => {
       .test\\:font-medium::test {
         font-weight: 500;
       }
-      .hover\\:test\\:font-black:hover::test {
+      .hover\\:test\\:font-black::test:hover {
         font-weight: 900;
       }
     `)

tests/resolve-defaults-at-rules.test.js

@@ -84,7 +84,7 @@ test('with pseudo-class variants', async () => {
         --tw-rotate: 3deg;
         transform: var(--tw-transform);
       }
-      .hover\\:focus\\:skew-y-6:hover:focus {
+      .hover\\:focus\\:skew-y-6:focus:hover {
         --tw-skew-y: 6deg;
         transform: var(--tw-transform);
       }
@@ -252,12 +252,12 @@ test('with multi-class pseudo-element and pseudo-class variants', async () => {
           scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
       }
       /* --- */
-      .group:hover .group-hover\\:hover\\:before\\:scale-x-110:hover::before {
+      .group:hover .group-hover\\:hover\\:before\\:scale-x-110::before:hover {
         content: '';
         --tw-scale-x: 1.1;
         transform: var(--tw-transform);
       }
-      .peer:focus ~ .peer-focus\\:focus\\:after\\:rotate-3:focus::after {
+      .peer:focus ~ .peer-focus\\:focus\\:after\\:rotate-3::after:focus {
         content: '';
         --tw-rotate: 3deg;
         transform: var(--tw-transform);

tests/variants.test.css

@@ -313,11 +313,11 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.file\:hover\:bg-blue-600::file-selector-button:hover {
+.file\:hover\:bg-blue-600:hover::file-selector-button {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
-.open\:hover\:bg-red-200[open]:hover {
+.open\:hover\:bg-red-200:hover[open] {
   --tw-bg-opacity: 1;
   background-color: rgb(254 202 202 / var(--tw-bg-opacity));
 }
@@ -326,7 +326,7 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.focus\:hover\:shadow-md:focus:hover {
+.focus\:hover\:shadow-md:hover:focus {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);