[Fix] no-unknown-property: add viewBox on marker

Fixes #3416
jsx-eslint · Sep 6, 2022 · 0dc8c9d · 0dc8c9d
1 parent 2cae464
commit 0dc8c9d
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,10 +5,14 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ## Unreleased
 
+### Fixed
+* [`no-unknown-property`]: add `viewBox` on `marker` ([#3416][] @ljharb)
+
 ### Changed
 
 * [Meta] npmignore markdownlint config ([#3413][] @jorrit)
 
+[#3416]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3416
 [#3413]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3413
 
 ## [7.31.7] - 2022.09.05

diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js
@@ -61,7 +61,7 @@ const ATTRIBUTE_TAGS_MAP = {
   imageSizes: ['link'],
   imageSrcSet: ['link'],
   property: ['meta'],
-  viewBox: ['svg'],
+  viewBox: ['svg', 'marker'],
   as: ['link'],
   valign: ['tr', 'td', 'th', 'thead', 'tbody', 'tfoot', 'colgroup', 'col'], // deprecated, but known
   // Media events allowed only on audio and video tags, see https://github.com/facebook/react/blob/256aefbea1449869620fb26f6ec695536ab453f5/CHANGELOG.md#notable-enhancements

diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js
@@ -119,6 +119,7 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<link as="audio">Audio content</link>' },
     { code: '<video controlsList="nodownload" controls={this.controls} loop={true} muted={false} src={this.videoSrc} playsInline={true}></video>' },
     { code: '<audio controlsList="nodownload" 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>' },
+    { code: '<marker id={markerId} viewBox="0 0 2 2" refX="1" refY="1" markerWidth="1" markerHeight="1" orient="auto" />' },
     {
       code: `
         <table>