[Fix] no-unknown-property: fill works on line, mask, and use elements

jsx-eslint · Sep 4, 2022 · 38572e8 · 38572e8
1 parent 487ef70
commit 38572e8
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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: [