Improve relative precedence of rtl, ltr, forced-colors and dark variants (#12584)

adamwathan · thecrypticace · commit fbdb858e9705 · 2023-12-18T13:58:22.000-05:00
* Reduce specificity of `rtl`, `ltr`, and `dark` variants

Reduce specificity of `rtl`, `ltr`, and `dark` variants (when using `darkMode: 'class'`) to make them the same as other variants. This also sorts the LTR/RTL and dark variants later in the variant plugin list to ensure that the reduced specificity doesn't cause them to start "losing" to other variants to keep things as backwards compatible as possible.

Resolves a long-standing issue where `darkMode: 'media'` and `darkMode: 'class'` had different specificity, which meant switching your dark mode strategy could break your site.

* Update changelog

---------

Co-authored-by: Adam Wathan &lt;4323180+adamwathan@users.noreply.github.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Simplify the `sans` font-family stack ([#11748](https://github.com/tailwindlabs/tailwindcss/pull/11748))
 - Disable the tap highlight overlay on iOS ([#12299](https://github.com/tailwindlabs/tailwindcss/pull/12299))
+- Improve relative precedence of `rtl`, `ltr`, `forced-colors`, and `dark` variants ([#12584](https://github.com/tailwindlabs/tailwindcss/pull/12584))
 
 ## [3.3.7] - 2023-12-18
 
diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -207,8 +207,8 @@ export let variantPlugins = {
   },
 
   directionVariants: ({ addVariant }) => {
-    addVariant('ltr', ':is([dir="ltr"] &)')
-    addVariant('rtl', ':is([dir="rtl"] &)')
+    addVariant('ltr', ':is(:where([dir="ltr"]) &)')
+    addVariant('rtl', ':is(:where([dir="rtl"]) &)')
   },
 
   reducedMotionVariants: ({ addVariant }) => {
@@ -229,7 +229,7 @@ export let variantPlugins = {
     }
 
     if (mode === 'class') {
-      addVariant('dark', `:is(${className} &)`)
+      addVariant('dark', `:is(:where(${className}) &)`)
     } else if (mode === 'media') {
       addVariant('dark', '@media (prefers-color-scheme: dark)')
     }
diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
@@ -765,14 +765,14 @@ function resolvePlugins(context, root) {
   ]
   let afterVariants = [
     variantPlugins['supportsVariants'],
-    variantPlugins['directionVariants'],
     variantPlugins['reducedMotionVariants'],
     variantPlugins['prefersContrastVariants'],
-    variantPlugins['darkVariants'],
-    variantPlugins['forcedColorsVariants'],
     variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
     variantPlugins['orientationVariants'],
+    variantPlugins['directionVariants'],
+    variantPlugins['darkVariants'],
+    variantPlugins['forcedColorsVariants'],
   ]
 
   return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins]
diff --git a/tests/apply.test.js b/tests/apply.test.js
@@ -216,14 +216,14 @@ crosscheck(({ stable, oxide }) => {
             text-align: left;
           }
         }
-        :is(.dark .apply-dark-variant) {
+        :is(:where(.dark) .apply-dark-variant) {
           text-align: center;
         }
-        :is(.dark .apply-dark-variant:hover) {
+        :is(:where(.dark) .apply-dark-variant:hover) {
           text-align: right;
         }
         @media (min-width: 1024px) {
-          :is(.dark .apply-dark-variant) {
+          :is(:where(.dark) .apply-dark-variant) {
             text-align: left;
           }
         }
@@ -513,14 +513,14 @@ crosscheck(({ stable, oxide }) => {
             text-align: left;
           }
         }
-        :is(.dark .apply-dark-variant) {
+        :is(:where(.dark) .apply-dark-variant) {
           text-align: center;
         }
-        :is(.dark .apply-dark-variant:hover) {
+        :is(:where(.dark) .apply-dark-variant:hover) {
           text-align: right;
         }
         @media (min-width: 1024px) {
-          :is(.dark .apply-dark-variant) {
+          :is(:where(.dark) .apply-dark-variant) {
             text-align: left;
           }
         }
@@ -2404,18 +2404,18 @@ crosscheck(({ stable, oxide }) => {
 
     return run(input, config).then((result) => {
       expect(result.css).toMatchFormattedCss(css`
-        :is(.dark .foo)::before,
-        :is([dir='rtl'] :is(.dark .bar))::before,
-        :is([dir='rtl'] :is(.dark .baz:hover))::before {
+        :is(:where(.dark) .foo)::before,
+        :is(:where([dir='rtl']) :is(:where(.dark) .bar))::before,
+        :is(:where([dir='rtl']) :is(:where(.dark) .baz:hover))::before {
           background-color: #000;
         }
-        :is([dir='rtl'] :is(.dark .qux))::file-selector-button:hover {
+        :is(:where([dir='rtl']) :is(:where(.dark) .qux))::file-selector-button:hover {
           background-color: #000;
         }
-        :is([dir='rtl'] :is(.dark .steve):hover):before {
+        :is(:where([dir='rtl']) :is(:where(.dark) .steve):hover):before {
           background-color: #000;
         }
-        :is([dir='rtl'] :is(.dark .bob))::file-selector-button:hover {
+        :is(:where([dir='rtl']) :is(:where(.dark) .bob))::file-selector-button:hover {
           background-color: #000;
         }
         :has([dir='rtl'] .foo:hover):before {
diff --git a/tests/custom-separator.test.js b/tests/custom-separator.test.js
@@ -23,22 +23,22 @@ crosscheck(() => {
         .group:hover .group-hover_focus-within_text-left:focus-within {
           text-align: left;
         }
-        :is([dir='rtl'] .rtl_active_text-center:active) {
-          text-align: center;
-        }
         @media (prefers-reduced-motion: no-preference) {
           .motion-safe_hover_text-center:hover {
             text-align: center;
           }
         }
-        :is(.dark .dark_focus_text-left:focus) {
-          text-align: left;
-        }
         @media (min-width: 768px) {
           .md_hover_text-right:hover {
             text-align: right;
           }
         }
+        :is(:where([dir='rtl']) .rtl_active_text-center:active) {
+          text-align: center;
+        }
+        :is(:where(.dark) .dark_focus_text-left:focus) {
+          text-align: left;
+        }
       `)
     })
   })
diff --git a/tests/dark-mode.test.js b/tests/dark-mode.test.js
@@ -17,7 +17,7 @@ crosscheck(() => {
     return run(input, config).then((result) => {
       expect(result.css).toMatchFormattedCss(css`
         ${defaults}
-        :is(.dark .dark\:font-bold) {
+        :is(:where(.dark) .dark\:font-bold) {
           font-weight: 700;
         }
       `)
@@ -40,7 +40,7 @@ crosscheck(() => {
     return run(input, config).then((result) => {
       expect(result.css).toMatchFormattedCss(css`
         ${defaults}
-        :is(.test-dark .dark\:font-bold) {
+        :is(:where(.test-dark) .dark\:font-bold) {
           font-weight: 700;
         }
       `)
diff --git a/tests/format-variant-selector.test.js b/tests/format-variant-selector.test.js
@@ -348,8 +348,8 @@ crosscheck(() => {
       ${'.parent::before &:hover'}                             | ${'.parent &:hover::before'}
       ${':where(&::before) :is(h1, h2, h3, h4)'}               | ${':where(&) :is(h1, h2, h3, h4)::before'}
       ${':where(&::file-selector-button) :is(h1, h2, h3, h4)'} | ${':where(&::file-selector-button) :is(h1, h2, h3, h4)'}
-      ${'#app :is(.dark &::before)'}                           | ${'#app :is(.dark &)::before'}
-      ${'#app :is(:is(.dark &)::before)'}                      | ${'#app :is(:is(.dark &))::before'}
+      ${'#app :is(:where(.dark) &::before)'}                           | ${'#app :is(:where(.dark) &)::before'}
+      ${'#app :is(:is(:where(.dark) &)::before)'}                      | ${'#app :is(:is(:where(.dark) &))::before'}
       ${'#app :is(.foo::file-selector-button)'}                | ${'#app :is(.foo)::file-selector-button'}
       ${'#app :is(.foo::-webkit-progress-bar)'}                | ${'#app :is(.foo)::-webkit-progress-bar'}
       ${'.parent::marker li'}                                  | ${'.parent li::marker'}
diff --git a/tests/important-boolean.test.js b/tests/important-boolean.test.js
@@ -138,22 +138,22 @@ crosscheck(() => {
         .group:hover .group-hover\:focus-within\:text-left:focus-within {
           text-align: left !important;
         }
-        :is([dir='rtl'] .rtl\:active\:text-center:active) {
-          text-align: center !important;
-        }
         @media (prefers-reduced-motion: no-preference) {
           .motion-safe\:hover\:text-center:hover {
             text-align: center !important;
           }
         }
-        :is(.dark .dark\:focus\:text-left:focus) {
-          text-align: left !important;
-        }
         @media (min-width: 768px) {
           .md\:hover\:text-right:hover {
             text-align: right !important;
           }
         }
+        :is(:where([dir='rtl']) .rtl\:active\:text-center:active) {
+          text-align: center !important;
+        }
+        :is(:where(.dark) .dark\:focus\:text-left:focus) {
+          text-align: left !important;
+        }
       `)
     })
   })
diff --git a/tests/important-selector.test.js b/tests/important-selector.test.js
@@ -136,29 +136,29 @@ crosscheck(({ stable, oxide }) => {
         #app :is(.group:hover .group-hover\:focus-within\:text-left:focus-within) {
           text-align: left;
         }
-        #app :is(:is([dir='rtl'] .rtl\:active\:text-center:active)) {
-          text-align: center;
-        }
         @media (prefers-reduced-motion: no-preference) {
           #app :is(.motion-safe\:hover\:text-center:hover) {
             text-align: center;
           }
         }
-        #app :is(.dark .dark\:before\:underline):before {
-          content: var(--tw-content);
-          text-decoration-line: underline;
-        }
-        #app :is(:is(.dark .dark\:focus\:text-left:focus)) {
-          text-align: left;
-        }
         @media (min-width: 768px) {
           #app :is(.md\:hover\:text-right:hover) {
             text-align: right;
           }
         }
+        #app :is(:is(:where([dir='rtl']) .rtl\:active\:text-center:active)) {
+          text-align: center;
+        }
+        #app :is(:where(.dark) .dark\:before\:underline):before {
+          content: var(--tw-content);
+          text-decoration-line: underline;
+        }
+        #app :is(:is(:where(.dark) .dark\:focus\:text-left:focus)) {
+          text-align: left;
+        }
         #app
           :is(
-            [dir='rtl'] :is(.dark .hover\:\[\&\:\:file-selector-button\]\:rtl\:dark\:bg-black\/100)
+            :where([dir='rtl']) :is(:where(.dark) .hover\:\[\&\:\:file-selector-button\]\:rtl\:dark\:bg-black\/100)
           )::file-selector-button:hover {
           background-color: #000;
         }
@@ -187,15 +187,15 @@ crosscheck(({ stable, oxide }) => {
     return run(input, config).then((result) => {
       stable.expect(result.css).toMatchFormattedCss(css`
         ${defaults}
-        #app :is(.dark .dark\:before\:bg-black)::before {
+        #app :is(:where(.dark) .dark\:before\:bg-black)::before {
           content: var(--tw-content);
           --tw-bg-opacity: 1;
           background-color: rgb(0 0 0 / var(--tw-bg-opacity));
         }
       `)
       oxide.expect(result.css).toMatchFormattedCss(css`
         ${defaults}
-        #app :is(.dark .dark\:before\:bg-black)::before {
+        #app :is(:where(.dark) .dark\:before\:bg-black)::before {
           content: var(--tw-content);
           background-color: #000;
         }
diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js
@@ -305,7 +305,7 @@ crosscheck(({ stable, oxide }) => {
         }
         .drop-empty-rules:hover,
         .group:hover .apply-group,
-        :is(.dark .apply-dark-mode) {
+        :is(:where(.dark) .apply-dark-mode) {
           font-weight: 700;
         }
         .apply-with-existing:hover {
@@ -340,7 +340,7 @@ crosscheck(({ stable, oxide }) => {
         .apply-order-b {
           margin: 1.5rem 1.25rem 1.25rem;
         }
-        :is(.dark .group:hover .apply-dark-group-example-a) {
+        :is(:where(.dark) .group:hover .apply-dark-group-example-a) {
           --tw-bg-opacity: 1;
           background-color: rgb(34 197 94 / var(--tw-bg-opacity));
         }
@@ -741,9 +741,6 @@ crosscheck(({ stable, oxide }) => {
             transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           }
         }
-        :is(.dark .dark\:custom-util) {
-          background: #abcdef;
-        }
         @media (min-width: 640px) {
           .sm\:text-center {
             text-align: center;
@@ -788,9 +785,6 @@ crosscheck(({ stable, oxide }) => {
               transition-duration: 0.15s;
               transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
             }
-            :is(.dark .md\:dark\:motion-safe\:foo\:active\:custom-util:active) {
-              background: #abcdef !important;
-            }
           }
           @media (min-width: 640px) {
             .md\:sm\:text-center {
@@ -808,6 +802,16 @@ crosscheck(({ stable, oxide }) => {
             text-align: left;
           }
         }
+        :is(:where(.dark) .dark\:custom-util) {
+          background: #abcdef;
+        }
+        @media (min-width: 768px) {
+          @media (prefers-reduced-motion: no-preference) {
+            :is(:where(.dark) .md\:dark\:motion-safe\:foo\:active\:custom-util:active) {
+              background: #abcdef !important;
+            }
+          }
+        }
       `)
       oxide.expect(result.css).toMatchFormattedCss(css`
         .theme-test {
@@ -874,7 +878,7 @@ crosscheck(({ stable, oxide }) => {
         }
         .drop-empty-rules:hover,
         .group:hover .apply-group,
-        :is(.dark .apply-dark-mode) {
+        :is(:where(.dark) .apply-dark-mode) {
           font-weight: 700;
         }
         .apply-with-existing:hover {
@@ -908,7 +912,7 @@ crosscheck(({ stable, oxide }) => {
         .apply-order-b {
           margin: 1.5rem 1.25rem 1.25rem;
         }
-        :is(.dark .group:hover .apply-dark-group-example-a) {
+        :is(:where(.dark) .group:hover .apply-dark-group-example-a) {
           background-color: #22c55e;
         }
         @media (min-width: 640px) {
@@ -1299,9 +1303,6 @@ crosscheck(({ stable, oxide }) => {
             transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           }
         }
-        :is(.dark .dark\:custom-util) {
-          background: #abcdef;
-        }
         @media (min-width: 640px) {
           .sm\:text-center {
             text-align: center;
@@ -1346,9 +1347,6 @@ crosscheck(({ stable, oxide }) => {
               transition-duration: 0.15s;
               transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
             }
-            :is(.dark .md\:dark\:motion-safe\:foo\:active\:custom-util:active) {
-              background: #abcdef !important;
-            }
           }
           @media (min-width: 640px) {
             .md\:sm\:text-center {
@@ -1366,6 +1364,15 @@ crosscheck(({ stable, oxide }) => {
             text-align: left;
           }
         }
+        :is(:where(.dark) .dark\:custom-util) {
+          background: #abcdef;
+        }
+        @media (min-width: 768px) {
+          @media (prefers-reduced-motion: no-preference) {
+          :is(:where(.dark) .md\:dark\:motion-safe\:foo\:active\:custom-util:active) {
+            background: #abcdef !important;
+          }
+        }
       `)
     })
   })
diff --git a/tests/prefix.test.js b/tests/prefix.test.js
diff --git a/tests/util/apply-important-selector.test.js b/tests/util/apply-important-selector.test.js
diff --git a/tests/variants.oxide.test.css b/tests/variants.oxide.test.css
diff --git a/tests/variants.test.css b/tests/variants.test.css
diff --git a/tests/variants.test.js b/tests/variants.test.js

Original file line number	Diff line number	Diff line change
`@@ -216,14 +216,14 @@ crosscheck(({ stable, oxide }) => {`
`216`	`216`	`text-align: left;`
`217`	`217`	`}`
`218`	`218`	`}`
`219`		`- :is(.dark .apply-dark-variant) {`
	`219`	`+ :is(:where(.dark) .apply-dark-variant) {`
`220`	`220`	`text-align: center;`
`221`	`221`	`}`
`222`		`- :is(.dark .apply-dark-variant:hover) {`
	`222`	`+ :is(:where(.dark) .apply-dark-variant:hover) {`
`223`	`223`	`text-align: right;`
`224`	`224`	`}`
`225`	`225`	`@media (min-width: 1024px) {`
`226`		`- :is(.dark .apply-dark-variant) {`
	`226`	`+ :is(:where(.dark) .apply-dark-variant) {`
`227`	`227`	`text-align: left;`
`228`	`228`	`}`
`229`	`229`	`}`
`@@ -513,14 +513,14 @@ crosscheck(({ stable, oxide }) => {`
`513`	`513`	`text-align: left;`
`514`	`514`	`}`
`515`	`515`	`}`
`516`		`- :is(.dark .apply-dark-variant) {`
	`516`	`+ :is(:where(.dark) .apply-dark-variant) {`
`517`	`517`	`text-align: center;`
`518`	`518`	`}`
`519`		`- :is(.dark .apply-dark-variant:hover) {`
	`519`	`+ :is(:where(.dark) .apply-dark-variant:hover) {`
`520`	`520`	`text-align: right;`
`521`	`521`	`}`
`522`	`522`	`@media (min-width: 1024px) {`
`523`		`- :is(.dark .apply-dark-variant) {`
	`523`	`+ :is(:where(.dark) .apply-dark-variant) {`
`524`	`524`	`text-align: left;`
`525`	`525`	`}`
`526`	`526`	`}`
`@@ -2404,18 +2404,18 @@ crosscheck(({ stable, oxide }) => {`
`2404`	`2404`
`2405`	`2405`	`return run(input, config).then((result) => {`
`2406`	`2406`	expect(result.css).toMatchFormattedCss(css`
`2407`		`- :is(.dark .foo)::before,`
`2408`		`- :is([dir='rtl'] :is(.dark .bar))::before,`
`2409`		`- :is([dir='rtl'] :is(.dark .baz:hover))::before {`
	`2407`	`+ :is(:where(.dark) .foo)::before,`
	`2408`	`+ :is(:where([dir='rtl']) :is(:where(.dark) .bar))::before,`
	`2409`	`+ :is(:where([dir='rtl']) :is(:where(.dark) .baz:hover))::before {`
`2410`	`2410`	`background-color: #000;`
`2411`	`2411`	`}`
`2412`		`- :is([dir='rtl'] :is(.dark .qux))::file-selector-button:hover {`
	`2412`	`+ :is(:where([dir='rtl']) :is(:where(.dark) .qux))::file-selector-button:hover {`
`2413`	`2413`	`background-color: #000;`
`2414`	`2414`	`}`
`2415`		`- :is([dir='rtl'] :is(.dark .steve):hover):before {`
	`2415`	`+ :is(:where([dir='rtl']) :is(:where(.dark) .steve):hover):before {`
`2416`	`2416`	`background-color: #000;`
`2417`	`2417`	`}`
`2418`		`- :is([dir='rtl'] :is(.dark .bob))::file-selector-button:hover {`
	`2418`	`+ :is(:where([dir='rtl']) :is(:where(.dark) .bob))::file-selector-button:hover {`
`2419`	`2419`	`background-color: #000;`
`2420`	`2420`	`}`
`2421`	`2421`	`:has([dir='rtl'] .foo:hover):before {`
Original file line number	Diff line number	Diff line change
`@@ -23,22 +23,22 @@ crosscheck(() => {`
`23`	`23`	`.group:hover .group-hover_focus-within_text-left:focus-within {`
`24`	`24`	`text-align: left;`
`25`	`25`	`}`
`26`		`- :is([dir='rtl'] .rtl_active_text-center:active) {`
`27`		`- text-align: center;`
`28`		`- }`
`29`	`26`	`@media (prefers-reduced-motion: no-preference) {`
`30`	`27`	`.motion-safe_hover_text-center:hover {`
`31`	`28`	`text-align: center;`
`32`	`29`	`}`
`33`	`30`	`}`
`34`		`- :is(.dark .dark_focus_text-left:focus) {`
`35`		`- text-align: left;`
`36`		`- }`
`37`	`31`	`@media (min-width: 768px) {`
`38`	`32`	`.md_hover_text-right:hover {`
`39`	`33`	`text-align: right;`
`40`	`34`	`}`
`41`	`35`	`}`
	`36`	`+ :is(:where([dir='rtl']) .rtl_active_text-center:active) {`
	`37`	`+ text-align: center;`
	`38`	`+ }`
	`39`	`+ :is(:where(.dark) .dark_focus_text-left:focus) {`
	`40`	`+ text-align: left;`
	`41`	`+ }`
`42`	`42`	`)
`43`	`43`	`})`
`44`	`44`	`})`
Original file line number	Diff line number	Diff line change
`@@ -138,22 +138,22 @@ crosscheck(() => {`
`138`	`138`	`.group:hover .group-hover\:focus-within\:text-left:focus-within {`
`139`	`139`	`text-align: left !important;`
`140`	`140`	`}`
`141`		`- :is([dir='rtl'] .rtl\:active\:text-center:active) {`
`142`		`- text-align: center !important;`
`143`		`- }`
`144`	`141`	`@media (prefers-reduced-motion: no-preference) {`
`145`	`142`	`.motion-safe\:hover\:text-center:hover {`
`146`	`143`	`text-align: center !important;`
`147`	`144`	`}`
`148`	`145`	`}`
`149`		`- :is(.dark .dark\:focus\:text-left:focus) {`
`150`		`- text-align: left !important;`
`151`		`- }`
`152`	`146`	`@media (min-width: 768px) {`
`153`	`147`	`.md\:hover\:text-right:hover {`
`154`	`148`	`text-align: right !important;`
`155`	`149`	`}`
`156`	`150`	`}`
	`151`	`+ :is(:where([dir='rtl']) .rtl\:active\:text-center:active) {`
	`152`	`+ text-align: center !important;`
	`153`	`+ }`
	`154`	`+ :is(:where(.dark) .dark\:focus\:text-left:focus) {`
	`155`	`+ text-align: left !important;`
	`156`	`+ }`
`157`	`157`	`)
`158`	`158`	`})`
`159`	`159`	`})`
Original file line number	Diff line number	Diff line change
`@@ -305,7 +305,7 @@ crosscheck(({ stable, oxide }) => {`
`305`	`305`	`}`
`306`	`306`	`.drop-empty-rules:hover,`
`307`	`307`	`.group:hover .apply-group,`
`308`		`- :is(.dark .apply-dark-mode) {`
	`308`	`+ :is(:where(.dark) .apply-dark-mode) {`
`309`	`309`	`font-weight: 700;`
`310`	`310`	`}`
`311`	`311`	`.apply-with-existing:hover {`
`@@ -340,7 +340,7 @@ crosscheck(({ stable, oxide }) => {`
`340`	`340`	`.apply-order-b {`
`341`	`341`	`margin: 1.5rem 1.25rem 1.25rem;`
`342`	`342`	`}`
`343`		`- :is(.dark .group:hover .apply-dark-group-example-a) {`
	`343`	`+ :is(:where(.dark) .group:hover .apply-dark-group-example-a) {`
`344`	`344`	`--tw-bg-opacity: 1;`
`345`	`345`	`background-color: rgb(34 197 94 / var(--tw-bg-opacity));`
`346`	`346`	`}`
`@@ -741,9 +741,6 @@ crosscheck(({ stable, oxide }) => {`
`741`	`741`	`transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);`
`742`	`742`	`}`
`743`	`743`	`}`
`744`		`- :is(.dark .dark\:custom-util) {`
`745`		`- background: #abcdef;`
`746`		`- }`
`747`	`744`	`@media (min-width: 640px) {`
`748`	`745`	`.sm\:text-center {`
`749`	`746`	`text-align: center;`
`@@ -788,9 +785,6 @@ crosscheck(({ stable, oxide }) => {`
`788`	`785`	`transition-duration: 0.15s;`
`789`	`786`	`transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);`
`790`	`787`	`}`
`791`		`- :is(.dark .md\:dark\:motion-safe\:foo\:active\:custom-util:active) {`
`792`		`- background: #abcdef !important;`
`793`		`- }`
`794`	`788`	`}`
`795`	`789`	`@media (min-width: 640px) {`
`796`	`790`	`.md\:sm\:text-center {`
`@@ -808,6 +802,16 @@ crosscheck(({ stable, oxide }) => {`
`808`	`802`	`text-align: left;`
`809`	`803`	`}`
`810`	`804`	`}`
	`805`	`+ :is(:where(.dark) .dark\:custom-util) {`
	`806`	`+ background: #abcdef;`
	`807`	`+ }`
	`808`	`+ @media (min-width: 768px) {`
	`809`	`+ @media (prefers-reduced-motion: no-preference) {`
	`810`	`+ :is(:where(.dark) .md\:dark\:motion-safe\:foo\:active\:custom-util:active) {`
	`811`	`+ background: #abcdef !important;`
	`812`	`+ }`
	`813`	`+ }`
	`814`	`+ }`
`811`	`815`	`)
`812`	`816`	oxide.expect(result.css).toMatchFormattedCss(css`
`813`	`817`	`.theme-test {`
`@@ -874,7 +878,7 @@ crosscheck(({ stable, oxide }) => {`
`874`	`878`	`}`
`875`	`879`	`.drop-empty-rules:hover,`
`876`	`880`	`.group:hover .apply-group,`
`877`		`- :is(.dark .apply-dark-mode) {`
	`881`	`+ :is(:where(.dark) .apply-dark-mode) {`
`878`	`882`	`font-weight: 700;`
`879`	`883`	`}`
`880`	`884`	`.apply-with-existing:hover {`
`@@ -908,7 +912,7 @@ crosscheck(({ stable, oxide }) => {`
`908`	`912`	`.apply-order-b {`
`909`	`913`	`margin: 1.5rem 1.25rem 1.25rem;`
`910`	`914`	`}`
`911`		`- :is(.dark .group:hover .apply-dark-group-example-a) {`
	`915`	`+ :is(:where(.dark) .group:hover .apply-dark-group-example-a) {`
`912`	`916`	`background-color: #22c55e;`
`913`	`917`	`}`
`914`	`918`	`@media (min-width: 640px) {`
`@@ -1299,9 +1303,6 @@ crosscheck(({ stable, oxide }) => {`
`1299`	`1303`	`transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);`
`1300`	`1304`	`}`
`1301`	`1305`	`}`
`1302`		`- :is(.dark .dark\:custom-util) {`
`1303`		`- background: #abcdef;`
`1304`		`- }`
`1305`	`1306`	`@media (min-width: 640px) {`
`1306`	`1307`	`.sm\:text-center {`
`1307`	`1308`	`text-align: center;`
`@@ -1346,9 +1347,6 @@ crosscheck(({ stable, oxide }) => {`
`1346`	`1347`	`transition-duration: 0.15s;`
`1347`	`1348`	`transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);`
`1348`	`1349`	`}`
`1349`		`- :is(.dark .md\:dark\:motion-safe\:foo\:active\:custom-util:active) {`
`1350`		`- background: #abcdef !important;`
`1351`		`- }`
`1352`	`1350`	`}`
`1353`	`1351`	`@media (min-width: 640px) {`
`1354`	`1352`	`.md\:sm\:text-center {`
`@@ -1366,6 +1364,15 @@ crosscheck(({ stable, oxide }) => {`
`1366`	`1364`	`text-align: left;`
`1367`	`1365`	`}`
`1368`	`1366`	`}`
	`1367`	`+ :is(:where(.dark) .dark\:custom-util) {`
	`1368`	`+ background: #abcdef;`
	`1369`	`+ }`
	`1370`	`+ @media (min-width: 768px) {`
	`1371`	`+ @media (prefers-reduced-motion: no-preference) {`
	`1372`	`+ :is(:where(.dark) .md\:dark\:motion-safe\:foo\:active\:custom-util:active) {`
	`1373`	`+ background: #abcdef !important;`
	`1374`	`+ }`
	`1375`	`+ }`
`1369`	`1376`	`)
`1370`	`1377`	`})`
`1371`	`1378`	`})`