search

posva / vim-vue

Syntax Highlight for Vue.js components
MIT License
1.29k stars 103 forks source link

Broken Syntax Highlighting with Custom Component #152

Open Gbeschbacher opened 3 years ago

Gbeschbacher commented 3 years ago

Hey!

I've found problem with custom-components starting with style name, e.g. <styled-text>. The code you provide for detecting the surrounding tag does match here (https://github.com/posva/vim-vue/blob/master/syntax/vue.vim#L71). This is a problem because it breaks the syntax highlighting of the script block (as you can see in the screenshots).

Broken Working
broken_syntax working_syntax

Can you please adapt the vueSurroundingTag to not mach custom components starting with style? I guess the intention of your code is to also be able to write something like <style scoped> and still match. However, it would need further adaption like including an optional group of one space with unlimited characters for each vueSurroundingTag. This would help to use styled-text as a component-name because it would neither match <style> nor <style scoped> (due to the missing space)

adriaanzon commented 3 years ago

This problem looks similar to #102, which is a problem in Vim's own HTML syntax file. I can also reproduce it with :setfiletype html.