feat(syntax-highlight): support the Aurelia UX interpolation syntax in CSS

The Aurelia UX library enables a style system in which you can place ${...} bindings throughout your CSS code. Unfortunately, VS Code gets confused and thinks these are syntax errors. It would be nice to enable this plugin to recognize that syntax and colorize it similar to how it is done in HTML.

[eriklieben]

To do this we need to implement a custom language, so for example ‘Aurelia CSS’ and then basically wrap it around the CSS language server and strip out the warnings related to ${...} syntax.

The issue I still didn’t figure out is how to handle the custom language and other extensions. When introducing a custom language other extensions that support CSS language won’t support Aurelia CSS, which makes it kinda useless (because a lot of people use other extensions).

A sample scenario of this is using the PostCSS language extension and a code formatting extension: https://marketplace.visualstudio.com/items?itemName=ricard.PostCSS https://marketplace.visualstudio.com/items?itemName=lonefy.vscode-JS-CSS-HTML-formatter

You can either set your file as PostCSS and the PostCSS plugin works or set it as CSS to get the code formatting extension to work, but both on the same file isn’t possible. To get this working the formatting extension needs to be extended to support the PostCSS language.

Or see https://github.com/aurelia/vscode-extension/issues/45 where I tried to introduce Aurelia HTML for the HTML files, but rolled it back due to these issues.

What you can do for now is turn off CSS validation completely by adding the property below to .vscode/settings.json, but that will also turn off warnings you might want.

"css.validate": false,

One option I can still try and see if it works is when I extend the CSS language with the highest priority and see if I can cancel out the processing by the actual CSS language server that occurs later on in the processing line.

---

As a side note: In my project at work, we also have a requirement to use custom colouring/style based upon JSON retrieved from the server. We use CSS variables (https://www.w3.org/TR/css-variables/) for this. We did not implement this fully yet (other things have a higher priority), but I did a proof of concept to just set those from code and this updates all variables / basically does the same as the interpolation, depending on your use case.

.foo {
  background-color: var(--primary-color);
}

document.documentElement.style.setProperty('--primary-color', 'red');

The only issue is that it isn’t supported in IE/Edge and maybe some phone browsers. Since my variables don’t need to update once they are set, I can just regex the CSS files in those cases and replace the variables with the colour set retrieved from the backend.

The CSS variables are supported / allowed by VSCode, which means you work around this issue 😃

[eriklieben]

Cool, thanks!