How to Autocomplete CSS class names that include a minus character?

Question

I'm having the following CSS class structure

.mAIcon
.mAIcon-reject
.mAIcon-edit
.mAIcon-accept
.event

and so on.

Inside my HTML files I want to autocomplete these class names.

But when I type

<span class="mAIcon mA|">

and I want to autocomplete the rest the only thing I get is

<span class="mAIcon mAIcon|">

To get what I really want I have to type an extra - and for example e and use the autocompletion again. But then I get everything that starts with an e, even the class event. This is really annoying and makes the autocompletion rather useless in this case.

I use Vim's generic keyword completion with the i_CTRL-N command and I don't have any additional completion plugins installed.

Is it possible to include the - to the detection of CSS class names for the autocompletion?

Answer 1

Yes, you can define what characters are considered part of keywords with the 'iskeyword' option:

setlocal iskeyword+=-

You can add the following snippet to your vimrc to restrict that option to CSS and HTML files:

augroup css
    autocmd!
    autocmd FileType css,html setlocal iskeyword+=-
augroup END

Answer 2

I solved the problem by writing a small python script that creates a tag file. The script searches for CSS classes and prints a tag line for every class.

At the moment I run the script by hand with

css_tags $file >> tags

which adds the files to the tags file. This works since tag completion isn't limited by the iskeyword setting.

Here is the contents of the script which is also available on GitHub.

#!/usr/bin/env python3

import argparse
import re

parser = argparse.ArgumentParser(description='CSStags.')
parser.add_argument('css_file', type=argparse.FileType('r'))


def create_tag(tag_name, filename, line):
    """
    Create a ctag line for the CSS class
    """
    print('%s\t%s\t/^%s$/;"\tc' % (tag_name, filename, line))


def main():
    args = parser.parse_args()

    class_regex = re.compile('^\.([\w-]+)\s*{')

    for line in args.css_file:
        class_match = class_regex.match(line)
        if class_match:
            create_tag(class_match.group(1), args.css_file.name, class_match.group(0))


if __name__ == '__main__':
    main()