From b411d04c8cd6b32e42f73695c23253bcab7d4429 Mon Sep 17 00:00:00 2001
From: Luke Warlow <luke@warlow.dev>
Date: Thu, 2 Nov 2023 19:28:50 +0000
Subject: [PATCH] Add `forced-colors` variant (#11694)

* Add forced-colors variant

Also add a contrast-custom variant to match custom contrast preferences

* use `toMatchSnapshot` instead of `toMatchFormattedCss`

More info: https://github.com/tailwindlabs/tailwindcss/pull/12170

* remove `contrast-custom` variant

* move `forcedColorsVariants` next to `prefersContrastVariants`

* update changelog

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
---
 CHANGELOG.md                                          |  1 +
 src/corePlugins.js                                    |  4 ++++
 src/lib/setupContextUtils.js                          |  1 +
 .../__snapshots__/forcedColorsVariants.test.js.snap   | 11 +++++++++++
 tests/plugins/variants/forcedColorsVariants.test.js   |  3 +++
 5 files changed, 20 insertions(+)
 create mode 100644 tests/plugins/variants/__snapshots__/forcedColorsVariants.test.js.snap
 create mode 100644 tests/plugins/variants/forcedColorsVariants.test.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d3fb4e5fa4e1..465c062dc8ba 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add utilities for CSS subgrid ([#12298](https://github.com/tailwindlabs/tailwindcss/pull/12298))
 - Add spacing scale to `min-w-*`, `min-h-*`, and `max-w-*` utilities ([#12300](https://github.com/tailwindlabs/tailwindcss/pull/12300))
 - Add `forced-color-adjust` utilities ([#11931](https://github.com/tailwindlabs/tailwindcss/pull/11931))
+- Add `forced-colors` variant ([#11694](https://github.com/tailwindlabs/tailwindcss/pull/11694))
 - [Oxide] New Rust template parsing engine ([#10252](https://github.com/tailwindlabs/tailwindcss/pull/10252))
 - [Oxide] Support `@import "tailwindcss"` using top-level `index.css` file ([#11205](https://github.com/tailwindlabs/tailwindcss/pull/11205), ([#11260](https://github.com/tailwindlabs/tailwindcss/pull/11260)))
 - [Oxide] Use `lightningcss` for nesting and vendor prefixes in PostCSS plugin ([#10399](https://github.com/tailwindlabs/tailwindcss/pull/10399))
diff --git a/src/corePlugins.js b/src/corePlugins.js
index ae313dc2b775..6da082425fb8 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -460,6 +460,10 @@ export let variantPlugins = {
     addVariant('contrast-more', '@media (prefers-contrast: more)')
     addVariant('contrast-less', '@media (prefers-contrast: less)')
   },
+
+  forcedColorsVariants: ({ addVariant }) => {
+    addVariant('forced-colors', '@media (forced-colors: active)')
+  },
 }
 
 let cssTransformValue = [
diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
index 65d40a9cbf7f..050e3cfe49f0 100644
--- a/src/lib/setupContextUtils.js
+++ b/src/lib/setupContextUtils.js
@@ -757,6 +757,7 @@ function resolvePlugins(context, root) {
     variantPlugins['directionVariants'],
     variantPlugins['reducedMotionVariants'],
     variantPlugins['prefersContrastVariants'],
+    variantPlugins['forcedColorsVariants'],
     variantPlugins['darkVariants'],
     variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
diff --git a/tests/plugins/variants/__snapshots__/forcedColorsVariants.test.js.snap b/tests/plugins/variants/__snapshots__/forcedColorsVariants.test.js.snap
new file mode 100644
index 000000000000..21e2dbb68333
--- /dev/null
+++ b/tests/plugins/variants/__snapshots__/forcedColorsVariants.test.js.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should test the 'forcedColorsVariants' plugin 1`] = `
+"
+@media (forced-colors: active) {
+  .forced-colors\\:flex {
+    display: flex;
+  }
+}
+"
+`;
diff --git a/tests/plugins/variants/forcedColorsVariants.test.js b/tests/plugins/variants/forcedColorsVariants.test.js
new file mode 100644
index 000000000000..61a1f08cf5b9
--- /dev/null
+++ b/tests/plugins/variants/forcedColorsVariants.test.js
@@ -0,0 +1,3 @@
+import { quickVariantPluginTest } from '../../util/run'
+
+quickVariantPluginTest('forcedColorsVariants').toMatchSnapshot()