strange highlighting when nesting similar elements

[iwyg]

When nesting two similar elements, syntax hl goes bonkers.

e.g. this is ok:

this not so much:

also on self closing elements:

Any idea? Is it possible that xml syntax HL can cause this?

[mxw]

Please read the README.

[iwyg]

I did. I made also sure there's no conflicting vim config involved. Sorry, I forgot to post a minimal vimrc:

""" Disable Vi Compatibility:
"""-----------------------------------------------------------------------------------------------------
""" init {{{
set nocompatible
filetype off
""" Vim Plug {{{
call plug#begin("$HOME/.vim/plugged")
Plug 'mxw/vim-jsx' | Plug 'pangloss/vim-javascript', { 'do' : 'npm install -g babel' }
call plug#end()
"""}}}
filetype plugin indent on
syntax on
"""}}}

""" Swap and Undo {{{
set directory=.,$TMPDIR
set history=10000
set undofile
set undodir=$HOME/.vim/undo
set undolevels=10000
set nobackup
" auto detect filechange
"set autoread
"""}}}

""" Behaviour And Settings {{{
""" set leaderkey to ,:
let mapleader=","

""" enable mouse interaction:
if has('mouse') && !has('nvim')
    set mouse=a
    set ttymouse=xterm2
endif
if has('mouse_sgr')
    set ttymouse=sgr
endif
""" update time
"set updatetime=2000
"""" remove timeout for escape sequence:
set timeoutlen=1000 ttimeoutlen=0
""" set the working shell:
set shell=/bin/zsh

""" Status bar
set laststatus=2
set statusline=%F%m%r%h%w\ [FORMAT=%{&ff}]\ [TYPE=%Y]\ [ASCII=\%03.3b]\ [HEX=\%02.2B]\ [POS=%04l,%04v][%p%%]\ [LEN=%L]

""" encoding:
if has('vim_starting')
    set encoding=utf8
endif

""" UI {{{
""" enables edit and movement in virtual spaces
set virtualedit=all
set ruler
set cursorline
""" format:
set title
set backspace=indent,eol,start
set wrap
set textwidth=80
set linespace=2
set formatoptions=qrn1
set autowrite
set hidden
set autoindent

set cpoptions+=$

set relativenumber
set number

""" hide scrollbars
set guioptions-=l
set guioptions-=r
"""}}}

""" toggle line highlighting on insert mode
augroup toggle_hlsearch
    autocmd!
    autocmd InsertEnter,InsertLeave * set cul!
augroup END

""" formatting {{{
set tabstop=4
set shiftwidth=4
set softtabstop=4
set smarttab
""" use tabs by default:
set noexpandtab
"""}}}

""" windows {{{
""" scrolling
set scrolljump=4
set scrolloff=3
""" split new windows on the right
set splitbelow
"""}}}

""" Use the same symbols as TextMate for tabstops and EOLs
set listchars=tab:›\ ,eol:¬,trail:•,extends:#,nbsp:. " Highlight problematic whitespace

""" code folding: {{{
set nofoldenable
"fold based on indent
"" syntax slow?
"set foldmethod=syntax
set foldmethod=indent
"deepest fold is 10 levels
set foldnestmax=10
" default folding level
set foldlevel=2

""" ctags {{{
set tags=./tags,tags
"""}}}

""" navigating {{{
"show matching brackets
set showmatch "show matching brackets
"""}}}

""" searching: {{{
set ignorecase
set smartcase
set incsearch
set hlsearch
set gdefault

" see Ack.vim for grepprg
if executable('ag')
    set grepprg=ag
else
    set grepprg=ack
endif

let hlstate=0
""" toggles hlsearch
nnoremap <leader>hl :if (hlstate%2 == 0) \| nohlsearch \| else \| set hlsearch \| endif \| let hlstate=hlstate+1<cr>
"""}}}

""" code completion {{{
""" set completeopt+=longest,menu ",preview
"set completeopt=longest,menuone
set pumheight=15
"set complete-=i
"set completefunc=complete
"
"set wildmenu
"set wildmode=longest:list,full
"set whichwrap=b,s,h,l,<,>,[,]

""" make <Enter> key behave like <C-y> if the completion menu is visible
""" see http://vim.wikia.com/wiki/Make_Vim_completion_popup_menu_work_just_like_in_an_IDE
"inoremap <expr> <CR> pumvisible() ? "\<C-y>" : "\<C-g>u\<CR>"

""" auto close preview
augroup completion
    autocmd!
    autocmd CompleteDone * pclose
augroup END
"""}}}

""" wrap text: {{{
command! -nargs=* Wrap set wrap linebreak nolist
"""}}}

""" Cursor: {{{
""" enables cursor shape in NeoVim
if has('nvim')
    let $NVIM_TUI_ENABLE_CURSOR_SHAPE=1
endif
""" set cursor shape in terminal (iterm) and Tmux:
""" see http://vim.wikia.com/wiki/Change_cursor_shape_in_different_modes
if exists('$TMUX')
    let &t_SI = "\<Esc>Ptmux;\<Esc>\<Esc>]50;CursorShape=1\x7\<Esc>\\"
    let &t_EI = "\<Esc>Ptmux;\<Esc>\<Esc>]50;CursorShape=0\x7\<Esc>\\"
elseif &term =~ '^xterm'
    let &t_SI = "\<Esc>]50;CursorShape=1\x7"
    let &t_EI = "\<Esc>]50;CursorShape=0\x7"
endif
"""}}}

"""-------------------------------------------------------------------------------------
"""}}}

""" Powerline {{{
"""-------------------------------------------------------------------------------------
"set rtp+=/usr/local/lib/python2.7/site-packages/powerline/bindings/vim
"let g:Powerline_symbols = 'unicode'
"set fillchars+=stl:\ ,stlnc:\
"" troubleshooting Powerline loosing color on saveing buffers
"let g:miniBufExplForceSyntaxEnable = 1
"""-------------------------------------------------------------------------------------
"""}}}

""" Vim Config {{{
"""-------------------------------------------------------------------------------------
""" Edit Open Vimrc:
nnoremap <leader>v :e $MYVIMRC<CR>
nnoremap <leader>vv :vsplit $MYVIMRC<CR>

" auto source vimrc on save:
augroup vimrc_sourcing
    autocmd!
    autocmd! BufWritePost $MYVIMRC nested :source $MYVIMRC
augroup END
"""}}}

"""-----------------------------------------------------------------------------------------------------
""" Basic Mappings {{{
"""-----------------------------------------------------------------------------------------------------
""" System Clipboard Copy And Paste
set pastetoggle=<F2> "F2 before pasting to preserve indentation
""" Copy paste to/from clipboard
"vnoremap <D-c> "*y
"map <silent><Leader>p :set paste<CR>o<esc>"*]p:set nopaste<cr>"
"map <silent><Leader><S-p> :set paste<CR>O<esc>"*]p:set nopaste<cr>"
"map <silent><D-v> :set paste<CR>o<esc>"*]p:set nopaste<cr>"

""" nnoremap <silent> <F5> :call <SID>StripTrailingWhitespaces()<CR>
nnoremap <silent> <F5> :call StripTrailingWhitespaces()<CR>

""" disable arrow keys:
nnoremap <up>    <nop>
nnoremap <down>  <nop>
nnoremap <left>  <nop>
nnoremap <right> <nop>
inoremap <up>    <nop>
inoremap <down>  <nop>
inoremap <left>  <nop>
inoremap <right> <nop>
"""}}}

""" tag jump to next tag:
nnoremap ü <C-]>
""" tag jump to previous tag:
nnoremap <C-Ü> <C-O>
""" switch between current and previous buffer
nmap <S-TAB> :b#<CR>
vmap <S-TAB> :b#<CR>
""" next buffer
nnoremap <silent> <C-L> :bn<CR>
nnoremap <leader>bn <C-l>
""" previous buffer
nnoremap <silent> <C-H> :bp<CR>
nnoremap <leader>bp <C-h>
""" next tab
nmap <leader>tn :tabnext<CR>
vmap <leader>tn :tabnext<CR>
""" previous tab
nmap <leader>tp :tabprevious<CR>
vmap <leader>tp :tabprevious<CR>
""" toggle line numbers:
nmap <Leader>N :set number!<CR>
""" toggle relative line numbers:
nmap <Leader>RN :set relativenumber!<CR>
""" Shortcut to rapidly toggle `set list`
nmap <leader>L :set list!<CR>

""" terminal mode

if has('nvim')
    nmap <leader>term :belowright split <CR> \| :terminal<CR>
else
    nmap <leader>term :belowright split<CR> \| :VimShell<CR>
endif

""" if vim slows down, try using old regex engine (1)
set re=0

[mxw]

Hmm... I'm not able to repro this. My best guesses:

1. You seem to be including vim-jsx before vim-javascript. I don't think this matters because vim-jsx does everything in after/, but it could; I don't know how your plugin manager works.
2. I know that the default XML highlighter highlights closing tags differently from open tags. My settings or colorscheme actually don't do that for me, so I don't know the details of how it works—it's possible that when you nest the same tag (or have self-closing tags), the outer close-tag just highlights a weird color by default.

One way you can test whether things are working correctly with the vim-jsx syntax is by putting your cursor over the final </div>, and running:

:echo map(synstack(line('.'), col('.')), 'synIDattr(v:val, "name")')

The output I'd expect is something like ['jsBlock', 'jsParen', 'jsxRegion', 'xmlEndTag'].

[iwyg]

Thanks a lot. I get ['jsExportContainer', 'jsBlock', 'jsBlock', 'jsParen'] on the weird ones. On correct highlighted elements it's ['jsExportContainer', 'jsBlock', 'jsBlock', 'jsParen', 'jsxRegion', 'xmlEndTag']