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} */ 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',