Enable completion for CSS using ctags

Question

I have added CSS tags to my project tags file by adding this to ~/.ctags

--langdef=css
--langmap=css:.css
--langmap=css:+.scss
--langmap=css:+.sass
--langmap=css:+.styl
--langmap=css:+.less
--regex-css=/^[ \t]*(([A-Za-z0-9_-]+[ \t\n,]+)+)\{/\1/t,tag,tags/
--regex-css=/^[ \t]*#([A-Za-z0-9_-]+)/#\1/i,id,ids/
--regex-css=/^[ \t]*\.([A-Za-z0-9_-]+)/.\1/c,class,classes/

then, after project tags file is updated, it now has entries like this:

.bg-danger  public/CSS/framework/components/utilities.css   /^.bg-danger {$/;"  c
.bg-faded   public/CSS/framework/components/utilities.css   /^.bg-faded {$/;"   c
.bg-info    public/CSS/framework/components/utilities.css   /^.bg-info {$/;"    c

I would like completion to work when writing html in html or PHP files, e.g. if I am in -- INSERT -- mode and have a partial like

    <div class="bg-d

Im trying to get completion assistance with Ctrl - x, Ctrl - ] but vim simply returns

-- Tag completion (^]^N^P) Pattern not found

Im not fussed whether completion is invoked via the Ctrl - ] command specifically (but I dont really want to install a plugin for this), I just want completion assistance for CSS classes (and ids) as I type.

Relevant info

• terminal vim - version 7.4.52
• Plugins - ctrlp

Answer 1

The problem comes from the leading dot before class names.

Your search pattern leaves it out but you add it afterwards and, because tag search honors your iskeyword setting which doesn't contain ., Vim looks for ^foo instead of ^.foo in your tag files and, logically, doesn't find it.

You basically have two ways to fix that issue…

In ctags

Remove . from the second part of your pattern. This will index .foo as foo and allow Vim to find it when doing tag-based completion.

--regex-css=/^[ \t]*\.([A-Za-z0-9_-]+)/.\1/c,class,classes/

becomes:

--regex-css=/^[ \t]*\.([A-Za-z0-9_-]+)/\1/c,class,classes/

In Vim

Add . to the iskeyword option to allow Vim to search for ^.foo instead of ^foo:

set iskeyword+=.

---

Note that both methods probably have shortcomings so it may be a good idea to do some real world testing.

You might find my .ctags interesting.