From 1d373c9d5cf0764ed7831da6b293de1462e0271a Mon Sep 17 00:00:00 2001
From: Senja Jarva <senja@jarva.fi>
Date: Sun, 4 Sep 2022 15:31:04 +0300
Subject: [PATCH 1/7] [Fix] `no-unknown-property`: data-* attributes can have
 numbers

---
 CHANGELOG.md                           | 2 ++
 lib/rules/no-unknown-property.js       | 4 ++--
 tests/lib/rules/no-unknown-property.js | 1 +
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7f627147e4..19bc86900b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,9 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ### Fixed
 * [`no-unknown-property`]: `onError` and `onLoad` both work on `img` and `script` ([#3388][] @ljharb)
+* [`no-unknown-property`]: data-* attributes can have numbers ([#3390][] @sjarva)
 
+[#3390]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3390
 [#3388]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3388
 
 ## [7.31.5] - 2022.09.03
diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js
index 2867c5d5b1..474fd2cb6d 100644
--- a/lib/rules/no-unknown-property.js
+++ b/lib/rules/no-unknown-property.js
@@ -338,14 +338,14 @@ function isValidHTMLTagInJSX(childNode) {
 
 /**
  * Checks if an attribute name is a valid `data-*` attribute:
- * if the name starts with "data-" and has some lowcase (a to z) words, separated but hyphens (-)
+ * if the name starts with "data-" and has some lowcase (a to z) words that can contain numbers, separated but hyphens (-)
  * (which is also called "kebab case" or "dash case"), then the attribute is valid data attribute.
  *
  * @param {String} name - Attribute name to be tested
  * @returns {boolean} Result
  */
 function isValidDataAttribute(name) {
-  const dataAttrConvention = /^data(-[a-z]*)*$/;
+  const dataAttrConvention = /^data(-[a-z1-9]*)*$/;
   return !!dataAttrConvention.test(name);
 }
 
diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js
index d25c3d7cb4..864b40defd 100644
--- a/tests/lib/rules/no-unknown-property.js
+++ b/tests/lib/rules/no-unknown-property.js
@@ -81,6 +81,7 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<div data-foo-bar="baz"></div>;' },
     { code: '<div data-parent="parent"></div>;' },
     { code: '<div data-index-number="1234"></div>;' },
+    { code: '<div data-e2e-id="5678"></div>;' },
     // Ignoring should work
     {
       code: '<div class="bar"></div>;',

From 9a77a1bc4e75871d9fdff7da679bf5b40be49177 Mon Sep 17 00:00:00 2001
From: Senja Jarva <senja@jarva.fi>
Date: Sun, 4 Sep 2022 15:35:21 +0300
Subject: [PATCH 2/7] [Fix] `no-unknown-property`: add more audio/video
 attributes

---
 CHANGELOG.md                           |  1 +
 lib/rules/no-unknown-property.js       | 14 +++++++++
 tests/lib/rules/no-unknown-property.js | 40 +++++++++++++++++++++++++-
 3 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 19bc86900b..2aee95eadb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 ### Fixed
 * [`no-unknown-property`]: `onError` and `onLoad` both work on `img` and `script` ([#3388][] @ljharb)
 * [`no-unknown-property`]: data-* attributes can have numbers ([#3390][] @sjarva)
+* [`no-unknown-property`]: add more audio/video attributes ([#3390][] @sjarva)
 
 [#3390]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3390
 [#3388]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3388
diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js
index 474fd2cb6d..87efa391ed 100644
--- a/lib/rules/no-unknown-property.js
+++ b/lib/rules/no-unknown-property.js
@@ -82,6 +82,16 @@ const ATTRIBUTE_TAGS_MAP = {
   onWaiting: ['audio', 'video'],
   scrolling: ['iframe'],
   playsInline: ['video'],
+  // Video related attributes
+  autoPictureInPicture: ['video'],
+  controls: ['audio', 'video'],
+  controlList: ['video'],
+  disablePictureInPicture: ['video'],
+  disableRemotePlayback: ['audio', 'video'],
+  loop: ['audio', 'video'],
+  muted: ['audio', 'video'],
+  poster: ['video'],
+  preload: ['audio', 'video'],
 };
 
 const SVGDOM_ATTRIBUTE_NAMES = {
@@ -199,6 +209,8 @@ const DOM_PROPERTY_NAMES_ONE_WORD = [
   'property',
   // React specific attributes
   'ref', 'key', 'children',
+  // Video specific
+  'controls',
 ];
 
 const DOM_PROPERTY_NAMES_TWO_WORDS = [
@@ -258,6 +270,8 @@ const DOM_PROPERTY_NAMES_TWO_WORDS = [
   'onAbort', 'onCanPlay', 'onCanPlayThrough', 'onDurationChange', 'onEmptied', 'onEncrypted', 'onEnded',
   'onLoadedData', 'onLoadedMetadata', 'onLoadStart', 'onPause', 'onPlay', 'onPlaying', 'onProgress', 'onRateChange',
   'onSeeked', 'onSeeking', 'onStalled', 'onSuspend', 'onTimeUpdate', 'onVolumeChange', 'onWaiting',
+  // Video specific,
+  'autoPictureInPicture', 'controlList', 'disablePictureInPicture', 'disableRemotePlayback',
 ];
 
 const DOM_PROPERTIES_IGNORE_CASE = ['charset'];
diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js
index 864b40defd..ccdaf0dc88 100644
--- a/tests/lib/rules/no-unknown-property.js
+++ b/tests/lib/rules/no-unknown-property.js
@@ -102,7 +102,8 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<details onToggle={this.onToggle}>Some details</details>' },
     { code: '<path fill="pink" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"></path>' },
     { code: '<link as="audio">Audio content</link>' },
-    { code: '<audio onAbort={this.abort} onDurationChange={this.durationChange} onEmptied={this.emptied} onEnded={this.end} onError={this.error}></audio>' },
+    { code: '<video controls={this.controls} loop={true} muted={false} src={this.videoSrc} playsInline={true}></video>' },
+    { code: '<audio controls={this.controls} crossOrigin="anonymous" disableRemotePlayback loop muted preload="none" src="something" onAbort={this.abort} onDurationChange={this.durationChange} onEmptied={this.emptied} onEnded={this.end} onError={this.error}></audio>' },
   ]),
   invalid: parsers.all([
     {
@@ -391,5 +392,42 @@ ruleTester.run('no-unknown-property', rule, {
         },
       ],
     },
+    {
+      code: '<div controls={this.controls} loop={true} muted={false} src={this.videoSrc} playsInline={true}></div>',
+      errors: [
+        {
+          messageId: 'invalidPropOnTag',
+          data: {
+            name: 'controls',
+            tagName: 'div',
+            allowedTags: 'audio, video',
+          },
+        },
+        {
+          messageId: 'invalidPropOnTag',
+          data: {
+            name: 'loop',
+            tagName: 'div',
+            allowedTags: 'audio, video',
+          },
+        },
+        {
+          messageId: 'invalidPropOnTag',
+          data: {
+            name: 'muted',
+            tagName: 'div',
+            allowedTags: 'audio, video',
+          },
+        },
+        {
+          messageId: 'invalidPropOnTag',
+          data: {
+            name: 'playsInline',
+            tagName: 'div',
+            allowedTags: 'video',
+          },
+        },
+      ],
+    },
   ]),
 });

From 487ef7055959a160aa546dc0753aa173c48383a3 Mon Sep 17 00:00:00 2001
From: Senja Jarva <senja@jarva.fi>
Date: Sun, 4 Sep 2022 15:36:53 +0300
Subject: [PATCH 3/7] [Fix] `no-unknown-property`: move allowfullscreen to case
 ignored attributes

---
 CHANGELOG.md                           | 1 +
 lib/rules/no-unknown-property.js       | 4 ++--
 tests/lib/rules/no-unknown-property.js | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2aee95eadb..2579fe0ba1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-unknown-property`]: `onError` and `onLoad` both work on `img` and `script` ([#3388][] @ljharb)
 * [`no-unknown-property`]: data-* attributes can have numbers ([#3390][] @sjarva)
 * [`no-unknown-property`]: add more audio/video attributes ([#3390][] @sjarva)
+* [`no-unknown-property`]: move allowfullscreen to case ignored attributes ([#3390][] @sjarva)
 
 [#3390]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3390
 [#3388]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3388
diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js
index 87efa391ed..5ae19a207a 100644
--- a/lib/rules/no-unknown-property.js
+++ b/lib/rules/no-unknown-property.js
@@ -221,7 +221,7 @@ const DOM_PROPERTY_NAMES_TWO_WORDS = [
   // Element specific attributes
   // See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes (includes global attributes too)
   // To be considered if these should be added also to ATTRIBUTE_TAGS_MAP
-  'acceptCharset', 'allowFullScreen', 'autoComplete', 'autoPlay', 'cellPadding', 'cellSpacing', 'classID', 'codeBase',
+  'acceptCharset', 'autoComplete', 'autoPlay', 'cellPadding', 'cellSpacing', 'classID', 'codeBase',
   'colSpan', 'contextMenu', 'dateTime', 'encType', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget',
   'frameBorder', 'hrefLang', 'httpEquiv', 'isMap', 'keyParams', 'keyType', 'marginHeight', 'marginWidth',
   'maxLength', 'mediaGroup', 'minLength', 'noValidate', 'onAnimationEnd', 'onAnimationIteration', 'onAnimationStart',
@@ -274,7 +274,7 @@ const DOM_PROPERTY_NAMES_TWO_WORDS = [
   'autoPictureInPicture', 'controlList', 'disablePictureInPicture', 'disableRemotePlayback',
 ];
 
-const DOM_PROPERTIES_IGNORE_CASE = ['charset'];
+const DOM_PROPERTIES_IGNORE_CASE = ['charset', 'allowfullscreen'];
 
 const ARIA_PROPERTIES = [
   // See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes
diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js
index ccdaf0dc88..e9da7da27a 100644
--- a/tests/lib/rules/no-unknown-property.js
+++ b/tests/lib/rules/no-unknown-property.js
@@ -393,7 +393,7 @@ ruleTester.run('no-unknown-property', rule, {
       ],
     },
     {
-      code: '<div controls={this.controls} loop={true} muted={false} src={this.videoSrc} playsInline={true}></div>',
+      code: '<div controls={this.controls} loop={true} muted={false} src={this.videoSrc} playsInline={true} allowFullScreen></div>',
       errors: [
         {
           messageId: 'invalidPropOnTag',

From 38572e835279955b02ef0ac0e2171502283c2d24 Mon Sep 17 00:00:00 2001
From: Senja Jarva <senja@jarva.fi>
Date: Sun, 4 Sep 2022 15:55:27 +0300
Subject: [PATCH 4/7] [Fix] `no-unknown-property`: fill works on line, mask,
 and use elements

---
 CHANGELOG.md                           |  1 +
 lib/rules/no-unknown-property.js       |  3 +++
 tests/lib/rules/no-unknown-property.js | 15 +++++++++++++++
 3 files changed, 19 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2579fe0ba1..6ecd5f7808 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-unknown-property`]: data-* attributes can have numbers ([#3390][] @sjarva)
 * [`no-unknown-property`]: add more audio/video attributes ([#3390][] @sjarva)
 * [`no-unknown-property`]: move allowfullscreen to case ignored attributes ([#3390][] @sjarva)
+* [`no-unknown-property`]: fill works on line, mask, and use elements ([#3390][] @sjarva)
 
 [#3390]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3390
 [#3388]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3388
diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js
index 5ae19a207a..fe75696aa9 100644
--- a/lib/rules/no-unknown-property.js
+++ b/lib/rules/no-unknown-property.js
@@ -36,6 +36,8 @@ const ATTRIBUTE_TAGS_MAP = {
     'circle',
     'ellipse',
     'g',
+    'line',
+    'mask',
     'path',
     'polygon',
     'polyline',
@@ -45,6 +47,7 @@ const ATTRIBUTE_TAGS_MAP = {
     'textPath',
     'tref',
     'tspan',
+    'use',
     // Animation final state
     'animate',
     'animateColor',
diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js
index e9da7da27a..1b2c999cc6 100644
--- a/tests/lib/rules/no-unknown-property.js
+++ b/tests/lib/rules/no-unknown-property.js
@@ -54,6 +54,7 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<button disabled>You cannot click me</button>;' },
     { code: '<svg key="lock" viewBox="box" fill={10} d="d" stroke={1} strokeWidth={2} strokeLinecap={3} strokeLinejoin={4} transform="something" clipRule="else" x1={5} x2="6" y1="7" y2="8"></svg>' },
     { code: '<g fill="#7B82A0" fillRule="evenodd"></g>' },
+    { code: '<mask fill="#7B82A0"></mask>' },
     { code: '<meta property="og:type" content="website" />' },
     { code: '<input type="checkbox" checked={checked} disabled={disabled} id={id} onChange={onChange} />' },
     { code: '<video playsInline />' },
@@ -101,6 +102,7 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<svg><image crossOrigin /></svg>' },
     { code: '<details onToggle={this.onToggle}>Some details</details>' },
     { code: '<path fill="pink" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"></path>' },
+    { code: '<line fill="pink" x1="0" y1="80" x2="100" y2="20"></line>' },
     { code: '<link as="audio">Audio content</link>' },
     { code: '<video controls={this.controls} loop={true} muted={false} src={this.videoSrc} playsInline={true}></video>' },
     { code: '<audio controls={this.controls} crossOrigin="anonymous" disableRemotePlayback loop muted preload="none" src="something" onAbort={this.abort} onDurationChange={this.durationChange} onEmptied={this.emptied} onEnded={this.end} onError={this.error}></audio>' },
@@ -392,6 +394,19 @@ ruleTester.run('no-unknown-property', rule, {
         },
       ],
     },
+    {
+      code: '<div fill="pink" />',
+      errors: [
+        {
+          messageId: 'invalidPropOnTag',
+          data: {
+            name: 'fill',
+            tagName: 'div',
+            allowedTags: 'altGlyph, circle, ellipse, g, line, mask, path, polygon, polyline, rect, svg, text, textPath, tref, tspan, use, animate, animateColor, animateMotion, animateTransform, set',
+          },
+        },
+      ],
+    },
     {
       code: '<div controls={this.controls} loop={true} muted={false} src={this.videoSrc} playsInline={true} allowFullScreen></div>',
       errors: [

From bc33ad719c5e67dd57a8aecbfa919ea4cdc11fe7 Mon Sep 17 00:00:00 2001
From: Senja Jarva <senja@jarva.fi>
Date: Sun, 4 Sep 2022 15:56:05 +0300
Subject: [PATCH 5/7] [Fix] `no-unknown-property`: add onMouseMoveCapture as
 valid react-specific attribute

---
 CHANGELOG.md                           | 1 +
 lib/rules/no-unknown-property.js       | 1 +
 tests/lib/rules/no-unknown-property.js | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6ecd5f7808..a86d77b1da 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-unknown-property`]: add more audio/video attributes ([#3390][] @sjarva)
 * [`no-unknown-property`]: move allowfullscreen to case ignored attributes ([#3390][] @sjarva)
 * [`no-unknown-property`]: fill works on line, mask, and use elements ([#3390][] @sjarva)
+* [`no-unknown-property`]: add onMouseMoveCapture as valid react-specific attribute ([#3390][] @sjarva)
 
 [#3390]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3390
 [#3388]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3388
diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js
index fe75696aa9..7b5de807a6 100644
--- a/lib/rules/no-unknown-property.js
+++ b/lib/rules/no-unknown-property.js
@@ -273,6 +273,7 @@ const DOM_PROPERTY_NAMES_TWO_WORDS = [
   'onAbort', 'onCanPlay', 'onCanPlayThrough', 'onDurationChange', 'onEmptied', 'onEncrypted', 'onEnded',
   'onLoadedData', 'onLoadedMetadata', 'onLoadStart', 'onPause', 'onPlay', 'onPlaying', 'onProgress', 'onRateChange',
   'onSeeked', 'onSeeking', 'onStalled', 'onSuspend', 'onTimeUpdate', 'onVolumeChange', 'onWaiting',
+  'onMouseMoveCapture',
   // Video specific,
   'autoPictureInPicture', 'controlList', 'disablePictureInPicture', 'disableRemotePlayback',
 ];
diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js
index 1b2c999cc6..9e95af2bbb 100644
--- a/tests/lib/rules/no-unknown-property.js
+++ b/tests/lib/rules/no-unknown-property.js
@@ -69,7 +69,7 @@ ruleTester.run('no-unknown-property', rule, {
     // React related attributes
     { code: '<div onPointerDown={this.onDown} onPointerUp={this.onUp} />' },
     { code: '<input type="checkbox" defaultChecked={this.state.checkbox} />' },
-    { code: '<div onTouchStart={this.startAnimation} onTouchEnd={this.stopAnimation} onTouchCancel={this.cancel} onTouchMove={this.move} />' },
+    { code: '<div onTouchStart={this.startAnimation} onTouchEnd={this.stopAnimation} onTouchCancel={this.cancel} onTouchMove={this.move} onMouseMoveCapture={this.capture} />' },
     // Case ignored attributes, for `charset` discussion see https://github.com/jsx-eslint/eslint-plugin-react/pull/1863
     { code: '<meta charset="utf-8" />;' },
     { code: '<meta charSet="utf-8" />;' },

From 57e8ec629fa04d0bdca71016f8b04c744451187b Mon Sep 17 00:00:00 2001
From: Senja Jarva <senja@jarva.fi>
Date: Sun, 4 Sep 2022 15:59:40 +0300
Subject: [PATCH 6/7] [Fix] `no-unknown-property`: make onLoad and onError be
 accepted on more elements

---
 CHANGELOG.md                           |  1 +
 lib/rules/no-unknown-property.js       |  4 ++--
 tests/lib/rules/no-unknown-property.js | 17 ++++++++++++++++-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a86d77b1da..72e96eeabb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-unknown-property`]: move allowfullscreen to case ignored attributes ([#3390][] @sjarva)
 * [`no-unknown-property`]: fill works on line, mask, and use elements ([#3390][] @sjarva)
 * [`no-unknown-property`]: add onMouseMoveCapture as valid react-specific attribute ([#3390][] @sjarva)
+* [`no-unknown-property`]: make onLoad and onError be accepted on more elements ([#3390][] @sjarva)
 
 [#3390]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3390
 [#3388]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3388
diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js
index 7b5de807a6..25a8ece9c6 100644
--- a/lib/rules/no-unknown-property.js
+++ b/lib/rules/no-unknown-property.js
@@ -66,8 +66,8 @@ const ATTRIBUTE_TAGS_MAP = {
   onEmptied: ['audio', 'video'],
   onEncrypted: ['audio', 'video'],
   onEnded: ['audio', 'video'],
-  onError: ['audio', 'video', 'img', 'script'],
-  onLoad: ['script', 'img'],
+  onError: ['audio', 'video', 'img', 'link', 'source', 'script'],
+  onLoad: ['script', 'img', 'link'],
   onLoadedData: ['audio', 'video'],
   onLoadedMetadata: ['audio', 'video'],
   onLoadStart: ['audio', 'video'],
diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js
index 9e95af2bbb..411d316d25 100644
--- a/tests/lib/rules/no-unknown-property.js
+++ b/tests/lib/rules/no-unknown-property.js
@@ -60,6 +60,8 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<video playsInline />' },
     { code: '<img onError={foo} onLoad={bar} />' },
     { code: '<script onLoad={bar} onError={foo} />' },
+    { code: '<source onError={foo} />' },
+    { code: '<link onLoad={bar} onError={foo} />' },
     {
       code: '<div allowTransparency="true" />',
       settings: {
@@ -389,7 +391,20 @@ ruleTester.run('no-unknown-property', rule, {
           data: {
             name: 'onError',
             tagName: 'div',
-            allowedTags: 'audio, video, img, script',
+            allowedTags: 'audio, video, img, link, source, script',
+          },
+        },
+      ],
+    },
+    {
+      code: '<div onLoad={this.load} />',
+      errors: [
+        {
+          messageId: 'invalidPropOnTag',
+          data: {
+            name: 'onLoad',
+            tagName: 'div',
+            allowedTags: 'script, img, link',
           },
         },
       ],

From 900d6a295a8ecc1d4de07897283f9afaf50d38c2 Mon Sep 17 00:00:00 2001
From: Senja Jarva <senja@jarva.fi>
Date: Sun, 4 Sep 2022 18:58:45 +0300
Subject: [PATCH 7/7] [Docs] `no-unknown-property`: add a mention about using
 ignores properties with libraries that add props

---
 CHANGELOG.md                           |  4 ++++
 docs/rules/no-unknown-property.md      | 18 +++++++++++++++++-
 tests/lib/rules/no-unknown-property.js |  4 ++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 72e96eeabb..bae48b418d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,10 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-unknown-property`]: add onMouseMoveCapture as valid react-specific attribute ([#3390][] @sjarva)
 * [`no-unknown-property`]: make onLoad and onError be accepted on more elements ([#3390][] @sjarva)
 
+### Changed
+
+* [Docs] [`no-unknown-property`]: add a mention about using ignores properties with libraries that add props ([#3390][] @sjarva)
+
 [#3390]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3390
 [#3388]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3388
 
diff --git a/docs/rules/no-unknown-property.md b/docs/rules/no-unknown-property.md
index 108fa42a44..d142def850 100644
--- a/docs/rules/no-unknown-property.md
+++ b/docs/rules/no-unknown-property.md
@@ -43,7 +43,6 @@ var AnotherComponent = <Foo.bar for="bar" />;
 // Custom web components are ignored
 var MyElem = <div class="foo" is="my-elem"></div>;
 var AtomPanel = <atom-panel class="foo"></atom-panel>;
-
 ```
 
 ## Rule Options
@@ -57,6 +56,23 @@ var AtomPanel = <atom-panel class="foo"></atom-panel>;
 - `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0.
 - `ignore`: optional array of property and attribute names to ignore during validation.
 
+If you are using a library that passes something as a prop to JSX elements, it is recommended to add those props to the ignored properties.
+
+For example, if you use [emotion](https://emotion.sh/docs/introduction) and its [`css` prop](https://emotion.sh/docs/css-prop)),
+add the following to your `.eslintrc` config file:
+
+```js
+...
+"react/no-unknown-property": ['error', { ignore: ['css'] }]
+...
+```
+
+Now, the following code passes:
+
+```jsx
+var StyledDiv = <div css={{ color: 'pink' }}></div>;
+```
+
 ## When Not To Use It
 
 If you are not using JSX you can disable this rule.
diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js
index 411d316d25..5312003511 100644
--- a/tests/lib/rules/no-unknown-property.js
+++ b/tests/lib/rules/no-unknown-property.js
@@ -94,6 +94,10 @@ ruleTester.run('no-unknown-property', rule, {
       code: '<div someProp="bar"></div>;',
       options: [{ ignore: ['someProp'] }],
     },
+    {
+      code: '<div css={{flex: 1}}></div>;',
+      options: [{ ignore: ['css'] }],
+    },
 
     // aria-* attributes should work
     { code: '<button aria-haspopup="true">Click me to open pop up</button>;' },