Implement naming conventions in CSS grammar

chbk commented 4 years ago

Description of the Change

This is a rewrite of the Tree-sitter grammar to implement naming conventions for syntax scopes.

Currently, Atom uses the TextMate grammar because the Tree-sitter grammar is lacking. This PR thoroughly updates the Tree-sitter grammar to be fully functional.

Benefits

Many new scopes added to make the grammar explicit and exhaustive.
Notable improvements on punctuation, selectors and built-ins.
Highlighting to be consistent with other languages.

Possible Drawbacks

The changes aim to facilitate theme development, filling the template is enough to ensure coherent highlighting across languages, instead of painfully creating styling rules for every language separately.

Regex grammar scopes vs homogenized Tree-sitter grammar scopes:

support.constant.property-value -> constant.style.support
entity.other.keyframe-offset -> constant.offset
support.type.property-name -> entity.property.support
variable.parameter.keyframe-list -> entity.keyframes
entity.name.tag -> entity.selector.tag
entity.other.attribute-name.class -> entity.selector.class
entity.other.attribute-name.id -> entity.selector.id
entity.other.attribute-name.pseudo-class -> entity.selector.pseudo-class
entity.other.attribute-name.pseudo-element -> entity.selector.pseudo-element
entity.other.attribute-name -> entity.selector.attribute

Applicable Issues

https://github.com/atom/atom/issues/8430

Related Pull Requests

chbk commented 4 years ago

Preview of the changes between the current TextMate grammar and this PR's Tree-sitter grammar, with Atom's default syntax themes:

Without naming conventions (current TextMate grammar)	With naming conventions in theme and Tree-sitter grammar
Solarized Dark	Solarized Dark
One Dark	One Dark
Base16 Tomorrow Dark	Base16 Tomorrow Dark
Atom Dark	Atom Dark
Solarized Light	Solarized Light
One Light	One Light
Base16 Tomorrow Light	Base16 Tomorrow Light
Atom Light	Atom Light

Code snippet:

@import url("p.css") print;
@import 't.css' tv, tty;

@media screen,
(orientation: portrait),
(invalid: 0) and (top: 4) {
  body + pre::after {
    content: 'fruit';
    --bandana: #488cff;
  }
}

@supports
(top: 4)
or (invalid: 0)
or (orientation: portrait) {
  div > p::first-letter {
     color: #FE742F;
     font-weight: (bold);
     height: initial;
  }
}

@keyframes ninja {
  to {
    top: (2000cm);
  }
}

:root, *,
h1 > wall ~ select,
.table:not(wall):not(div),
#id:not(.wall),
#wall a[href*="karate"],
dash[type~=swift],
slash[data-melon=5],
#url::before,
.nth:nth-child(4) {
  color: var(--bandana);
  top: 30em !important;
  display: flex;
  invalid: invalid;
  filter: invalid(20%);
  border: 1px solid gray;
  border: 3.1hz solid what;
  /* Firefox */
  transform: scaleY(-1);
}

cssinate commented 3 years ago

This looks like a valiant project. I like the idea. I haven't created themes before, so please enlighten me: if this gets accepted, won't themes break?

chbk commented 3 years ago

Default themes have been updated already so they'll work fine with this PR. For other community themes, it depends on what the merging strategy is:

Merge the PR as is and keep the Regex grammar as the default (just like it is now).
Merge the PR as is and make the Tree-sitter grammar the default. Users that wish to use the legacy Regex grammars can do so in their editor's settings (there's a checkbox for that).
Merge the PR after adding the legacy scopes. I'm happy to do it if needed.

The TextMate documentation doesn't provide many useful scopes for CSS, so the scopes I listed above seem to have emerged from some sort of genetic process, selecting what works with existing themes. It's blatant with support.type.property-name for example, which is not a type at all, or entity.other.attribute-name.id which is not an attribute name. This is what makes creating a theme so difficult, the inconsistencies require you to check what works with each language individually.

atom / language-css