From 3da8d3118c9dc15600656348de22caa95b169c7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Gaudy?= <rapha.mac.mil@gmail.com>
Date: Sat, 29 May 2021 03:52:08 +0200
Subject: [PATCH] Make an exception for some SVG attributes in
 vue/attribute-hyphenation (#1484)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Closes issue #1483

* linting

Co-authored-by: Raphaël Gaudy <rga@systerel.fr>
---
 docs/rules/attribute-hyphenation.md      |   7 +-
 lib/rules/attribute-hyphenation.js       |   5 +-
 lib/utils/svg-attributes-weird-case.json | 138 +++++++++++++++++++++++
 3 files changed, 146 insertions(+), 4 deletions(-)
 create mode 100644 lib/utils/svg-attributes-weird-case.json

diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md
index cc6391831..2aa8a39e5 100644
--- a/docs/rules/attribute-hyphenation.md
+++ b/docs/rules/attribute-hyphenation.md
@@ -40,10 +40,11 @@ This rule enforces using hyphenated attribute names on custom components in Vue
 }
 ```
 
-Default casing is set to `always` with `['data-', 'aria-', 'slot-scope']` set to be ignored
+Default casing is set to `always`. By default the following attributes are ignored: `data-`, `aria-`, `slot-scope`,
+and all the [SVG attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute) with either an upper case letter or an hyphen.
 
 - `"always"` (default) ... Use hyphenated name.
-- `"never"` ... Don't use hyphenated name except `data-`, `aria-` and `slot-scope`.
+- `"never"` ... Don't use hyphenated name except the ones that are ignored.
 - `"ignore"` ... Array of ignored names
 
 ### `"always"`
@@ -66,7 +67,7 @@ It errors on upper case letters.
 
 ### `"never"`
 
-It errors on hyphens except `data-`, `aria-` and `slot-scope`.
+It errors on hyphens except on the attributes in the ignored attributes list.
 
 <eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'never']}">
 
diff --git a/lib/rules/attribute-hyphenation.js b/lib/rules/attribute-hyphenation.js
index cba9dc241..ec5a3a9ab 100644
--- a/lib/rules/attribute-hyphenation.js
+++ b/lib/rules/attribute-hyphenation.js
@@ -6,6 +6,7 @@
 
 const utils = require('../utils')
 const casing = require('../utils/casing')
+const svgAttributes = require('../utils/svg-attributes-weird-case.json')
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -51,7 +52,9 @@ module.exports = {
     const option = context.options[0]
     const optionsPayload = context.options[1]
     const useHyphenated = option !== 'never'
-    let ignoredAttributes = ['data-', 'aria-', 'slot-scope']
+    let ignoredAttributes = ['data-', 'aria-', 'slot-scope'].concat(
+      svgAttributes
+    )
 
     if (optionsPayload && optionsPayload.ignore) {
       ignoredAttributes = ignoredAttributes.concat(optionsPayload.ignore)
diff --git a/lib/utils/svg-attributes-weird-case.json b/lib/utils/svg-attributes-weird-case.json
new file mode 100644
index 000000000..fb28f8922
--- /dev/null
+++ b/lib/utils/svg-attributes-weird-case.json
@@ -0,0 +1,138 @@
+[
+  "accent-height",
+  "alignment-baseline",
+  "arabic-form",
+  "attributeName",
+  "attributeType",
+  "baseFrequency",
+  "baseline-shift",
+  "baseProfile",
+  "calcMode",
+  "cap-height",
+  "clipPathUnits",
+  "clip-path",
+  "clip-rule",
+  "color-interpolation",
+  "color-interpolation-filters",
+  "color-profile",
+  "color-rendering",
+  "contentScriptType",
+  "contentStyleType",
+  "diffuseConstant",
+  "dominant-baseline",
+  "edgeMode",
+  "enable-background",
+  "externalResourcesRequired",
+  "fill-opacity",
+  "fill-rule",
+  "filterRes",
+  "filterUnits",
+  "flood-color",
+  "flood-opacity",
+  "font-family",
+  "font-size",
+  "font-size-adjust",
+  "font-stretch",
+  "font-style",
+  "font-variant",
+  "font-weight",
+  "glyph-name",
+  "glyph-orientation-horizontal",
+  "glyph-orientation-vertical",
+  "glyphRef",
+  "gradientTransform",
+  "gradientUnits",
+  "horiz-adv-x",
+  "horiz-origin-x",
+  "image-rendering",
+  "kernelMatrix",
+  "kernelUnitLength",
+  "keyPoints",
+  "keySplines",
+  "keyTimes",
+  "lengthAdjust",
+  "letter-spacing",
+  "lighting-color",
+  "limitingConeAngle",
+  "marker-end",
+  "marker-mid",
+  "marker-start",
+  "markerHeight",
+  "markerUnits",
+  "markerWidth",
+  "maskContentUnits",
+  "maskUnits",
+  "numOctaves",
+  "overline-position",
+  "overline-thickness",
+  "panose-1",
+  "paint-order",
+  "pathLength",
+  "patternContentUnits",
+  "patternTransform",
+  "patternUnits",
+  "pointer-events",
+  "pointsAtX",
+  "pointsAtY",
+  "pointsAtZ",
+  "preserveAlpha",
+  "preserveAspectRatio",
+  "primitiveUnits",
+  "referrerPolicy",
+  "refX",
+  "refY",
+  "rendering-intent",
+  "repeatCount",
+  "repeatDur",
+  "requiredExtensions",
+  "requiredFeatures",
+  "shape-rendering",
+  "specularConstant",
+  "specularExponent",
+  "spreadMethod",
+  "startOffset",
+  "stdDeviation",
+  "stitchTiles",
+  "stop-color",
+  "stop-opacity",
+  "strikethrough-position",
+  "strikethrough-thickness",
+  "stroke-dasharray",
+  "stroke-dashoffset",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "stroke-miterlimit",
+  "stroke-opacity",
+  "stroke-width",
+  "surfaceScale",
+  "systemLanguage",
+  "tableValues",
+  "targetX",
+  "targetY",
+  "text-anchor",
+  "text-decoration",
+  "text-rendering",
+  "textLength",
+  "transform-origin",
+  "underline-position",
+  "underline-thickness",
+  "unicode-bidi",
+  "unicode-range",
+  "units-per-em",
+  "v-alphabetic",
+  "v-hanging",
+  "v-ideographic",
+  "v-mathematical",
+  "vector-effect",
+  "vert-adv-y",
+  "vert-origin-x",
+  "vert-origin-y",
+  "viewBox",
+  "viewTarget",
+  "word-spacing",
+  "writing-mode",
+  "x-height",
+  "xChannelSelector",
+  "yChannelSelector",
+  "zoomAndPan"
+]
\ No newline at end of file