Search code examples
vimmacvimvim-syntax-highlighting

Macvim CSS/Sass syntax highlighting error when using asterisk + slash


I'm using a Compass sprite @import statement in my Sass stylesheet which includes all of the PNG files in a directory (@import 'place-detail-icons/*.png';). Problem is that Macvim sees everything after the /* as a CSS comment, and so it displays the rest of the stylesheet as a comment.

I was able to fix this by putting /**/ on the line below the @import statement in order to fake out Macvim. But was wondering if anyone's found a non-hack way to address this. Here's a larger selection of the code.

@import 'mixins/tabs';
@import 'mixins/timestamps';
@import 'mixins/triangles';
@import 'place-detail-icons/*.png';

  #modal .file-upload {
    margin-bottom: 20px;
  }

  #details {
    position: relative;
    left: -160px;
    width: 1280px;
    min-height: 410px;
    padding: 30px 0 50px;
    border-top: 1px solid $white;
  }

Solution

  • This is a problem with the CSS syntax file. If you look in :e $VIMRUNTIME/syntax/css.vim on line 179 you'll see this:

    syn region cssInclude start="@import" end=";" contains=cssComment,cssURL,cssUnicodeEscape,cssMediaType
    

    If you remove the cssComment from the contains= it will fix it; however, editing the built-in syntax files directly is not advised because your changes will be overwritten when you upgrade vim. Instead, open the file and :sav! ~/.vim/syntax/css.vim to create a duplicate that will override the built-in syntax first and edit that.