bug: Scope css element fails to parse

[mmanela]

Did you check existing issues?

• I have read all the tree-sitter docs if it relates to using the parser
• I have searched the existing issues of tree-sitter-css

Tree-Sitter CLI Version, if relevant (output of tree-sitter --version)

0.22.6

Describe the bug

The following CSS from the official docs leads to a parsing error.

@scope (.article-body) {
    img {
        border: 5px solid black;
}

Parse tree with error

(stylesheet ; [0, 0] - [4, 0]
  (at_rule ; [0, 0] - [3, 1]
    (at_keyword) ; [0, 0] - [0, 6]
    (parenthesized_query ; [0, 7] - [0, 22]
      "(" ; [0, 7] - [0, 8]
      (ERROR ; [0, 8] - [0, 9]
        ".") ; [0, 8] - [0, 9]
      (keyword_query) ; [0, 9] - [0, 21]
      ")") ; [0, 21] - [0, 22]
    (block ; [0, 23] - [3, 1]
      "{" ; [0, 23] - [0, 24]
      (rule_set ; [1, 4] - [3, 1]
        (selectors ; [1, 4] - [1, 7]
          (tag_name)) ; [1, 4] - [1, 7]
        (block ; [1, 8] - [3, 1]
          "{" ; [1, 8] - [1, 9]
          (declaration ; [2, 8] - [2, 32]
            (property_name) ; [2, 8] - [2, 14]
            ":" ; [2, 14] - [2, 15]
            (integer_value ; [2, 16] - [2, 19]
              (unit)) ; [2, 17] - [2, 19]
            (plain_value) ; [2, 20] - [2, 25]
            (plain_value) ; [2, 26] - [2, 31]
            ";") ; [2, 31] - [2, 32]
          "}")) ; [3, 0] - [3, 1]
      "}"))) ; [3, 1] - [3, 1]

Steps To Reproduce/Bad Parse Tree

Parse the following code

@scope (.article-body) {
    img {
        border: 5px solid black;
}

Expected Behavior/Parse Tree

(stylesheet ; [0, 0] - [4, 0]
  (at_rule ; [0, 0] - [3, 1]
    (at_keyword) ; [0, 0] - [0, 6]
    (parenthesized_query ; [0, 7] - [0, 22]
       (class_selector (class_name)) ) ; [0, 21] - [0, 22]
    (block ; [0, 23] - [3, 1]
      "{" ; [0, 23] - [0, 24]
      (rule_set ; [1, 4] - [3, 1]
        (selectors ; [1, 4] - [1, 7]
          (tag_name)) ; [1, 4] - [1, 7]
        (block ; [1, 8] - [3, 1]
          "{" ; [1, 8] - [1, 9]
          (declaration ; [2, 8] - [2, 32]
            (property_name) ; [2, 8] - [2, 14]
            ":" ; [2, 14] - [2, 15]
            (integer_value ; [2, 16] - [2, 19]
              (unit)) ; [2, 17] - [2, 19]
            (plain_value) ; [2, 20] - [2, 25]
            (plain_value) ; [2, 26] - [2, 31]
            ";") ; [2, 31] - [2, 32]
          "}")) ; [3, 0] - [3, 1]
      "}"))) ; [3, 1] - [3, 1]

Repro

@scope (.article-body) {
    img {
        border: 5px solid black;
}

[mohamedmansour]

And @container queries too fail to parse:

@container sidebar (min-width: 700px) {
  .card {
    font-size: 2em;
  }
}

[mohamedmansour]

@amaanq how would you like us to contribute fixes for css treesitter, I am using it a lot for our project and the css spec is always improving adding new syntax.

[mohamedmansour]

@amaanq @michel-slm Is it possible to get more contributors to this project to improve and get more modern CSS features supported? Or is the best route to fork and maintain modern CSS features that way since there are no maintainers actively participating here?