vim-css3-syntaxがvim-lessのハイライトを壊してしまう

vim-css3-syntaxとvim-lessを両方入れている環境で、LESSの引数付きミックスイン内がハイライトされなくなってしまうバグを直した(つもり)。コンフリクトかと思ったら普通にバグだった……。でも他にもこのあたりの絡みで不具合があって、多分vim-less側でも対処しないと完全には直らないと思う。まぁとにかく一部は直せたので、両方使っている人は更新してみてください。

vim-css3-syntaxのMedia Queriresのハイライトを担う部分で追加定義しているcssMediaTypeグループでcontainedを引数として指定していなかったため、LESSのミックスインの引数を括るのに使う括弧(())がMedia Queriesの(min-width: 480px)などの括弧とみなされてしまっていた。その結果、その括弧に続く{}で括られたブロックがLESSのルールセットではなく@mediaのブロックになってしまい、直下のCSSプロパティーなどがうまくハイライトされなくなった(cssMediaBlockグループのcontainsにはCSSプロパティー等をハイライトするためのcss.*PropやlessDefinitionグループ等が含まれてないので)ということの模様。

containedを追加することに気づくまで別の所(cssMediaBlockのcontainsの方)をずっといじっててすごく遠回りした。まぁその遠回りのお陰でSCSSのネストされた@mediaブロックのハイライトを可能にする方法がわかったので良しとする。やり方は~/.vim/after/syntax/scss.vimに以下の3行を書くだけ。

runtime! syntax/css/css3-mediaqueries.vim
syn clear cssMediaBlock
syn region cssMediaBlock contained transparent matchgroup=cssBraces start='{' end='}' contains=TOP

ただ完璧ではなくて、例えばMedia Queriesのクエリ式での変数(prerelease版でサポートされている奴)なんかがキレイにハイライトされない。単なるハイライトグループへの追加とかでは無理そうな気がするので、対応するにはちゃんとSCSS向けにcss3-mediaqueries.vimを書き直す必要がありそう。