Skip to content

attr-lowercase should ignore camelCase SVG attributes by default #542

Closed
@ricealexander

Description

Is your feature request related to a problem? Please describe.
attr-lowercase enforces that all attributes of elements should be lowercase.

SVG elements have attributes that are camelCase, such as the viewBox attribute in the following example. Because the camelCase form is correct, displaying the error "The attribute name of [ viewBox ] must be in lowercase" is erroneous.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zM140 300h116v70.9c0 10.7 13 16.1 20.5 8.5l114.3-114.9c4.7-4.7 4.7-12.2 0-16.9l-114.3-115c-7.6-7.6-20.5-2.2-20.5 8.5V212H140c-6.6 0-12 5.4-12 12v64c0 6.6 5.4 12 12 12z"></path>
</svg>

Describe the solution you'd like
attr-lowercase should understand which SVG attributes are camelCase and should not report errors for these attributes.

A list of camelCase SVG attributes is below:

  • allowReorder
  • attributeName
  • attributeType
  • autoReverse
  • baseFrequency
  • baseProfile
  • calcMode
  • clipPathUnits
  • contentScriptType
  • contentStyleType
  • diffuseConstant
  • edgeMode
  • externalResourcesRequired
  • filterRes
  • filterUnits
  • glyphRef
  • gradientTransform
  • gradientUnits
  • kernelMatrix
  • kernelUnitLength
  • keyPoints
  • keySplines
  • keyTimes
  • lengthAdjust
  • limitingConeAngle
  • markerHeight
  • markerUnits
  • markerWidth
  • maskContentUnits
  • maskUnits
  • numOctaves
  • pathLength
  • patternContentUnits
  • patternTransform
  • patternUnits
  • pointsAtX
  • pointsAtY
  • pointsAtZ
  • preserveAlpha
  • preserveAspectRatio
  • primitiveUnits
  • referrerPolicy
  • repeatCount
  • repeatDur
  • requiredExtensions
  • requiredFeatures
  • specularConstant
  • specularExponent
  • spreadMethod
  • startOffset
  • stdDeviation
  • stitchTiles
  • surfaceScale
  • systemLanguage
  • tableValues
  • targetX
  • targetY
  • textLength
  • viewBox
  • viewTarget
  • xChannelSelector
  • yChannelSelector
  • zoomAndPan

Describe alternatives you've considered
When this was brought up (#28), the advice was to add each SVG attribute to the allowList, like so:

{
  "tagname-lowercase": ["viewBox"]
}

This is also the described solution in the attr-lowercase documentation and in pulls #121 and #188.

As you can see with the list of camelCase attributes above, in order to allow camelCase SVG attributes, I'd need to allow over 60 attributes in my configuration. This is not an ideal situation because I don't want to create a large configuration just to prevent correctly-formed attributes from throwing errors.

Metadata

Assignees

No one assigned

    Labels

    PR neededbugFunctionality that does not work as intended/expectedkeep-unstaleThe issue will not be marked as stale by the stale-bot

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions