FIXED? Some CSS highlighter quirks

Report issues, odd behaviors or submit a detailed bug report.
User avatar
pjj
Posts: 1998
Joined: 13 Oct 2009 13:48
Location: Kraków, Poland

Re: Some CSS highlighter quirks

Post by pjj »

inspector71 wrote:
02 Aug 2022 04:18
I'm guessing this is due to padding-block-start being a relatively new property.
Thing is, it got through to one list of properties (autocompletion, Ctrl+Space), but not to another (highlighter). My humble suggestion would be to make a system that e.g. list of properties is imported once and fuels all such lists. And can be imported again by a user from the same (external) source like MDN or Github or W3C.
inspector71 wrote:
02 Aug 2022 04:18
Did Rickard suggest he was working on integrating some Microsoft-iniated effort to centralise syntax definitions, for any editor to use?
I suppose you're referring to Language Server Protocol (LSP), which has been implemented already and is very helpful indeed.
Alium tibi quaere fratrem; hic, quem tuum putas, meus est. Titus Flāvius Caesar Vespasiānus Augustus

inspector71
Posts: 219
Joined: 22 Sep 2017 07:59

Re: Some CSS highlighter quirks

Post by inspector71 »

pjj wrote:
02 Aug 2022 09:18
inspector71 wrote:
02 Aug 2022 04:18
I'm guessing this is due to padding-block-start being a relatively new property.
Thing is, it got through to one list of properties (autocompletion, Ctrl+Space), but not to another (highlighter). My humble suggestion would be to make a system that e.g. list of properties is imported once and fuels all such lists. And can be imported again by a user from the same (external) source like MDN or Github or W3C.
FWIW: I'm not using any sort of autocomplete or whatnot. Every single time, in the history of my tortured computing days, autocompletion seems to be at least as much of a hindrance as it is a benefit. Don't get me wrong, I would desperately love it to be better. I hate typing! Anything that reduces even a single keystroke on a consistent, helpful basis, is very welcome.

Anyway, to simplify, agreed the highlighting does not work well enough with CSS properties. If it's working with auto complete functions but not without them, hopefully it's a function that is not being called at the necessary time and it's a quick fix for Rickard.
pjj wrote:
02 Aug 2022 09:18
inspector71 wrote:
02 Aug 2022 04:18
Did Rickard suggest he was working on integrating some Microsoft-initiated effort to centralise syntax definitions, for any editor to use?
I suppose you're referring to Language Server Protocol (LSP), which has been implemented already and is very helpful indeed.
That's the one :)

You have used it?

I'm not really sure what it is. Maybe I've misinterpreted or missed something.
Last edited by inspector71 on 03 Aug 2022 05:47, edited 1 time in total.

inspector71
Posts: 219
Joined: 22 Sep 2017 07:59

Re: Some CSS highlighter quirks

Post by inspector71 »

pjj wrote:
02 Aug 2022 08:53
inspector71 wrote:
02 Aug 2022 04:18
pjj wrote:
01 Aug 2022 15:36
New css.syx works much better, thank you! However it still has some quirks, e.g.

Code: Select all

#id { this is OK: #_Id }
a#id { and this isn't: Text }
I guess the spaces in the 'property' of the latter declaration are what could easily throw off any regex approach? Along with the apostrophe.
Ooops, my bad; what I tried to express but failed was this: here
#id { }
#id selector is correctly colored as #_Id, while here
a#id { }
a#id selector is incorrectly colored as Text, while it rather should look like this:
a#id { }
NP. Suspected that might be the case. I find making examples bizarrely incongruous. It's like doing something meaningless. What's the purpose exactly? Obviously it's to demo the issue as simplified as possible but it's not necessarily relevant to a meaningful scenario such as typing code for an actual project. My brain works strangely, at best, though. Also, I dislike going through the effort to build a boilerplate for examples. Again, because it's something I never do so it makes my tired, fried brain think generically which is weird! i guess if I was one of these high-achieving blogger types who does codepens all the time, it would be less of an issue. How about all that for off topic!

User avatar
Rickard Johansson
Site Admin
Posts: 6281
Joined: 19 Jul 2006 14:29

Re: FIXED? Some CSS highlighter quirks

Post by Rickard Johansson »

I think the CSS.syx file is finished and complete now. I'm still working on the CSS.ini file (auto completion stuff...).
css.zip
(3.39 KiB) Downloaded 25 times

User avatar
pjj
Posts: 1998
Joined: 13 Oct 2009 13:48
Location: Kraków, Poland

Re: FIXED? Some CSS highlighter quirks

Post by pjj »

Wow, I just had a quick look and boy, am I impressed!
Image
Just a a quick thought: could you please copy #Flag from SASS.syx into it? It's good to be able to see if number of !important one uses isn't too high.
Alium tibi quaere fratrem; hic, quem tuum putas, meus est. Titus Flāvius Caesar Vespasiānus Augustus

inspector71
Posts: 219
Joined: 22 Sep 2017 07:59

Re: FIXED? Some CSS highlighter quirks

Post by inspector71 »

Rickard Johansson wrote:
03 Aug 2022 13:19
I think the CSS.syx file is finished and complete now. I'm still working on the CSS.ini file (auto completion stuff...).

css.zip
Nigh on perfect for me. Just one slight oddity but that may be nothing. Anyone know if grid-gap and gap are interchangable? I seem to be using either, in different rules, and they both work the same.

However, in this latest CSS, grid-gap is coloured incorrectly:

Image

Whereas just gap is fine:

Image

So, just a minor thing really.

Although, in the above image I noticed that if I choose a generic variable name like --gap, then gap in var(--gap) is not a variable colour.

Overall though, big improvement!!

Thanks 🙏

User avatar
pjj
Posts: 1998
Joined: 13 Oct 2009 13:48
Location: Kraków, Poland

Re: FIXED? Some CSS highlighter quirks

Post by pjj »

inspector71 wrote:
04 Aug 2022 02:40
Just one slight oddity but that may be nothing. Anyone know if grid-gap and gap are interchangable? I seem to be using either, in different rules, and they both work the same.
According to CanIUse (I haven't found it mentioned on MDN), grid-gap is a non-standard name; so, they both can work now, but grid-gap should be avoided in favor of gap.
Alium tibi quaere fratrem; hic, quem tuum putas, meus est. Titus Flāvius Caesar Vespasiānus Augustus

User avatar
pjj
Posts: 1998
Joined: 13 Oct 2009 13:48
Location: Kraków, Poland

Re: Some CSS highlighter quirks

Post by pjj »

inspector71 wrote:
03 Aug 2022 05:30
pjj wrote:
02 Aug 2022 09:18
I suppose you're referring to Language Server Protocol (LSP), which has been implemented already and is very helpful indeed.
That's the one :)

You have used it?

I'm not really sure what it is. Maybe I've misinterpreted or missed something.
Yes, I do use LSP binding for three Web languages (JS, CSS, PHP), mainly as static analyzers. In other words, they help immediately find grammar and syntax mistakes in my scripts/stylesheets.
What is the Language Server Protocol?

Adding features like auto complete, go to definition, or documentation on hover for a programming language takes significant effort. Traditionally this work had to be repeated for each development tool, as each tool provides different APIs for implementing the same feature.

A Language Server is meant to provide the language-specific smarts and communicate with development tools over a protocol that enables inter-process communication.

The idea behind the Language Server Protocol (LSP) is to standardize the protocol for how such servers and development tools communicate. This way, a single Language Server can be re-used in multiple development tools, which in turn can support multiple languages with minimal effort.

LSP is a win for both language providers and tooling vendors!

https://microsoft.github.io/language-server-protocol/
If I understand it correctly, RJ TE does not use LSP for syntax highlighting at all, hence a series of our back-and-forths in this thread ;) Of course resting solely on LSP with respect to syntax highlighting would mean that everybody would need to install and use LSP to get their code properly highlighted; on the other hand I'd love to see LSP used more extensively in RJ TE!

(Yes, if regex rules were just a backup solution, we'd discuss them anyway. But with code highlighting done via LSP we would get the newest CSS bits [or JS, or PHP, etc.] sooner, simply by updating our LSP code.)
Alium tibi quaere fratrem; hic, quem tuum putas, meus est. Titus Flāvius Caesar Vespasiānus Augustus

inspector71
Posts: 219
Joined: 22 Sep 2017 07:59

Re: Some CSS highlighter quirks

Post by inspector71 »

pjj wrote:
04 Aug 2022 08:45
inspector71 wrote:
03 Aug 2022 05:30
pjj wrote:
02 Aug 2022 09:18
I suppose you're referring to Language Server Protocol (LSP), which has been implemented already and is very helpful indeed.
That's the one :)

You have used it?

I'm not really sure what it is. Maybe I've misinterpreted or missed something.
Yes, I do use LSP binding for three Web languages (JS, CSS, PHP), mainly as static analyzers. In other words, they help immediately find grammar and syntax mistakes in my scripts/stylesheets.
Cool, so it sounds like you're able to use LSP as an alternative or 'backend' for linting?
pjj wrote:
04 Aug 2022 08:45
What is the Language Server Protocol?

Adding features like auto complete, go to definition, or documentation on hover for a programming language takes significant effort. Traditionally this work had to be repeated for each development tool, as each tool provides different APIs for implementing the same feature.

A Language Server is meant to provide the language-specific smarts and communicate with development tools over a protocol that enables inter-process communication.

The idea behind the Language Server Protocol (LSP) is to standardize the protocol for how such servers and development tools communicate. This way, a single Language Server can be re-used in multiple development tools, which in turn can support multiple languages with minimal effort.

LSP is a win for both language providers and tooling vendors!

https://microsoft.github.io/language-server-protocol/
If I understand it correctly, RJ TE does not use LSP for syntax highlighting at all, hence a series of our back-and-forths in this thread ;) Of course resting solely on LSP with respect to syntax highlighting would mean that everybody would need to install and use LSP to get their code properly highlighted; on the other hand I'd love to see LSP used more extensively in RJ TE!

(Yes, if regex rules were just a backup solution, we'd discuss them anyway. But with code highlighting done via LSP we would get the newest CSS bits [or JS, or PHP, etc.] sooner, simply by updating our LSP code.)

So LSP is installed locally?

I was assuming it was a server editors would ping for a current syntax highlighting (and other tasks) details of languages. Maybe pull definitions down once a session and apply them to files.

If LSP is a local server and it's free, I would not mind running it - assuming it is not a bloated resource hog for an ordinary middle of the road laptop - as long as it helps.
Last edited by inspector71 on 04 Aug 2022 16:22, edited 1 time in total.

inspector71
Posts: 219
Joined: 22 Sep 2017 07:59

Re: FIXED? Some CSS highlighter quirks

Post by inspector71 »

pjj wrote:
04 Aug 2022 08:27
inspector71 wrote:
04 Aug 2022 02:40
Just one slight oddity but that may be nothing. Anyone know if grid-gap and gap are interchangable? I seem to be using either, in different rules, and they both work the same.
According to CanIUse (I haven't found it mentioned on MDN), grid-gap is a non-standard name; so, they both can work now, but grid-gap should be avoided in favor of gap.
Sweet, thanks. You're doing all the research I'm not doing :) Much appreciated.

I suppose gap seems to also apply to display:flex so it makes sense to standardise on it.

inspector71
Posts: 219
Joined: 22 Sep 2017 07:59

Re: Some CSS highlighter quirks

Post by inspector71 »

Rickard Johansson wrote:
31 Jul 2022 17:30
...
Unknown properties ("fnt-weight") has a different color than the standard properties by design. It's common in other editors as well...
...
Can something similar - a 'whoops that's not recognised' colour for tags? Would help avoid this sort of typo I just did:

Image

User avatar
Rickard Johansson
Site Admin
Posts: 6281
Joined: 19 Jul 2006 14:29

Re: FIXED? Some CSS highlighter quirks

Post by Rickard Johansson »

About language servers (CSS).
A language server is executed locally on your computer and it allows other programs to communicate with it by sending notifications and requests. The program may request information about a symbol or variable, or request things like an auto completion list. It very rarely support syntax highlighting (or semantic tokens). The latest version of the CSS language server doesn't seem to have any support for this.

Also, it seems it hasn't been updated in a while. E.g. there are several newer CSS properties missing in the auto completion.

Many language servers have not been updated in years, so I'm not sure it's a good idea to rely on them for syntax highlighting. I think it would be a mistake to think that all language servers are always up to date.

User avatar
pjj
Posts: 1998
Joined: 13 Oct 2009 13:48
Location: Kraków, Poland

Re: FIXED? Some CSS highlighter quirks

Post by pjj »

Rickard Johansson wrote:
05 Aug 2022 10:09
The latest version of the CSS language server doesn't seem to have any support for this.

Also, it seems it hasn't been updated in a while. E.g. there are several newer CSS properties missing in the auto completion.
I'm glad you mentioned this, because I was about to ask about CSS language server myself. It is indeed that lS for CSS that RJ TE uses is hopelessly out of date and is presented as a public archive, but there's also another one, which is actively maintained (latest release was published on May, 18). I have installed this version and now I'm stuck, since simple running cssLanguageService.js instead of cssServerMain.js doesn't work.
Rickard Johansson wrote:
05 Aug 2022 10:09
Many language servers have not been updated in years, so I'm not sure it's a good idea to rely on them for syntax highlighting. I think it would be a mistake to think that all language servers are always up to date.
Well, the newest version of intelephense was published 5 months ago, typescript-language-server -- a month ago, and so are other LSs published as Node packages. It would be really cool if RJ TE could make use of them!

In case special ("bin") versions of LSs are needed, perhaps this would fit the bill? It seems to be actively maintained.
Alium tibi quaere fratrem; hic, quem tuum putas, meus est. Titus Flāvius Caesar Vespasiānus Augustus

User avatar
Rickard Johansson
Site Admin
Posts: 6281
Joined: 19 Jul 2006 14:29

Re: FIXED? Some CSS highlighter quirks

Post by Rickard Johansson »

Thanks. The vscode-css-languageservice does seem to be a better choice, but it still doesn't seem to support semantic token requests (for syntax highlighting), if you check inside cssLanguageTypes.ts.

I'll take a look at the listed language servers, but I'm not sure I want to test them all and publish instructions on how to install and add them to the editor, for every single one in the LSP section :? But, maybe someone would like to help with that? :wink:

inspector71
Posts: 219
Joined: 22 Sep 2017 07:59

Re: FIXED? Some CSS highlighter quirks

Post by inspector71 »

Setting aside any language server issues, if the problem could loosely be described as needing a reliable list of CSS properties to regex with, maybe this might help:

https://github.com/microsoft/vscode-cus ... ntation.js

Or something from further up the tree, including possibly HTML assistance as well:

https://github.com/microsoft/vscode-cus ... n/web-data

Here's another possible option:

https://www.w3.org/Style/CSS/all-properties.en.html#alt

So there's two JSON, one XML and one tab delimited files that can be pinged to download lists of properties (and more) that could be used for informing syntax highlighting, could they not?

Post Reply