diff --git a/src/corePlugins.js b/src/corePlugins.js index 683b6ef32526..b77c50c1a15c 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -459,6 +459,11 @@ export let variantPlugins = { prefersContrastVariants: ({ addVariant }) => { addVariant('contrast-more', '@media (prefers-contrast: more)') addVariant('contrast-less', '@media (prefers-contrast: less)') + addVariant('contrast-custom', '@media (prefers-contrast: custom)') + }, + + forcedColorsVariants: ({ addVariant }) => { + addVariant('forced-colors', '@media (forced-colors: active)') }, } diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js index 00b05652af0d..d1bc8a022184 100644 --- a/src/lib/setupContextUtils.js +++ b/src/lib/setupContextUtils.js @@ -759,6 +759,7 @@ function resolvePlugins(context, root) { variantPlugins['printVariant'], variantPlugins['screenVariants'], variantPlugins['orientationVariants'], + variantPlugins['forcedColorsVariants'], ] return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins] diff --git a/tests/plugins/variants/forcedColorsVariants.test.js b/tests/plugins/variants/forcedColorsVariants.test.js new file mode 100644 index 000000000000..bbf6c42ada42 --- /dev/null +++ b/tests/plugins/variants/forcedColorsVariants.test.js @@ -0,0 +1,9 @@ +import { css, quickVariantPluginTest } from '../../util/run' + +quickVariantPluginTest('forcedColorsVariants').toMatchFormattedCss(css` + @media (forced-colors: active) { + .forced-colors\:flex { + display: flex; + } + } +`) diff --git a/tests/plugins/variants/prefersContrastVariants.test.js b/tests/plugins/variants/prefersContrastVariants.test.js index 6df7bfb6cc89..483f91495024 100644 --- a/tests/plugins/variants/prefersContrastVariants.test.js +++ b/tests/plugins/variants/prefersContrastVariants.test.js @@ -11,4 +11,9 @@ quickVariantPluginTest('prefersContrastVariants').toMatchFormattedCss(css` display: flex; } } + @media (prefers-contrast: custom) { + .contrast-custom\:flex { + display: flex; + } + } `)