Possible false positive: inline svg at background-image

[hstolte]

I have a case where a css rule specifies a background-color and a background-image with an inline svg. I think this is valid css, but csslint outputs:
Expected (<bg-image>) but found 'url('data:image/svg+xml;utf8,...

Is this a false positive?

Example:

.test{
    border-color: #979797;
    background-image: url('data:image/svg+xml;utf8,<svg height="282.3529411764706" version="1.1" width="282.3529411764706" xmlns="http://www.w3.org/2000/svg"><defs></defs><rect x="39.176470588235304" y="39.176470588235304" width="204" height="204" fill="#000000" style="opacity: 0.75;"></rect></svg>');
}

[mattiacci]

That seems valid at first glance, so I'd guess it's a bug. I'll bet you can work around it by using a base64-encoded string instead, like this:

.test {
    background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI4Mi4zNTI5NDExNzY0NzA2IiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIyODIuMzUyOTQxMTc2NDcwNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48L2RlZnM+PHJlY3QgeD0iMzkuMTc2NDcwNTg4MjM1MzA0IiB5PSIzOS4xNzY0NzA1ODgyMzUzMDQiIHdpZHRoPSIyMDQiIGhlaWdodD0iMjA0IiBmaWxsPSIjMDAwMDAwIiBzdHlsZT0ib3BhY2l0eTogMC43NTsiPjwvcmVjdD48L3N2Zz4=')
}

More bytes, less readable, but (probably) functional.

[replete]

Just chiming in, but producing less efficient code just to satisfy a code quality tool is not logical.

If CSSlint had a reliable method to ignore specific rules via comments, then we could manage it that way. But, it doesn't seem to work properly.

Yes I've spent way too long trying to make CSSlint ignore stuff I know is incorrect.

[tigt]

It seems this is flagged by using single quotes, not double quotes around the URI; which makes things difficult for SVG, since it normally comes with double-quotes around its attributes.

[alphanull]

I think single quotes should be allowed especially in this case. As replete said, working around with base64 is not an option. At least we should be able to supress this warning. Hope this will get fixed!