diff --git a/CHANGELOG.md b/CHANGELOG.md index b14a5c1bd7..2a0d7424f6 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 781e5495bc..9491f9c658 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); } /** diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js index 704d8429d5..afb95ac2fb 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: ';' }, + { + code: ';', + options: [{ requireDataLowercase: true }], + }, // Some HTML/DOM elements with common attributes should work { code: '
;' }, { code: '
;' }, @@ -603,7 +607,34 @@ ruleTester.run('no-unknown-property', rule, { ], }, { - code: '
;', + code: '
;', + 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: ';', errors: [ { messageId: 'dataLowercaseRequired',