From 7b4de46d2fe34f683ae9c0e98ce244d9e305fd2f Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 27 Apr 2023 12:21:28 -0400
Subject: [PATCH] Fix issues with some pseudo-elements (#11111)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix issues with some pseudo-elements

We’ve included pseudo elements for backdrop, marker, placeholder, and selection and they were all “jumpable” before we made changes in v3.3.2. Ideally they wouldn’t be because if they ever eventually have any interactivity that could become a problem.

* Update changelog
---
 CHANGELOG.md                          | 4 +++-
 src/util/pseudoElements.js            | 8 ++++----
 tests/format-variant-selector.test.js | 4 ++++
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fd899dc53..3cf4472eb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Fix issue where some pseudo-element variants generated the wrong selector ([#10943](https://github.com/tailwindlabs/tailwindcss/pull/10943), [#10962](https://github.com/tailwindlabs/tailwindcss/pull/10962), [#11111](https://github.com/tailwindlabs/tailwindcss/pull/11111))
 
 ## [3.3.2] - 2023-04-25
 
diff --git a/src/util/pseudoElements.js b/src/util/pseudoElements.js
index 9f0e54c67..30466ec2c 100644
--- a/src/util/pseudoElements.js
+++ b/src/util/pseudoElements.js
@@ -26,17 +26,17 @@
 /** @type {Record<string, PseudoProperty[]>} */
 let elementProperties = {
   '::after': ['terminal', 'jumpable'],
-  '::backdrop': ['terminal'],
+  '::backdrop': ['terminal', 'jumpable'],
   '::before': ['terminal', 'jumpable'],
   '::cue': ['terminal'],
   '::cue-region': ['terminal'],
   '::first-letter': ['terminal', 'jumpable'],
   '::first-line': ['terminal', 'jumpable'],
   '::grammar-error': ['terminal'],
-  '::marker': ['terminal'],
+  '::marker': ['terminal', 'jumpable'],
   '::part': ['terminal', 'actionable'],
-  '::placeholder': ['terminal'],
-  '::selection': ['terminal'],
+  '::placeholder': ['terminal', 'jumpable'],
+  '::selection': ['terminal', 'jumpable'],
   '::slotted': ['terminal'],
   '::spelling-error': ['terminal'],
   '::target-text': ['terminal'],
diff --git a/tests/format-variant-selector.test.js b/tests/format-variant-selector.test.js
index 0cd0b05ff..9a53f3aac 100644
--- a/tests/format-variant-selector.test.js
+++ b/tests/format-variant-selector.test.js
@@ -352,6 +352,10 @@ crosscheck(() => {
       ${'#app :is(:is(.dark &)::before)'}                      | ${'#app :is(:is(.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'}
+      ${'.parent::selection li'}                               | ${'.parent li::selection'}
+      ${'.parent::placeholder input'}                          | ${'.parent input::placeholder'}
+      ${'.parent::backdrop dialog'}                            | ${'.parent dialog::backdrop'}
     `('should translate "$before" into "$after"', ({ before, after }) => {
       let result = finalizeSelector('.a', [{ format: before, isArbitraryVariant: false }], {
         candidate: 'a',