Add Tree-sitter CSS grammar

[maxbrunsfeld]

Description of the Change

This PR adds a new CSS grammar that uses the tree-sitter-css parser instead of first-mate. This takes advantage of Atom's built-in support for Tree-sitter which allows for more consistent syntax highlighting, more reliable code folding, the Editor: Select Larger Syntax Node editing command, and better performance.

I tried to make the highlighting pretty similar to the TextMate grammar's highlighting, but there are some differences. Here's a screenshot:

Alternate Designs

We could not add a new CSS parser. The strongest reason why I wanted to do this now is that we've already added HTML and JavaScript parsers based on Tree-sitter, and we need a Tree-sitter CSS grammar for highlighting the contents of style tags in HTML. But aside from that, this should make for a better experience editing CSS files.

Benefits

• Large CSS files will highlight much faster
• Code folding will work better for CSS
• CSS inside of <style> tags will be syntax highlighted with Tree-sitter enabled.

Possible Drawbacks

I haven't yet added a less parser, so there might now be a bigger difference between editing .css and .less files in Atom. A less parser would be pretty easy to add. In fact, this parser might already work pretty well for Less, because I already implemented support for nested rule sets, since that feature looks like it's going to be standardized.

TODO

• [x] A lot of things are given the unstyled class support.constant.property-value.css in textmate. In tree-sitter they are given keyword.other which is styled. Example auto and bold in this css.

  .class
  {
  margin: 0 auto;
  font-weight:bold;
  }

• [x] svg in the following is given entity.name.function in textmate. Nothing in tree-sitter:

@namespace svg url(http://www.w3.org/2000/svg);

• [x] The # symbol in a color is given the class punctuation.definition.constant.css which is styled differently in one-dark-ui

  p {color: #F2DEDE;}

• [x] // is parsed as comment. From what I (@Ben3eeE) can tell // is ignored by some browsers but not valid as a comment. And the textmate grammar does not parse // as a comment. See textmate image below:

• [x] the final semicolon is not nessecary in declaration blocks

  div p, #id:first-line {background-color: red; background-style: none}
  div p {margin: 0; padding: 1em;}

• [x] @media only screen parses screen as a syntax error. It should be keyword_query

  @media only screen and (min-width : /* 40 */
  320px),
  not print and (max-width: 480px)  /* kek */ and (-webkit-min-device-pixel-ratio /*:*/ : 2),
  only speech and (min-width: 10em),  /* wat */     (-webkit-min-device-pixel-ratio: 2) { }

• [x] unit in shapes are not parsed correctly. All but the last are plain_value. The comment is also plain_value

  a{
  shape-outside: circle(20em/*=*/at 50% 50%);
  shape-outside: inset(1em, 1em, 1em, 1em);
  }

• [x] The calc from https://github.com/atom/language-css/issues/147 parses with syntax errors

  p {
  font-size: calc(10px + (56 - 10) * ((100vw - 320px) / (1920 - 320))); 
  }

• [x] Negative numbers are not parsed as numbers

  .number    { margin:    -456.8px   } /* Negative non-integer <number> */
  .number    { margin:    -0.0px     } /* Zero, with a leading - (Though strange, this is an allowed value) */

• [x] css variables are parsed as property_name. textmate scopes them as variable.css.

  element {
  --main-bg-color: brown;
  }
  element {
  background-color: var(--main-bg-color);
  }

• [x] pseudo selectors are parsed as tag_name. textmate scopes them as entity.other.attribute-name.psuedo-element.css or meta.selector.css

  .blockquote-footer::before {
  content: "\2014 \00A0";
  }

• [ ] odd is parsed as tag_name. textmate scopes it as support.constant.parity.css

  .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
  }

Applicable Issues

Refs https://github.com/atom/atom/issues/18327

/cc @Arcanemagus since you pointed out the issue with <style> tags. /cc @simurai since you code some CSS in Atom.

[maxbrunsfeld]

/cc @Ben3eeE would you be interested in taking a look at this one, and seeing if you can improve the scopes that I have?

I think there are probably some issues; I didn't spend too much time trying to get them to match.

[Ben3eeE]

@maxbrunsfeld Yeah I'm interested. I will add the issues I find to this comment. It seems like we also need to fix issues in the parser. After I have a list of things to do I will start the work on addressing the issues.

Syntax Errors

• [x] tag_names and class_names can have numbers. Adding a rule for h1 parses as syntax error

  h1   {color: blue;}

• [x] max-aspect-ratio: 2/1 is a syntax error in tree-sitter

  @media (max-aspect-ratio: 2/1) {
  div {
  border: 2px solid blue;
  }
  }

• [x] margin as percentage is a syntax error in tree-sitter

  .class {
  margin: 5%
  }

• [x] Scientific notation with uppercase E looks wrong.

  .number 
  {
  margin: 10E3px
  }

• [x] Psuedo classes on tag names

  a:hover {
  background-color: gold;
  }

• [x] calc Also an issue in textmate https://github.com/atom/language-css/issues/147

  Scopes

• [ ] The # symbol in a color is given the class punctuation.definition.constant.css which is styled differently in one-dark-ui

  p {color: #F2DEDE;}

• [x] !important is styled as keyword.other.important in textmate. Now it's just keyword.operator which is unstyled in one-dark-ui

  .class {width: 100% !important;}

• [ ] A lot of things are given the unstyled class support.constant.property-value.css in textmate. In tree-sitter they are given keyword.other which is styled. Example auto and bold in this css.

  .class
  {
  margin: 0 auto;
  font-weight:bold;
  }

• [x] Functions are styled with support.function.[name] in textmate. entity.name.function in tree-sitter

  @font-face {
  font-family: 'open_sansextrabold';
  src: url('OpenSans-ExtraBold-webfont.eot');
  }

• [x] The number and unit in 3px are given different classes in textmate. But they are styled the same with one-dark-ui

  p {border: 3px solid red;}

• [x] Keyframes from and to are given the class entity.name.tag when they are not tags

  @keyframes important1 {
  from { margin-top: 50px; }
  50%  { margin-top: 150px !important; } /* ignored */
  to   { margin-top: 100px; }
  }

[thomasjo]

Potentially useful CSS grammar resources:

• https://www.w3.org/TR/CSS22/grammar.html
• https://github.com/antlr/grammars-v4/blob/master/css3/css3.g4

[maxbrunsfeld]

@Ben3eeE Thanks so much for that checklist of examples! I believe all of the parsing problems have been fixed.

[maxbrunsfeld]

A lot of things are given the unstyled class support.constant.property-value.css in textmate. In tree-sitter they are given keyword.other which is styled. Example auto and bold in this css.

We should probably roll that back. I'm not sure what I was thinking there.

[Ben3eeE]

Working on the scopes and found some more syntax errors

• [x] @namespace isn't parsed correctly

  @namespace url(http://www.w3.org/1999/xhtml);
  @namespace svg url(http://www.w3.org/2000/svg);

• [x] // is being parsed as a comment

  @namespace url(http://www.w3.org/1999/xhtml);
  @namespace svg url(http://www.w3.org/2000/svg);

• [x] !important is giving me a syntax error now. It didn't on the previous tree-sitter-css version

  .class {width: 100% !important;}

• [x] shapes

  
  div {
  width: 300px;
  height: 300px;
  background: repeating-linear-gradient(red, orange 50px);
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  animation: 4s poly infinite alternate ease-in-out;
  margin: 10px auto;
  }

@keyframes poly { from { clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); }

to { clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%); } }

[Ben3eeE]

We should probably roll that back. I'm not sure what I was thinking there.

I'm not sure how the textmate grammar works with this. Everything is given support.constant.[whatitis].css and some of them are styled some are not (one-dark-syntax).

[Ben3eeE]

Moved the list of things to do to the body of the PR instead of multiple comments and minimized some resolved comments.

[maxbrunsfeld]

Ok, addressed a couple more issues.

[Ben3eeE]

Added a few commits to fix inconsistencies in scopes compared to the textmate grammar. We are getting very close to looking like textmate now.

I also added a few more issues to the body of the PR.

Side by side comparison using atom-material-syntax: (Left is this Branch, Right is textmate)

[Ben3eeE]

From what I can this fixes all the open issues related to syntax highlighting in css if we fix the calc issue.

[maxbrunsfeld]

Ok, pushed some more parser improvements and checked some more boxes.

[Ben3eeE]

• Updated scopes to match the latest tree-sitter-css
• Confirmed the fixes in the latest tree-sitter-css
• Added scopes for anonymous nodes that make sense. I skipped a few which have inconsistencies in textmate like ( and left them completely unscoped here.
• Fixed inconsistent scope of attribute_selectors
• Fixed so keyword.operator is only scoped in binary_expression because otherwise it would conflict with selectors like * in binary_expression and * the all elements selector

[Ben3eeE]

svg in the following is given entity.name.function in textmate.

I scoped this as entity.namespace.name because entity.name.function feels wrong. It doesn't match textmate but I didn't want to scope the namespace name as a function name.

Maybe it should be entity.name.namespace though :thinking:

[maxbrunsfeld]

Ok, pushed a change to highlight variables. We're now getting into differences that are pretty minor. Do you think this is good to 🚢 ?

[Ben3eeE]

Yeah :shipit: It's important to get this out to fix highlighting of css in html and javascript.

I'll do another quick check on master after this is merged and open a PR with some minor tweaks if I find anything but I feel I have been quite thorough already so not sure that I will.