Remove optional function argument

Add Stylus support

.travis.yml

@@ -1,7 +1,14 @@
+dist: focal
+
 language: minimal
 
 install:
-  - git clone --depth=1 https://github.com/leafOfTree/test ../test
+  - git clone https://github.com/leafOfTree/test ../test --depth=1 
+
+  - git clone https://github.com/digitaltoad/vim-pug ../vim-pug --depth=1
+  - git clone https://github.com/kchmck/vim-coffee-script ../vim-coffee-script --depth=1
+  - git clone https://github.com/leafgarland/typescript-vim ../typescript-vim --depth=1
+  - git clone https://github.com/iloginow/vim-stylus.git ../vim-stylus --depth=1
 
 script:
   - bash ../test/start.sh vue vim-vue-plugin

README.md

@@ -2,7 +2,7 @@
 
 <p align="center">
 <a href="https://github.com/altercation/vim-colors-solarized">
-<img alt="screenshot" src="https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/master/vim-vue-plugin-screenshot.png" width="200" />
+<img alt="screenshot" src="https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/master/vim-vue-plugin-screenshot.png" width="220" />
 </a>
 </p>
 
@@ -11,6 +11,7 @@ Vim syntax and indent plugin for `.vue` files. Mainly inspired by [mxw/vim-jsx][
 ## Installation
 
 <details>
+
 <summary><a>How to install</a></summary>
 
 - [VundleVim][2]
@@ -34,7 +35,7 @@ Vim syntax and indent plugin for `.vue` files. Mainly inspired by [mxw/vim-jsx][
 <br />
 </details>
 
-This plugin works if `filetype` is set to `vue`. Please stay up to date. Feel free to open an issue or a pull request.
+This plugin works if it has set `filetype` to `vue`. Please stay up to date. Feel free to open an issue or pull request.
 
 ## How it works
 
@@ -42,8 +43,11 @@ Since `.vue` is a combination of CSS, HTML and JavaScript, so is `vim-vue-plugin
 
 Supports
 
-- Vue directives.
-- Less/Sass/Scss, Pug with [vim-pug][4], Coffee with [vim-coffee-script][11].^
+- Vue attribute(directive) and keyword.^
+- Less/Sass/Scss, Pug with [vim-pug][4], Coffee with [vim-coffee-script][11], TypeScript with [typescript-vim][14] or [yats.vim][15], Stylus with [vim-stylus][16]. ^
+
+    Relative plugins need to be installed.
+
 - A builtin `foldexpr` foldmethod.^
 - [emmet-vim][10] HTML/CSS/JavaScript filetype detection.
 - `.wpy` files from [WePY][6].
@@ -54,48 +58,104 @@ Supports
 
 Set global variable to `1` to enable or `0` to disable. Ex:
 
+```vim
 let g:vim_vue_plugin_load_full_syntax = 1
+```
 
 | variable                              | description                                                                                            | default                    |
 |---------------------------------------|--------------------------------------------------------------------------------------------------------------------------------|----------------------------|
-| `g:vim_vue_plugin_load_full_syntax`\* | Enable: load all syntax files in `runtimepath` to enable related syntax plugins.<br> Disable: only in `$VIMRUNTIME/syntax`, `~/.vim/syntax` and `$VIM/vimfiles/syntax` | 0 |
+| `g:vim_vue_plugin_load_full_syntax`\* | Enable: load all syntax files in `runtimepath` to enable related syntax plugins.<br> Disable: only in `$VIMRUNTIME/syntax`, `~/.vim/syntax` and `$VIM/vimfiles/syntax`. | 0 |
 | `g:vim_vue_plugin_use_pug`\*          | Enable pug syntax for `<template lang="pug">`.                                                         | 0 |
 | `g:vim_vue_plugin_use_coffee`         | Enable coffee syntax for `<script lang="coffee">`.                                                     | 0 |
+| `g:vim_vue_plugin_use_typescript`     | Enable typescript syntax for `<script lang="ts">`.                                                     | 0 |
 | `g:vim_vue_plugin_use_less`           | Enable less syntax for `<style lang="less">`.                                                          | 0 |
-| `g:vim_vue_plugin_use_sass`           | Enable scss syntax for `<style lang="scss">`(or sass fo `lang="sass"`).                                | 0 |
-| `g:vim_vue_plugin_has_init_indent`    | Initially indent one tab inside `style/script` tags.                                                   | 0 for `.vue`. 1 for `.wpy` |
+| `g:vim_vue_plugin_use_sass`           | Enable sass syntax for `<style lang="scss\|sass">`.                               | 0 |
+| `g:vim_vue_plugin_use_scss`           | Enable scss syntax for `<style lang="scss">`.                               | 0 |
+| `g:vim_vue_plugin_use_stylus`         | Enable stylus syntax for `<style lang="stylus">`.                                                      | 0 |
+| `g:vim_vue_plugin_has_init_indent`    | Initially indent one tab inside `style/script` tags.                                                   | 0+ |
 | `g:vim_vue_plugin_highlight_vue_attr` | Highlight vue attribute value as expression instead of string.                                         | 0 |
-| `g:vim_vue_plugin_use_foldexpr`       | Enable builtin `foldexpr` foldmethod.                                                                  | 0 |
+| `g:vim_vue_plugin_highlight_vue_keyword` | Highlight vue keyword like `data`, `methods`, ...                       | 0 |
+| `g:vim_vue_plugin_use_foldexpr`\#     | Enable builtin `foldexpr` foldmethod.                                                                  | 0 |
+| `g:vim_vue_plugin_custom_blocks`      | Highlight custom blocks. See details below.                                                            | {} |
 | `g:vim_vue_plugin_debug`              | Echo debug messages in `messages` list. Useful to debug if unexpected indents occur.                   | 0 |
 
 \*: Vim may be slow if the feature is enabled. Find a balance between syntax highlight and speed. By the way, custom syntax can be added in `~/.vim/syntax` or `$VIM/vimfiles/syntax`. 
 
+\#: In the case when it's enabled, the `foldexpr` is not efficient for large files, so it's not enabled initially when the line number exceeds `1000`. You can enable it mannully by `setlocal foldmethod=expr` when required.
+
+\+: 0 for `.vue` and 1 for `.wpy`
+
 **Note**
 
-- `filetype` is set to `vue` so autocmds and other custom settings for `javascript` have to be manually enabled for `vue`.
-- `g:vim_vue_plugin_load_full_syntax` applies to `JavaScript/HTML/CSS/SASS/LESS`.
-- `g:vim_vue_plugin_use_foldexpr` default value used to be `1`, but it's changed to `0` now.
+- `g:vim_vue_plugin_load_full_syntax` applies to other `HTML/Sass/Less` plugins.
+- `filetype` is set to `vue` so autocmds and other settings for `javascript` have to be manually enabled for `vue`.
 
-## Context based behavior
+## Custom blocks
 
-As there are more than one language in `.vue` file, the different behaviors like mapping or completion may be expected under different tags.
+You can enable highlighting in a custom block by setting `g:vim_vue_plugin_custom_blocks`. 
 
-This plugin provides a function to get the tag where the cursor is in.
-
-- `GetVueTag() => String` Return value is `'template'`, `'script'` or `'style'`.
+The structure is `{ block: filetype }` or `{ block: filetype[] }`. When providing a filetype list, you need to add `lang="..."` in the tag. Otherwise, the first one will be used.
 
 ### Example
 
 ```vim
+let g:vim_vue_plugin_custom_blocks = { 
+      \'docs': 'markdown',
+      \'i18n': ['json', 'yaml', 'json5'],
+      \}
+```
+
+Should highlight custom blocks in `.vue` such as
+
+```vue
+<docs>
+# This is the documentation for component.
+</docs>
+
+<i18n lang="yaml">
+en:
+  hello: "Hello World!"
+ja:
+  hello: "こんにちは、世界！"
+</i18n>
+```
+
+## Context based behavior
+
+As there are more than one language in `.vue` file, the different behaviors like mapping or completion and local options, may be required under different tags or subtypes(current language type).
+
+This plugin provides functions to get the tag/subtype where the cursor is in.
+
+- `GetVueTag() => String` Return value is one of `'template', 'script', 'style'`.
+
+    ```vim
+    " Example
     autocmd FileType vue inoremap <buffer><expr> : InsertColon()
 
     function! InsertColon()
       let tag = GetVueTag()
+      return tag == 'template' ? ':' : ': '
+    endfunction
+    ```
 
-  if tag == 'template'
-    return ':'
+- `GetVueSubtype() => String` Return value is one of `'html', 'javascript', 'css', 'scss', ...`.
+
+- `OnChangeVueSubtype(subtype)` An event listener that is called when subtype changes.
+
+    You can also define an event listener function `OnChangeVueSubtype(subtype)` in your `vimrc` to get the subtype and set its local options whenever it changes.
+
+    ```vim
+    " Example: set local options based on subtype
+    function! OnChangeVueSubtype(subtype)
+      echom 'Subtype is '.a:subtype
+      if a:subtype == 'html'
+        setlocal commentstring=<!--%s-->
+        setlocal comments=s:<!--,m:\ \ \ \ ,e:-->
+      elseif a:subtype =~ 'css'
+        setlocal comments=s1:/*,mb:*,ex:*/ commentstring&
       else
-    return ': '
+        setlocal commentstring=//%s
+        setlocal comments=sO:*\ -,mO:*\ \ ,exO:*/,s1:/*,mb:*,ex:*/,://
       endif
     endfunction
     ```
@@ -108,8 +168,9 @@ Currently emmet-vim works regarding your HTML/CSS/JavaScript emmet settings, but
 
 Since there are many sub languages included, most delays come from syntax files overload. A variable named `b:current_loading_main_syntax` is set to `vue` which can be used as loading condition if you'd like to manually find and modify the syntax files causing overload.
 
-For example, the builtin syntax `sass.vim` and `less.vim` in vim8.1 runtime and `pug.vim` in vim-pug/syntax will always load `css.vim` which this plugin already loads. It can be optimized like
+For example, the builtin syntax `sass.vim` and `less.vim` in vim8.1 runtime and `pug.vim` in vim-pug/syntax always load `css.vim` which this plugin already loads. It can be optimized like
 
+`$VIMRUNTIME/syntax/sass.vim`
 ```diff
 - runtime! syntax/css.vim
 + if !exists("b:current_loading_main_syntax")
@@ -117,6 +178,15 @@ For example, the builtin syntax `sass.vim` and `less.vim` in vim8.1 runtime and
 + endif
 ```
 
+`$VIMRUNTIME/syntax/vue.vim`
+```diff
+-   runtime! syntax/html.vim
++ if !exists("b:current_loading_main_syntax")
++   runtime! syntax/html.vim
++ endif
+```
+
+
 ## Acknowledgments & Refs
 
 - [mxw/vim-jsx][1]
@@ -138,7 +208,7 @@ This plugin is under [The Unlicense][8]. Other than this, `lib/indent/*` files a
 [3]: https://vuejs.org/v2/guide/single-file-components.html
 [4]: https://github.com/digitaltoad/vim-pug
 [5]: https://github.com/tpope/vim-pathogen
-[6]: https://tencent.github.io/wepy
+[6]: https://github.com/Tencent/wepy
 [7]: https://github.com/junegunn/vim-plug
 [8]: https://choosealicense.com/licenses/unlicense/
 [9]: https://github.com/leafOfTree/vim-svelte-plugin
@@ -146,3 +216,6 @@ This plugin is under [The Unlicense][8]. Other than this, `lib/indent/*` files a
 [11]: https://github.com/kchmck/vim-coffee-script
 [12]: https://travis-ci.com/leafOfTree/vim-vue-plugin.svg?branch=master
 [13]: https://svelte.dev/
+[14]: https://github.com/leafgarland/typescript-vim
+[15]: https://github.com/HerringtonDarkholme/yats.vim
+[16]: https://github.com/iloginow/vim-stylus

_config.yml

@@ -1 +1,4 @@
 theme: jekyll-theme-cayman
+markdown: CommonMarkGhPages
+commonmark: 
+  extensions: ["table"]

autoload/vue.vim

@@ -1,9 +1,116 @@
+" Since vue#Log and vue#GetConfig are always called 
+" in syntax and indent files,
+" this file will be sourced when opening the first vue file
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+function! s:GetConfig(name, default)
+  let name = 'g:vim_vue_plugin_'.a:name
+  return exists(name) ? eval(name) : a:default
+endfunction
+
 let s:name = 'vim-vue-plugin'
-let s:debug = exists("g:vim_vue_plugin_debug")
-      \ && g:vim_vue_plugin_debug == 1
+let s:load_full_syntax = s:GetConfig("load_full_syntax", 0)
+let s:debug = s:GetConfig("debug", 0)
 
 function! vue#Log(msg)
   if s:debug
     echom '['.s:name.']['.v:lnum.'] '.a:msg
   endif
 endfunction
+
+function! vue#GetConfig(name, default)
+  return s:GetConfig(a:name, a:default)
+endfunction
+
+if exists('##CursorMoved') && exists('*OnChangeVueSubtype')
+  augroup vim_vue_plugin
+    autocmd!
+    autocmd CursorMoved,CursorMovedI,WinEnter *.vue,*.wpy
+          \ call s:CheckSubtype()
+  augroup END
+
+  let s:subtype = ''
+  function! s:CheckSubtype()
+    let subtype = GetVueSubtype()
+
+    if s:subtype != subtype
+      call OnChangeVueSubtype(subtype)
+      let s:subtype = subtype
+    endif
+  endfunction
+endif
+
+function! s:SynsEOL(lnum)
+  let lnum = prevnonblank(a:lnum)
+  let cnum = strlen(getline(lnum))
+  return map(synstack(lnum, cnum), 'synIDattr(v:val, "name")')
+endfunction
+
+function! GetVueSubtype()
+  let lnum = line('.')
+  let cursyns = s:SynsEOL(lnum)
+  let syn = !empty(cursyns) ? get(cursyns, 0, '') : ''
+
+  let subtype = matchstr(syn, '\w\+\zeVue')
+  if subtype =~ 'css\w\+'
+    let subtype = subtype[3:]
+  endif
+  let subtype = tolower(subtype)
+  return subtype
+endfunction
+
+function! GetVueTag(...)
+  let lnum = a:0 > 0 ? a:1 : line('.')
+  let cursyns = s:SynsEOL(lnum)
+  let syn = get(cursyns, 0, '')
+
+  if syn =~ 'VueTemplate'
+    let tag = 'template'
+  elseif syn =~ 'VueScript'
+    let tag = 'script'
+  elseif syn =~ 'VueStyle'
+    let tag = 'style'
+  else
+    let tag = ''
+  endif
+
+  return tag
+endfunction
+
+function! vue#LoadSyntax(group, type)
+  if s:load_full_syntax
+    call vue#LoadFullSyntax(a:group, a:type)
+  else
+    call vue#LoadDefaultSyntax(a:group, a:type)
+  endif
+endfunction
+
+function! vue#LoadDefaultSyntax(group, type)
+  unlet! b:current_syntax
+  let syntaxPaths = ['$VIMRUNTIME', '$VIM/vimfiles', '$HOME/.vim']
+  for path in syntaxPaths
+    let file = expand(path).'/syntax/'.a:type.'.vim'
+    if filereadable(file)
+      execute 'syntax include '.a:group.' '.file
+    endif
+  endfor
+endfunction
+
+" Load all syntax files in 'runtimepath'
+" Useful if there is no default syntax file provided by vim
+function! vue#LoadFullSyntax(group, type)
+  call s:SetCurrentSyntax(a:type)
+  execute 'syntax include '.a:group.' syntax/'.a:type.'.vim'
+endfunction
+
+" Settings to avoid syntax overload
+function! s:SetCurrentSyntax(type)
+  if a:type == 'coffee'
+    syntax cluster coffeeJS contains=@htmlJavaScript
+
+    " Avoid overload of `javascript.vim`
+    let b:current_syntax = 'vue'
+  else
+    unlet! b:current_syntax
+  endif
+endfunction
+"}}}

filetype.vim

@@ -1,9 +0,0 @@
-au BufNewFile,BufRead *.vue,*.wpy call s:setFiletype()
-
-function! s:setFiletype()
-  " enable JavaScript autocmds first
-  " let &filetype = 'javascript'
-
-  " then set filetype
-  let &filetype = 'vue'
-endfunction

ftdetect/vue.vim

@@ -0,0 +1 @@
+autocmd BufNewFile,BufRead *.vue,*.wpy setf vue

ftplugin/vue.vim

@@ -1,7 +1,9 @@
 if exists("b:did_ftplugin") | finish | endif
 let b:did_ftplugin = 1
 
+if !has('nvim')
   setlocal matchpairs+=<:>
+endif
 
 if exists("loaded_matchit")
   let b:match_ignorecase = 1

ftplugin/vue/fold.vim

@@ -3,8 +3,7 @@
 " Config {{{
 "
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-let s:use_foldexpr = exists("g:vim_vue_plugin_use_foldexpr")
-      \ && g:vim_vue_plugin_use_foldexpr == 1
+let s:use_foldexpr = vue#GetConfig("use_foldexpr", 0)
 "}}}
 
 if !s:use_foldexpr | finish | endif
@@ -14,7 +13,9 @@ if !s:use_foldexpr | finish | endif
 " Settings {{{
 "
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+if line('$') < 1000
   setlocal foldmethod=expr
+endif
 setlocal foldexpr=GetVueFold(v:lnum)
 "}}}
 
@@ -69,23 +70,34 @@ function! GetVueFold(lnum)
   endif
 
   " Fold by indent
+  if a:lnum > 1
+    let prev_indent = s:IndentLevel(a:lnum - 1)
+  else
+    let prev_indent = 0
+  endif
   let this_indent = s:IndentLevel(a:lnum)
   let next_indent = s:IndentLevel(s:NextNonBlankLine(a:lnum))
 
-  if a:lnum > 1
-    let prev_indent = s:IndentLevel(a:lnum - 1)
-
-    if this_indent < prev_indent
-      return prev_indent
-    endif
+  if GetVueTag(a:lnum) == 'script'
+    " Handle closing '}'
+    if this_line =~ '\v^\s*},?\s*$'
+      return '<'.prev_indent
     endif
 
+    " --this
+    " ----next
+    if this_indent < next_indent
+      return '>'.next_indent
+    endif
+
+    " ----this
+    " --next
     if this_indent >= next_indent 
       return this_indent
     endif
-
-  if this_indent < next_indent
-    return '>'.next_indent
+  else
+    " Template or style
+    return this_indent
   endif
 endfunction
 

indent/vue-custom-blocks.vim

@@ -0,0 +1,45 @@
+if exists("b:did_indent")
+  finish
+endif
+
+let s:custom_blocks = vue#GetConfig("custom_blocks", {})
+let s:indent = {}
+
+function! s:GetSyntaxList()
+  let syntax_list = []
+  for syntax in values(s:custom_blocks)
+    let type = type(syntax)
+    if type == v:t_string
+      if !count(syntax_list, syntax)
+        call add(syntax_list, syntax)
+      endif
+    elseif type == v:t_list && len(syntax)
+      for syn in syntax
+        if !count(syntax_list, syn)
+          call add(syntax_list, syn)
+        endif
+      endfor
+    else
+      echoerr '[vim-vue-plugin] custom_blocks value type'
+            \.' must be either string or list'
+    endif
+  endfor
+  return syntax_list
+endfunction
+
+function! s:GetIndentExpr(syntax_list)
+  for syntax in a:syntax_list
+    unlet! b:did_indent
+    execute 'runtime indent/'.syntax.'.vim'
+    let s:indent[syntax] = &l:indentexpr
+  endfor
+endfunction
+
+function! GetVueCustomBlocksIndent(syn)
+  let syntax = matchstr(a:syn, '^\l\+')
+  call vue#Log('custom block syntax: '.syntax)
+  let ind = eval(s:indent[syntax])
+  return ind
+endfunction
+
+call s:GetIndentExpr(s:GetSyntaxList())

indent/vue.vim

@@ -11,6 +11,23 @@ if exists("b:did_indent")
   finish
 endif
 
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Config {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+let s:use_pug = vue#GetConfig("use_pug", 0)
+let s:use_sass = vue#GetConfig("use_sass", 0)
+let s:use_scss = vue#GetConfig("use_scss", 0)
+let s:use_stylus = vue#GetConfig("use_stylus", 0)
+let s:use_coffee = vue#GetConfig("use_coffee", 0)
+let s:use_typescript = vue#GetConfig("use_typescript", 0)
+let s:has_init_indent = vue#GetConfig("has_init_indent",
+      \ expand("%:e") == 'wpy' ? 1 : 0)
+let s:custom_blocks = vue#GetConfig("custom_blocks", {})
+let s:use_custom_blocks = !empty(s:custom_blocks)
+"}}}
+
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 "
 " Variables {{{
@@ -23,31 +40,11 @@ let s:template_tag = '\v^\s*\<\/?template'
 let s:empty_tagname = '(area|base|br|col|embed|hr|input|img|keygen|link|meta|param|source|track|wbr)'
 let s:empty_tag = '\v\<'.s:empty_tagname.'[^/]*\>' 
 let s:empty_tag_start = '\v\<'.s:empty_tagname.'[^\>]*$' 
-let s:empty_tag_end = '\v^\s*[^\<\>\/]*\>\s*' 
-let s:tag_end = '\v^\s*\/?\>\s*'
-"}}}
+let s:empty_tag_end = '\v^\s*[^\<\>\/]*\/?\>\s*' 
+let s:tag_start = '\v^\s*\<\w*'
+let s:tag_end = '\v^\s*\/?\>\s*' " />
+let s:full_tag_end = '\v^\s*\<\/' " </...>
 
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-"
-" Config {{{
-"
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-let s:use_pug = exists("g:vim_vue_plugin_use_pug")
-      \ && g:vim_vue_plugin_use_pug == 1
-let s:use_sass = exists("g:vim_vue_plugin_use_sass")
-      \ && g:vim_vue_plugin_use_sass == 1
-let s:use_coffee = exists("g:vim_vue_plugin_use_coffee")
-      \ && g:vim_vue_plugin_use_coffee == 1
-
-let s:has_init_indent = 0
-if !exists("g:vim_vue_plugin_has_init_indent")
-  let ext = expand("%:e")
-  if ext == 'wpy'
-    let s:has_init_indent = 1
-  endif
-elseif g:vim_vue_plugin_has_init_indent == 1
-  let s:has_init_indent = 1
-endif
 "}}}
 
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
@@ -55,6 +52,9 @@ endif
 " Load indent method {{{
 "
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+" Save shiftwidth
+let s:sw = &sw
+
 " Use lib/indent/ files for compatibility
 unlet! b:did_indent
 runtime lib/indent/xml.vim
@@ -67,9 +67,17 @@ unlet! b:did_indent
 runtime! indent/javascript.vim
 let b:javascript_indentexpr = &indentexpr
 
+if s:use_custom_blocks
+  unlet! b:did_indent
+  runtime indent/vue-custom-blocks.vim
+  let s:vue_custom_blocks_tag = '<\/\?'.join(keys(s:custom_blocks), '\|')
+endif
+
 if s:use_pug
   unlet! b:did_indent
+  let s:save_formatoptions = &formatoptions
   runtime! indent/pug.vim
+  let &formatoptions = s:save_formatoptions
 endif
 
 if s:use_sass
@@ -77,10 +85,28 @@ if s:use_sass
   runtime! indent/sass.vim
 endif
 
+if s:use_scss
+  unlet! b:did_indent
+  runtime! indent/scss.vim
+endif
+
+if s:use_stylus
+  unlet! b:did_indent
+  runtime! indent/stylus.vim
+endif
+
 if s:use_coffee
   unlet! b:did_indent
   runtime! indent/coffee.vim
 endif
+
+if s:use_typescript
+  unlet! b:did_indent
+  runtime! indent/typescript.vim
+endif
+
+" Recover shiftwidth
+let &sw = s:sw
 "}}}
 
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
@@ -88,7 +114,6 @@ endif
 " Settings {{{
 "
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-setlocal sw=2 ts=2
 " JavaScript indentkeys
 setlocal indentkeys=0{,0},0),0],0\,,!^F,o,O,e,:
 " XML indentkeys
@@ -102,17 +127,95 @@ setlocal indentexpr=GetVueIndent()
 "
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 function! GetVueIndent()
+  let ind = s:GetIndentBySyntax()
+  let ind = s:AdjustIndent(ind)
+  call vue#Log('indent: '.ind)
+  return ind
+endfunction
+
+function! s:GetIndentBySyntax()
   let prevlnum = prevnonblank(v:lnum - 1)
   let prevline = getline(prevlnum)
-  let prevsyns = s:SynsEOL(prevlnum)
-  let prevsyn = get(prevsyns, 0, '')
-
   let curline = getline(v:lnum)
-  let cursyns = s:SynsEOL(v:lnum)
-  let cursyn = get(cursyns, 0, '')
+  let cursyn = get(s:SynsEOL(v:lnum), 0, '')
 
   if s:SynHTML(cursyn)
     call vue#Log('syntax: html')
+    let ind = s:GetHTMLIndent(prevlnum, prevline, curline)
+  elseif s:SynPug(cursyn)
+    call vue#Log('syntax: pug')
+    let ind = GetPugIndent()
+  elseif s:SynCoffee(cursyn)
+    call vue#Log('syntax: coffee')
+    let ind = GetCoffeeIndent(v:lnum)
+  elseif s:SynTypeScript(cursyn)
+    call vue#Log('syntax: typescript')
+    let ind = GetTypescriptIndent()
+  elseif s:SynSASS(cursyn)
+    call vue#Log('syntax: sass')
+    let ind = GetSassIndent()
+  elseif s:SynSCSS(cursyn)
+    call vue#Log('syntax: scss')
+    if exists('*GetSCSSIndent')
+      call vue#Log('indent: scss')
+      let ind = GetSCSSIndent()
+    else
+      call vue#Log('indent: css')
+      let ind = GetCSSIndent()
+    endif
+  elseif s:SynStylus(cursyn)
+    call vue#Log('syntax: stylus')
+    let ind = GetStylusIndent()
+  elseif s:SynStyle(cursyn)
+    call vue#Log('syntax: css')
+    let ind = GetCSSIndent()
+  elseif s:use_custom_blocks && s:SynCustomBlocks(cursyn)
+    call vue#Log('syntax: custom blocks')
+    let ind = GetVueCustomBlocksIndent(cursyn)
+  else
+    " Default to JavaScript indent
+    call vue#Log('syntax: javascript')
+    if len(b:javascript_indentexpr)
+      let ind = eval(b:javascript_indentexpr)
+    else
+      let ind = cindent(v:lnum)
+    endif
+  endif
+  return ind
+endfunction
+
+function! s:AdjustIndent(ind)
+  let ind = a:ind
+  let prevline = getline(prevnonblank(v:lnum - 1))
+  let curline = getline(v:lnum)
+  let cursyn = get(s:SynsEOL(v:lnum), 0, '')
+
+  if curline =~? s:vue_tag_start 
+        \ || curline =~? s:vue_tag_end 
+        \ || prevline =~? s:vue_tag_end
+        \ || (curline =~ s:template_tag && s:SynPug(cursyn))
+    call vue#Log('current line is vue tag or previous line is vue end tag')
+    call vue#Log(', or current line is pug template tag')
+    let ind = 0
+  elseif s:has_init_indent && ind < 1 && s:SynVueScriptOrStyle(cursyn) 
+      call vue#Log('add initial indent')
+      let ind = &sw
+  elseif getline(s:PrevNonBlacnkNonComment(v:lnum)) =~? s:vue_tag_start
+    call vue#Log('previous line is vue tag start')
+    let ind = 0
+  elseif s:use_custom_blocks && curline =~ s:vue_custom_blocks_tag
+    call vue#Log('current line is vue custom blocks tag')
+    let ind = 0
+  endif
+
+  return ind
+endfunction
+
+function! s:GetHTMLIndent(prevlnum, prevline, curline)
+  let prevlnum = a:prevlnum
+  let prevline = a:prevline
+  let curline = a:curline
+
   let ind = XmlIndentGet(v:lnum, 0)
   if prevline =~? s:empty_tag
     call vue#Log('previous line is an empty tag')
@@ -131,51 +234,13 @@ function! GetVueIndent()
     let [start, end] = s:PrevMultilineEmptyTag(v:lnum)
     if end == prevlnum
       call vue#Log('previous line is a multiline empty tag')
-        let ind = ind - &sw
-      endif
-    endif
-  elseif s:SynPug(cursyn)
-    call vue#Log('syntax: pug')
-    let ind = GetPugIndent()
-  elseif s:SynCoffee(cursyn)
-    call vue#Log('syntax: coffee')
-    let ind = GetCoffeeIndent(v:lnum)
-  elseif s:SynSASS(cursyn)
-    call vue#Log('syntax: sass')
-    let ind = GetSassIndent()
-  elseif s:SynStyle(cursyn)
-    call vue#Log('syntax: style')
-    let ind = GetCSSIndent()
+      if curline =~? s:full_tag_end 
+        let ind = indent(v:lnum - 1) - &sw
       else
-    call vue#Log('syntax: javascript')
-    if len(b:javascript_indentexpr)
-      let ind = eval(b:javascript_indentexpr)
-    else
-      let ind = cindent(v:lnum)
+        let ind = indent(v:lnum - 1)
       endif
     endif
-
-  if curline =~? s:vue_tag_start || curline =~? s:vue_tag_end 
-        \|| prevline =~? s:vue_tag_end
-        \|| (curline =~ s:template_tag && s:SynPug(cursyn))
-    call vue#Log('current line is vue tag or previous line is vue end tag')
-    call vue#Log('... or current line is pug template tag')
-    let ind = 0
-  elseif s:has_init_indent
-    if s:SynVueScriptOrStyle(cursyn) && ind < 1
-      call vue#Log('add initial indent')
-      let ind = &sw
   endif
-  else
-    let prevlnum_noncomment = s:PrevNonBlacnkNonComment(v:lnum)
-    let prevline_noncomment = getline(prevlnum_noncomment)
-    if prevline_noncomment =~? s:vue_tag_start
-      call vue#Log('previous line is vue tag start')
-      let ind = 0
-    endif
-  endif
-
-  call vue#Log('indent: '.ind)
   return ind
 endfunction
 
@@ -197,36 +262,58 @@ function! s:SynCoffee(syn)
   return a:syn ==? 'coffeeVueScript'
 endfunction
 
+function! s:SynTypeScript(syn)
+  return a:syn ==? 'typescriptVueScript'
+endfunction
+
 function! s:SynSASS(syn)
-  return a:syn ==? 'cssSassVueStyle'
+  return a:syn ==? 'sassVueStyle'
+endfunction
+
+function! s:SynSCSS(syn)
+  return a:syn ==? 'cssScssVueStyle'
+endfunction
+
+function! s:SynStylus(syn)
+  return a:syn ==? 'cssStylusVueStyle'
 endfunction
 
 function! s:SynStyle(syn)
   return a:syn =~? 'VueStyle'
 endfunction
 
+function! s:SynCustomBlocks(syn)
+  return a:syn =~? 'Block'
+endfunction
+
 function! s:SynVueScriptOrStyle(syn)
   return a:syn =~? '\v(VueStyle)|(VueScript)'
 endfunction
 
 function! s:PrevMultilineEmptyTag(lnum)
-  let lnum = a:lnum
+  let lnum = a:lnum - 1
   let lnums = [0, 0]
   while lnum > 0
     let line = getline(lnum)
     if line =~? s:empty_tag_end
       let lnums[1] = lnum
     endif
+
+    if line =~? s:tag_start
       if line =~? s:empty_tag_start
         let lnums[0] = lnum
         return lnums
+      else
+        return [0, 0]
       endif
+    endif
+
     let lnum = lnum - 1
   endwhile
 endfunction
 
 function! s:PrevNonBlacnkNonComment(lnum)
-  let curline = getline(lnum)
+  let curline = getline(a:lnum)
   let cursyns = s:SynsEOL(a:lnum)
   let cursyn = get(cursyns, 1, '')
   if cursyn =~? 'comment' && !empty(curline)
@@ -245,24 +332,6 @@ function! s:PrevNonBlacnkNonComment(lnum)
   endwhile
   return prevlnum
 endfunction
-
-function! GetVueTag()
-  let lnum = getcurpos()[1]
-  let cursyns = s:SynsEOL(lnum)
-  let syn = get(cursyns, 0, '')
-
-  if syn =~ 'VueTemplate'
-    let tag = 'template'
-  elseif syn =~ 'VueScript'
-    let tag = 'script'
-  elseif syn =~ 'VueStyle'
-    let tag = 'style'
-  else
-    let tag = ''
-  endif
-
-  return tag
-endfunction
 "}}}
 
 let b:did_indent = 1

syntax/vue-custom-blocks.vim

@@ -0,0 +1,64 @@
+let s:custom_blocks = vue#GetConfig("custom_blocks", {})
+
+if empty(s:custom_blocks) 
+  finish
+endif
+
+function! s:LoadSyntax()
+  let syntax_list = []
+  for syntax in values(s:custom_blocks)
+    let type = type(syntax)
+    if type == v:t_string
+      if !count(syntax_list, syntax)
+        call add(syntax_list, syntax)
+      endif
+    elseif type == v:t_list && len(syntax)
+      for syn in syntax
+        if !count(syntax_list, syn)
+          call add(syntax_list, syn)
+        endif
+      endfor
+    else
+      echoerr '[vim-vue-plugin] custom_blocks value type'
+            \.' must be either string or list'
+    endif
+  endfor
+  for syntax in syntax_list
+    let syntaxGroup = '@'.syntax
+    call vue#LoadFullSyntax(syntaxGroup, syntax)
+  endfor
+endfunction
+
+function! s:SetSyntax(block, syntax, lang)
+  let block = a:block
+  let syntax = a:syntax
+  let lang = a:lang
+
+  let region_name = syntax.toupper(block[0]).block[1:].'Block'
+  let syntax_lang = lang ? 'lang=["'']'.syntax.'["''][^>]*' : ''
+  let start = '<'.block.'[^>]*'.syntax_lang.'>'
+  let end = '</'.block.'>'
+  let syntaxGroup = '@'.syntax
+
+  execute 'syntax region '.region_name.' fold matchgroup=vueTag'
+        \.' start=+'.start.'+'
+        \.' end=+'.end.'+'
+        \.' keepend contains='.syntaxGroup
+endfunction
+
+function! s:Highlight()
+  for [block, syntax] in items(s:custom_blocks)
+    let type = type(syntax)
+    if type == v:t_string
+      call s:SetSyntax(block, syntax, 0)
+    elseif type == v:t_list && len(syntax)
+      call s:SetSyntax(block, syntax[0], 0)
+      for syn in syntax
+        call s:SetSyntax(block, syn, 1)
+      endfor
+    endif
+  endfor
+endfunction
+
+call s:LoadSyntax()
+call s:Highlight()

syntax/vue-html.vim

@@ -1,37 +1,36 @@
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 "
 " Config {{{
 "
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-let s:highlight_vue_attr = exists("g:vim_vue_plugin_highlight_vue_attr")
-      \ && g:vim_vue_plugin_highlight_vue_attr == 1
-")}}}
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+let s:highlight_vue_attr = vue#GetConfig("highlight_vue_attr", 0)
+"}}}
 
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 "
 " Syntax highlight {{{
 "
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+" 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 keyword VueComponentName containedin=htmlTagN component transition slot
 
-syntax match VueAttr '\v(\S)@<![v:\@][^\=\>[:blank:]]+(\=\"[^"]*\")?' 
+syntax match VueAttr '\v(\S)@<![v:\@][^=/>[:blank:]]+(\=\"[^"]*\")?' 
       \ keepend
       \ containedin=htmlTag 
       \ contains=VueKey,VueQuote
 
-syntax match VueKey contained '\v[v:\@][^\=\>[:blank:]]+'
+syntax match VueKey contained '\v[v:\@][^=/>[:blank:]]+'
 syntax region VueQuote contained 
       \ start='"' end='"' 
       \ contains=VueValue
-syntax match VueValue contained '\v\"\zs[^"]+\ze\"'
-      \ contains=VueInject,@simpleJavascriptExpression
 
 syntax match VueInject contained '\v\$\w*'
 
 syntax region VueExpression 
-      \ containedin=html.*
+      \ containedin=ALLBUT,htmlComment
       \ matchgroup=VueBrace
       \ transparent
       \ start="{{"
@@ -43,6 +42,9 @@ syntax region VueExpression
       \ 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  
@@ -65,10 +67,13 @@ syntax keyword javaScriptOperator delete instanceof typeof void new in of contai
 
 highlight default link VueAttr htmlTag
 if s:highlight_vue_attr
+  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

syntax/vue-javascript.vim

@@ -0,0 +1,75 @@
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Config {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+let s:highlight_vue_keyword = vue#GetConfig("highlight_vue_keyword", 0)
+if !s:highlight_vue_keyword | finish | endif
+
+let s:has_init_indent = vue#GetConfig("has_init_indent",
+      \ expand("%:e") == 'wpy' ? 1 : 0)
+"}}}
+
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Syntax highlight {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+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:has_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' 
+      \: 'javascriptVueScript' 
+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/vue.vim

@@ -1,4 +1,4 @@
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 " Vim syntax file
 "
 " Language: Vue
@@ -6,143 +6,124 @@
 "
 " CREDITS: Inspired by mxw/vim-jsx.
 "
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 if exists("b:current_syntax") && b:current_syntax == 'vue'
   finish
 endif
 
 " For advanced users, this variable can be used to avoid overload
 let b:current_loading_main_syntax = 'vue'
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 "
 " Config {{{
 "
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-let s:load_full_syntax = exists("g:vim_vue_plugin_load_full_syntax")
-      \ && g:vim_vue_plugin_load_full_syntax == 1
-let s:use_pug = exists("g:vim_vue_plugin_use_pug")
-      \ && g:vim_vue_plugin_use_pug == 1
-let s:use_less = exists("g:vim_vue_plugin_use_less")
-      \ && g:vim_vue_plugin_use_less == 1
-let s:use_sass = exists("g:vim_vue_plugin_use_sass")
-      \ && g:vim_vue_plugin_use_sass == 1
-let s:use_coffee = exists("g:vim_vue_plugin_use_coffee")
-      \ && g:vim_vue_plugin_use_coffee == 1
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+let s:use_pug = vue#GetConfig("use_pug", 0)
+let s:use_less = vue#GetConfig("use_less", 0)
+let s:use_sass = vue#GetConfig("use_sass", 0)
+let s:use_scss = vue#GetConfig("use_scss", 0)
+let s:use_stylus = vue#GetConfig("use_stylus", 0)
+let s:use_coffee = vue#GetConfig("use_coffee", 0)
+let s:use_typescript = vue#GetConfig("use_typescript", 0)
 "}}}
 
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-"
-" Functions {{{
-"
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-function! s:LoadSyntax(group, type)
-  if s:load_full_syntax
-    call s:LoadFullSyntax(a:group, a:type)
-  else
-    call s:LoadDefaultSyntax(a:group, a:type)
-  endif
-endfunction
-
-function! s:LoadDefaultSyntax(group, type)
-  unlet! b:current_syntax
-  let syntaxPaths = ['$VIMRUNTIME', '$VIM/vimfiles', '$HOME/.vim']
-  for path in syntaxPaths
-    let file = expand(path).'/syntax/'.a:type.'.vim'
-    if filereadable(file)
-      execute 'syntax include '.a:group.' '.file
-    endif
-  endfor
-endfunction
-
-function! s:LoadFullSyntax(group, type)
-  call s:SetCurrentSyntax(a:type)
-  execute 'syntax include '.a:group.' syntax/'.a:type.'.vim'
-endfunction
-
-" Settings to avoid syntax overload
-function! s:SetCurrentSyntax(type)
-  if a:type == 'coffee'
-    syntax cluster coffeeJS contains=@htmlJavaScript
-    let b:current_syntax = 'vue'
-  else
-    unlet! b:current_syntax
-  endif
-endfunction
-"}}}
-
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 "
 " Load main syntax {{{
 "
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-" Load syntax/*.vim to syntax group
-call s:LoadSyntax('@HTMLSyntax', 'html')
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+
+" Load syntax/html.vim to syntax group, which loads full JavaScript and CSS
+" syntax. It defines group @html, @htmlJavaScript, and @htmlCss.
+call vue#LoadSyntax('@html', 'html')
+
+" Avoid overload
+if !hlexists('cssTagName')
+  call vue#LoadSyntax('@htmlCss', 'css')
+endif
+
+" Avoid overload
+if !hlexists('javaScriptComment')
+  call vue#Log('load javascript cluster')
+  call vue#LoadSyntax('@htmlJavaScript', 'javascript')
+endif
 
 " Load vue-html syntax
 runtime syntax/vue-html.vim
 
-" Avoid overload. 'syntax/html.vim' defines htmlCss and htmlJavaScript
-if hlexists('cssTagName') == 0
-  call s:LoadSyntax('@htmlCss', 'css')
-endif
-
-" Avoid overload
-if hlexists('javaScriptComment') == 0
-  call vue#Log('load javascript cluster')
-  call s:LoadSyntax('@htmlJavaScript', 'javascript')
-endif
+" Load vue-javascript syntax
+runtime syntax/vue-javascript.vim
 "}}}
 
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 "
 " Load pre-processors syntax {{{
 "
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 " If pug is enabled, load vim-pug syntax
 if s:use_pug
-  call s:LoadFullSyntax('@PugSyntax', 'pug')
+  call vue#LoadFullSyntax('@PugSyntax', 'pug')
+  syn cluster htmlJavascript remove=javascriptParenthesisBlock
 endif
 
 " If less is enabled, load less syntax 
 if s:use_less
-  call s:LoadSyntax('@LessSyntax', 'less')
+  call vue#LoadSyntax('@LessSyntax', 'less')
   runtime! after/syntax/less.vim
 endif
 
 " If sass is enabled, load sass syntax 
 if s:use_sass
-  call s:LoadSyntax('@SassSyntax', 'sass')
+  call vue#LoadSyntax('@SassSyntax', 'sass')
   runtime! after/syntax/sass.vim
 endif
 
+" If scss is enabled, load sass syntax 
+if s:use_scss
+  call vue#LoadSyntax('@ScssSyntax', 'scss')
+  runtime! after/syntax/scss.vim
+endif
+
+" If stylus is enabled, load stylus syntax 
+if s:use_stylus
+  call vue#LoadFullSyntax('@StylusSyntax', 'stylus')
+  runtime! after/syntax/stylus.vim
+endif
+
 " If CoffeeScript is enabled, load the syntax. Keep name consistent with
 " vim-coffee-script/after/html.vim
 if s:use_coffee
-  call s:LoadFullSyntax('@htmlCoffeeScript', 'coffee')
+  call vue#LoadFullSyntax('@htmlCoffeeScript', 'coffee')
+endif
+
+" If TypeScript is enabled, load the syntax.
+if s:use_typescript
+  call vue#LoadFullSyntax('@TypeScript', 'typescript')
 endif
 "}}}
 
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 "
 " Syntax highlight {{{
 "
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 " All start with html/javascript/css for emmet-vim in-file type detection
 syntax region htmlVueTemplate fold
       \ start=+<template[^>]*>+
       \ end=+^</template>+
-      \ keepend contains=@HTMLSyntax
+      \ keepend contains=@html
 " When template code is not well indented
 syntax region htmlVueTemplate fold
       \ start=+<template[^>]*>+
-      \ end=+</template>\ze\n\(^$\n\)*<script>+
-      \ keepend contains=@HTMLSyntax
+      \ end=+</template>\ze\n\(^$\n\)*<\(script\|style\)+
+      \ keepend contains=@html
 
 syntax region javascriptVueScript fold 
       \ start=+<script[^>]*>+
       \ end=+</script>+
       \ keepend contains=@htmlJavaScript,jsImport,jsExport,vueTag
 
+
 syntax region cssVueStyle fold
       \ start=+<style[^>]*>+
       \ end=+</style>+
@@ -150,45 +131,71 @@ syntax region cssVueStyle fold
 
 " Preprocessors syntax
 syntax region pugVueTemplate fold
-      \ start=+<template[^>]*lang="pug"[^>]*>+
+      \ start=+<template[^>]*lang=["']pug["'][^>]*>+
       \ end=+</template>+
       \ keepend contains=@PugSyntax,vueTag
 
 syntax region coffeeVueScript fold 
-      \ start=+<script[^>]*lang="coffee"[^>]*>+
+      \ start=+<script[^>]*lang=["']coffee["'][^>]*>+
       \ end=+</script>+
       \ keepend contains=@htmlCoffeeScript,jsImport,jsExport,vueTag
 
+syntax region typescriptVueScript fold
+      \ start=+<script[^>]*lang=["']ts["'][^>]*>+
+      \ end=+</script>+
+      \ keepend contains=@TypeScript,vueTag
+
 syntax region cssLessVueStyle fold
-      \ start=+<style[^>]*lang="less"[^>]*>+
+      \ start=+<style[^>]*lang=["']less["'][^>]*>+
       \ end=+</style>+
       \ keepend contains=@LessSyntax,vueTag
-syntax region cssSassVueStyle fold
-      \ start=+<style[^>]*lang="sass"[^>]*>+
+syntax region sassVueStyle fold
+      \ start=+<style[^>]*lang=["']sass["'][^>]*>+
       \ end=+</style>+
       \ keepend contains=@SassSyntax,vueTag
 syntax region cssScssVueStyle fold
-      \ start=+<style[^>]*lang="scss"[^>]*>+
+      \ start=+<style[^>]*lang=["']scss["'][^>]*>+
+      \ end=+</style>+
+      \ keepend contains=@ScssSyntax,vueTag
+
+" Backward compatiable for `use_sass` option
+if s:use_sass && !s:use_scss
+  syntax region cssScssVueStyle fold
+        \ start=+<style[^>]*lang=["']scss["'][^>]*>+
         \ end=+</style>+
         \ keepend contains=@SassSyntax,vueTag
+endif
+
+syntax region cssStylusVueStyle fold
+      \ start=+<style[^>]*lang=["']stylus["'][^>]*>+
+      \ end=+</style>+
+      \ keepend contains=@StylusSyntax,vueTag
 
 syntax region vueTag fold
       \ start=+^<[^/]+ end=+>+ skip=+></+
       \ contained contains=htmlTagN,htmlString,htmlArg
 syntax region vueTag 
       \ start=+^</+ end=+>+
-      \ contained contains=htmlTagN,htmlString,htmlArg
+      \ contains=htmlTagN,htmlString,htmlArg
 
 highlight default link vueTag htmlTag
 highlight default link cssUnitDecorators2 Number
 highlight default link cssKeyFrameProp2 Constant
 "}}}
 
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Custom blocks {{{
+"
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+runtime syntax/vue-custom-blocks.vim
+"}}}
+
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 "
 " Syntax patch {{{
 "
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 " Patch 7.4.1142
 if has("patch-7.4-1142")
   if has("win32")
@@ -201,33 +208,59 @@ else
 endif
 
 " Style
-" Redefine (less|sass)Definition to highlight <style> correctly and 
+" Redefine (less|sass|stylus)Definition to highlight <style> correctly and 
 " enable emmet-vim css type.
 if s:use_less
   silent! syntax clear lessDefinition
-  syntax region cssLessDefinition matchgroup=cssBraces contains=@LessSyntax 
+  syntax region cssLessDefinition matchgroup=cssBraces 
+        \ contains=@LessSyntax,cssLessDefinition 
         \ contained containedin=cssLessVueStyle
         \ start="{" end="}" 
 endif
 if s:use_sass
   silent! syntax clear sassDefinition
-  syntax region cssSassDefinition matchgroup=cssBraces contains=@SassSyntax 
-        \ contained containedin=cssSassVueStyle,cssScssVueStyle
+  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
+endif
+" If not loading https://github.com/cakebaker/scss-syntax.vim
+if s:use_scss && !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
+if s:use_stylus
+  silent! syntax clear stylusDefinition
+  syntax region cssStylusDefinition matchgroup=cssBraces 
+        \ contains=@StylusSyntax,cssStylusDefinition
+        \ contained containedin=cssStylusVueStyle
         \ start="{" end="}" 
 endif
 
-" Avoid css syntax interference
+" Use a different name in order to avoid css syntax interference
 silent! syntax clear cssUnitDecorators
-" Have to use a different name
 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
+      \ containedin=cssAttrRegion,sassCssAttribute,lessCssAttribute,stylusCssAttribute
 
 silent! syntax clear cssKeyFrameProp
 syn match cssKeyFrameProp2 /\d*%\|from\|to/ 
       \ contained nextgroup=cssDefinition
-      \ containedin=cssAttrRegion,sassCssAttribute,lessCssAttribute
+      \ containedin=cssAttrRegion,sassCssAttribute,lessCssAttribute,stylusCssAttribute
 
 " Coffee
 if s:use_coffee
@@ -246,7 +279,27 @@ syntax match javaScriptNumber '\v<-?\d+L?>|0[xX][0-9a-fA-F]+>'
 silent! syntax clear htmlHead
 
 " html5 data-*
-syntax match htmlArg '\v<data(-[.a-z0-9]+)+>' containedin=@HTMLSyntax
+syntax match htmlArg '\v<data(-[.a-z0-9]+)+>' containedin=@html
+"}}}
+
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Syntax sync {{{
+"
+""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+syntax sync clear
+syntax sync minlines=100
+syntax sync match vueHighlight groupthere NONE "</\(script\|template\|style\)"
+syntax sync match scriptHighlight groupthere javascriptVueScript "<script"
+syntax sync match scriptHighlight groupthere coffeeVueScript "<script[^>]*lang=["']coffee["'][^>]*>"
+syntax sync match scriptHighlight groupthere typescriptVueScript "<script[^>]*lang=["']ts["'][^>]*>"
+syntax sync match templateHighlight groupthere htmlVueTemplate "<template"
+syntax sync match templateHighlight groupthere pugVueTemplate "<template[^>]*lang=["']pug["'][^>]*>"
+syntax sync match styleHighlight groupthere cssVueStyle "<style"
+syntax sync match styleHighlight groupthere cssLessVueStyle "<style[^>]*lang=["']less["'][^>]*>"
+syntax sync match styleHighlight groupthere sassVueStyle "<style[^>]*lang=["']sass["'][^>]*>"
+syntax sync match styleHighlight groupthere cssScssVueStyle "<style[^>]*lang=["']scss["'][^>]*>"
+syntax sync match styleHighlight groupthere cssStylusVueStyle "<style[^>]*lang=["']stylus["'][^>]*>"
 "}}}
 
 let b:current_syntax = 'vue'