Skip to content

Commit

Permalink
Distinguish between pseudo-class selectors and interpolation
Browse files Browse the repository at this point in the history
# Related Links:

Addresses [Issue 7: tree-sitter parses complex declaration as pseudo-class instead of CSS custom
property](tree-sitter-grammars#7).

# What

This commit places a guard clause around the scanner expression for detecting a pseudo-class
selector colon.  The guard clause ensures that the character *prior to* any `{` symbol was not the
start of interpolation.

I have also re-run the generate under 0.24.5, so the parser, headr files, and generated grammar have
been updated to the latest & greatest version. A `tree-sitter.json` file has also been generated,
and the corresponding tree-sitter clause removed from `package.json` (automatically, by tooling).

# Why

This declaration, which has been [added to the test cases](./test/corpus/declarations.txt).

```
div {
  --#{$x}--left: var(--#{$y}--right);
}
```

As written, when `PSEUDO_CLASS_SELECTOR_COLON` is a valid possible symbol, the scanner clause for
pseudo-class selector detection passes if a `{` is detected before encountering a `}` or `;` symbol.
The expression `#{$y}` in the test case meets that criteria, the lexer result is marked incorrectly,
and the parser fails to parse the declaration correctly.

Adding a guard that the prior character seen was a `#` and that the `{` is not the start of a nested
block identified by a pseudo-class but is, instead, part of an interpolation, fixes this issue.

# Test steps

1. Run the tests under the old clause and see this failure:

```
correct / expected / unexpected

  1. Interpolation on both sides of a declaration:

    (stylesheet
      (rule_set
        (selectors
          (tag_name))
        (block
          (declaration
            (ERROR)
            (property_name
              (identifier)
              (interpolation
                (variable))
              (identifier))
            (call_expression
              (function_name)
              (arguments
                (identifier)
                (interpolation
                  (variable))
                (identifier)))))))

```

2. Run it with the new clause and there is no more failure.  :-)  In fact, *all* of the tests now
   pass.
  • Loading branch information
kensternberg-authentik committed Dec 16, 2024
1 parent 00a4cd9 commit af5d5f0
Show file tree
Hide file tree
Showing 11 changed files with 8,380 additions and 8,230 deletions.
210 changes: 91 additions & 119 deletions package-lock.json

Large diffs are not rendered by default.

10 changes: 0 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,16 +49,6 @@
"parse": "tree-sitter parse",
"test": "tree-sitter test"
},
"tree-sitter": [
{
"scope": "source.scss",
"file-types": [
"scss"
],
"injection-regex": "^scss$",
"highlights": "queries/highlights.scm"
}
],
"eslintConfig": {
"env": {
"commonjs": true,
Expand Down
2 changes: 2 additions & 0 deletions src/grammar.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions src/node-types.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit af5d5f0

Please sign in to comment.