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.