diff --git a/CHANGELOG.md b/CHANGELOG.md index d3fb4e5fa..465c062dc 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 ae313dc2b..6da082425 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 65d40a9cb..050e3cfe4 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 000000000..21e2dbb68 --- /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 000000000..61a1f08cf --- /dev/null +++ b/tests/plugins/variants/forcedColorsVariants.test.js @@ -0,0 +1,3 @@ +import { quickVariantPluginTest } from '../../util/run' + +quickVariantPluginTest('forcedColorsVariants').toMatchSnapshot()