Refactor the whole plugin

syntax/patch/coffee.vim

@@ -0,0 +1,3 @@
+silent! syntax clear coffeeConstant
+syn match coffeeConstant '\v<\u\C[A-Z0-9_]+>' display 
+      \ containedin=@coffeeIdentifier

syntax/patch/css.vim

@@ -0,0 +1,14 @@
+" Use a different name in order to avoid css syntax interference
+silent! syntax clear cssUnitDecorators
+syntax match cssUnitDecorators2 
+      \ /\(#\|-\|+\|%\|mm\|cm\|in\|pt\|pc\|em\|ex\|px\|ch\|rem\|vh\|vw\|vmin\|vmax\|dpi\|dppx\|dpcm\|Hz\|kHz\|s\|ms\|deg\|grad\|rad\)\ze\(;\|$\)/
+      \ contained
+      \ containedin=cssAttrRegion,sassCssAttribute,lessCssAttribute,stylusCssAttribute
+
+silent! syntax clear cssKeyFrameProp
+syn match cssKeyFrameProp2 /\d*%\|from\|to/ 
+      \ contained nextgroup=cssDefinition
+      \ containedin=cssAttrRegion,sassCssAttribute,lessCssAttribute,stylusCssAttribute
+
+highlight default link cssUnitDecorators2 Number
+highlight default link cssKeyFrameProp2 Constant

syntax/patch/html.vim

@@ -0,0 +1,100 @@
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Config {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+let s:config = vue#GetConfig('config', {})
+let s:attribute = s:config.attribute
+"}}}
+
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Syntax highlight {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+" Clear htmlHead that may cause highlighting out of bounds
+silent! syntax clear htmlHead
+
+" html5 data-*
+syntax match htmlArg '\v<data(-[.a-z0-9]+)+>' containedin=@html
+
+" Vue ref attribute
+syntax match htmlArg 'ref' containedin=@html
+
+" Use syn-match in order to highlight both transition and transition-group
+" according to syn-priority
+syntax match VueComponentName containedin=htmlTagN '\v(component|slot|transition)' 
+syntax match VueComponentName containedin=htmlTagN '\v\C<[a-z0-9]+(-[a-z0-9]+)+>'
+syntax match VueComponentName containedin=htmlTagN '\v\C<([A-Z][a-zA-Z0-9]+)+>'
+
+syntax match VueAttr '\v(\S)@<![v:\@][^=/>[:blank:]]+(\=\"[^"]*\")?' 
+      \ keepend
+      \ containedin=htmlTag 
+      \ contains=VueKey,VueQuote
+
+syntax match VueKey contained '\v[v:\@][^=/>[:blank:]]+'
+syntax region VueQuote contained 
+      \ start='"' end='"' 
+      \ contains=VueValue
+
+syntax match VueInject contained '\v\$\w*'
+
+syntax region VueExpression 
+      \ containedin=ALLBUT,htmlComment
+      \ matchgroup=VueBrace
+      \ transparent
+      \ start="{{"
+      \ end="}}"
+syntax region VueExpression 
+      \ containedin=htmlTemplateBlock,pugTemplateBlock,VueValue,htmlString,htmlValue
+      \ contains=@simpleJavascriptExpression
+      \ matchgroup=VueBrace
+      \ start="{{"
+      \ end="}}"
+
+" Transition attributes
+syntax match htmlArg contained "\<\(enter-from-class\|enter-active-class\|enter-to-class\|leave-from-class\|leave-active-class\|leave-to-class\)\>"
+
+" Wepy directive syntax
+syntax match VueAttr '\v(\S)@<!wx[^\=]+(\=\"[^"]*\")?'
+      \ containedin=htmlTag  
+      \ contains=VueKey,VueQuote
+
+syntax match VueKey contained '\vwx[^\=]+'
+syntax match VueCustomTag containedin=htmlTagN '\v<(view|text|block|image)>'
+
+syntax cluster simpleJavascriptExpression contains=javaScriptStringS,javaScriptStringD,javascriptNumber,javaScriptOperator
+
+" JavaScript syntax
+syntax region javaScriptStringS	
+      \ start=+'+  skip=+\\\\\|\\'+  end=+'\|$+	contained
+syntax region javaScriptStringD	
+      \ start=+"+  skip=+\\\\\|\\"+  end=+"\|$+	contained
+syntax match javaScriptNumber '\v<-?\d+L?>|0[xX][0-9a-fA-F]+>' contained
+syntax match javaScriptOperator '[-!|&+<>=%*~^]' contained
+syntax match javaScriptOperator '\v(*)@<!/(/|*)@!' contained
+syntax keyword javaScriptOperator delete instanceof typeof void new in of contained
+
+highlight default link VueAttr htmlTag
+if s:attribute
+  syntax match VueValue contained '\v\"\zs[^"]+\ze\"'
+        \ contains=VueInject,@simpleJavascriptExpression
+  highlight default link VueKey Type
+  highlight default link VueQuote VueAttr
+  highlight default link VueValue None
+else
+  syntax match VueValue contained '\v\"\zs[^"]+\ze\"'
+  highlight default link VueKey htmlArg
+  highlight default link VueQuote String
+  highlight default link VueValue String
+endif
+highlight default link VueInject Constant
+highlight default link VueBrace Type
+highlight default link VueComponentName htmlTagName
+highlight default link VueCustomTag htmlTagName
+highlight default link javaScriptStringS String
+highlight default link javaScriptStringD String
+highlight default link javaScriptNumber	Constant
+highlight default link javaScriptOperator	Operator
+"}}}
+" vim: fdm=marker

syntax/patch/javascript.vim

@@ -0,0 +1,81 @@
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Config {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+let s:config = vue#GetConfig('config', {})
+let s:keyword = s:config.keyword
+let s:init_indent = s:config.init_indent
+"}}}
+
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Syntax highlight {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+" Number with minus
+syntax match javaScriptNumber '\v<-?\d+L?>|0[xX][0-9a-fA-F]+>' 
+      \ containedin=@javascript display
+highlight link javaScriptNumber Constant
+
+" Vue keywords
+if !s:keyword | finish | endif
+
+let s:vue_keywords = 'name parent functional delimiters comments components directives filters extends mixins inheritAttrs model props propsData data computed watch methods template render renderError inject provide beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated beforeDestroy destroyed setup beforeUnmount unmounted errorCaptured renderTracked renderTriggered'
+
+let s:indent = &sw * (1 + s:init_indent)
+let s:keywords_regexp = '\v^\s{'.s:indent.'}(async )?<('
+      \.join(split(s:vue_keywords, ' '), '|')
+      \.')\ze'
+
+" Currently support https://github.com/pangloss/vim-javascript
+let s:useJavaScriptPlugin = hlexists('jsAsyncKeyword')
+let s:containedin = s:useJavaScriptPlugin
+      \? 'jsObject,jsFuncBlock,@jsExpression' 
+      \: 'javascriptScriptBlock' 
+let s:contains = s:useJavaScriptPlugin
+      \? 'jsAsyncKeyword' 
+      \: 'javaScriptReserved' 
+let s:match_option = 
+      \' containedin='.s:containedin
+      \.' contains='.s:contains
+      \.' skipwhite skipempty'
+
+execute 'syntax match vueObjectKey /'
+      \.s:keywords_regexp
+      \.'\s*:/'
+      \.s:match_option
+      \.' nextgroup=jsObjectValue'
+
+execute 'syntax match vueObjectFuncName /'
+      \.s:keywords_regexp
+      \.'\_s*\(/'
+      \.s:match_option
+      \.' nextgroup=jsFuncArgs'
+
+execute 'syntax match vueObjectFuncKey /'
+      \.s:keywords_regexp
+      \.'\s*:\s*function>/'
+      \.s:match_option
+      \.' nextgroup=jsFuncArgs'
+
+let s:vue3_keywords = 'ref reactive toRefs watch computed'.
+      \' onBeforeMount onMounted onBeforeUpdate onUpdated onBeforeUnmount'.
+      \' onUnmounted onErrorCaptured onRenderTracked onRenderTriggered'.
+      \' getCurrentInstance'
+let s:vue3_keywords_regexp = '\v<('
+      \.join(split(s:vue3_keywords, ' '), '|')
+      \.')\ze'
+
+execute 'syntax match vue3Keyword /'
+      \.s:vue3_keywords_regexp
+      \.'\_s*\(/'
+      \.s:match_option
+
+highlight default link vueObjectKey vueObjectKeyword
+highlight default link vueObjectFuncName vueObjectKeyword
+highlight default link vue3Keyword vueObjectKeyword
+highlight default link vueObjectFuncKey vueObjectKeyword
+highlight default link vueObjectKeyword Type
+"}}}
+" vim: fdm=marker

syntax/patch/less.vim

@@ -0,0 +1,6 @@
+" Use emmet-vim css type.
+silent! syntax clear lessDefinition
+syntax region cssLessDefinition matchgroup=cssBraces 
+      \ contains=@LessSyntax,cssLessDefinition 
+      \ contained containedin=cssLessVueStyle
+      \ start="{" end="}" 

syntax/patch/pug.vim

@@ -0,0 +1 @@
+syntax cluster htmlJavascript remove=javascriptParenthesisBlock

syntax/patch/sass.vim

@@ -0,0 +1,10 @@
+silent! syntax clear sassDefinition
+syntax region sassDefinition matchgroup=cssBraces 
+      \ contains=@SassSyntax,sassDefinition 
+      \ contained containedin=sassVueStyle
+      \ start="{" end="}" 
+
+" Extend to highlight all numbers in expression
+syntax match cssValueNumber
+      \ /\W\zs\d\+\(\.\d\+\)\?%\?\ze\W/
+      \ contained containedin=sassDefinition

syntax/patch/scss.vim

@@ -0,0 +1,13 @@
+" If not loading https://github.com/cakebaker/scss-syntax.vim
+if !hlexists('scssNestedProperty')
+  silent! syntax clear scssDefinition
+  syntax region cssScssDefinition transparent matchgroup=cssBraces 
+        \ contains=@ScssSyntax,cssScssDefinition
+        \ contained containedin=cssScssVueStyle
+        \ start="{" end="}" 
+
+  " Extend to highlight all numbers in expression
+  syntax match cssValueNumber
+        \ /\W\zs\d\+\(\.\d\+\)\?%\?\ze\W/
+        \ contained containedin=cssScssDefinition
+endif

syntax/patch/stylus.vim

@@ -0,0 +1,5 @@
+silent! syntax clear stylusDefinition
+syntax region cssStylusDefinition matchgroup=cssBraces 
+      \ contains=@StylusSyntax,cssStylusDefinition
+      \ contained containedin=cssStylusVueStyle
+      \ start="{" end="}"