ap / vim-css-color

Preview colours in source code while editing

CSS Color

A very fast, multi-syntax context-sensitive color name highlighter

#  Install:  If you use a plugin manager then follow its instructions.  Otherwise:     
git clone https://github.com/ap/vim-css-color.git ~/.vim/pack/css-color/start/css-color

_{Inspired by Niklas Hofer and Max Vasiliev.}

vim-css-color's Issues

Changing `iskeyword` is the wrong fix

See skammer/vim-css-color#9.

"Trailing characters" error when opening css files

Error detected while processing function <SNR>110_PreviewCSSColorInLine..<SNR>110_MatchColorValue:
line    8:
E488: Trailing characters:  endif¬
Press ENTER or type command to continue

See https://skitch.com/bjeanes/gpdee/2-vim-vim

“white” in “white-space” property name gets highlighted

See skammer/vim-css-color#9

`E121: Undefined variable: b:color_match_id` when switching buffers

I get this error when switching buffers sometimes, regardless if I'm switching to css files or not (this happens when I switch to my .vimrc for example):

Error detected while processing function <SNR>139_parse_any_screen..<SNR>139_update_matches:
line    6:
E121: Undefined variable: b:color_match_id
Error detected while processing function <SNR>139_parse_any_screen..<SNR>139_update_matches:
line    6:
E116: Invalid arguments for function filter
Error detected while processing function <SNR>139_parse_any_screen..<SNR>139_update_matches:
line    6:
E121: Undefined variable: b:color_match_id
Error detected while processing function <SNR>139_parse_any_screen..<SNR>139_update_matches:
line    6:
E116: Invalid arguments for function filter
Error detected while processing function <SNR>139_parse_any_screen..<SNR>139_update_matches:
line    6:
E121: Undefined variable: b:color_match_id
Error detected while processing function <SNR>139_parse_any_screen..<SNR>139_update_matches:
line    6:
E116: Invalid arguments for function filter

Compatibility problem with `set cursorline`

First, love the plugin! It even worked out of the box with .less files. That may be because I have the vim-less plugin. If it could be made to work with the .less color functions like lighten(color,percentage), my palette.less file would be gorgeous. Either way, it's pretty awesome.

Onto the (fairly minor) problem. I use the set cursorline option which highlights the line the cursor is on.

Cursor on first line:

Cursor on same line as a color:

I skimmed through the plugin but I don't know enough vimscript to fix it straightaway. When a color is on the cursor's current line, it should either colorize the fg and bg, or neither. Right now, it's colorizing the fg but not the bg.

The colorscheme in the screenshots is zenburn. Let me know if I can provide any other info.

vim-css-color not kicking in

Hi Aristotle,
I have tried to install your fork of vim-css-color by copying the css.vim in .vim/after/syntax directory.
Unfortunately it does not seem to kick in when I edit .css or .sass files. Perhaps you can give me some hints of what I am not doing or what I am doing wrong.

Thank you in advance,
Andrea

Find below the list of files currently loaded in my vim installation (as generated by :scriptnames).

/usr/share/vim/vimrc
/usr/share/vim/vim73/debian.vim
/usr/share/vim/vim73/syntax/syntax.vim
/usr/share/vim/vim73/syntax/synload.vim
/usr/share/vim/vim73/syntax/syncolor.vim
/usr/share/vim/vim73/filetype.vim
/home/and/.vim/ftdetect/arduino.vim
/home/and/.vim/ftdetect/coffee.vim
/home/and/.vim/ftdetect/cucumber.vim
/home/and/.vim/ftdetect/eco.vim
/home/and/.vim/ftdetect/git.vim
/home/and/.vim/ftdetect/haml.vim
/home/and/.vim/ftdetect/markdown.vim
/home/and/.vim/ftdetect/mustache.vim
/home/and/.vim/ftdetect/puppet.vim
/home/and/.vim/ftdetect/scala.vim
/home/and/.vim/ftdetect/textile.vim
/usr/share/vim/vim73/menu.vim
/usr/share/vim/vim73/lang/menu_en_gb.utf-8.vim
/usr/share/vim/vim73/lang/menu_en_gb.latin1.vim
/usr/share/vim/vim73/autoload/paste.vim
/home/and/.vimrc
/usr/share/vim/vim73/syntax/nosyntax.vim
/usr/share/vim/vim73/ftplugin.vim
/usr/share/vim/vim73/indent.vim
/usr/share/vim/vim73/colors/desert.vim
/usr/share/vim/vim73/macros/matchit.vim
/home/and/.vimrc.local
/home/and/.vim/autoload/pathogen.vim
/home/and/.vim/plugin/31-create-scala.vim
/home/and/.vim/plugin/AlignMapsPlugin.vim
/home/and/.vim/plugin/AlignPlugin.vim
/home/and/.vim/plugin/NERD_commenter.vim
/home/and/.vim/plugin/NERD_tree.vim
/home/and/.vim/plugin/ZoomWinPlugin.vim
/home/and/.vim/plugin/ack.vim
/home/and/.vim/plugin/cecutil.vim
/home/and/.vim/plugin/closetag.vim
/home/and/.vim/plugin/color_sample_pack.vim
/home/and/.vim/plugin/command-t.vim
/home/and/.vim/plugin/conque_term.vim
/home/and/.vim/plugin/endwise.vim
/home/and/.vim/plugin/fugitive.vim
/home/and/.vim/plugin/gist.vim
/home/and/.vim/plugin/indent-object.vim
/home/and/.vim/plugin/rails.vim
/home/and/.vim/plugin/scriptnames.vim
/home/and/.vim/plugin/searchfold_0.8.vim
/home/and/.vim/plugin/snipMate.vim
/home/and/.vim/plugin/supertab.vim
/home/and/.vim/plugin/surround.vim
/home/and/.vim/plugin/syntastic.vim
/home/and/.vim/syntax_checkers/c.vim
/home/and/.vim/syntax_checkers/coffee.vim
/home/and/.vim/syntax_checkers/cpp.vim
/home/and/.vim/syntax_checkers/cucumber.vim
/home/and/.vim/syntax_checkers/docbk.vim
/home/and/.vim/syntax_checkers/eruby.vim
/home/and/.vim/syntax_checkers/haml.vim
/home/and/.vim/syntax_checkers/haskell.vim
/home/and/.vim/syntax_checkers/html.vim
/home/and/.vim/syntax_checkers/javascript.vim
/home/and/.vim/syntax_checkers/less.vim
/home/and/.vim/syntax_checkers/lua.vim
/home/and/.vim/syntax_checkers/perl.vim
/home/and/.vim/syntax_checkers/php.vim
/home/and/.vim/syntax_checkers/python.vim
/home/and/.vim/syntax_checkers/ruby.vim
/home/and/.vim/syntax_checkers/sass.vim
/home/and/.vim/syntax_checkers/sh.vim
/home/and/.vim/syntax_checkers/tcl.vim
/home/and/.vim/syntax_checkers/tex.vim
/home/and/.vim/syntax_checkers/xhtml.vim
/home/and/.vim/plugin/taglist.vim
/home/and/.vim/plugin/unimpaired.vim
/home/and/.vim/plugin/vim-rspec.vim
/home/and/.vim/plugin/vmp.vim
/usr/share/vim/vim73/plugin/getscriptPlugin.vim
/usr/share/vim/vim73/plugin/gzip.vim
/usr/share/vim/vim73/plugin/matchparen.vim
/usr/share/vim/vim73/plugin/netrwPlugin.vim
/usr/share/vim/vim73/plugin/rrhelper.vim
/usr/share/vim/vim73/plugin/spellfile.vim
/usr/share/vim/vim73/plugin/tarPlugin.vim
/usr/share/vim/vim73/plugin/tohtml.vim
/usr/share/vim/vim73/plugin/vimballPlugin.vim
/usr/share/vim/vim73/plugin/zipPlugin.vim
/home/and/.vim/after/plugin/css.vim
/home/and/.vim/after/plugin/snipMate.vim
/usr/share/vim/gvimrc
/home/and/.gvimrc
/home/and/.vim/colors/ir_black.vim
/home/and/.gvimrc.local
/home/and/.vim/nerdtree_plugin/exec_menuitem.vim
/home/and/.vim/nerdtree_plugin/fs_menu.vim

Support .less

What would it take to support less files?

I attempted creating an after/less.vim file with the following contents.

call css_color#init('css', 'lessVariableValue')

This seems to work, in that colors are shown, but I keep seeing errors from this line

https://github.com/torgeir/vim-css-color/blob/master/autoload/css_color.vim#L215

E803: ID not found: 8

on every cursor move. My test file was this

@farge-sochi-lys: rgba(184, 4, 128, 1);
@farge-sochi: rgba(150, 9, 120, 1);
@farge-sochi-mork: rgba(95, 9, 84, 1);
@farge-tekst: white;

24-bit terminal color support

This requires has('termtruecolor') and can then be toggled at runtime with set guicolors.

Which is a bother, since some of css-color’s optimisations are based on the assumption that it’s necessarily going to be running in either a GUI or a terminal – but never in an environment than can act like either.

Thanks to @yachi (yachi/vim-css-color@6cb794c).

Error when switching to split buffer where colors are shown

Steps to Reproduce

1. Open .js file
2. Split window and move to new buffer
3. Open .scss file with color variables in it, notice the vim-css-colors shows appropriate colors, all is well
4. Split the .scss buffer and open new file.
5. Press j, or save, or move to another buffer and get error below.

Error detected while processing function <SNR>139_parse_css_screen..<SNR>139_update_matches:
line    1:
E803: ID not found: 14
Press ENTER or type command to continue

Offer fg+bg colour proof in a CSS rule

What do you think about showing the CSS color not as the background color but as the text color if it's a color: rule?

Unwanted coloring in lua files

Test case: https://gist.github.com/Alloyed/35a663bc882d69bb19ad
Screenshot:

Tested on neovim 0.1.2, using gvim/commenting out all other plugins produce same results.

Coffeescript highlighting is broken by a recent commit in this module

I'm highlighting coffeescript with https://github.com/kchmck/vim-coffee-script

I noticed today after updating all my vim modules that files were no longer highlighting the same way. In particular, with only vim-coffee-script enabled the following

Classname
CONSTANT

renders in two different colours. On my screen (CLI, 256 colours, default colourscheme, bg=dark), Classname is green and CONSTANT is pink.

With vim-css-color also enabled, both highlight in pink.

I bisected vim-css-color, and the offending commit is this one: 469bf3f

I'm not sure if this is a big in vim-css-color or vim-coffee-script. Any thoughts?

Please, JSX support

It doesn't work on JSX files.

wrong colors

color approximation for 256 color terminal is not working correctly for some colors like #46a546 and #0064cd.

All folds closed on buffer re-entry

This makes no sense, but I'm stuck.

When I switch back to a buffer (:bnext), all of my folds are folded completely. In other words, the buffer is not how I left it. If I take out vim-css-color, the problem goes away.

If I have an empty .vimrc/.vim and just install vim-css-color, there's no problem.

So, it's obviously an interaction between vim-css-color and one of my other plugins (syntastic, pathogen, ???)

Any pointers on what to look for?

Error when opening file with ft=htmldjango in modeline

$ cat foo.html
<!-- vim: set ft=htmldjango: -->

This is the error that happens when opening the file:

"foo.html" 1L, 33C
Error detected while processing /usr/local/Cellar/vim/7.4.273/share/vim/vim74/syntax/html.vim:
line  209:
E492: Not an editor command:   HtmlHiLink htmlStyleArg htmlString
line  212:
E121: Undefined variable: main_syntax
E15: Invalid expression: main_syntax == "html"
line  227:
E492: Not an editor command:   HtmlHiLink htmlTag                     Function
line  289:
E184: No such user-defined command: HtmlHiLink
line  293:
E121: Undefined variable: main_syntax
E15: Invalid expression: main_syntax == 'html'
line  297:
E121: Undefined variable: s:cpo_save
E15: Invalid expression: s:cpo_save
line  298:
E108: No such variable: "s:cpo_save"
Press ENTER or type command to continue

I used a minimal .vimrc:

call plug#begin('~/.vim/bundle')
Plug 'ap/vim-css-color'
call plug#end()

add support for scss files

vim-css-color doesnt initialize in scss files when scss-syntax is installed.

Some colors aren't displayed correctly when spelled out.

There are some colors that aren't displayed correctly when you type them out. For example. Type in purple and it's highlighted in gray, but if you input it's hex equivalent then you get the right color.

Not working with sass variables

Hey I just found your plugin while searching for a sass supported color view.
You mention that your plugin is supporting sass and scss but unfortunately it does not work with sass variables as you can see here:

Errors while using HSL

While typing "hsl(23, 128, 120)", I get error when I start typing the '120':

Error detected while processing function 55_PreviewCSSColorInLine..55_MatchColorValue:
line 10:
E254: Cannot allocate color #ffc61723e1a3e3adde7

and it doesn't highlight the color. Using HEAD from the repo.

-

Oops, posted to wrong place. Disregard!

opacity support?

is there a workaround for opacity support?

Error detected while processing CursorMoved Auto commands

Error detected while processing CursorMoved Auto commands for "*":
E488: Trailing characters: silent call s:PreviewCSSColorInLine()

Colorcolumn goes on top of the colored css

Makes reading it impossible --
Screenshot: http://screencast.com/t/qqtngvASak

css-color stopped working after updating Vim to 7.4

it says all in the title,

I found the same issue on different machines after updating vim to latest version 7.4

html inline style colors

HI,
not sure whether this is a bug or enhancement,
I get colors in .css files as well as embedded style in .html files but just lacking inline coloring in html files.
thanks

Color highlighting does not work with .sass or .scss files upon opening them

Hash tag ( e.g. #00ffaa ) or named color ( e.g. yellow ) values will always be highlighted in my .sass from opening to editing to saving to closing. However, if I have an rgba or rgb value like:

rgba( 255, 0, 150, 0.5 )
rgb( 150, 65, 250 )

the rgba or rgb values will not get highlighted. However I will report that the rgba and rgb values will become highlighted if I edit one of the numerical values. It will remain highlighted until closing.

Here is a screen shot of a .sass file in gVim (Ubuntu 12.10) upon opening it:

How can this be fixed?

Highlight failed on `rgb( 0, 0, 0)`

css-color failed to highlight colors which have extra spaces after rgb(.

.test {
  color: rgb( 0, 0, 0);
  color: rgb(0, 0, 0);
  color: rgb(0, 0, 0 );
}

Stylus coloring not working

I have no idea why.

Here's my .vimrc, check the " Web {{{ section, if you think the fault is mine. Please note there's another web section in the same file, so you might want to look there also.

Feature Request - support for .vim colours

Thanks for your work on vim-css-color.

As VIM own configuration also uses colours in the #rrggbb format, it would be great if you could extend the support to VIM configuration files.

python support

Could you add this also for python? Or maybe tell me what would be needed to support python?

Great Plugin!

s:parse_css_screen() registered multiple times when switching buffers.

Open one .stylus and one .html buffer, and start switching from one to the other several times. Then try :autocmd CursorMoved and you'll see this:

CursorMoved
    <buffer=2>
              call s:parse_css_screen()
              call s:parse_css_screen()
              call s:parse_css_screen()
              call s:parse_css_screen()
              call s:parse_css_screen()
              call s:parse_css_screen()
              call s:parse_css_screen()
              call s:parse_css_screen()

This causes slowdowns when moving the cursor.

Doesn't seem to work with sass maps

Example:

// Color map
$colors: (
  copy: #7d7d7d,
  headings: #454545,
  dark: #020202,
  light: #f7f7f7
);

The map typically lives in a settings or config scss file. Then I have a "color" function, which just gets a map value, so I can use it throughout my other scss files like so:

body {
  color: color(copy);
  background: color(dark);
}

Would be pretty neat to get this plugin so it applies to both situations. I realize the latter might be pretty difficult, but getting this to work on the map itself would be awesome.

rgb() doesn't colorize when percent sign is not close to the number.

I try the example picture from README and found out this line is not colorize:

it-s-good:   rgb(29, 60 %, 76), rgb(50, 50 %, 126);

However, removing whitespace between number and its percent sign makes this work correctly:

it-s-good:   rgb(29, 60%, 76), rgb(50, 50%, 126);

So either add \s* into \(\d\{1,3}%\?\) for lines 86 and 87, or you may need to update the example picture.

Highlights for cursorline/cursorcolumn persist when switching to another CSSish buffer

Steps to reproduce

1. set cursorline
2. open two files of a type supported by vim-css-color
3. place cursor in a line with a colour definition in file 1
4. switch buffer to file 2

Result

The highlight for the colour in file 1 is applied in the same location on the same line in file 2, even when it shouldn’t be.

Thanks

Ulrich Steinmann reported this by email.

Doesn't seem to render correct colours when $NVIM_TUI_ENABLE_TRUE_COLOR is set

Doesn't highlight at all in Linux gnome-terminal

I originally used Max Vasiliev’s vim-css-color which worked fine , but was too slow in my gnome-terminal. I wanted to try this version to see how much faster it was, but I get no colors in my terminal (running just "vim"). However, it works fine using the gui version "gvim".

How to toggle the colour highlighting on / off?

When I am editing a stylesheet, and I want to search for something, I find I can't see the highlighted search matches amongst all the highlighted colours.

I would love to be able to toggle the colour highlights on and off, in such a way that I can map / to turn off colour highlights | now search as usual, and update the mapping I use for :noh to :noh | turn on colour highlights.

In the meantime, thank you for a useful (and speedy) plugin.

Severe slowness in .html files after switching buffers

The css-color plugin significantly slows down opening buffers with .html files.

Repro:
Open a 200K .html file in one buffer 1, and open a plain-text file in buffer 2. Now, do the following: ":b1, :b2, :b1, :b2, :b1, :b2, ...". The more you switch between the buffers, the slower opening the html file in :b1 becomes. Switching just 10 times, adds a 15sec latency on my MacBook Pro 2.53Ghz 8GB. Disabling the css-color plugin resolves the issue.

This with a fresh VIM (Vi IMproved 7.3 (2010 Aug 15, compiled Jun 24 2011 20:00:09)) with no other plugins running.

autocmd should be attached to local buffer, not globally

Current implementation causes problems working with multiple buffers. To reproduce open any CSS file in gvim (could be empty) and after that open or create new buffer with different filetype, for example b.txt and type anything like CSS color, like #123.

You get this:

Error detected while processing function <SNR>21_PreviewCSSColorInLine..<SNR>21_MatchColorValue:
line    3:
E121: Undefined variable: b:color_pattern

This happens becaus autocmd in css.vim attaches function calls to all buffers. Fix this by changing lines to

autocmd CursorMoved  <buffer> silent call s:PreviewCSSColorInLine()
autocmd CursorMovedI <buffer> silent call s:PreviewCSSColorInLine()

Coloring stops after many lines (sometimes)

This seems weird. I wanted a handy was of visualizing all of the colors in the zenburn colorscheme. So, I isolated all the hex color codes and pasted them into a fake css file:

It works fine when they're aren't too many lines, but after many lines the coloring coding stops. This is actually really hard to reproduce, because sometimes the coloring works and sometimes it doesn't.

Working:
(173 total lines)

Not working:
(173 total lines)

Maybe the yellow-colored lines offer some kind of clue?

I can't figure out a way to consistently reproduce it. :( But it 'ardly hever 'appens, so don't worry about it much.

Broken as of 7e11e6d

I've been getting the following error any time I open a a CSS/SCSS file: https://img.skitch.com/20120419-k64w3sfqyuif6y5ia4k9cxkpak.png. It appears to have started as of 7e11e6d.

I wasn't able to spot the issue, but please let me know if I can offer any more info.

Do not work on comments

I'd like to have it working on comments.

json support broke after recent update

Now whenever i open .json file i get

Error detected while processing /Users/_me_/.vim/plugged/vim-css-color/after/syntax/json.vim:
line    6:
E119: Not enough arguments for function: css_color#init
E119: Not enough arguments for function: css_color#init

It used to work fine before that.

avoid global variable `i', `view'

avoid global variable i, view in css.vim

Disable on long lines

On extremely long lines, e.g. real world case background-image: url('SUPER LONG DATA-URI');, the parse_css_screen function chokes because it runs out of memory

Can you turn off exclusively on or after parts of a line that is too long (e.g. exceeds the synmaxcol built-in to vim's syntax highlighting)?

Color variables not propagating for less syntax

It appears that colors for variables in .less files are not propagated. I am unsure whether vim-css-color does not support this, or whether I am just "doing it wrong".

Please advise.

What I actually see: (MacVim w/ vim-css-color)

What I expect to see: (Sublime w/ ColorHighlighter)

How to enable vim-css-color for less and sass?

Hi,

how can i enable vim-css-color for less and sass?

Regards, Dan

parse_css_screen error

I haven't honed in on specific steps to reproduce this bug yet, but I've been getting this error sporadically over the past couple of weeks:

I usually work in .scss files so I'm not sure if that has something to do with it. To fix I have to close the buffer and re-open.

Potential bug in less files

I don't know if this was intentional or not, but when I have a color on something other than a variable I do not see any color highlighting. I added a test for to highlight what I'm seeing here. Was this intentional if not what would I need to do to get that working?