Repository: jsx-eslint/eslint-plugin-react
Pull request #3713 (2024-03-15 01:04:13)

[Fix] `no-unknown-property`: only match `data-*` attributes containing `-`
This fixed behaviour with the `requireDataLowercase` option enabled:

1. For standard HTML elements, a attribute named `dataNotAnDataAttribute` now raises `unknownProp` instead of `dataLowercaseRequired`.
2. For React components, a attribute named `dataNotAnDataAttribute` no longer raise an error.

Also, I removed one useless capture group in this regexp.

Fixes: https://github.com/jsx-eslint/eslint-plugin-react/issues/3712


Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index b14a5c1b..2a0d7424 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,10 +11,12 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`boolean-prop-naming`]: literalType error fix ([#3704][] @developer-bandi)
 * [`boolean-prop-naming`]: allow TSIntersectionType ([#3705][] @developer-bandi)
 * [`no-unknown-property`]: support `popover`, `popovertarget`, `popovertargetaction` attributes ([#3707][] @ljharb)
+* [`no-unknown-property`]: only match `data-*` attributes containing `-` ([#3713][] @silverwind)
 
 ### Changed
 * [`boolean-prop-naming`]: improve error message (@ljharb)
 
+[#3713]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3713
 [#3707]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3707
 [#3705]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3705
 [#3704]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3704
diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js
index 781e5495..9491f9c6 100644
--- a/lib/rules/no-unknown-property.js
+++ b/lib/rules/no-unknown-property.js
@@ -431,7 +431,7 @@ function normalizeAttributeCase(name) {
  * @returns {boolean} Result
  */
 function isValidDataAttribute(name) {
-  return !/^data-xml/i.test(name) && /^data(-?[^:]*)$/.test(name);
+  return !/^data-xml/i.test(name) && /^data-[^:]*$/.test(name);
 }
 
 /**


Test patch:
diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js
index 704d8429..afb95ac2 100644
--- a/tests/lib/rules/no-unknown-property.js
+++ b/tests/lib/rules/no-unknown-property.js
@@ -41,6 +41,10 @@ ruleTester.run('no-unknown-property', rule, {
       features: ['jsx namespace'],
     },
     { code: '<App clip-path="bar" />;' },
+    {
+      code: '<App dataNotAnDataAttribute="yes" />;',
+      options: [{ requireDataLowercase: true }],
+    },
     // Some HTML/DOM elements with common attributes should work
     { code: '<div className="bar"></div>;' },
     { code: '<div onMouseDown={this._onMouseDown}></div>;' },
@@ -603,7 +607,34 @@ ruleTester.run('no-unknown-property', rule, {
       ],
     },
     {
-      code: '<div data-testID="bar" data-under_sCoRe="bar" />;',
+      code: '<div data-testID="bar" data-under_sCoRe="bar" dataNotAnDataAttribute="yes" />;',
+      errors: [
+        {
+          messageId: 'dataLowercaseRequired',
+          data: {
+            name: 'data-testID',
+            lowerCaseName: 'data-testid',
+          },
+        },
+        {
+          messageId: 'dataLowercaseRequired',
+          data: {
+            name: 'data-under_sCoRe',
+            lowerCaseName: 'data-under_score',
+          },
+        },
+        {
+          messageId: 'unknownProp',
+          data: {
+            name: 'dataNotAnDataAttribute',
+            lowerCaseName: 'datanotandataattribute',
+          },
+        },
+      ],
+      options: [{ requireDataLowercase: true }],
+    },
+    {
+      code: '<App data-testID="bar" data-under_sCoRe="bar" dataNotAnDataAttribute="yes" />;',
       errors: [
         {
           messageId: 'dataLowercaseRequired',