[Fix] no-unknown-property : allow CSS transition event handlers

Author: baevm

CHANGELOG.md

@@ -24,10 +24,12 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`jsx-key`]: detect missing keys in logical expressions ([#3986][] @yalperg)
 * [`display-name`]: avoid false positive when React is shadowed ([#3926][] @hyeonbinHur)
 * [`no-unused-prop-types`]: detect used props in nested components ([#3955][] @avaice)
+* [`no-unknown-property`]: add missing CSS transition event handlers ([#4001][] @baevm)
 
 ### Changed
 * [Docs] [`no-array-index-key`]: add template literal examples ([#3978][] @akahoshi1421)
 
+[#4001]: https://github.com/jsx-eslint/eslint-plugin-react/pull/4001
 [#3986]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3986
 [#3978]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3978
 [#3958]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3958

lib/rules/no-unknown-property.js

@@ -265,7 +265,8 @@ const DOM_PROPERTY_NAMES_TWO_WORDS = [
   'onCompositionUpdate', 'onCut', 'onDoubleClick', 'onDrag', 'onDragEnd', 'onDragEnter', 'onDragExit', 'onDragLeave',
   'onError', 'onFocus', 'onInput', 'onKeyDown', 'onKeyPress', 'onKeyUp', 'onLoad', 'onWheel', 'onDragOver',
   'onDragStart', 'onDrop', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver',
-  'onMouseUp', 'onPaste', 'onScroll', 'onScrollEnd', 'onSelect', 'onSubmit', 'onBeforeToggle', 'onToggle', 'onTransitionEnd', 'radioGroup',
+  'onMouseUp', 'onPaste', 'onScroll', 'onScrollEnd', 'onSelect', 'onSubmit', 'onBeforeToggle', 'onToggle',
+  'onTransitionCancel', 'onTransitionEnd', 'onTransitionRun', 'onTransitionStart', 'radioGroup',
   'readOnly', 'referrerPolicy', 'rowSpan', 'srcDoc', 'srcLang', 'srcSet', 'useMap', 'fetchPriority',
   // SVG attributes
   // See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
@@ -316,7 +317,7 @@ const DOM_PROPERTY_NAMES_TWO_WORDS = [
   'onPlayingCapture', 'onProgressCapture', 'onRateChangeCapture', 'onSeekedCapture', 'onSeekingCapture', 'onStalledCapture', 'onSuspendCapture',
   'onTimeUpdateCapture', 'onVolumeChangeCapture', 'onWaitingCapture', 'onSelectCapture', 'onTouchCancelCapture', 'onTouchEndCapture',
   'onTouchMoveCapture', 'onTouchStartCapture', 'onScrollCapture', 'onScrollEndCapture', 'onWheelCapture', 'onAnimationEndCapture', 'onAnimationIteration',
-  'onAnimationStartCapture', 'onTransitionEndCapture',
+  'onAnimationStartCapture', 'onTransitionCancelCapture', 'onTransitionEndCapture', 'onTransitionRunCapture', 'onTransitionStartCapture',
   'onAuxClick', 'onAuxClickCapture', 'onClickCapture', 'onContextMenuCapture', 'onDoubleClickCapture',
   'onDragCapture', 'onDragEndCapture', 'onDragEnterCapture', 'onDragExitCapture', 'onDragLeaveCapture',
   'onDragOverCapture', 'onDragStartCapture', 'onDropCapture', 'onMouseDown', 'onMouseDownCapture',

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

@@ -50,6 +50,7 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<div onMouseDown={this._onMouseDown}></div>;' },
     { code: '<div onScrollEnd={this._onScrollEnd}></div>;' },
     { code: '<div onScrollEndCapture={this._onScrollEndCapture}></div>;' },
+    { code: '<div onTransitionCancel={this._onTransitionCancel} onTransitionEnd={this._onTransitionEnd} onTransitionRun={this._onTransitionRun} onTransitionStart={this._onTransitionStart} onTransitionCancelCapture={this._onTransitionCancelCapture} onTransitionEndCapture={this._onTransitionEndCapture} onTransitionRunCapture={this._onTransitionRunCapture} onTransitionStartCapture={this._onTransitionStartCapture}></div>;' },
     { code: '<a href="someLink" download="foo">Read more</a>' },
     { code: '<area download="foo" />' },
     { code: '<img src="cat_keyboard.jpeg" alt="A cat sleeping on a keyboard" align="top" fetchPriority="high" />' },