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

adamwathan · web-flow · commit af7e610aaae8 · 2023-12-16T18:53:08.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
@@ -39,6 +39,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))
 - [Oxide] Deprecate `--no-autoprefixer` flag in the CLI ([#11280](https://github.com/tailwindlabs/tailwindcss/pull/11280))
 - [Oxide] Make the Rust based parser the default ([#11394](https://github.com/tailwindlabs/tailwindcss/pull/11394))
 
diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -206,8 +206,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 }) => {
@@ -228,7 +228,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
@@ -755,14 +755,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-important-selector.test.js b/tests/apply-important-selector.test.js
@@ -1,25 +1,25 @@
 import { applyImportantSelector } from '../src/util/applyImportantSelector'
 
 it.each`
-  before                                        | after
-  ${'.foo'}                                     | ${'#app :is(.foo)'}
-  ${'.foo .bar'}                                | ${'#app :is(.foo .bar)'}
-  ${'.foo:hover'}                               | ${'#app :is(.foo:hover)'}
-  ${'.foo .bar:hover'}                          | ${'#app :is(.foo .bar:hover)'}
-  ${'.foo::before'}                             | ${'#app :is(.foo)::before'}
-  ${'.foo::before'}                             | ${'#app :is(.foo)::before'}
-  ${'.foo::file-selector-button'}               | ${'#app :is(.foo)::file-selector-button'}
-  ${'.foo::-webkit-progress-bar'}               | ${'#app :is(.foo)::-webkit-progress-bar'}
-  ${'.foo:hover::before'}                       | ${'#app :is(.foo:hover)::before'}
-  ${':is(.dark :is([dir="rtl"] .foo::before))'} | ${'#app :is(.dark :is([dir="rtl"] .foo))::before'}
-  ${':is(.dark .foo) .bar'}                     | ${'#app :is(:is(.dark .foo) .bar)'}
-  ${':is(.foo) :is(.bar)'}                      | ${'#app :is(:is(.foo) :is(.bar))'}
-  ${':is(.foo)::before'}                        | ${'#app :is(.foo)::before'}
-  ${'.foo:before'}                              | ${'#app :is(.foo):before'}
-  ${'.foo::some-unknown-pseudo'}                | ${'#app :is(.foo)::some-unknown-pseudo'}
-  ${'.foo::some-unknown-pseudo:hover'}          | ${'#app :is(.foo)::some-unknown-pseudo:hover'}
-  ${'.foo:focus::some-unknown-pseudo:hover'}    | ${'#app :is(.foo:focus)::some-unknown-pseudo:hover'}
-  ${'.foo:hover::some-unknown-pseudo:focus'}    | ${'#app :is(.foo:hover)::some-unknown-pseudo:focus'}
+  before                                                        | after
+  ${'.foo'}                                                     | ${'#app :is(.foo)'}
+  ${'.foo .bar'}                                                | ${'#app :is(.foo .bar)'}
+  ${'.foo:hover'}                                               | ${'#app :is(.foo:hover)'}
+  ${'.foo .bar:hover'}                                          | ${'#app :is(.foo .bar:hover)'}
+  ${'.foo::before'}                                             | ${'#app :is(.foo)::before'}
+  ${'.foo::before'}                                             | ${'#app :is(.foo)::before'}
+  ${'.foo::file-selector-button'}                               | ${'#app :is(.foo)::file-selector-button'}
+  ${'.foo::-webkit-progress-bar'}                               | ${'#app :is(.foo)::-webkit-progress-bar'}
+  ${'.foo:hover::before'}                                       | ${'#app :is(.foo:hover)::before'}
+  ${':is(:where(.dark) :is(:where([dir="rtl"]) .foo::before))'} | ${'#app :is(:where(.dark) :is(:where([dir="rtl"]) .foo))::before'}
+  ${':is(:where(.dark) .foo) .bar'}                             | ${'#app :is(:is(:where(.dark) .foo) .bar)'}
+  ${':is(.foo) :is(.bar)'}                                      | ${'#app :is(:is(.foo) :is(.bar))'}
+  ${':is(.foo)::before'}                                        | ${'#app :is(.foo)::before'}
+  ${'.foo:before'}                                              | ${'#app :is(.foo):before'}
+  ${'.foo::some-unknown-pseudo'}                                | ${'#app :is(.foo)::some-unknown-pseudo'}
+  ${'.foo::some-unknown-pseudo:hover'}                          | ${'#app :is(.foo)::some-unknown-pseudo:hover'}
+  ${'.foo:focus::some-unknown-pseudo:hover'}                    | ${'#app :is(.foo:focus)::some-unknown-pseudo:hover'}
+  ${'.foo:hover::some-unknown-pseudo:focus'}                    | ${'#app :is(.foo:hover)::some-unknown-pseudo:focus'}
 `('should generate "$after" from "$before"', ({ before, after }) => {
   expect(applyImportantSelector(before, '#app')).toEqual(after)
 })
diff --git a/tests/apply.test.js b/tests/apply.test.js
@@ -215,14 +215,14 @@ test('@apply', () => {
           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;
         }
       }
@@ -2016,24 +2016,28 @@ it('pseudo elements inside apply are moved outside of :is() or :has()', () => {
 
   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;
       }
-      :-webkit-any([dir='rtl'] :-webkit-any(.dark .qux))::-webkit-file-upload-button:hover {
+      :-webkit-any(
+          :where([dir='rtl']) :-webkit-any(:where(.dark) .qux)
+        )::-webkit-file-upload-button:hover {
         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;
       }
-      :-webkit-any([dir='rtl'] :-webkit-any(.dark .bob))::-webkit-file-upload-button:hover {
+      :-webkit-any(
+          :where([dir='rtl']) :-webkit-any(:where(.dark) .bob)
+        )::-webkit-file-upload-button:hover {
         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
@@ -22,22 +22,22 @@ test('custom separator', () => {
       .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
@@ -16,7 +16,7 @@ it('should be possible to use the darkMode "class" mode', () => {
   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;
       }
     `)
@@ -39,7 +39,7 @@ it('should be possible to change the class name', () => {
   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
@@ -343,8 +343,8 @@ describe('pseudo elements', () => {
     ${'.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
@@ -137,22 +137,22 @@ test('important boolean', () => {
       .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
@@ -135,36 +135,39 @@ test('important selector', () => {
       #app :is(.group:hover .group-hover\:focus-within\:text-left:focus-within) {
         text-align: left;
       }
-      #app :is([dir='rtl'] .rtl\:active\:text-center:active) {
-        text-align: center;
-      }
       @media (prefers-reduced-motion: no-preference) {
         #app .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(.dark .dark\:focus\:text-left:focus) {
-        text-align: left;
-      }
       @media (min-width: 768px) {
         #app .md\:hover\:text-right:hover {
           text-align: right;
         }
       }
+      #app :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(:where(.dark) .dark\:focus\:text-left:focus) {
+        text-align: left;
+      }
       #app
         :-webkit-any(
-          [dir='rtl']
-            :-webkit-any(.dark .hover\:\[\&\:\:file-selector-button\]\:rtl\:dark\:bg-black\/100)
+          :where([dir='rtl'])
+            :-webkit-any(
+              :where(.dark) .hover\:\[\&\:\:file-selector-button\]\:rtl\:dark\:bg-black\/100
+            )
         )::-webkit-file-upload-button:hover {
         background-color: #000;
       }
       #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;
       }
@@ -193,7 +196,7 @@ test('pseudo-elements are appended after the `:-webkit-any()`', () => {
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       ${defaults}
-      #app :is(.dark .dark\:before\:flex):before {
+      #app :is(:where(.dark) .dark\:before\:flex):before {
         content: var(--tw-content);
         display: flex;
       }
diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js
@@ -304,7 +304,7 @@ test('it works', () => {
       }
       .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 {
@@ -339,7 +339,7 @@ test('it works', () => {
       .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));
       }
@@ -744,9 +744,6 @@ test('it works', () => {
           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;
@@ -792,9 +789,6 @@ test('it works', () => {
             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 {
@@ -812,6 +806,16 @@ test('it works', () => {
           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/plugins/variants/__snapshots__/darkVariants.test.js.snap b/tests/plugins/variants/__snapshots__/darkVariants.test.js.snap
@@ -12,15 +12,15 @@ exports[`should test the 'darkVariants' plugin 1`] = `
 
 exports[`should test the 'darkVariants' plugin 2`] = `
 "
-:is(.dark .dark\\:flex) {
+:is(:where(.dark) .dark\\:flex) {
   display: flex;
 }
 "
 `;
 
 exports[`should test the 'darkVariants' plugin 3`] = `
 "
-:is(.my-dark-mode .dark\\:flex) {
+:is(:where(.my-dark-mode) .dark\\:flex) {
   display: flex;
 }
 "
diff --git a/tests/plugins/variants/__snapshots__/directionVariants.test.js.snap b/tests/plugins/variants/__snapshots__/directionVariants.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`should test the 'directionVariants' plugin 1`] = `
 "
-:is([dir="ltr"] .ltr\\:flex), :is([dir="rtl"] .rtl\\:flex) {
+:is(:where([dir="ltr"]) .ltr\\:flex), :is(:where([dir="rtl"]) .rtl\\:flex) {
   display: flex;
 }
 "
diff --git a/tests/prefix.test.js b/tests/prefix.test.js
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
`@@ -215,14 +215,14 @@ test('@apply', () => {`
`215`	`215`	`text-align: left;`
`216`	`216`	`}`
`217`	`217`	`}`
`218`		`- :is(.dark .apply-dark-variant) {`
	`218`	`+ :is(:where(.dark) .apply-dark-variant) {`
`219`	`219`	`text-align: center;`
`220`	`220`	`}`
`221`		`- :is(.dark .apply-dark-variant:hover) {`
	`221`	`+ :is(:where(.dark) .apply-dark-variant:hover) {`
`222`	`222`	`text-align: right;`
`223`	`223`	`}`
`224`	`224`	`@media (min-width: 1024px) {`
`225`		`- :is(.dark .apply-dark-variant) {`
	`225`	`+ :is(:where(.dark) .apply-dark-variant) {`
`226`	`226`	`text-align: left;`
`227`	`227`	`}`
`228`	`228`	`}`
`@@ -2016,24 +2016,28 @@ it('pseudo elements inside apply are moved outside of :is() or :has()', () => {`
`2016`	`2016`
`2017`	`2017`	`return run(input, config).then((result) => {`
`2018`	`2018`	expect(result.css).toMatchFormattedCss(css`
`2019`		`- :is(.dark .foo):before,`
`2020`		`- :is([dir='rtl'] :is(.dark .bar)):before,`
`2021`		`- :is([dir='rtl'] :is(.dark .baz:hover)):before {`
	`2019`	`+ :is(:where(.dark) .foo):before,`
	`2020`	`+ :is(:where([dir='rtl']) :is(:where(.dark) .bar)):before,`
	`2021`	`+ :is(:where([dir='rtl']) :is(:where(.dark) .baz:hover)):before {`
`2022`	`2022`	`background-color: #000;`
`2023`	`2023`	`}`
`2024`		`- :-webkit-any([dir='rtl'] :-webkit-any(.dark .qux))::-webkit-file-upload-button:hover {`
	`2024`	`+ :-webkit-any(`
	`2025`	`+ :where([dir='rtl']) :-webkit-any(:where(.dark) .qux)`
	`2026`	`+ )::-webkit-file-upload-button:hover {`
`2025`	`2027`	`background-color: #000;`
`2026`	`2028`	`}`
`2027`		`- :is([dir='rtl'] :is(.dark .qux))::file-selector-button:hover {`
	`2029`	`+ :is(:where([dir='rtl']) :is(:where(.dark) .qux))::file-selector-button:hover {`
`2028`	`2030`	`background-color: #000;`
`2029`	`2031`	`}`
`2030`		`- :is([dir='rtl'] :is(.dark .steve):hover):before {`
	`2032`	`+ :is(:where([dir='rtl']) :is(:where(.dark) .steve):hover):before {`
`2031`	`2033`	`background-color: #000;`
`2032`	`2034`	`}`
`2033`		`- :-webkit-any([dir='rtl'] :-webkit-any(.dark .bob))::-webkit-file-upload-button:hover {`
	`2035`	`+ :-webkit-any(`
	`2036`	`+ :where([dir='rtl']) :-webkit-any(:where(.dark) .bob)`
	`2037`	`+ )::-webkit-file-upload-button:hover {`
`2034`	`2038`	`background-color: #000;`
`2035`	`2039`	`}`
`2036`		`- :is([dir='rtl'] :is(.dark .bob))::file-selector-button:hover {`
	`2040`	`+ :is(:where([dir='rtl']) :is(:where(.dark) .bob))::file-selector-button:hover {`
`2037`	`2041`	`background-color: #000;`
`2038`	`2042`	`}`
`2039`	`2043`	`:has([dir='rtl'] .foo:hover):before {`
Original file line number	Diff line number	Diff line change
`@@ -22,22 +22,22 @@ test('custom separator', () => {`
`22`	`22`	`.group:hover .group-hover_focus-within_text-left:focus-within {`
`23`	`23`	`text-align: left;`
`24`	`24`	`}`
`25`		`- :is([dir='rtl'] .rtl_active_text-center:active) {`
`26`		`- text-align: center;`
`27`		`- }`
`28`	`25`	`@media (prefers-reduced-motion: no-preference) {`
`29`	`26`	`.motion-safe_hover_text-center:hover {`
`30`	`27`	`text-align: center;`
`31`	`28`	`}`
`32`	`29`	`}`
`33`		`- :is(.dark .dark_focus_text-left:focus) {`
`34`		`- text-align: left;`
`35`		`- }`
`36`	`30`	`@media (min-width: 768px) {`
`37`	`31`	`.md_hover_text-right:hover {`
`38`	`32`	`text-align: right;`
`39`	`33`	`}`
`40`	`34`	`}`
	`35`	`+ :is(:where([dir='rtl']) .rtl_active_text-center:active) {`
	`36`	`+ text-align: center;`
	`37`	`+ }`
	`38`	`+ :is(:where(.dark) .dark_focus_text-left:focus) {`
	`39`	`+ text-align: left;`
	`40`	`+ }`
`41`	`41`	`)
`42`	`42`	`})`
`43`	`43`	`})`
Original file line number	Diff line number	Diff line change
`@@ -137,22 +137,22 @@ test('important boolean', () => {`
`137`	`137`	`.group:hover .group-hover\:focus-within\:text-left:focus-within {`
`138`	`138`	`text-align: left !important;`
`139`	`139`	`}`
`140`		`- :is([dir='rtl'] .rtl\:active\:text-center:active) {`
`141`		`- text-align: center !important;`
`142`		`- }`
`143`	`140`	`@media (prefers-reduced-motion: no-preference) {`
`144`	`141`	`.motion-safe\:hover\:text-center:hover {`
`145`	`142`	`text-align: center !important;`
`146`	`143`	`}`
`147`	`144`	`}`
`148`		`- :is(.dark .dark\:focus\:text-left:focus) {`
`149`		`- text-align: left !important;`
`150`		`- }`
`151`	`145`	`@media (min-width: 768px) {`
`152`	`146`	`.md\:hover\:text-right:hover {`
`153`	`147`	`text-align: right !important;`
`154`	`148`	`}`
`155`	`149`	`}`
	`150`	`+ :is(:where([dir='rtl']) .rtl\:active\:text-center:active) {`
	`151`	`+ text-align: center !important;`
	`152`	`+ }`
	`153`	`+ :is(:where(.dark) .dark\:focus\:text-left:focus) {`
	`154`	`+ text-align: left !important;`
	`155`	`+ }`
`156`	`156`	`)
`157`	`157`	`})`
`158`	`158`	`})`