Add prefers-contrast media query variants (#8410)

* Add prefers-contrast variants

* add tests for prefers contrast

* dark mode should have precedence over prefers contrast variants

* update changelog

Co-authored-by: Luke Warlow <[email protected]>

Author: RobinMalfait

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
 

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 = [

src/lib/setupContextUtils.js

@@ -606,6 +606,7 @@ function resolvePlugins(context, root) {
   let afterVariants = [
     variantPlugins['directionVariants'],
     variantPlugins['reducedMotionVariants'],
+    variantPlugins['prefersContrastVariants'],
     variantPlugins['darkVariants'],
     variantPlugins['printVariant'],
     variantPlugins['screenVariants'],

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`<div class="contrast-more:bg-pink-500 contrast-less:bg-black bg-white"></div>` },
+    ],
+    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`<div class="contrast-more:bg-black dark:bg-white"></div>` }],
+    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));
+        }
+      }
+    `)
+  })
+})

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);

tests/variants.test.html

@@ -143,6 +143,10 @@
     <div class="portrait:bg-yellow-300"></div>
     <div class="landscape:bg-yellow-300"></div>
 
+    <!-- Prefers contrast variants -->
+    <div class="contrast-more:bg-yellow-300"></div>
+    <div class="contrast-less:bg-yellow-300"></div>
+
     <!-- Stacked variants -->
     <div class="open:hover:bg-red-200"></div>
     <div class="file:hover:bg-blue-600"></div>