search

ikatyang / tree-sitter-vue

Vue grammar for tree-sitter
https://ikatyang.github.io/tree-sitter-vue/
MIT License
77 stars 25 forks source link

Wrong highlighting int style section #3

Closed timsofteng closed 3 years ago

timsofteng commented 3 years ago

Please take a look on screenshot. Looks like it's wrong hithlighting (it highlights or as operator).

image

ikatyang commented 3 years ago

Hi, this grammar only extracts the <style> and similar sections where the embedded content parsing should be done in the corresponding grammar, it's probably tree-sitter-css in your case I guess.

image

timsofteng commented 3 years ago

But it is style section of vue file. You know vue file contains three sections as template, script and style.

gegoune commented 3 years ago

@timsofteng My understanding is that tree-sitter-vue does not provide highlighting (or any other tree-sitter functionality) for any of three blocks you can find in Vue files.

What it does is it parses file, looks for Vue top level tags, so template, script and style, and then embeds respective parsers to provide that functionality.

So for example, everything within <style> block will be parsed by tree-sitter-css, in <template> block it will use tree-sitter-html. This is called language injection in tree-sitter, and tree-sitter-vue uses that so it does not need to reinvent grammas/parsers for all possible languages Vue files can have.

What @ikatyang meant saying that it is tree-sitter-css in your case is that your problem has nothing to do with tree-sitter-vue but grammar it injected for that block, which is one from https://github.com/tree-sitter/tree-sitter-css. You should report your issue over there.

EDIT: On top of everything, it seems like you are using scss which I believe tree-sitter has no grammar/parser for. tree-sitter-vue will inject aforementioned css grammar which does not handle scss correctly. I have asked about it here.

timsofteng commented 3 years ago

@cloggier got it! Thanks. I will track your issue.