MEGA-ISSUE: Syntax highlighting in `language-css`

[savetheclocktower]

IMPORTANT: Some issues have already been fixed!

If you’re still on the regular 1.113 release, you might be suffering from a problem that has already been fixed. Many fixes landed on master in #859. You are encouraged to download the latest rolling release — both (a) to see whether what you’re reporting has been fixed, and (b) so that you can enjoy the fixes that have been reported since the 1.113 release.

---

This will serve as a catch-all issue for any problems you may encounter with syntax highlighting in CSS files (language-css). If you have problems with the new syntax highlighting (or folds, or indents) that are specific to .css files, keep reading.

Something isn't highlighting correctly!

If you’ve found any highlighting regressions since 1.113:

First, please scroll down and see if someone else has reported the issue. If so, then you need only sit back and wait for a fix — most issues will be fixed in version 1.114!

If not, please comment with

• A small amount of sample code to reproduce the issue
• Screenshots (before and after would be ideal, but just the “after” is OK for obvious things

I want to go back to the old highlighting!

You can easily opt out of the new Tree-sitter highlighting for any language, but first please:

• subscribe to this issue so you'll know when the problem is fixed
• remove the config change when the next release comes out so that you can enjoy the new grammar once again

To revert to the old Tree-sitter grammar for this language only, add the following to your config.cson:

".css.source":
  core:
    useLegacyTreeSitter: true

To revert to the TextMate-style grammar for this language only, add the following to your config.cson:

".css.source":
  core:
    useTreeSitterParsers: false

[evanmhm]

I'm new to Pulsar (1.113.0) transitioning from Atom right now, so I hope I'm describing this issue correctly. When writing selectors and using element names (ie div, p, ul...) the syntax highlighting correctly gives .syntax--name when used in conjunction with a class or id selector. Example: div.myClass { ... correctly assigns the syntax class to div. But when the element name is by itself in the selector it's instead treated like invalid text, being given the .syntax--meta.syntax--selector classes.

current behavior:

expected behavior:

[savetheclocktower]

But when the element name is by itself in the selector it's instead treated like invalid text, being given the .syntax--meta.syntax--selector classes.

This was exceedingly stupid of me. I don't even remember what I was thinking here — except what's described in the comment above it — but without targeting error scenarios, I made it so that this affected ordinary descendant combinator tag names as well.

I will fix this tonight. If you don't want to wait, you can download a CI build once this makes it into #859 — instructions are in the PR description.

Thanks so much for reporting this!

[savetheclocktower]

@evanmhm and others: this is fixed in this commit. If you don't feel like digging around for a CI build, #859 will probably land in a week or so, at which point a rolling release will be available.

[evanmhm]

Thanks so much for the quick fix! Loving Pulsar so far, thanks for all the work you do!

[evanmhm]

Downloaded latest CI build and noticed one more edge case. Inside of colon selectors with parentheses, tag names combined with another selector have the same issue as before.

[savetheclocktower]

Good and bad news here. The bad news is that this is actually a bug in tree-sitter-css; I've opened an issue.

The good news is that, since so many other similar selectors parse correctly, the fix might be simple enough for me to figure out myself. Thanks for the report!

[savetheclocktower]

I submitted this PR as a possible fix to the issue. If it doesn't see any movement before 1.114, I'll probably land it on my fork and build a custom tree-sitter-css temporarily just to make sure this gets addressed.