Fix false positives for SVG type selectors in selector-type-case (#5717)

Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>
stylelint · Nov 14, 2021 · b37ab72 · b37ab72
1 parent abc3795
commit b37ab72
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 0 deletions.
diff --git a/lib/reference/keywordSets.js b/lib/reference/keywordSets.js
@@ -679,6 +679,42 @@ keywordSets.nonStandardHtmlTags = new Set([
 	'xmp',
 ]);
 
+// extracted from https://developer.mozilla.org/en-US/docs/Web/SVG/Element
+keywordSets.validMixedCaseSvgElements = new Set([
+	'animateMotion',
+	'animateTransform',
+	'clipPath',
+	'feBlend',
+	'feColorMatrix',
+	'feComponentTransfer',
+	'feComposite',
+	'feConvolveMatrix',
+	'feDiffuseLighting',
+	'feDisplacementMap',
+	'feDistantLight',
+	'feDropShadow',
+	'feFlood',
+	'feFuncA',
+	'feFuncB',
+	'feFuncG',
+	'feFuncR',
+	'feGaussianBlur',
+	'feImage',
+	'feMerge',
+	'feMergeNode',
+	'feMorphology',
+	'feOffset',
+	'fePointLight',
+	'feSpecularLighting',
+	'feSpotLight',
+	'feTile',
+	'feTurbulence',
+	'foreignObject',
+	'linearGradient',
+	'radialGradient',
+	'textPath',
+]);
+
 /**
  * @param {(string[] | Set<string>)[]} args
  */

diff --git a/lib/rules/selector-type-case/__tests__/index.js b/lib/rules/selector-type-case/__tests__/index.js
@@ -95,6 +95,14 @@ testRule({
 			code: 'a /*comments */\n b {}',
 			description: 'comments in the selector',
 		},
+		{
+			code: 'foreignObject {}',
+			description: 'valid mixed-case svg elements',
+		},
+		{
+			code: 'html textPath { fill: red; }',
+			description: 'valid mixed-case svg elements',
+		},
 	],
 
 	reject: [

diff --git a/lib/rules/selector-type-case/index.js b/lib/rules/selector-type-case/index.js
@@ -11,6 +11,7 @@ const report = require('../../utils/report');
 const ruleMessages = require('../../utils/ruleMessages');
 const validateOptions = require('../../utils/validateOptions');
 const { isString } = require('../../utils/validateTypes');
+const keywordSets = require('../../reference/keywordSets');
 
 const ruleName = 'selector-type-case';
 
@@ -59,6 +60,10 @@ function rule(expectation, options, context) {
 						return;
 					}
 
+					if (keywordSets.validMixedCaseSvgElements.has(tag.value)) {
+						return;
+					}
+
 					if (optionsMatches(options, 'ignoreTypes', tag.value)) {
 						return;
 					}