Change dark selector so @apply works correctly with pseudo elements (#13379)

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

* Update tests

* Update changelog

Author: thecrypticace

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
 

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} *)`)
     }
   },
 

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));
+    }
+  `)
+})

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