Improve relative precedence of rtl, ltr, forced-colors and `dar…

…k` variants (#12584) * 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 <4323180+adamwathan@users.noreply.github.com>
tailwindlabs · Dec 18, 2023 · fbdb858 · fbdb858
1 parent dae4618
commit fbdb858
Show file tree

Hide file tree

Showing 15 changed files with 196 additions and 131 deletions.
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;
+          }
+        }
       `)
     })
   })