Fix SVG attributes support for no-unknown-property (fixes #338)

Author: yannickcr

lib/rules/no-unknown-property.js

@@ -11,10 +11,36 @@
 var UNKNOWN_MESSAGE = 'Unknown property \'{{name}}\' found, use \'{{standardName}}\' instead';
 
 var DOM_ATTRIBUTE_NAMES = {
+  // Standard
   'accept-charset': 'acceptCharset',
   class: 'className',
   for: 'htmlFor',
-  'http-equiv': 'httpEquiv'
+  'http-equiv': 'httpEquiv',
+  // SVG
+  'clip-path': 'clipPath',
+  'fill-opacity': 'fillOpacity',
+  'font-family': 'fontFamily',
+  'font-size': 'fontSize',
+  'marker-end': 'markerEnd',
+  'marker-mid': 'markerMid',
+  'marker-start': 'markerStart',
+  'stop-color': 'stopColor',
+  'stop-opacity': 'stopOpacity',
+  'stroke-dasharray': 'strokeDasharray',
+  'stroke-linecap': 'strokeLinecap',
+  'stroke-opacity': 'strokeOpacity',
+  'stroke-width': 'strokeWidth',
+  'text-anchor': 'textAnchor',
+  'xlink:actuate': 'xlinkActuate',
+  'xlink:arcrole': 'xlinkArcrole',
+  'xlink:href': 'xlinkHref',
+  'xlink:role': 'xlinkRole',
+  'xlink:show': 'xlinkShow',
+  'xlink:title': 'xlinkTitle',
+  'xlink:type': 'xlinkType',
+  'xml:base': 'xmlBase',
+  'xml:lang': 'xmlLang',
+  'xml:space': 'xmlSpace'
 };
 
 var DOM_PROPERTY_NAMES = [
@@ -32,17 +58,7 @@ var DOM_PROPERTY_NAMES = [
   // 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'
+  'itemProp', 'itemScope', 'itemType', 'itemRef', 'itemID'
 ];
 
 // ------------------------------------------------------------------------------
@@ -83,7 +99,7 @@ function getStandardName(name) {
     i = index;
     return element.toLowerCase() === name;
   });
-  return found ? DOM_PROPERTY_NAMES[i].replace(':', '') : null;
+  return found ? DOM_PROPERTY_NAMES[i] : null;
 }
 
 // ------------------------------------------------------------------------------

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

@@ -24,6 +24,7 @@ ruleTester.run('no-unknown-property', rule, {
     {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: '<App clip-path="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}},
@@ -62,5 +63,9 @@ ruleTester.run('no-unknown-property', rule, {
     code: '<use xlink:href="bar" />;',
     errors: [{message: 'Unknown property \'xlink:href\' found, use \'xlinkHref\' instead'}],
     ecmaFeatures: {jsx: true}
+  }, {
+    code: '<rect clip-path="bar" />;',
+    errors: [{message: 'Unknown property \'clip-path\' found, use \'clipPath\' instead'}],
+    ecmaFeatures: {jsx: true}
   }]
 });