Problem with background-blend-mode in CSS

For some reason -blend-mode is out of hljs-attribute scope:

background-image: url(images/sample.png);
background-color: red;
background-blend-mode: multiply;

<span class="hljs-attribute">background</span>-blend-mode<span class="hljs-value">: multiply;</span>

[isagalaev]

Yes, we could just add background-blend-mode to fix this particular case. I’ll gladly merge the pull request for that, as it won’t break anything.

This doesn’t really solve the problem though: new properties appear constantly and nobody wants to maintain it. And if you add SVG and potentially every XML application that could be styled this simply looks unfeasible.

What we could do is similar to what @tonyganch is describing: we could define “css-properties” as a separate language and use it inside CSS as well as on its own. But it’ll have to wait some time as it must be done carefully and we have a release planned for tomorrow 😃.

BTW, the approach “try everything and stick with what worked” isn’t really that slow. In fact, it’s how we do language detection: we literally try to highlight code with every language we known and stick with the one that successfully highlighted most stuff. The secret of being fast is to bail out early on obvious erros, which is why CSS defined strictly.

[joshgoebel]

If you’re wanting a fix just for yourself I’d consider what I just suggested… and make sure you explicitly label your blocks CSS.

I just tried VS Code just now and even it can’t properly colorize CSS “out of context”. If you had a blog or somewhere where you constantly were posting such things I’d almost suggest you whip up your own cssprops grammar just for this usage.

Closing because it’s really impossible to resolve this while keeping auto-detect in mind.

Also just wrapping the whole thing in {} without a selector even seems to work if you were willing to change your snippets:

{ background-image: url(images/sample.png);
background-color: red;
background-blend-mode: multiply; }