From 22cedd8c83fc6e2931c265476e2e670fdc7ecfed Mon Sep 17 00:00:00 2001 From: Mayo Date: Sat, 3 Sep 2022 01:28:10 +0200 Subject: [PATCH] [Fix] `no-unknown-property`: add SVG and meta properties Fixes #3380 --- CHANGELOG.md | 5 +++ lib/rules/no-unknown-property.js | 49 +++++++++++++++++++++++++- tests/lib/rules/no-unknown-property.js | 3 ++ 3 files changed, 56 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 27ae3e4a91..c92d525541 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,11 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange ## Unreleased +### Fixed +* [`no-unknown-property`]: add SVG and meta properties ([#3381][] @AhmadMayo) + +[#3381]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3381 + ## [7.31.2] - 2022.09.02 ### Fixed diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js index d8f7f1e319..a39bfde18a 100644 --- a/lib/rules/no-unknown-property.js +++ b/lib/rules/no-unknown-property.js @@ -29,6 +29,9 @@ const DOM_ATTRIBUTE_NAMES = { const ATTRIBUTE_TAGS_MAP = { // image is required for SVG support, all other tags are HTML. crossOrigin: ['script', 'img', 'video', 'audio', 'link', 'image'], + fill: ['svg'], + property: ['meta'], + viewBox: ['svg'], }; const SVGDOM_ATTRIBUTE_NAMES = { @@ -130,8 +133,22 @@ const DOM_PROPERTY_NAMES_ONE_WORD = [ 'name', 'open', 'optimum', 'pattern', 'ping', 'placeholder', 'poster', 'preload', 'profile', 'rel', 'required', 'reversed', 'role', 'rows', 'sandbox', 'scope', 'selected', 'shape', 'size', 'sizes', 'span', 'src', 'start', 'step', 'target', 'type', 'value', 'width', 'wrap', + // SVG attributes + // See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute + 'accumulate', 'additive', 'alphabetic', 'amplitude', 'ascent', 'azimuth', 'bbox', 'begin', + 'bias', 'by', 'clip', 'color', 'cursor', 'cx', 'cy', 'd', 'decelerate', 'descent', 'direction', + 'display', 'divisor', 'dur', 'dx', 'dy', 'elevation', 'end', 'exponent', 'fill', 'filter', + 'format', 'from', 'fr', 'fx', 'fy', 'g1', 'g2', 'hanging', 'height', 'hreflang', 'ideographic', + 'in', 'in2', 'intercept', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'local', 'mask', 'mode', + 'offset', 'opacity', 'operator', 'order', 'orient', 'orientation', 'origin', 'overflow', 'path', + 'ping', 'points', 'r', 'radius', 'rel', 'restart', 'result', 'rotate', 'rx', 'ry', 'scale', + 'seed', 'slope', 'spacing', 'speed', 'stemh', 'stemv', 'string', 'stroke', 'to', 'transform', + 'u1', 'u2', 'unicode', 'values', 'version', 'visibility', 'widths', 'x', 'x1', 'x2', 'xmlns', + 'y', 'y1', 'y2', 'z', + // OpenGraph meta tag attributes + 'property', // React specific attributes - 'ref', + 'ref', 'key', ]; const DOM_PROPERTY_NAMES_TWO_WORDS = [ @@ -152,6 +169,36 @@ const DOM_PROPERTY_NAMES_TWO_WORDS = [ 'onDragStart', 'onDrop', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp', 'onPaste', 'onScroll', 'onSelect', 'onSubmit', 'onTransitionEnd', 'radioGroup', 'readOnly', 'referrerPolicy', 'rowSpan', 'srcDoc', 'srcLang', 'srcSet', 'useMap', + // SVG attributes + // See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute + 'crossOrigin', 'accentHeight', 'alignmentBaseline', 'arabicForm', 'attributeName', + 'attributeType', 'baseFrequency', 'baselineShift', 'baseProfile', 'calcMode', 'capHeight', + 'clipPathUnits', 'clipPath', 'clipRule', 'colorInterpolation', 'colorInterpolationFilters', + 'colorProfile', 'colorRendering', 'contentScriptType', 'contentStyleType', 'diffuseConstant', + 'dominantBaseline', 'edgeMode', 'enableBackground', 'fillOpacity', 'fillRule', 'filterRes', + 'filterUnits', 'floodColor', 'floodOpacity', 'fontFamily', 'fontSize', 'fontSizeAdjust', + 'fontStretch', 'fontStyle', 'fontVariant', 'fontWeight', 'glyphName', + 'glyphOrientationHorizontal', 'glyphOrientationVertical', 'glyphRef', 'gradientTransform', + 'gradientUnits', 'horizAdvX', 'horizOriginX', 'imageRendering', 'kernelMatrix', + 'kernelUnitLength', 'keyPoints', 'keySplines', 'keyTimes', 'lengthAdjust', 'letterSpacing', + 'lightingColor', 'limitingConeAngle', 'markerEnd', 'markerMid', 'markerStart', 'markerHeight', + 'markerUnits', 'markerWidth', 'maskContentUnits', 'maskUnits', 'mathematical', 'numOctaves', + 'overlinePosition', 'overlineThickness', 'panose1', 'paintOrder', 'pathLength', + 'patternContentUnits', 'patternTransform', 'patternUnits', 'pointerEvents', 'pointsAtX', + 'pointsAtY', 'pointsAtZ', 'preserveAlpha', 'preserveAspectRatio', 'primitiveUnits', + 'referrerPolicy', 'refX', 'refY', 'rendering-intent', 'repeatCount', 'repeatDur', + 'requiredExtensions', 'requiredFeatures', 'shapeRendering', 'specularConstant', + 'specularExponent', 'spreadMethod', 'startOffset', 'stdDeviation', 'stitchTiles', 'stopColor', + 'stopOpacity', 'strikethroughPosition', 'strikethroughThickness', 'strokeDasharray', + 'strokeDashoffset', 'strokeLinecap', 'strokeLinejoin', 'strokeMiterlimit', 'strokeOpacity', + 'strokeWidth', 'surfaceScale', 'systemLanguage', 'tableValues', 'targetX', 'targetY', + 'textAnchor', 'textDecoration', 'textRendering', 'textLength', 'transformOrigin', + 'underlinePosition', 'underlineThickness', 'unicodeBidi', 'unicodeRange', 'unitsPerEm', + 'vAlphabetic', 'vHanging', 'vIdeographic', 'vMathematical', 'vectorEffect', 'vertAdvY', + 'vertOriginX', 'vertOriginY', 'viewBox', 'viewTarget', 'wordSpacing', 'writingMode', 'xHeight', + 'xChannelSelector', 'xlinkActuate', 'xlinkArcrole', 'xlinkHref', 'xlinkRole', 'xlinkShow', + 'xlinkTitle', 'xlinkType', 'xmlBase', 'xmlLang', 'xmlnsXlink', 'xmlSpace', 'yChannelSelector', + 'zoomAndPan', // Safari/Apple specific, no listing available 'autoCorrect', // https://stackoverflow.com/questions/47985384/html-autocorrect-for-text-input-is-not-working 'autoSave', // https://stackoverflow.com/questions/25456396/what-is-autosave-attribute-supposed-to-do-how-do-i-use-it diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js index 0db6f3bcec..b6b8173efe 100644 --- a/tests/lib/rules/no-unknown-property.js +++ b/tests/lib/rules/no-unknown-property.js @@ -48,7 +48,10 @@ ruleTester.run('no-unknown-property', rule, { { code: 'A cat sleeping on a keyboard' }, { code: '' }, { code: '' }, + { code: '' }, { code: ';' }, + { code: '' }, + { code: '' }, // Case ignored attributes, for `charset` discussion see https://github.com/jsx-eslint/eslint-plugin-react/pull/1863 { code: ';' }, { code: ';' },