Fix false positives for SVG type selectors in selector-type-case

[hverlin]

What steps are needed to reproduce the bug?

There is a false positive for foreignObject.

The following code will indicate that there is selector-type-case issue

foreignObject {
  color: white;
}

Link to a demo

What Stylelint configuration is needed to reproduce the bug?

{
  "rules": {
    "selector-type-case": ["lower"]
  }
}

How did you run Stylelint?

CLI, or see the demo link

Which version of Stylelint are you using?

14.0.0, 13.13.1

What did you expect to happen?

No problems to be reported

What actually happened?

Got the following error:

Expected "foreignObject" to be "foreignobject" (selector-type-case)

Does the bug relate to non-standard syntax?

No

Proposal to fix the bug

There should be no issue as foreignObject tag is part of SVG definition.

A potential workaround for now is to use the following config

{
  "rules": {
    "selector-type-case": ["lower", {
      "ignoreTypes": ["foreignObject"]
    }]
  }
}

[ybiquitous]

@hverlin Thank you for using a template! It seems useful to ignore foreignObject (something else?) by default.

I've labeled the issue as ready to implement. Please consider contributing if you have time.

There are steps on how to fix a bug in a rule in the Developer guide.

Perhaps, a bugfix may add an additional check to tag.value before the following code:

stylelint/lib/rules/selector-type-case/index.js

Lines 62 to 64 in bf34554

	if (optionsMatches(options, 'ignoreTypes', tag.value)) {
	return;
	}

[ybiquitous]

When seeing https://developer.mozilla.org/en-US/docs/Web/SVG/Element, there are many elements with mixed-case like animateMotion. 👀

[jeddy3]

Let's add these to our reference file and ignore them by default.

[hverlin]

Thanks! Will create a PR with the suggested fix

[hverlin]

Created #5717, let me know if you have feedback.