feat(attr-lowercase): ignore camelCase SVG attributes

Closes #542
htmlhint · Dec 31, 2021 · aa16722 · aa16722
1 parent 989d0eb
commit aa16722
Show file tree

Hide file tree

Showing 6 changed files with 252 additions and 7 deletions.
diff --git a/dist/core/rules/attr-lowercase.js b/dist/core/rules/attr-lowercase.js
diff --git a/dist/htmlhint.js b/dist/htmlhint.js
@@ -336,6 +336,79 @@
 	var attrLowercase = {};
 
 	Object.defineProperty(attrLowercase, "__esModule", { value: true });
+	const svgIgnores = [
+	    'allowReorder',
+	    'attributeName',
+	    'attributeType',
+	    'autoReverse',
+	    'baseFrequency',
+	    'baseProfile',
+	    'calcMode',
+	    'clipPath',
+	    'clipPathUnits',
+	    'contentScriptType',
+	    'contentStyleType',
+	    'diffuseConstant',
+	    'edgeMode',
+	    'externalResourcesRequired',
+	    'filterRes',
+	    'filterUnits',
+	    'glyphRef',
+	    'gradientTransform',
+	    'gradientUnits',
+	    'kernelMatrix',
+	    'kernelUnitLength',
+	    'keyPoints',
+	    'keySplines',
+	    'keyTimes',
+	    'lengthAdjust',
+	    'limitingConeAngle',
+	    'markerHeight',
+	    'markerUnits',
+	    'markerWidth',
+	    'maskContentUnits',
+	    'maskUnits',
+	    'numOctaves',
+	    'onBlur',
+	    'onChange',
+	    'onClick',
+	    'onFocus',
+	    'onKeyUp',
+	    'onLoad',
+	    'pathLength',
+	    'patternContentUnits',
+	    'patternTransform',
+	    'patternUnits',
+	    'pointsAtX',
+	    'pointsAtY',
+	    'pointsAtZ',
+	    'preserveAlpha',
+	    'preserveAspectRatio',
+	    'primitiveUnits',
+	    'refX',
+	    'refY',
+	    'repeatCount',
+	    'repeatDur',
+	    'requiredExtensions',
+	    'requiredFeatures',
+	    'specularConstant',
+	    'specularExponent',
+	    'spreadMethod',
+	    'startOffset',
+	    'stdDeviation',
+	    'stitchTiles',
+	    'surfaceScale',
+	    'systemLanguage',
+	    'tableValues',
+	    'targetX',
+	    'targetY',
+	    'textLength',
+	    'viewBox',
+	    'viewTarget',
+	    'xChannelSelector',
+	    'yChannelSelector',
+	    'zoomAndPan',
+	];
 	function testAgainstStringOrRegExp(value, comparison) {
 	    if (comparison instanceof RegExp) {
 	        return comparison.test(value)
@@ -361,7 +434,7 @@
 	    id: 'attr-lowercase',
 	    description: 'All attribute names must be in lowercase.',
 	    init(parser, reporter, options) {
-	        const exceptions = Array.isArray(options) ? options : [];
+	        const exceptions = (Array.isArray(options) ? options : []).concat(svgIgnores);
 	        parser.addListener('tagstart', (event) => {
 	            const attrs = event.attrs;
 	            let attr;

diff --git a/dist/htmlhint.min.js b/dist/htmlhint.min.js
diff --git a/docs/user-guide/rules/attr-lowercase.md b/docs/user-guide/rules/attr-lowercase.md
@@ -11,14 +11,14 @@ Level: `error`
 
 1. true: enable rule
 2. false: disable rule
-3. ['viewBox', 'Test']: enable rule except for the given attribute names
+3. ['fooBar', 'Test']: enable rule except for the given attribute names. All SVG camelCase properties are included, for example `viewBox`
 
 ### Example
 
 ```json
 {
   ...
-  "attr-lowercase": ['viewBox']
+  "attr-lowercase": ['fooBar']
   ...
 }
 ```
@@ -28,6 +28,9 @@ The following pattern is **not** considered a rule violation:
 <!-- prettier-ignore -->
 ```html
 <img src="test.png" alt="test" />
+
+<!-- known SVG attributes are ignored -->
+<svg width="200" height="200" viewBox="0 0 200 200" />
 ```
 
 The following pattern is considered a rule violation:

diff --git a/src/core/rules/attr-lowercase.ts b/src/core/rules/attr-lowercase.ts
@@ -1,5 +1,79 @@
 import { Rule } from '../types'
 
+const svgIgnores = [
+  'allowReorder',
+  'attributeName',
+  'attributeType',
+  'autoReverse',
+  'baseFrequency',
+  'baseProfile',
+  'calcMode',
+  'clipPath',
+  'clipPathUnits',
+  'contentScriptType',
+  'contentStyleType',
+  'diffuseConstant',
+  'edgeMode',
+  'externalResourcesRequired',
+  'filterRes',
+  'filterUnits',
+  'glyphRef',
+  'gradientTransform',
+  'gradientUnits',
+  'kernelMatrix',
+  'kernelUnitLength',
+  'keyPoints',
+  'keySplines',
+  'keyTimes',
+  'lengthAdjust',
+  'limitingConeAngle',
+  'markerHeight',
+  'markerUnits',
+  'markerWidth',
+  'maskContentUnits',
+  'maskUnits',
+  'numOctaves',
+  'onBlur',
+  'onChange',
+  'onClick',
+  'onFocus',
+  'onKeyUp',
+  'onLoad',
+  'pathLength',
+  'patternContentUnits',
+  'patternTransform',
+  'patternUnits',
+  'pointsAtX',
+  'pointsAtY',
+  'pointsAtZ',
+  'preserveAlpha',
+  'preserveAspectRatio',
+  'primitiveUnits',
+  'refX',
+  'refY',
+  'repeatCount',
+  'repeatDur',
+  'requiredExtensions',
+  'requiredFeatures',
+  'specularConstant',
+  'specularExponent',
+  'spreadMethod',
+  'startOffset',
+  'stdDeviation',
+  'stitchTiles',
+  'surfaceScale',
+  'systemLanguage',
+  'tableValues',
+  'targetX',
+  'targetY',
+  'textLength',
+  'viewBox',
+  'viewTarget',
+  'xChannelSelector',
+  'yChannelSelector',
+  'zoomAndPan',
+]
+
 /**
  * testAgainstStringOrRegExp
  *
@@ -43,7 +117,9 @@ export default {
   id: 'attr-lowercase',
   description: 'All attribute names must be in lowercase.',
   init(parser, reporter, options) {
-    const exceptions = Array.isArray(options) ? options : []
+    const exceptions = (Array.isArray(options) ? options : []).concat(
+      svgIgnores
+    )
 
     parser.addListener('tagstart', (event) => {
       const attrs = event.attrs

diff --git a/test/rules/attr-lowercase.spec.js b/test/rules/attr-lowercase.spec.js
@@ -60,4 +60,24 @@ describe(`Rules: ${ruleId}`, () => {
     const messages = HTMLHint.verify(code, ruleOptions)
     expect(messages.length).to.be(0)
   })
+
+  it('Known SVG properties should be ignored with no config', () => {
+    const code = '<svg width="200" height="200" viewBox="0 0 200 200" />'
+    const messages = HTMLHint.verify(code, ruleOptions)
+    expect(messages.length).to.be(0)
+  })
+
+  it('Known SVG properties should be ignored with a config override', () => {
+    const code = '<svg width="200" height="200" viewBox="0 0 200 200" />'
+    ruleOptions[ruleId] = ['testBox']
+    const messages = HTMLHint.verify(code, ruleOptions)
+    expect(messages.length).to.be(0)
+  })
+
+  it('Double ignored SVG properties should not cause issues', () => {
+    const code = '<svg width="200" height="200" viewBox="0 0 200 200" />'
+    ruleOptions[ruleId] = ['viewBox']
+    const messages = HTMLHint.verify(code, ruleOptions)
+    expect(messages.length).to.be(0)
+  })
 })