From a685f37bcc0e49652c5ee93794384c6382010e12 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Sat, 6 Apr 2024 23:51:00 +0200
Subject: [PATCH] reverse order of variants

This way variants work similar to how you would write them in CSS
itself.

This also allows us to remove the special "fixup" code that fixes the
position of some variants because they have to be in a specific order
(the end). Since the order wasn't intuitive we had to solve this with a
fixup.

This commit should allow us to remove this entirely, because now it is intuitive.
---
 packages/tailwindcss/src/candidate.ts | 29 +++------------------------
 1 file changed, 3 insertions(+), 26 deletions(-)

diff --git a/packages/tailwindcss/src/candidate.ts b/packages/tailwindcss/src/candidate.ts
index 67fcbdbd2..3c2b09a40 100644
--- a/packages/tailwindcss/src/candidate.ts
+++ b/packages/tailwindcss/src/candidate.ts
@@ -221,34 +221,11 @@ export function parseCandidate(input: string, designSystem: DesignSystem): Candi
 
   let parsedCandidateVariants: Variant[] = []
 
-  for (let variant of rawVariants) {
-    let parsedVariant = designSystem.parseVariant(variant)
+  for (let i = rawVariants.length - 1; i >= 0; --i) {
+    let parsedVariant = designSystem.parseVariant(rawVariants[i])
     if (parsedVariant === null) return null
 
-    // Variants are applied left-to-right meaning that any representing pseudo-
-    // elements must come first. This is because they cannot have anything
-    // after them in a selector. The problem with this is that it's common for
-    // users to write them in the wrong order, for example:
-    //
-    // `dark:before:underline` (wrong)
-    // `before:dark:underline` (right)
-    //
-    // Add pseudo-element variants to the front, making both examples above
-    // function identically which allows users to not care about the order.
-    switch (variant) {
-      case 'after':
-      case 'backdrop':
-      case 'before':
-      case 'first-letter':
-      case 'first-line':
-      case 'marker':
-      case 'placeholder':
-      case 'selection':
-        parsedCandidateVariants.unshift(parsedVariant)
-        break
-      default:
-        parsedCandidateVariants.push(parsedVariant)
-    }
+    parsedCandidateVariants.push(parsedVariant)
   }
 
   let state = {