fix: reject unknown pseudo-classes which names clash with existing ps…

…eudo-elements
stylelint · Jun 23, 2023 · 97fbac7 · 97fbac7
1 parent 68fee2f
commit 97fbac7
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/.changeset/great-feet-brake.md b/.changeset/great-feet-brake.md
@@ -0,0 +1,5 @@
+---
+"stylelint": patch
+---
+
+Fixed: reject unknown pseudo-classes even if their names match with existing pseudo-elements
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,8 +69,13 @@ const rule = (primary, secondaryOptions) => {
 						return;
 					}
 
+					const name = value.replace(/^:*/, '').toLowerCase();
+					const isPseudoElement =
+						value.slice(0, 2) === '::' || levelOneAndTwoPseudoElements.has(name);
+					const hasVendorPrefix = vendor.prefix(name);
+
 					// Ignore pseudo-elements
-					if (value.slice(0, 2) === '::') {
+					if (isPseudoElement) {
 						return;
 					}
 
@@ -78,16 +84,17 @@ const rule = (primary, secondaryOptions) => {
 					}
 
 					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;
 						}