[Fix] no-unknown-property: allowTransparency does not exist in Reac…

…t >= v16.1
jsx-eslint · Nov 15, 2017 · fd3cebb · fd3cebb
1 parent 0f8d790
commit fd3cebb
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js
@@ -6,6 +6,7 @@
 'use strict';
 
 const docsUrl = require('../util/docsUrl');
+const versionUtil = require('../util/version');
 
 // ------------------------------------------------------------------------------
 // Constants
@@ -117,7 +118,7 @@ const SVGDOM_ATTRIBUTE_NAMES = {
 
 const DOM_PROPERTY_NAMES = [
   // Standard
-  'acceptCharset', 'accessKey', 'allowFullScreen', 'allowTransparency', 'autoComplete', 'autoFocus', 'autoPlay',
+  'acceptCharset', 'accessKey', 'allowFullScreen', 'autoComplete', 'autoFocus', 'autoPlay',
   'cellPadding', 'cellSpacing', 'classID', 'className', 'colSpan', 'contentEditable', 'contextMenu',
   'dateTime', 'encType', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget',
   'frameBorder', 'hrefLang', 'htmlFor', 'httpEquiv', 'inputMode', 'keyParams', 'keyType', 'marginHeight', 'marginWidth',
@@ -133,6 +134,13 @@ const DOM_PROPERTY_NAMES = [
   'autoSave',
   'itemProp', 'itemScope', 'itemType', 'itemRef', 'itemID'
 ];
+function getDOMPropertyNames(context) {
+  // this was removed in React v16.1+, see https://github.com/facebook/react/pull/10823
+  if (!versionUtil.testReactVersion(context, '16.1.0')) {
+    return ['allowTransparency'].concat(DOM_PROPERTY_NAMES);
+  }
+  return DOM_PROPERTY_NAMES;
+}
 
 // ------------------------------------------------------------------------------
 // Helpers
@@ -185,21 +193,23 @@ function tagNameHasDot(node) {
 /**
  * Get the standard name of the attribute.
  * @param {String} name - Name of the attribute.
+ * @param {String} context - eslint context
  * @returns {String} The standard name of the attribute.
  */
-function getStandardName(name) {
+function getStandardName(name, context) {
   if (DOM_ATTRIBUTE_NAMES[name]) {
     return DOM_ATTRIBUTE_NAMES[name];
   }
   if (SVGDOM_ATTRIBUTE_NAMES[name]) {
     return SVGDOM_ATTRIBUTE_NAMES[name];
   }
   let i = -1;
-  const found = DOM_PROPERTY_NAMES.some((element, index) => {
+  const names = getDOMPropertyNames(context);
+  const found = names.some((element, index) => {
     i = index;
     return element.toLowerCase() === name;
   });
-  return found ? DOM_PROPERTY_NAMES[i] : null;
+  return found ? names[i] : null;
 }
 
 // ------------------------------------------------------------------------------
@@ -262,7 +272,7 @@ module.exports = {
           });
         }
 
-        const standardName = getStandardName(name);
+        const standardName = getStandardName(name, context);
         if (!isTagName(node) || !standardName) {
           return;
         }

diff --git a/lib/util/version.js b/lib/util/version.js
@@ -35,7 +35,7 @@ function detectReactVersion() {
 function getReactVersionFromContext(context) {
   let confVer = '999.999.999';
   // .eslintrc shared settings (http://eslint.org/docs/user-guide/configuring#adding-shared-settings)
-  if (context.settings.react && context.settings.react.version) {
+  if (context.settings && context.settings.react && context.settings.react.version) {
     let settingsVersion = context.settings.react.version;
     if (settingsVersion === 'detect') {
       settingsVersion = detectReactVersion();