tree-sitter-scss nodes parsed as ERROR only in vue

[sethidden]

Recently, a scss parser was added to nvim-treesitter:

• the original repo is https://github.com/elianiva/tree-sitter-scss
• but nvim-treesitter (temporarily?) uses this fork because of needed ABI upgrade https://github.com/elianiva/tree-sitter-scss

Also see the PR that added tree-sitter-scss to nvim-treesitter: https://github.com/nvim-treesitter/nvim-treesitter/pull/1109/files

---

tree-sitter-scss highlights .scss files fine, but if you paste the very same contents of that .scss file into a .vue <style lang="scss"> tag, this happens:

top half: .scss file - left is query info, right is the source code itself
bottom half: .vue file - left is query info, right is the source code

The syntax highlighting starts breaking whenever you use the keywords "and" or "or", even if they're part of a variable name:
eg. $my-color: red; - since color contains or, the highlighting breaks. But that happens only in .vue files. .scss files are ok.

People originally started reporting parsing issues since this comment: nvim-treesitter/nvim-treesitter#650 (comment)

(query info thanks to https://github.com/nvim-treesitter/playground)

---

System info:

treesitter healthcheck

## Installation
 24   - OK: `tree-sitter` found  0.19.4 (6dd41e2e45f8b4a00fda21f28bc0ebc6b172ffed) (parser generator, only needed for :TSInstallFromGrammar)
 25   - OK: `node` found v14.16.0 (only needed for :TSInstallFromGrammar)
 26   - OK: `git` executable found.
 27   - OK: `cc` executable found. Selected from { vim.NIL, "cc", "gcc", "clang", "cl" }
 28   - OK: Neovim was compiled with tree-sitter runtime ABI version 13 (required >=13). Parsers must be compatible with runtime ABI.
## Parser/Features H L F I
  ...cut out unrelated parsers...
  - typescript     ✓ ✓ ✓ ✓ 
  - javascript     ✓ ✓ ✓ ✓ 
  - scss           ✓ . . ✓ 
  - css            ✓ . ✓ ✓ 
  - html           ✓ ✓ ✓ ✓ 
  - vue            ✓ . ✓ . 

nvim verison

NVIM v0.5.0-dev+1227-gb518b9076
Build type: RelWithDebInfo
LuaJIT 2.1.0-beta3
Compilation: /usr/bin/cc -U_FORTIFY_SOURCE -D_FORTIFY_SOURCE=1 -O2 -g -Og -g -Wall -Wextra -pedantic -Wno-unused-parameter -Wstrict-prototypes -std=gnu99 -Wshadow -Wconversion -Wmissing-prototypes -Wvla -fstack-protector-strong -fno-common -fdiagnostics-color=always -DINCLUDE_GENERATED_DECLARATIONS -D_GNU_SOURCE -DNVIM_MSGPACK_HAS_FLOAT32 -DNVIM_UNIBI_HAS_VAR_FROM -DMIN_LOG_LEVEL=3 -I/home/runner/work/neovim/neovim/build/config -I/home/runner/work/neovim/neovim/src -I/home/runner/work/neovim/neovim/.deps/usr/include -I/usr/include -I/home/runner/work/neovim/neovim/build/src/nvim/auto -I/home/runner/work/neovim/neovim/build/include
Compiled by runner@fv-az207-598

Features: +acl +iconv +tui
See ":help feature-compile"

   system vimrc file: "$VIM/sysinit.vim"
  fall-back for $VIM: "/share/nvim"

Run :checkhealth for more info

Plugin versions:
nvim-treesitter a0e99abd7c4485d4da34e8f57fb930fe1dbaa93c

Parser versions:
tree-sitter-vue 91fe275
tree-sitter-scss b2407613f3804d0db15ae6f9f49cf2e759f06dba

[sethidden]

Ah I got the culprit. You can't have both css and scss parsers installed or else the above parse errors happen. Looks like the css parser always takes precedence over scss, even if lang="scss"

I don't understand .scm files, but I guess this code hints that this could be it.
https://github.com/nvim-treesitter/nvim-treesitter/pull/1109/files#diff-6a37e15b5be0a56c65941c72ca6e9a172a1a80f8e33f8cd60cb065452381e422R1-R11

Repro script:

# recurse submodules because need to downloads nvim-treesitter repos
git clone --recurse-submodules https://github.com/3nuc/tree-sitter-vue-issue-10

# this just contains running neovim to open index.vue file
# with just the plugins from the repo (not your local ones)
./run.sh

#after tree-sitter runs the ensure_installed parsers (vue, scss), close nvim and repoen it
:qa! 
./run.sh

# the default theme doesn't really show parse errors in syntax highlighting so open TS Playground to make sure
:TSPlaygroundToggle

# you should get no parse errors, because the "css" parser is not installed. let's install it now
:TSInstall css

#re-parse the current file with both scss and css (index.vue)
:e!

#toggle the query playground because it's still showing data from when "css" parser was not installed
:TSPlaygroundToggle #closes
:TSPlaygroundToggle #reopens

#Now you should have the parse errors that I have screened in the OP

[ikatyang]

Hi, can you follow the steps from #8 (comment) to reproduce the issue? As a side note, tree-sitter-vue does not actually parse anything inside the <style> tag, the embedded parts are parsed by the corresponding parsers, which is out of scope of tree-sitter-vue.

[sethidden]

Nope I can't. I'll reopen in nvim-treesitter. Thanks!

*If someone comes across this issue in the future - run :TSUninstall css, but make sure that the scss parser is installed :TSInstall scss and restart nvim)