From ef056a57d31a14417fa4dc1509bc0e2d30feae29 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 fd899dc532aa..0a8b0e891476 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))
 
 ## [3.3.2] - 2023-04-25
 
diff --git a/src/util/pseudoElements.js b/src/util/pseudoElements.js
index 9f0e54c67948..30466ec2ca36 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 0cd0b05ffd76..9a53f3aacbeb 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',