From 8b4a2a6770c2dee5d7c21a73c7f6657d7bee21b2 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Wed, 27 Mar 2024 11:03:49 -0400
Subject: [PATCH] Change dark selector so `@apply` works correctly with pseudo
 elements (#13379)

* Change dark selector so `@apply` hoists pseudo elements properly

* Update tests

* Update changelog
---
 CHANGELOG.md            |  1 +
 src/corePlugins.js      |  2 +-
 tests/apply.test.js     | 37 +++++++++++++++++++++++++++++++++++++
 tests/dark-mode.test.js | 10 +++++-----
 4 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b954bf5058c8..6535c1eb304e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix missing `xx-large` and remove double `x-large` absolute size ([#13324](https://github.com/tailwindlabs/tailwindcss/pull/13324))
 - Don't error when encountering nested CSS unless trying to `@apply` a class that uses nesting ([#13325](https://github.com/tailwindlabs/tailwindcss/pull/13325))
 - Ensure that arbitrary properties respect `important` configuration ([#13353](https://github.com/tailwindlabs/tailwindcss/pull/13353))
+- Change dark mode selector so `@apply` works correctly with pseudo elements ([#13379](https://github.com/tailwindlabs/tailwindcss/pull/13379))
 
 ## [3.4.1] - 2024-01-05
 
diff --git a/src/corePlugins.js b/src/corePlugins.js
index 89aad9d54340..51675f931906 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -270,7 +270,7 @@ export let variantPlugins = {
       addVariant('dark', selector)
     } else if (mode === 'class') {
       // Old behavior
-      addVariant('dark', `:is(${selector} &)`)
+      addVariant('dark', `&:is(${selector} *)`)
     }
   },
 
diff --git a/tests/apply.test.js b/tests/apply.test.js
index 627c57404b24..db4ffee1f5b1 100644
--- a/tests/apply.test.js
+++ b/tests/apply.test.js
@@ -2212,3 +2212,40 @@ test('applying user defined classes with nested CSS should result in an error',
     `)
   })
 })
+
+test('applying classes with class-based dark variant to pseudo elements', async () => {
+  let config = {
+    darkMode: 'class',
+    content: [],
+  }
+
+  let input = css`
+    ::-webkit-scrollbar-track {
+      @apply bg-white dark:bg-black;
+    }
+    ::-webkit-scrollbar-track:hover {
+      @apply bg-blue-600 dark:bg-blue-500;
+    }
+  `
+
+  let result = await run(input, config)
+
+  expect(result.css).toMatchFormattedCss(css`
+    ::-webkit-scrollbar-track {
+      --tw-bg-opacity: 1;
+      background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+    }
+    :is(.dark *)::-webkit-scrollbar-track {
+      --tw-bg-opacity: 1;
+      background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+    }
+    ::-webkit-scrollbar-track:hover {
+      --tw-bg-opacity: 1;
+      background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+    }
+    :is(.dark *)::-webkit-scrollbar-track:hover {
+      --tw-bg-opacity: 1;
+      background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+    }
+  `)
+})
diff --git a/tests/dark-mode.test.js b/tests/dark-mode.test.js
index 613a6b4a1416..14585f4e3bd8 100644
--- 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) {
+      .dark\:font-bold:is(.dark *) {
         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) {
+      .dark\:font-bold:is(.test-dark *) {
         font-weight: 700;
       }
     `)
@@ -133,7 +133,7 @@ it('should support the deprecated `class` dark mode behavior', () => {
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
-      :is(.dark .dark\:font-bold) {
+      .dark\:font-bold:is(.dark *) {
         font-weight: 700;
       }
     `)
@@ -153,7 +153,7 @@ it('should support custom classes with  deprecated `class` dark mode', () => {
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
-      :is(.my-dark .dark\:font-bold) {
+      .dark\:font-bold:is(.my-dark *) {
         font-weight: 700;
       }
     `)
@@ -181,7 +181,7 @@ it('should use legacy sorting when using `darkMode: class`', () => {
         --tw-text-opacity: 1;
         color: rgb(187 247 208 / var(--tw-text-opacity));
       }
-      :is(.dark .dark\:text-green-100) {
+      .dark\:text-green-100:is(.dark *) {
         --tw-text-opacity: 1;
         color: rgb(220 252 231 / var(--tw-text-opacity));
       }