Stylelint doesn't catch mistyped background-image value

[Volker-E]

That's probably an upstream issue, but

.link-https {
	background-image: images/external-ltr.svg );

isn't caught locally.

[edg2s]

It looks like stylelint doesn't do much syntax validation beyond that implemented in specific rules. None of this causes parser errors:

.foo {
  background: foo.jpg );
  display: hello?;
  water: wet;
  width: wide;
}

You get property-no-unknown for water, but that's a specific rule, not a parser error.

[edg2s]

Could experiment with something like https://github.com/csstree/stylelint-validator

[edg2s]

Also from #100:

background-image: ( 'images/tab-normal-fade.png' ) doesn't result in an error. Mind the missing url part.

[edg2s]

This regression caused by an invalid value: https://gerrit.wikimedia.org/r/c/mediawiki/core/+/800761

[edg2s]

In the above example, commas were added to an animation property where just spaces should be used:
animation: rotate, 700ms, infinite, linear;

While this is clearly an error, it is not invalid code, it just reads as 4 animations with short definitions:

$0.style.animation='rotate, 700ms, infinite, linear'

console.log( $0.style.animation )
 '0s ease 0s 1 normal none running rotate, 700ms ease 0s 1 normal none running none, 0s ease 0s infinite normal none running none, 0s linear 0s 1 normal none running none'

[edg2s]

https://github.com/csstree/stylelint-validator has some support for LESS values but produces false positives on mixins. We could enable the rule for CSS only, but that would make it considerably less useful in MediaWiki where many (most?) files are LESS.