Fix selector-pseudo-class-no-unknown false negatives for pseudo-ele…

…ments with matching names (#6964) fix: reject unknown pseudo-classes which names clash with existing pseudo-elements
stylelint · Jun 26, 2023 · 5be9a7b · 5be9a7b
1 parent 5abe468
commit 5be9a7b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git a/.changeset/great-feet-brake.md b/.changeset/great-feet-brake.md
@@ -0,0 +1,5 @@
+---
+"stylelint": patch
+---
+
+Fixed: `selector-pseudo-class-no-unknown` false negatives for pseudo-elements with matching names
diff --git a/lib/rules/selector-pseudo-class-no-unknown/__tests__/index.js b/lib/rules/selector-pseudo-class-no-unknown/__tests__/index.js
@@ -202,6 +202,22 @@ testRule({
 			endLine: 1,
 			endColumn: 7,
 		},
+		{
+			code: ':slotted {}',
+			message: messages.rejected(':slotted'),
+			line: 1,
+			column: 1,
+			endLine: 1,
+			endColumn: 9,
+		},
+		{
+			code: ':placeholder {}',
+			message: messages.rejected(':placeholder'),
+			line: 1,
+			column: 1,
+			endLine: 1,
+			endColumn: 13,
+		},
 		{
 			code: '@page :blank:unknown { }',
 			message: messages.rejected(':unknown'),

diff --git a/lib/rules/selector-pseudo-class-no-unknown/index.js b/lib/rules/selector-pseudo-class-no-unknown/index.js
@@ -7,6 +7,7 @@ const isStandardSyntaxRule = require('../../utils/isStandardSyntaxRule');
 const isStandardSyntaxSelector = require('../../utils/isStandardSyntaxSelector');
 const {
 	atRulePagePseudoClasses,
+	levelOneAndTwoPseudoElements,
 	pseudoClasses,
 	pseudoElements,
 	webkitScrollbarPseudoClasses,
@@ -68,26 +69,33 @@ const rule = (primary, secondaryOptions) => {
 						return;
 					}
 
-					// Ignore pseudo-elements
-					if (value.slice(0, 2) === '::') {
+					if (value.startsWith('::')) {
+						return;
+					}
+
+					const name = value.replace(/^:*/, '').toLowerCase();
+
+					if (levelOneAndTwoPseudoElements.has(name)) {
 						return;
 					}
 
 					if (optionsMatches(secondaryOptions, 'ignorePseudoClasses', pseudoNode.value.slice(1))) {
 						return;
 					}
 
+					const hasVendorPrefix = vendor.prefix(name);
 					let index = null;
-					const name = value.slice(1).toLowerCase();
 
 					if (isAtRule(node) && node.name === 'page') {
 						if (atRulePagePseudoClasses.has(name)) {
 							return;
 						}
 
 						index = atRuleParamIndex(node) + pseudoNode.sourceIndex;
+					} else if (pseudoElements.has(name) && !hasVendorPrefix) {
+						index = pseudoNode.sourceIndex;
 					} else {
-						if (vendor.prefix(name) || pseudoClasses.has(name) || pseudoElements.has(name)) {
+						if (hasVendorPrefix || pseudoClasses.has(name)) {
 							return;
 						}