From e2ef0d7e787008ce731ac61ecb5b8560b9c9dae3 Mon Sep 17 00:00:00 2001 From: Luke Warlow Date: Wed, 26 Jul 2023 15:18:12 +0100 Subject: [PATCH 1/5] Add forced-colors variant Also add a contrast-custom variant to match custom contrast preferences --- src/corePlugins.js | 5 +++++ src/lib/setupContextUtils.js | 1 + .../__snapshots__/prefersContrastVariants.test.js.snap | 6 ++++++ tests/plugins/variants/forcedColorsVariants.test.js | 9 +++++++++ 4 files changed, 21 insertions(+) create mode 100644 tests/plugins/variants/forcedColorsVariants.test.js diff --git a/src/corePlugins.js b/src/corePlugins.js index ae313dc2b775..b11ab6508608 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 65d40a9cbf7f..8be3f8e5d397 100644 --- a/src/lib/setupContextUtils.js +++ b/src/lib/setupContextUtils.js @@ -761,6 +761,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/__snapshots__/prefersContrastVariants.test.js.snap b/tests/plugins/variants/__snapshots__/prefersContrastVariants.test.js.snap index 8d5d2ea1c7d0..c13bc3311bb0 100644 --- a/tests/plugins/variants/__snapshots__/prefersContrastVariants.test.js.snap +++ b/tests/plugins/variants/__snapshots__/prefersContrastVariants.test.js.snap @@ -13,5 +13,11 @@ exports[`should test the 'prefersContrastVariants' plugin 1`] = ` display: flex; } } + +@media (prefers-contrast: custom) { + .contrast-custom\\: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..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; + } + } +`) From 8f55b9a2c2759829e327c08fe77861625022004d Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 9 Oct 2023 17:39:33 +0200 Subject: [PATCH 2/5] use `toMatchSnapshot` instead of `toMatchFormattedCss` More info: https://github.com/tailwindlabs/tailwindcss/pull/12170 --- .../__snapshots__/forcedColorsVariants.test.js.snap | 11 +++++++++++ tests/plugins/variants/forcedColorsVariants.test.js | 10 ++-------- 2 files changed, 13 insertions(+), 8 deletions(-) create mode 100644 tests/plugins/variants/__snapshots__/forcedColorsVariants.test.js.snap 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 index bbf6c42ada42..61a1f08cf5b9 100644 --- a/tests/plugins/variants/forcedColorsVariants.test.js +++ b/tests/plugins/variants/forcedColorsVariants.test.js @@ -1,9 +1,3 @@ -import { css, quickVariantPluginTest } from '../../util/run' +import { quickVariantPluginTest } from '../../util/run' -quickVariantPluginTest('forcedColorsVariants').toMatchFormattedCss(css` - @media (forced-colors: active) { - .forced-colors\:flex { - display: flex; - } - } -`) +quickVariantPluginTest('forcedColorsVariants').toMatchSnapshot() From 181a1450757590b74a58a796a0cc3e2e9927045c Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 2 Nov 2023 17:03:39 +0100 Subject: [PATCH 3/5] remove `contrast-custom` variant --- src/corePlugins.js | 1 - .../__snapshots__/prefersContrastVariants.test.js.snap | 6 ------ 2 files changed, 7 deletions(-) diff --git a/src/corePlugins.js b/src/corePlugins.js index b11ab6508608..6da082425fb8 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -459,7 +459,6 @@ 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 }) => { diff --git a/tests/plugins/variants/__snapshots__/prefersContrastVariants.test.js.snap b/tests/plugins/variants/__snapshots__/prefersContrastVariants.test.js.snap index c13bc3311bb0..8d5d2ea1c7d0 100644 --- a/tests/plugins/variants/__snapshots__/prefersContrastVariants.test.js.snap +++ b/tests/plugins/variants/__snapshots__/prefersContrastVariants.test.js.snap @@ -13,11 +13,5 @@ exports[`should test the 'prefersContrastVariants' plugin 1`] = ` display: flex; } } - -@media (prefers-contrast: custom) { - .contrast-custom\\:flex { - display: flex; - } -} " `; From d620471d4d7c6d90f235a80c381f644523c162cf Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 2 Nov 2023 17:05:26 +0100 Subject: [PATCH 4/5] move `forcedColorsVariants` next to `prefersContrastVariants` --- src/lib/setupContextUtils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js index 8be3f8e5d397..050e3cfe49f0 100644 --- a/src/lib/setupContextUtils.js +++ b/src/lib/setupContextUtils.js @@ -757,11 +757,11 @@ function resolvePlugins(context, root) { variantPlugins['directionVariants'], variantPlugins['reducedMotionVariants'], variantPlugins['prefersContrastVariants'], + variantPlugins['forcedColorsVariants'], variantPlugins['darkVariants'], variantPlugins['printVariant'], variantPlugins['screenVariants'], variantPlugins['orientationVariants'], - variantPlugins['forcedColorsVariants'], ] return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins] From 85448d470403851a3f064f6c4aee1b565d9a2e6f Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 2 Nov 2023 17:11:14 +0100 Subject: [PATCH 5/5] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) 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))