SVG elements ignored with tagname-lowercase rule (#1795)

The following SVG elements are ignored:

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

Author: coliff

dist/core/rules/tagname-lowercase.js

@@ -1,17 +1,91 @@
 import { Rule } from '../types'
 
+const svgTagNameIgnores = [
+  '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',
+]
+
+/**
+ * testAgainstStringOrRegExp
+ *
+ * @param value string to test
+ * @param comparison raw string or regex string
+ */
+function testAgainstStringOrRegExp(value: string, comparison: string | RegExp) {
+  // If it's a RegExp, test directly
+  if (comparison instanceof RegExp) {
+    return comparison.test(value)
+      ? { match: value, pattern: comparison }
+      : false
+  }
+
+  // Check if it's RegExp in a string
+  const firstComparisonChar = comparison[0]
+  const lastComparisonChar = comparison[comparison.length - 1]
+  const secondToLastComparisonChar = comparison[comparison.length - 2]
+
+  const comparisonIsRegex =
+    firstComparisonChar === '/' &&
+    (lastComparisonChar === '/' ||
+      (secondToLastComparisonChar === '/' && lastComparisonChar === 'i'))
+
+  const hasCaseInsensitiveFlag = comparisonIsRegex && lastComparisonChar === 'i'
+
+  // If so, create a new RegExp from it
+  if (comparisonIsRegex) {
+    const valueMatches = hasCaseInsensitiveFlag
+      ? new RegExp(comparison.slice(1, -2), 'i').test(value)
+      : new RegExp(comparison.slice(1, -1)).test(value)
+
+    return valueMatches
+  }
+
+  // Otherwise, it's a string. Do a strict comparison
+  return value === comparison
+}
+
 export default {
   id: 'tagname-lowercase',
   description: 'All html element names must be in lowercase.',
   init(parser, reporter, options) {
-    const exceptions: Array<string | boolean> = Array.isArray(options)
-      ? options
-      : []
+    const exceptions = (Array.isArray(options) ? options : []).concat(
+      svgTagNameIgnores
+    )
 
     parser.addListener('tagstart,tagend', (event) => {
       const tagName = event.tagName
       if (
-        exceptions.indexOf(tagName) === -1 &&
+        !exceptions.find((exp) => testAgainstStringOrRegExp(tagName, exp)) &&
         tagName !== tagName.toLowerCase()
       ) {
         reporter.error(

src/core/rules/tagname-lowercase.ts

@@ -56,7 +56,7 @@ export interface Ruleset {
   'tag-no-obsolete'?: boolean
   'tag-pair'?: boolean
   'tag-self-close'?: boolean
-  'tagname-lowercase'?: boolean
+  'tagname-lowercase'?: boolean | Array<string | RegExp>
   'tagname-specialchars'?: boolean
   'tags-check'?: { [tagName: string]: Record<string, unknown> }
   'title-require'?: boolean

src/core/types.ts

@@ -29,4 +29,27 @@ describe(`Rules: ${ruleId}`, () => {
     const messages = HTMLHint.verify(code, ruleOptions)
     expect(messages.length).toBe(0)
   })
+
+  it('Known SVG elements should be ignored with no config', () => {
+    const code =
+      '<svg><animateMotion /><linearGradient /><foreignObject /><textPath /></svg>'
+    const messages = HTMLHint.verify(code, ruleOptions)
+    expect(messages.length).toBe(0)
+  })
+
+  it('Known SVG elements should be ignored with a config override', () => {
+    const code = '<svg><feGaussianBlur /><radialGradient /></svg>'
+    ruleOptions[ruleId] = ['customTag']
+    const messages = HTMLHint.verify(code, ruleOptions)
+    expect(messages.length).toBe(0)
+    ruleOptions[ruleId] = true
+  })
+
+  it('Set to array list should not result in an error', () => {
+    const code = '<CustomComponent /><AnotherCamelCase />'
+    ruleOptions[ruleId] = ['CustomComponent', 'AnotherCamelCase']
+    const messages = HTMLHint.verify(code, ruleOptions)
+    expect(messages.length).toBe(0)
+    ruleOptions[ruleId] = true
+  })
 })

test/rules/tagname-lowercase.spec.js

@@ -14,14 +14,20 @@ Level: <Badge text="Error" variant="danger" />
 
 - `true`: enable rule
 - `false`: disable rule
-- `['clipPath', 'data-Test']`: Ignore some tagname name
+- `['clipPath', 'data-Test']`: enable rule except for the given tag names. All SVG camelCase elements are included, for example `linearGradient`, `foreignObject`
 
 ### The following patterns are **not** considered rule violations
 
 ```html
 <span><div>
 ```
 
+SVG elements with camelCase names (e.g. `linearGradient`, `foreignObject`) are allowed:
+
+```html
+<svg><linearGradient /><foreignObject /><textPath /></svg>
+```
+
 ### The following pattern is considered a rule violation:
 
 ```html