feat: support css indent

README.md

@@ -1,5 +1,26 @@
-# vim-vue
+# vim-vue-plugin
 
-Vim plugin for `.vue` file syntax and indent. Mainly inspired by [mxw/vim-jsx][1]
+Vim plugin for `.vue` files syntax and indent. Mainly inspired by [mxw/vim-jsx][1]. 
+
+## Install
+
+- Use [VundleVim][2]
+
+        Plugin 'leafOfTree/vim-vue-plugin'
+
+- Or manual: download 'vim-vue-plugin' and drop it in `Vim/vimfiles`.
+
+Plugin works if filetype is set to `javascript.vue`.
+
+## How it works
+
+Since `.vue` is a combination of CSS, HTML and JavaScript, so is `vim-vue-plugin`. (Like XML and JavaScript for `.jsx`).
+
+Support `.wpy` files too.
+
+## Config
+
+## Screenshot
 
 [1]: https://github.com/mxw/vim-jsx "mxw: vim-jsx"
+[2]: https://github.com/VundleVim/Vundle.vim

after/indent/vue.vim

@@ -1,27 +1,28 @@
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-" Vim ftplugin file
+" Vim indent file
 "
 " Language: Vue (Wepy)
 " Maintainer: leafOfTree <leafvocation@gmail.com>
 "
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 
+if exists("b:did_vue_indent")
+  finish
+endif
+
 se sw=2 ts=2
 
 " Save the current JavaScript indentexpr.
 let b:vue_js_indentexpr = &indentexpr
 
-" Prologue; load XML indentation.
-if exists('b:did_indent')
-  let s:did_indent=b:did_indent
-  unlet b:did_indent
-endif
-
+unlet b:did_indent
 runtime! indent/xml.vim
 
-if exists('s:did_indent')
-  let b:did_indent=s:did_indent
-endif
+unlet b:did_indent
+runtime! indent/css.vim
+
+let b:did_indent = 1
+let b:did_vue_indent = 1
 
 " JavaScript indentkeys
 setlocal indentkeys=0{,0},0),0],0\,,!^F,o,O,e
@@ -44,6 +45,11 @@ function! SynsHTMLish(syns)
   return last_syn =~? '\v^(html)'
 endfunction
 
+function! SynsCSSish(syns)
+  let last_syn = get(a:syns, -1)
+  return last_syn =~? '\v^(css)|(less)|(sass)'
+endfunction
+
 function! SynsVueScope(syns)
   let first_syn = get(a:syns, 0)
   return first_syn =~? '\v^(vueStyle)|(vueTemplate)|(vueScript)'
@@ -51,6 +57,7 @@ endfunction
 
 function! GetVueIndent()
   let curline = getline(v:lnum)
+  let prevline = getline(v:lnum - 1)
   let cursyns = SynsEOL(v:lnum)
   let prevsyns = SynsEOL(v:lnum - 1)
 
@@ -61,21 +68,27 @@ function! GetVueIndent()
     if curline =~? s:end_tag 
       let ind = ind - &sw
     endif
+  elseif SynsCSSish(prevsyns)
+    let ind = GetCSSIndent()
   else
-    if curline =~ s:vue_tag
-      let ind = 0
+    if len(b:vue_js_indentexpr)
+      let ind = eval(b:vue_js_indentexpr)
     else
-      if len(b:vue_js_indentexpr)
-        let ind = eval(b:vue_js_indentexpr)
-      else
-        let ind = cindent(v:lnum)
-      endif
+      let ind = cindent(v:lnum)
     endif
   endif
 
-  if SynsVueScope(cursyns) && ind == 0
-    let ind = &sw
+  if curline =~? s:vue_tag
+    let ind = 0
+  elseif (exists("g:vim_vue_plugin_has_init_indent")
+        \ && g:vim_vue_plugin_has_init_indent != 0)
+    if SynsVueScope(cursyns) && ind == 0
+      let ind = &sw
+    endif
+  else
+    if prevline =~? s:vue_tag
+      let ind = 0
+    endif
   endif
-
   return ind
 endfunction

after/syntax/vue.vim

@@ -1,8 +1,8 @@
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 " Vim syntax file
 "
-" Language: Vue (JavaScript)
-" Maintainer: leafOfTree <leafvocation@gmail.com>
+" Language: Vue (Wepy)
+" Maintainer: leaf <leafvocation@gmail.com>
 " Depends: pangloss/vim-javascript
 "
 " CREDITS: Inspired by mxw/vim-jsx.
@@ -20,7 +20,12 @@ let b:current_syntax='vue'
 " Find tag <script> / <style> and enable javascript / css syntax
 syn region vueTemplate start=+<template\(\s.\{-}\)\?>+ end=+</template>+ keepend contains=@HTMLSyntax
 syn region vueScript start=+<script\(\s.\{-}\)\?>+ end=+</script>+ keepend contains=@jsAll,jsImport,jsExport
-syn region vueStyle start=+<style\(\s.\{-}\)\?>+ end=+</style>+ keepend contains=@CSSSyntax
+syn region vueStyle start=+<style\(\s.\{-}\)\?>+ end=+</style>+ keepend contains=@CSSSyntax,@HTMLSyntax
+
+hi def link vueTag htmlTagName
+hi! link vueTemplate vueTag
+hi! link vueScript vueTag
+hi! link vueStyle vueTag
 
 " Officially, vim-jsx depends on the pangloss/vim-javascript syntax package
 " (and is tested against it exclusively).  However, in practice, we make some