From fb85c8fd17b39d3b1232bce05fa00785f255a425 Mon Sep 17 00:00:00 2001
From: Luke Warlow <luke@warlow.dev>
Date: Wed, 13 Dec 2023 15:03:14 +0000
Subject: [PATCH] Move forced-colors variant after dark variant (#12582)

Also add test for the order of the forced-colors variant
---
 src/lib/setupContextUtils.js | 2 +-
 tests/variants.test.css      | 5 +++++
 tests/variants.test.html     | 3 +++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
index 10bd0dc9664d..6920eb4dbf78 100644
--- a/src/lib/setupContextUtils.js
+++ b/src/lib/setupContextUtils.js
@@ -758,8 +758,8 @@ function resolvePlugins(context, root) {
     variantPlugins['directionVariants'],
     variantPlugins['reducedMotionVariants'],
     variantPlugins['prefersContrastVariants'],
-    variantPlugins['forcedColorsVariants'],
     variantPlugins['darkVariants'],
+    variantPlugins['forcedColorsVariants'],
     variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
     variantPlugins['orientationVariants'],
diff --git a/tests/variants.test.css b/tests/variants.test.css
index cedb35bb6ead..043ce991ee4a 100644
--- a/tests/variants.test.css
+++ b/tests/variants.test.css
@@ -300,6 +300,11 @@
 :is(.dark .peer:disabled:focus:hover ~ .dark\:peer-disabled\:peer-focus\:peer-hover\:flex) {
   display: flex;
 }
+@media (forced-colors: active) {
+  .forced-colors\:flex {
+    display: flex;
+  }
+}
 @media print {
   .print\:flex {
     display: flex;
diff --git a/tests/variants.test.html b/tests/variants.test.html
index a9b2c2f16a59..8ce2bfa3f21c 100644
--- a/tests/variants.test.html
+++ b/tests/variants.test.html
@@ -121,6 +121,9 @@
 <!-- Dark mode variants -->
 <div class="dark:flex"></div>
 
+<!-- Forced colors variant -->
+<div class="forced-colors:flex"></div>
+
 <!-- Print variant -->
 <div class="print:flex"></div>