From 989ff81eb51603408f367e627fd4d32f32551fc3 Mon Sep 17 00:00:00 2001 From: Luke Warlow Date: Wed, 10 Nov 2021 23:45:31 +0000 Subject: [PATCH 1/4] Add prefers-contrast variants --- src/corePlugins.js | 5 +++++ src/lib/setupContextUtils.js | 1 + tests/variants.test.css | 12 ++++++++++++ tests/variants.test.html | 4 ++++ 4 files changed, 22 insertions(+) diff --git a/src/corePlugins.js b/src/corePlugins.js index 58a528a16c4f..c3f1f7c605d1 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -215,6 +215,11 @@ export let variantPlugins = { addVariant('portrait', '@media (orientation: portrait)') addVariant('landscape', '@media (orientation: landscape)') }, + + prefersContrastVariants: ({ addVariant }) => { + addVariant('contrast-more', '@media (prefers-contrast: more)') + addVariant('contrast-less', '@media (prefers-contrast: less)') + }, } let cssTransformValue = [ diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js index f044a70d827b..1e5441302d0c 100644 --- a/src/lib/setupContextUtils.js +++ b/src/lib/setupContextUtils.js @@ -610,6 +610,7 @@ function resolvePlugins(context, root) { variantPlugins['printVariant'], variantPlugins['screenVariants'], variantPlugins['orientationVariants'], + variantPlugins['prefersContrastVariants'], ] return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins] diff --git a/tests/variants.test.css b/tests/variants.test.css index 67faee4c3a92..bfef3adca466 100644 --- a/tests/variants.test.css +++ b/tests/variants.test.css @@ -878,3 +878,15 @@ background-color: rgb(253 224 71 / var(--tw-bg-opacity)); } } +@media (prefers-contrast: more) { + .contrast-more\:bg-yellow-300 { + --tw-bg-opacity: 1; + background-color: rgb(253 224 71 / var(--tw-bg-opacity)); + } +} +@media (prefers-contrast: less) { + .contrast-less\:bg-yellow-300 { + --tw-bg-opacity: 1; + background-color: rgb(253 224 71 / var(--tw-bg-opacity)); + } +} diff --git a/tests/variants.test.html b/tests/variants.test.html index 3d8324df883e..c84c5da5c92a 100644 --- a/tests/variants.test.html +++ b/tests/variants.test.html @@ -143,6 +143,10 @@
+ +
+
+
From aa39253318d2e94adedf90fa2002927d2ce16ac9 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 23 May 2022 17:18:41 +0200 Subject: [PATCH 2/4] add tests for prefers contrast --- tests/prefers-contrast.test.js | 74 ++++++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 tests/prefers-contrast.test.js diff --git a/tests/prefers-contrast.test.js b/tests/prefers-contrast.test.js new file mode 100644 index 000000000000..e20e86146d3e --- /dev/null +++ b/tests/prefers-contrast.test.js @@ -0,0 +1,74 @@ +import { run, html, css, defaults } from './util/run' + +it('should be possible to use contrast-more and contrast-less variants', () => { + let config = { + content: [ + { raw: html`
` }, + ], + corePlugins: { preflight: false }, + } + + let input = css` + @tailwind base; + @tailwind components; + @tailwind utilities; + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + ${defaults} + + .bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + } + + @media (prefers-contrast: more) { + .contrast-more\:bg-pink-500 { + --tw-bg-opacity: 1; + background-color: rgb(236 72 153 / var(--tw-bg-opacity)); + } + } + + @media (prefers-contrast: less) { + .contrast-less\:bg-black { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + } + } + `) + }) +}) + +it('dark mode should appear after the contrast variants', () => { + let config = { + content: [{ raw: html`
` }], + corePlugins: { preflight: false }, + } + + let input = css` + @tailwind base; + @tailwind components; + @tailwind utilities; + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + ${defaults} + + @media (prefers-contrast: more) { + .contrast-more\:bg-black { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + } + } + + @media (prefers-color-scheme: dark) { + .dark\:bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + } + } + `) + }) +}) From a71ee5cf262778093f6ff99ea280d846f830a135 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 23 May 2022 17:19:08 +0200 Subject: [PATCH 3/4] dark mode should have precedence over prefers contrast variants --- src/lib/setupContextUtils.js | 2 +- tests/variants.test.css | 24 ++++++++++++------------ 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js index 1e5441302d0c..d03007c38805 100644 --- a/src/lib/setupContextUtils.js +++ b/src/lib/setupContextUtils.js @@ -606,11 +606,11 @@ function resolvePlugins(context, root) { let afterVariants = [ variantPlugins['directionVariants'], variantPlugins['reducedMotionVariants'], + variantPlugins['prefersContrastVariants'], variantPlugins['darkVariants'], variantPlugins['printVariant'], variantPlugins['screenVariants'], variantPlugins['orientationVariants'], - variantPlugins['prefersContrastVariants'], ] return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins] diff --git a/tests/variants.test.css b/tests/variants.test.css index bfef3adca466..6be36b29042f 100644 --- a/tests/variants.test.css +++ b/tests/variants.test.css @@ -759,6 +759,18 @@ var(--tw-shadow); } } +@media (prefers-contrast: more) { + .contrast-more\:bg-yellow-300 { + --tw-bg-opacity: 1; + background-color: rgb(253 224 71 / var(--tw-bg-opacity)); + } +} +@media (prefers-contrast: less) { + .contrast-less\:bg-yellow-300 { + --tw-bg-opacity: 1; + background-color: rgb(253 224 71 / var(--tw-bg-opacity)); + } +} .dark .dark\:shadow-md { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); @@ -878,15 +890,3 @@ background-color: rgb(253 224 71 / var(--tw-bg-opacity)); } } -@media (prefers-contrast: more) { - .contrast-more\:bg-yellow-300 { - --tw-bg-opacity: 1; - background-color: rgb(253 224 71 / var(--tw-bg-opacity)); - } -} -@media (prefers-contrast: less) { - .contrast-less\:bg-yellow-300 { - --tw-bg-opacity: 1; - background-color: rgb(253 224 71 / var(--tw-bg-opacity)); - } -} From 1c1f8cf6c1a14eda58efb17747a755ecef14e38a Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 23 May 2022 17:21:59 +0200 Subject: [PATCH 4/4] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5552afebb5cf..4f81b902e911 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -47,6 +47,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `mix-blend-plus-lighter` utility ([#8288](https://github.com/tailwindlabs/tailwindcss/pull/8288)) - Add arbitrary variants ([#8299](https://github.com/tailwindlabs/tailwindcss/pull/8299)) - Add `matchVariant` API ([#8310](https://github.com/tailwindlabs/tailwindcss/pull/8310)) +- Add `prefers-contrast` media query variants ([#8410](https://github.com/tailwindlabs/tailwindcss/pull/8410)) ## [3.0.24] - 2022-04-12