Add SVG attributes support to no-unknown-property (fixes #318)

Author: yannickcr

lib/rules/no-unknown-property.js

@@ -18,6 +18,7 @@ var DOM_ATTRIBUTE_NAMES = {
 };
 
 var DOM_PROPERTY_NAMES = [
+  // Standard
   'acceptCharset', 'accessKey', 'allowFullScreen', 'allowTransparency', 'autoComplete', 'autoFocus', 'autoPlay',
   'cellPadding', 'cellSpacing', 'charSet', 'classID', 'className', 'colSpan', 'contentEditable', 'contextMenu',
   'crossOrigin', 'dateTime', 'encType', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget',
@@ -28,7 +29,20 @@ var DOM_PROPERTY_NAMES = [
   'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp', 'onPaste', 'onScroll', 'onSubmit', 'onTouchCancel',
   'onTouchEnd', 'onTouchMove', 'onTouchStart', 'onWheel',
   'radioGroup', 'readOnly', 'rowSpan', 'spellCheck', 'srcDoc', 'srcSet', 'tabIndex', 'useMap',
-  'itemProp', 'itemScope', 'itemType', 'itemRef', 'itemID'
+  // Non standard
+  'autoCapitalize', 'autoCorrect',
+  'autoSave',
+  'itemProp', 'itemScope', 'itemType', 'itemRef', 'itemID',
+  // SVG
+  'clipPath', 'cx', 'cy', 'd', 'dx', 'dy', 'fill', 'fillOpacity', 'fontFamily',
+  'fontSize', 'fx', 'fy', 'gradientTransform', 'gradientUnits', 'markerEnd',
+  'markerMid', 'markerStart', 'offset', 'opacity', 'patternContentUnits',
+  'patternUnits', 'points', 'preserveAspectRatio', 'r', 'rx', 'ry', 'spreadMethod',
+  'stopColor', 'stopOpacity', 'stroke', 'strokeDasharray', 'strokeLinecap',
+  'strokeOpacity', 'strokeWidth', 'textAnchor', 'transform', 'version',
+  'viewBox', 'x1', 'x2', 'x', 'y1', 'y2', 'y',
+  'xlink:Actuate', 'xlink:Arcrole', 'xlink:Href', 'xlink:Role', 'xlink:Show', 'xlink:Title', 'xlink:Type',
+  'xml:Base', 'xml:Lang', 'xml:Space'
 ];
 
 // ------------------------------------------------------------------------------
@@ -69,7 +83,7 @@ function getStandardName(name) {
     i = index;
     return element.toLowerCase() === name;
   });
-  return found ? DOM_PROPERTY_NAMES[i] : null;
+  return found ? DOM_PROPERTY_NAMES[i].replace(':', '') : null;
 }
 
 // ------------------------------------------------------------------------------
@@ -81,12 +95,13 @@ module.exports = function(context) {
   return {
 
     JSXAttribute: function(node) {
-      var standardName = getStandardName(node.name.name);
+      var name = context.getSource(node.name);
+      var standardName = getStandardName(name);
       if (!isTagName(node) || !standardName) {
         return;
       }
       context.report(node, UNKNOWN_MESSAGE, {
-        name: node.name.name,
+        name: name,
         standardName: standardName
       });
     }

tests/lib/rules/no-unknown-property.js

@@ -23,6 +23,7 @@ ruleTester.run('no-unknown-property', rule, {
     {code: '<App for="bar" />;', ecmaFeatures: {jsx: true}},
     {code: '<App accept-charset="bar" />;', ecmaFeatures: {jsx: true}},
     {code: '<App http-equiv="bar" />;', ecmaFeatures: {jsx: true}},
+    {code: '<App xlink:href="bar" />;', ecmaFeatures: {jsx: true}},
     {code: '<div className="bar"></div>;', ecmaFeatures: {jsx: true}},
     {code: '<div data-foo="bar"></div>;', ecmaFeatures: {jsx: true}},
     {code: '<div class="foo" is="my-elem"></div>;', ecmaFeatures: {jsx: true}},
@@ -56,6 +57,10 @@ ruleTester.run('no-unknown-property', rule, {
   }, {
     code: '<div onmousedown="bar"></div>;',
     errors: [{message: 'Unknown property \'onmousedown\' found, use \'onMouseDown\' instead'}],
-    ecmaFeatures: {jsx: true}}
-  ]
+    ecmaFeatures: {jsx: true}
+  }, {
+    code: '<use xlink:href="bar" />;',
+    errors: [{message: 'Unknown property \'xlink:href\' found, use \'xlinkHref\' instead'}],
+    ecmaFeatures: {jsx: true}
+  }]
 });