Error if variants are used in wrong order

Author: adamwathan

src/index.test.css

@@ -119,10 +119,6 @@
   --tw-bg-opacity: 1;
   background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
 }
-.group:hover .group-hover\:dark .apply-dark-group-example-b {
-  --tw-bg-opacity: 1;
-  background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
-}
 @media (min-width: 640px) {
   @media (prefers-reduced-motion: no-preference) {
     .group:active .crazy-example:focus {
@@ -357,7 +353,7 @@ div {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgba(59, 130, 246, var(--tw-ring-opacity));
 }
-.hover\:focus\:font-light:hover:focus {
+.focus\:hover\:font-light:focus:hover {
   font-weight: 300;
 }
 .disabled\:font-bold:disabled {
@@ -512,14 +508,12 @@ div {
     }
   }
   @media (prefers-reduced-motion: no-preference) {
-    .dark .md\:dark\:motion-safe\:foo\:active\:custom-util:active {
+    .foo\:dark .md\:dark\:motion-safe\:active\:custom-util:active {
       background: #abcdef !important;
     }
   }
-}
-@media (min-width: 640px) {
-  @media (min-width: 768px) {
-    .sm\:md\:text-center {
+  @media (min-width: 640px) {
+    .md\:sm\:text-center {
       text-align: center;
     }
   }

src/index.test.html

@@ -22,7 +22,7 @@
     <div class="sm:custom-util"></div>
     <div class="dark:custom-util"></div>
     <div class="motion-safe:custom-util"></div>
-    <div class="md:dark:motion-safe:foo:active:custom-util"></div>
+    <div class="md:foo:dark:motion-safe:active:custom-util"></div>
     <div class="aspect-w-1 aspect-h-2"></div>
     <div class="aspect-w-3 aspect-h-4"></div>
     <div class="filter-none filter-grayscale"></div>
@@ -33,8 +33,7 @@
     <div class="focus:ring-2 focus:ring-blue-500"></div>
     <div class="hover:font-bold"></div>
     <div class="disabled:font-bold"></div>
-    <div class="hover:focus:font-light"></div>
-    <div class="sm:font-normal:bg-black"></div>
+    <div class="focus:hover:font-light"></div>
     <div class="first:pt-0"></div>
     <div class="container"></div>
     <div class="group-hover:opacity-100"></div>
@@ -43,8 +42,8 @@
     <div class="motion-safe:transition"></div>
     <div class="motion-reduce:transition"></div>
     <div class="md:motion-safe:hover:transition"></div>
-    <div class="sm:md:text-center shadow-sm md:shadow-sm"></div>
-    <div class="sm:md:text-center shadow-sm md:shadow-sm"></div>
+    <div class="md:sm:text-center shadow-sm md:shadow-sm"></div>
+    <div class="md:sm:text-center shadow-sm md:shadow-sm"></div>
     <div class="bg-green-500 md:opacity-50 md:hover:opacity-20 sm:tabular-nums"></div>
     <div class="text-center shadow-md hover:shadow-lg transform scale-50 hover:scale-75"></div>
   </body>

src/index.test.js

@@ -139,9 +139,6 @@ test('it works', () => {
   .apply-dark-group-example-a {
     @apply dark:group-hover:bg-green-500;
   }
-  .apply-dark-group-example-b {
-    @apply group-hover:dark:bg-green-500;
-  }
   .crazy-example {
     @apply sm:motion-safe:group-active:focus:opacity-10;
   }

src/lib/generateRules.js

@@ -1,7 +1,7 @@
 const postcss = require('postcss')
 const { default: parseObjectStyles } = require('tailwindcss/lib/util/parseObjectStyles')
 const { transformAllSelectors } = require('../pluginUtils')
-const { toPostCssNode, isPlainObject } = require('./utils')
+const { toPostCssNode, isPlainObject, bigSign } = require('./utils')
 const selectorParser = require('postcss-selector-parser')
 
 let classNameParser = selectorParser((selectors) => {
@@ -131,10 +131,22 @@ function resolveMatchedPlugins(classCandidate, context) {
   return null
 }
 
+function sortAgainst(toSort, against) {
+  return toSort.slice().sort((a, z) => {
+    return bigSign(against.get(a)[0] - against.get(z)[0])
+  })
+}
+
 function resolveMatches(candidate, context) {
   let [classCandidate, ...variants] = candidate.split(':').reverse()
   let matchedPlugins = resolveMatchedPlugins(classCandidate, context)
 
+  let sorted = sortAgainst(variants, context.variantMap)
+  if (sorted.toString() !== variants.toString()) {
+    let corrected = sorted.reverse().concat(classCandidate).join(':')
+    throw new Error(`Class ${candidate} should be written as ${corrected}`)
+  }
+
   if (matchedPlugins === null) {
     return []
   }