Skip to content

feat(attr-lowercase): ignore camelCase SVG attributes #828

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nschonni merged 1 commit into from
Dec 31, 2021
Merged

feat(attr-lowercase): ignore camelCase SVG attributes #828

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 75 additions & 2 deletions dist/core/rules/attr-lowercase.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

75 changes: 74 additions & 1 deletion dist/htmlhint.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -336,6 +336,79 @@
var attrLowercase = {};

Object.defineProperty(attrLowercase, "__esModule", { value: true });
const svgIgnores = [
'allowReorder',
'attributeName',
'attributeType',
'autoReverse',
'baseFrequency',
'baseProfile',
'calcMode',
'clipPath',
'clipPathUnits',
'contentScriptType',
'contentStyleType',
'diffuseConstant',
'edgeMode',
'externalResourcesRequired',
'filterRes',
'filterUnits',
'glyphRef',
'gradientTransform',
'gradientUnits',
'kernelMatrix',
'kernelUnitLength',
'keyPoints',
'keySplines',
'keyTimes',
'lengthAdjust',
'limitingConeAngle',
'markerHeight',
'markerUnits',
'markerWidth',
'maskContentUnits',
'maskUnits',
'numOctaves',
'onBlur',
'onChange',
'onClick',
'onFocus',
'onKeyUp',
'onLoad',
'pathLength',
'patternContentUnits',
'patternTransform',
'patternUnits',
'pointsAtX',
'pointsAtY',
'pointsAtZ',
'preserveAlpha',
'preserveAspectRatio',
'primitiveUnits',
'refX',
'refY',
'repeatCount',
'repeatDur',
'requiredExtensions',
'requiredFeatures',
'specularConstant',
'specularExponent',
'spreadMethod',
'startOffset',
'stdDeviation',
'stitchTiles',
'surfaceScale',
'systemLanguage',
'tableValues',
'targetX',
'targetY',
'textLength',
'viewBox',
'viewTarget',
'xChannelSelector',
'yChannelSelector',
'zoomAndPan',
];
function testAgainstStringOrRegExp(value, comparison) {
if (comparison instanceof RegExp) {
return comparison.test(value)
Expand All @@ -361,7 +434,7 @@
id: 'attr-lowercase',
description: 'All attribute names must be in lowercase.',
init(parser, reporter, options) {
const exceptions = Array.isArray(options) ? options : [];
const exceptions = (Array.isArray(options) ? options : []).concat(svgIgnores);
parser.addListener('tagstart', (event) => {
const attrs = event.attrs;
let attr;
Expand Down
2 changes: 1 addition & 1 deletion dist/htmlhint.min.js
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 5 additions & 2 deletions docs/user-guide/rules/attr-lowercase.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ Level: `error`

1. true: enable rule
2. false: disable rule
3. ['viewBox', 'Test']: enable rule except for the given attribute names
3. ['fooBar', 'Test']: enable rule except for the given attribute names. All SVG camelCase properties are included, for example `viewBox`

### Example

```json
{
...
"attr-lowercase": ['viewBox']
"attr-lowercase": ['fooBar']
...
}
```
Expand All @@ -28,6 +28,9 @@ The following pattern is **not** considered a rule violation:
<!-- prettier-ignore -->
```html
<img src="test.png" alt="test" />

<!-- known SVG attributes are ignored -->
<svg width="200" height="200" viewBox="0 0 200 200" />
```

The following pattern is considered a rule violation:
Expand Down
78 changes: 77 additions & 1 deletion src/core/rules/attr-lowercase.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,79 @@
import { Rule } from '../types'

const svgIgnores = [
'allowReorder',
'attributeName',
'attributeType',
'autoReverse',
'baseFrequency',
'baseProfile',
'calcMode',
'clipPath',
'clipPathUnits',
'contentScriptType',
'contentStyleType',
'diffuseConstant',
'edgeMode',
'externalResourcesRequired',
'filterRes',
'filterUnits',
'glyphRef',
'gradientTransform',
'gradientUnits',
'kernelMatrix',
'kernelUnitLength',
'keyPoints',
'keySplines',
'keyTimes',
'lengthAdjust',
'limitingConeAngle',
'markerHeight',
'markerUnits',
'markerWidth',
'maskContentUnits',
'maskUnits',
'numOctaves',
'onBlur',
'onChange',
'onClick',
'onFocus',
'onKeyUp',
'onLoad',
'pathLength',
'patternContentUnits',
'patternTransform',
'patternUnits',
'pointsAtX',
'pointsAtY',
'pointsAtZ',
'preserveAlpha',
'preserveAspectRatio',
'primitiveUnits',
'refX',
'refY',
'repeatCount',
'repeatDur',
'requiredExtensions',
'requiredFeatures',
'specularConstant',
'specularExponent',
'spreadMethod',
'startOffset',
'stdDeviation',
'stitchTiles',
'surfaceScale',
'systemLanguage',
'tableValues',
'targetX',
'targetY',
'textLength',
'viewBox',
'viewTarget',
'xChannelSelector',
'yChannelSelector',
'zoomAndPan',
]

/**
* testAgainstStringOrRegExp
*
Expand Down Expand Up @@ -43,7 +117,9 @@ export default {
id: 'attr-lowercase',
description: 'All attribute names must be in lowercase.',
init(parser, reporter, options) {
const exceptions = Array.isArray(options) ? options : []
const exceptions = (Array.isArray(options) ? options : []).concat(
svgIgnores
)

parser.addListener('tagstart', (event) => {
const attrs = event.attrs
Expand Down
20 changes: 20 additions & 0 deletions test/rules/attr-lowercase.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,4 +60,24 @@ describe(`Rules: ${ruleId}`, () => {
const messages = HTMLHint.verify(code, ruleOptions)
expect(messages.length).to.be(0)
})

it('Known SVG properties should be ignored with no config', () => {
const code = '<svg width="200" height="200" viewBox="0 0 200 200" />'
const messages = HTMLHint.verify(code, ruleOptions)
expect(messages.length).to.be(0)
})

it('Known SVG properties should be ignored with a config override', () => {
const code = '<svg width="200" height="200" viewBox="0 0 200 200" />'
ruleOptions[ruleId] = ['testBox']
const messages = HTMLHint.verify(code, ruleOptions)
expect(messages.length).to.be(0)
})

it('Double ignored SVG properties should not cause issues', () => {
const code = '<svg width="200" height="200" viewBox="0 0 200 200" />'
ruleOptions[ruleId] = ['viewBox']
const messages = HTMLHint.verify(code, ruleOptions)
expect(messages.length).to.be(0)
})
})