Replace css-color with vim-coloresque, closes #11v1.5.0

7 files changed, 326 insertions, 191 deletions

diff --git a/after/syntax/css.vim b/after/syntax/css/vim-coloresque.vim
index b2931f73..c80a9a52 100644
--- a/after/syntax/css.vim
+++ b/after/syntax/css/vim-coloresque.vim
@@ -1,13 +1,18 @@
-" Language:     Colorful CSS Color Preview
-" Author:       Aristotle Pagaltzis <pagaltzis@gmx.de>
-" Last Change:  2013-03-09
-" Licence:      No Warranties. WTFPL. But please tell me!
-" Version:      0.7.3
+" Name:         Coloresque
+" Language:     color preview in vim
+" Author:       Gorodinskii Konstantin <gor.konstantin@gmail.com>
+" Licence:      Vim license
+" Version:      0.9.5
+" based on
+" https://github.com/ap/vim-css-color
+" https://github.com/lilydjwg/colorizer
 " vim:et:ts=2 sw=2 sts=2
-"
-" KNOWN PROBLEMS: compatibility with `cursorline` -- https://github.com/ap/vim-css-color/issues/24
 
 let s:hex={}
+let b:matchescache = {}
+let b:color_pattern = {}
+
+let w:colorDictRegExp=''
 for i in range(0, 255)
   let s:hex[ printf( '%02x', i ) ] = i
 endfor
@@ -24,25 +29,52 @@ function! s:FGForBG(color)
   return r*30 + g*59 + b*11 > 12000 ? s:black : s:white
 endfunction
 
-let b:color_pattern = {}
 let s:color_prefix  = 'gui'
 let s:fg_color_calc = 'let color = "#" . toupper(a:color)'
 
-function! s:MatchColorValue(color, pattern)
+function! s:RestoreColors()
+    for part in keys(b:color_pattern)
+
+      "if b:color_pattern[part]=="ffffff"
+        "echoe part
+      "endif
+      
+      call s:MatchColorValue(b:color_pattern[part], part)
+      "echoe color
+      "echoe b:color_pattern[color]
+      "let group = 'cssColor' . tolower(strpart(b:color_pattern[part]["color"], 1))
+      ""exe 'syn match' group '/'.escape(pattern, '/').'/ contained'
+      "exe 'syn cluster cssColors add='.group
+      "exe 'hi' group s:color_prefix.'bg='.b:color_pattern[part]["bg"] s:color_prefix.'fg='.b:color_pattern[part]["fg"]
+      
+      "if !exists('b:matchescache')
+        "let b:matchescache={}
+      "endif
+
+      "let b:matchescache[part] = matchadd(group, part, -1)
+    endfor
+endfunction
+
+function! s:MatchColorValue(color, part)
   if ! len(a:color) | return | endif
 
-  if has_key( b:color_pattern, a:pattern ) | return | endif
-  let b:color_pattern[a:pattern] = 1
+    let group = 'cssColor' . tolower(a:color)
+
+  if !exists('b:color_pattern[a:part]')
+    exe s:fg_color_calc
+    exe 'syn cluster cssColors add='.group
+    exe 'hi' group s:color_prefix.'bg='.color s:color_prefix.'fg='.s:FGForBG(a:color)
+    let b:color_pattern[a:part] = a:color
+  endif
+
+  if !exists('b:matchescache')
+    let b:matchescache = {}
+  elseif !exists('b:matchescache[a:part]')
+    let b:matchescache[a:part] = matchadd(group, a:part, -1)
+  endif
 
-  let pattern = a:pattern
-  " iff pattern ends on word character, require word break to match
-  if pattern =~ '\>$' | let pattern .= '\>' | endif
+  "call add(w:matchescache, matchadd(group, a:part, -1))
 
-  let group = 'cssColor' . tolower(a:color)
-  exe 'syn match' group '/'.escape(pattern, '/').'/ contained'
-  exe 'syn cluster cssColors add='.group
-  exe s:fg_color_calc
-  exe 'hi' group s:color_prefix.'bg='.color s:color_prefix.'fg='.s:FGForBG(a:color)
   return ''
 endfunction
 
@@ -73,18 +105,265 @@ function! s:HexForHSLValue(h,s,l)
   return printf( '%02x%02x%02x', rgb[0], rgb[1], rgb[2] )
 endfunction
 
-function! s:PreviewCSSColorInLine()
-  " TODO use cssColor matchdata
-  "
-  " N.B. these substitute() calls are here just for the side effect
-  "      of invoking s:MatchColorValue during substitution -- because
-  "      match() and friends do not allow finding all matches in a single
-  "      scan without examining the start of the string over and over
-  call substitute( substitute( substitute( substitute( getline('.'),
-    \ '#\(\x\)\(\x\)\(\x\)\>', '\=s:MatchColorValue(submatch(1).submatch(1).submatch(2).submatch(2).submatch(3).submatch(3), submatch(0))', 'g' ),
-    \ '#\(\x\{6}\)\>', '\=s:MatchColorValue(submatch(1), submatch(0))', 'g' ),
-    \ 'rgba\?(\s*\(\d\{1,3}%\?\)\s*,\s*\(\d\{1,3}%\?\)\s*,\s*\(\d\{1,3}%\?\)\s*\%(,[^)]*\)\?)', '\=s:MatchColorValue(s:HexForRGBValue(submatch(1),submatch(2),submatch(3)),submatch(0))', 'g' ),
-    \ 'hsla\?(\s*\(\d\{1,3}%\?\)\s*,\s*\(\d\{1,3}%\?\)\s*,\s*\(\d\{1,3}%\?\)\s*\%(,[^)]*\)\?)', '\=s:MatchColorValue(s:HexForHSLValue(submatch(1),submatch(2),submatch(3)),submatch(0))', 'g' )
+function! s:ClearMatches()
+  call clearmatches()
+  
+  if !exists('b:matchescache')
+    return
+  endif
+  "for i in values(b:matchescache)
+    "call matchdelete(i)
+  "endfor
+  unlet b:matchescache
+endfunction
+
+function! s:VimCssInit(update)
+
+    if a:update==1
+        call s:ClearMatches()
+    endif
+    :set isk+=-
+    :set isk+=#
+    :set isk+=.
+
+    if len(keys(b:color_pattern))>0
+        call s:RestoreColors()
+        return
+    endif
+
+    "let b:matchescache = {}
+
+    call s:AdditionalColors()
+
+    "for i in range(1, line("$"))
+        call s:PreviewCSSColor(join(getline(1,'$'), "\n"))
+    "endfor
+
+endfunction
+
+function! s:AdditionalColors()
+    "if exists('&b:colorDictRegExp')&&b:colorDictRegExp!=''
+        "return
+    "endif
+
+  " w3c Colors
+  " plus extra colors
+    let w:colorDict = {
+      \'black': '#000000',
+      \'red': '#ff0000',
+      \'silver': '#c0c0c0',
+      \'gray': '#808080',
+      \'white': '#ffffff',
+      \'maroon': '#800000',
+      \'purple': '#800080',
+      \'fuchsia': '#ff00ff',
+      \'green': '#008000',
+      \'lime': '#00ff00',
+      \'olive': '#808000',
+      \'yellow': '#ffff00',
+      \'navy': '#000080',
+      \'blue': '#0000ff',
+      \'teal': '#008080',
+      \'aqua': '#00ffff',
+      \'aliceblue': '#f0f8ff',
+      \'antiquewhite': '#faebd7',
+      \'aquamarine': '#7fffd4',
+      \'azure': '#f0ffff',
+      \'beige': '#f5f5dc',
+      \'bisque': '#ffe4c4',
+      \'blanchedalmond': '#ffebcd',
+      \'blueviolet': '#8a2be2',
+      \'brown': '#a52a2a',
+      \'burlywood': '#deb887',
+      \'cadetblue': '#5f9ea0',
+      \'chartreuse': '#7fff00',
+      \'chocolate': '#d2691e',
+      \'coral': '#ff7f50',
+      \'cornflowerblue': '#6495ed',
+      \'cornsilk': '#fff8dc',
+      \'crimson': '#dc143c',
+      \'cyan': '#00ffff',
+      \'darkblue': '#00008b',
+      \'darkcyan': '#008b8b',
+      \'darkgoldenrod': '#b8860b',
+      \'darkgray': '#a9a9a9',
+      \'darkgreen': '#006400',
+      \'darkgrey': '#a9a9a9',
+      \'darkkhaki': '#bdb76b',
+      \'darkmagenta': '#8b008b',
+      \'darkolivegreen': '#556b2f',
+      \'darkorchid': '#9932cc',
+      \'darkred': '#8b0000',
+      \'darksalmon': '#e9967a',
+      \'darkseagreen': '#8fbc8f',
+      \'darkslateblue': '#483d8b',
+      \'darkslategray': '#2f4f4f',
+      \'darkslategrey': '#2f4f4f',
+      \'darkturquoise': '#00ced1',
+      \'darkviolet': '#9400d3',
+      \'darkorange': '#ff8c00',
+      \'deeppink': '#ff1493',
+      \'deepskyblue': '#00bfff',
+      \'dimgray': '#696969',
+      \'dimgrey': '#696969',
+      \'dodgerblue': '#1e90ff',
+      \'firebrick': '#b22222',
+      \'floralwhite': '#fffaf0',
+      \'forestgreen': '#228b22',
+      \'gainsboro': '#dcdcdc',
+      \'ghostwhite': '#f8f8ff',
+      \'gold': '#ffd700',
+      \'goldenrod': '#daa520',
+      \'greenyellow': '#adff2f',
+      \'grey': '#808080',
+      \'honeydew': '#f0fff0',
+      \'hotpink': '#ff69b4',
+      \'indianred': '#cd5c5c',
+      \'indigo': '#4b0082',
+      \'ivory': '#fffff0',
+      \'khaki': '#f0e68c',
+      \'lavender': '#e6e6fa',
+      \'lavenderblush': '#fff0f5',
+      \'lawngreen': '#7cfc00',
+      \'lemonchiffon': '#fffacd',
+      \'lightblue': '#add8e6',
+      \'lightcoral': '#f08080',
+      \'lightcyan': '#e0ffff',
+      \'lightgoldenrodyellow': '#fafad2',
+      \'lightgray': '#d3d3d3',
+      \'lightgreen': '#90ee90',
+      \'lightgrey': '#d3d3d3',
+      \'lightpink': '#ffb6c1',
+      \'lightsalmon': '#ffa07a',
+      \'lightseagreen': '#20b2aa',
+      \'lightskyblue': '#87cefa',
+      \'lightslategray': '#778899',
+      \'lightslategrey': '#778899',
+      \'lightsteelblue': '#b0c4de',
+      \'lightyellow': '#ffffe0',
+      \'limegreen': '#32cd32',
+      \'linen': '#faf0e6',
+      \'magenta': '#ff00ff',
+      \'mediumaquamarine': '#66cdaa',
+      \'mediumblue': '#0000cd',
+      \'mediumorchid': '#ba55d3',
+      \'mediumpurple': '#9370d8',
+      \'mediumseagreen': '#3cb371',
+      \'mediumslateblue': '#7b68ee',
+      \'mediumspringgreen': '#00fa9a',
+      \'mediumturquoise': '#48d1cc',
+      \'mediumvioletred': '#c71585',
+      \'midnightblue': '#191970',
+      \'mintcream': '#f5fffa',
+      \'mistyrose': '#ffe4e1',
+      \'moccasin': '#ffe4b5',
+      \'navajowhite': '#ffdead',
+      \'oldlace': '#fdf5e6',
+      \'olivedrab': '#6b8e23',
+      \'orange': '#ffa500',
+      \'orangered': '#ff4500',
+      \'orchid': '#da70d6',
+      \'palegoldenrod': '#eee8aa',
+      \'palegreen': '#98fb98',
+      \'paleturquoise': '#afeeee',
+      \'palevioletred': '#d87093',
+      \'papayawhip': '#ffefd5',
+      \'peachpuff': '#ffdab9',
+      \'peru': '#cd853f',
+      \'pink': '#ffc0cb',
+      \'plum': '#dda0dd',
+      \'powderblue': '#b0e0e6',
+      \'rosybrown': '#bc8f8f',
+      \'royalblue': '#4169e1',
+      \'saddlebrown': '#8b4513',
+      \'salmon': '#fa8072',
+      \'sandybrown': '#f4a460',
+      \'seagreen': '#2e8b57',
+      \'seashell': '#fff5ee',
+      \'sienna': '#a0522d',
+      \'skyblue': '#87ceeb',
+      \'slateblue': '#6a5acd',
+      \'slategray': '#708090',
+      \'slategrey': '#708090',
+      \'snow': '#fffafa',
+      \'springgreen': '#00ff7f',
+      \'steelblue': '#4682b4',
+      \'tan': '#d2b48c',
+      \'thistle': '#d8bfd8',
+      \'tomato': '#ff6347',
+      \'turquoise': '#40e0d0',
+      \'violet': '#ee82ee',
+      \'wheat': '#f5deb3',
+      \'whitesmoke': '#f5f5f5',
+      \'yellowgreen': '#9acd32'
+    \}
+
+  "let w:colorDictRegExp = '\(' 
+  for _color in keys(w:colorDict)
+    "let w:colorDictRegExp.='\<'._color.'\>\|' 
+    call s:MatchColorValue(strpart(w:colorDict[tolower(_color)], 1), '\<\c'._color.'\>')
+  endfor
+  "let w:colorDictRegExp=strpart(w:colorDictRegExp, 0, len(w:colorDictRegExp)-2).'\)\c'
+endfunction
+
+function! s:ProcessByLine(w)
+  call s:PreviewCSSColor(getline(a:w))
+endfunction
+
+function! s:PreviewCSSColor(str)
+  "if !exists('&w:colorDictRegExp')
+  "endif
+
+  let line=a:str "getline(a:w)
+  let colorexps = {
+    \ 'hex'  : '#[0-9A-Fa-f]\{3\}\>\|#[0-9A-Fa-f]\{6\}\>',
+    \ 'rgba' : 'rgba\?(\s*\(\d\{1,3}%\?\)\s*,\s*\(\d\{1,3}%\?\)\s*,\s*\(\d\{1,3}%\?\)\s*\%(,[^)]*\)\?)',
+    \ 'hsla' : 'hsla\?(\s*\(\d\{1,3}%\?\)\s*,\s*\(\d\{1,3}%\?\)\s*,\s*\(\d\{1,3}%\?\)\s*\%(,[^)]*\)\?)'
+    \ }
+    "\ 'color': w:colorDictRegExp
+
+  "let foundcolor=''
+
+  for exp in keys(colorexps)
+      let place=0
+
+      if exists("foundcolor")
+          unlet foundcolor
+      endif
+
+      while 1
+          if exp=='rgba'||exp=='hsla'
+              let foundcolor = matchlist(a:str, colorexps[exp], place)
+          else
+              let foundcolor = matchstr(a:str, colorexps[exp], place)
+          endif
+
+          let place = matchend(a:str, colorexps[exp], place)
+
+          if empty(foundcolor)
+              break
+          endif
+
+          if exp=='hex'
+              let part = foundcolor.'\>'
+          else
+              let part = foundcolor[0]
+          endif
+
+          if exp=='hex'
+              if len(foundcolor) == 4
+                  let foundcolor = substitute(foundcolor, '[[:xdigit:]]', '&&', 'g')
+              endif
+              call s:MatchColorValue(strpart(foundcolor, 1), part)
+          elseif exp=='rgba'
+              "TODO get rid of duplicated variables
+              call s:MatchColorValue(s:HexForRGBValue(foundcolor[1], foundcolor[2], foundcolor[3]), part)
+          elseif exp=='hsla'
+              call s:MatchColorValue(s:HexForHSLValue(foundcolor[1], foundcolor[2], foundcolor[3]), part)
+          endif
+      endwhile
+  endfor
+
 endfunction
 
 if has("gui_running") || &t_Co==256
@@ -97,7 +376,6 @@ if has("gui_running") || &t_Co==256
       if out !~ '^cssDefinition ' | continue | endif
       let out = substitute( out, ' \+xxx \+', ' ', '' )
       let out = substitute( out, ' contains=\zs', '@cssColors,', '' )
-      syn clear cssDefinition
       exe 'syn region' out
     endfor
   endif
@@ -341,161 +619,14 @@ if has("gui_running") || &t_Co==256
   hi cssColorfffff0 guibg=#FFFFF0 guifg=#000000 ctermbg=15  ctermfg=16  | syn cluster cssColors add=cssColorfffff0
   hi cssColorffffff guibg=#FFFFFF guifg=#000000 ctermbg=231 ctermfg=16  | syn cluster cssColors add=cssColorffffff
 
-  " w3c Colors
-  syn keyword cssColor000000 black   contained
-  syn keyword cssColorc0c0c0 silver  contained
-  syn keyword cssColor808080 gray    contained
-  syn match cssColorffffff "\<white\(-\)\@!\>" contained
-  syn keyword cssColor800000 maroon  contained
-  syn keyword cssColorff0000 red     contained
-  syn keyword cssColor800080 purple  contained
-  syn keyword cssColorff00ff fuchsia contained
-  syn keyword cssColor008000 green   contained
-  syn keyword cssColor00ff00 lime    contained
-  syn keyword cssColor808000 olive   contained
-  syn keyword cssColorffff00 yellow  contained
-  syn keyword cssColor000080 navy    contained
-  syn keyword cssColor0000ff blue    contained
-  syn keyword cssColor008080 teal    contained
-  syn keyword cssColor00ffff aqua    contained
-
-  " extra colors
-  syn keyword cssColorf0f8ff AliceBlue            contained
-  syn keyword cssColorfaebd7 AntiqueWhite         contained
-  syn keyword cssColor7fffd4 Aquamarine           contained
-  syn keyword cssColorf0ffff Azure                contained
-  syn keyword cssColorf5f5dc Beige                contained
-  syn keyword cssColorffe4c4 Bisque               contained
-  syn keyword cssColorffebcd BlanchedAlmond       contained
-  syn keyword cssColor8a2be2 BlueViolet           contained
-  syn keyword cssColora52a2a Brown                contained
-  syn keyword cssColordeb887 BurlyWood            contained
-  syn keyword cssColor5f9ea0 CadetBlue            contained
-  syn keyword cssColor7fff00 Chartreuse           contained
-  syn keyword cssColord2691e Chocolate            contained
-  syn keyword cssColorff7f50 Coral                contained
-  syn keyword cssColor6495ed CornflowerBlue       contained
-  syn keyword cssColorfff8dc Cornsilk             contained
-  syn keyword cssColordc143c Crimson              contained
-  syn keyword cssColor00ffff Cyan                 contained
-  syn keyword cssColor00008b DarkBlue             contained
-  syn keyword cssColor008b8b DarkCyan             contained
-  syn keyword cssColorb8860b DarkGoldenRod        contained
-  syn keyword cssColora9a9a9 DarkGray             contained
-  syn keyword cssColor006400 DarkGreen            contained
-  syn keyword cssColora9a9a9 DarkGrey             contained
-  syn keyword cssColorbdb76b DarkKhaki            contained
-  syn keyword cssColor8b008b DarkMagenta          contained
-  syn keyword cssColor556b2f DarkOliveGreen       contained
-  syn keyword cssColor9932cc DarkOrchid           contained
-  syn keyword cssColor8b0000 DarkRed              contained
-  syn keyword cssColore9967a DarkSalmon           contained
-  syn keyword cssColor8fbc8f DarkSeaGreen         contained
-  syn keyword cssColor483d8b DarkSlateBlue        contained
-  syn keyword cssColor2f4f4f DarkSlateGray        contained
-  syn keyword cssColor2f4f4f DarkSlateGrey        contained
-  syn keyword cssColor00ced1 DarkTurquoise        contained
-  syn keyword cssColor9400d3 DarkViolet           contained
-  syn keyword cssColorff8c00 Darkorange           contained
-  syn keyword cssColorff1493 DeepPink             contained
-  syn keyword cssColor00bfff DeepSkyBlue          contained
-  syn keyword cssColor696969 DimGray              contained
-  syn keyword cssColor696969 DimGrey              contained
-  syn keyword cssColor1e90ff DodgerBlue           contained
-  syn keyword cssColorb22222 FireBrick            contained
-  syn keyword cssColorfffaf0 FloralWhite          contained
-  syn keyword cssColor228b22 ForestGreen          contained
-  syn keyword cssColordcdcdc Gainsboro            contained
-  syn keyword cssColorf8f8ff GhostWhite           contained
-  syn keyword cssColorffd700 Gold                 contained
-  syn keyword cssColordaa520 GoldenRod            contained
-  syn keyword cssColoradff2f GreenYellow          contained
-  syn keyword cssColor808080 Grey                 contained
-  syn keyword cssColorf0fff0 HoneyDew             contained
-  syn keyword cssColorff69b4 HotPink              contained
-  syn keyword cssColorcd5c5c IndianRed            contained
-  syn keyword cssColor4b0082 Indigo               contained
-  syn keyword cssColorfffff0 Ivory                contained
-  syn keyword cssColorf0e68c Khaki                contained
-  syn keyword cssColore6e6fa Lavender             contained
-  syn keyword cssColorfff0f5 LavenderBlush        contained
-  syn keyword cssColor7cfc00 LawnGreen            contained
-  syn keyword cssColorfffacd LemonChiffon         contained
-  syn keyword cssColoradd8e6 LightBlue            contained
-  syn keyword cssColorf08080 LightCoral           contained
-  syn keyword cssColore0ffff LightCyan            contained
-  syn keyword cssColorfafad2 LightGoldenRodYellow contained
-  syn keyword cssColord3d3d3 LightGray            contained
-  syn keyword cssColor90ee90 LightGreen           contained
-  syn keyword cssColord3d3d3 LightGrey            contained
-  syn keyword cssColorffb6c1 LightPink            contained
-  syn keyword cssColorffa07a LightSalmon          contained
-  syn keyword cssColor20b2aa LightSeaGreen        contained
-  syn keyword cssColor87cefa LightSkyBlue         contained
-  syn keyword cssColor778899 LightSlateGray       contained
-  syn keyword cssColor778899 LightSlateGrey       contained
-  syn keyword cssColorb0c4de LightSteelBlue       contained
-  syn keyword cssColorffffe0 LightYellow          contained
-  syn keyword cssColor32cd32 LimeGreen            contained
-  syn keyword cssColorfaf0e6 Linen                contained
-  syn keyword cssColorff00ff Magenta              contained
-  syn keyword cssColor66cdaa MediumAquaMarine     contained
-  syn keyword cssColor0000cd MediumBlue           contained
-  syn keyword cssColorba55d3 MediumOrchid         contained
-  syn keyword cssColor9370d8 MediumPurple         contained
-  syn keyword cssColor3cb371 MediumSeaGreen       contained
-  syn keyword cssColor7b68ee MediumSlateBlue      contained
-  syn keyword cssColor00fa9a MediumSpringGreen    contained
-  syn keyword cssColor48d1cc MediumTurquoise      contained
-  syn keyword cssColorc71585 MediumVioletRed      contained
-  syn keyword cssColor191970 MidnightBlue         contained
-  syn keyword cssColorf5fffa MintCream            contained
-  syn keyword cssColorffe4e1 MistyRose            contained
-  syn keyword cssColorffe4b5 Moccasin             contained
-  syn keyword cssColorffdead NavajoWhite          contained
-  syn keyword cssColorfdf5e6 OldLace              contained
-  syn keyword cssColor6b8e23 OliveDrab            contained
-  syn keyword cssColorffa500 Orange               contained
-  syn keyword cssColorff4500 OrangeRed            contained
-  syn keyword cssColorda70d6 Orchid               contained
-  syn keyword cssColoreee8aa PaleGoldenRod        contained
-  syn keyword cssColor98fb98 PaleGreen            contained
-  syn keyword cssColorafeeee PaleTurquoise        contained
-  syn keyword cssColord87093 PaleVioletRed        contained
-  syn keyword cssColorffefd5 PapayaWhip           contained
-  syn keyword cssColorffdab9 PeachPuff            contained
-  syn keyword cssColorcd853f Peru                 contained
-  syn keyword cssColorffc0cb Pink                 contained
-  syn keyword cssColordda0dd Plum                 contained
-  syn keyword cssColorb0e0e6 PowderBlue           contained
-  syn keyword cssColorbc8f8f RosyBrown            contained
-  syn keyword cssColor4169e1 RoyalBlue            contained
-  syn keyword cssColor8b4513 SaddleBrown          contained
-  syn keyword cssColorfa8072 Salmon               contained
-  syn keyword cssColorf4a460 SandyBrown           contained
-  syn keyword cssColor2e8b57 SeaGreen             contained
-  syn keyword cssColorfff5ee SeaShell             contained
-  syn keyword cssColora0522d Sienna               contained
-  syn keyword cssColor87ceeb SkyBlue              contained
-  syn keyword cssColor6a5acd SlateBlue            contained
-  syn keyword cssColor708090 SlateGray            contained
-  syn keyword cssColor708090 SlateGrey            contained
-  syn keyword cssColorfffafa Snow                 contained
-  syn keyword cssColor00ff7f SpringGreen          contained
-  syn keyword cssColor4682b4 SteelBlue            contained
-  syn keyword cssColord2b48c Tan                  contained
-  syn keyword cssColord8bfd8 Thistle              contained
-  syn keyword cssColorff6347 Tomato               contained
-  syn keyword cssColor40e0d0 Turquoise            contained
-  syn keyword cssColoree82ee Violet               contained
-  syn keyword cssColorf5deb3 Wheat                contained
-  syn keyword cssColorf5f5f5 WhiteSmoke           contained
-  syn keyword cssColor9acd32 YellowGreen          contained
-
-  let view = winsaveview()
-  %call s:PreviewCSSColorInLine()
-  call winrestview(view)
-
-  autocmd CursorMoved  <buffer> silent call s:PreviewCSSColorInLine()
-  autocmd CursorMovedI <buffer> silent call s:PreviewCSSColorInLine()
+  "call s:VimCssInit(1)
+
+  ":augroup css
+    "au!
+    autocmd CursorMovedI <buffer> silent call s:ProcessByLine('.')
+    autocmd ColorScheme <buffer> silent call s:VimCssInit(1)
+    autocmd BufEnter <buffer> silent call s:VimCssInit(1)
+  ":augroup END
+
+  "autocmd CursorMoved  <buffer> silent call s:ProcessByLine('.')
 endif
diff --git a/after/syntax/html.vim b/after/syntax/html.vim
index 9e2eb3a1..c1ccd239 100644
--- a/after/syntax/html.vim
+++ b/after/syntax/html.vim
@@ -9,3 +9,4 @@ syn region coffeeScript start=#<script [^>]*type="text/coffeescript"[^>]*>#
 \                       end=#</script>#me=s-1 keepend
 \                       contains=@htmlCoffeeScript,htmlScriptTag,@htmlPreproc
 \                       containedin=htmlHead
+syn include syntax/css/vim-coloresque.vim
diff --git a/after/syntax/less.vim b/after/syntax/less.vim
new file mode 100644
index 00000000..d6ab73ff
--- /dev/null
+++ b/after/syntax/less.vim
@@ -0,0 +1 @@
+syn include syntax/css/vim-coloresque.vim
diff --git a/after/syntax/sass.vim b/after/syntax/sass.vim
index fe1c7822..d6ab73ff 100644
--- a/after/syntax/sass.vim
+++ b/after/syntax/sass.vim
@@ -1 +1 @@
-syn cluster sassCssAttributes add=@cssColors
+syn include syntax/css/vim-coloresque.vim
diff --git a/after/syntax/scss.vim b/after/syntax/scss.vim
new file mode 100644
index 00000000..d6ab73ff
--- /dev/null
+++ b/after/syntax/scss.vim
@@ -0,0 +1 @@
+syn include syntax/css/vim-coloresque.vim
diff --git a/after/syntax/stylus.vim b/after/syntax/stylus.vim
index 56bde39f..d6ab73ff 100644
--- a/after/syntax/stylus.vim
+++ b/after/syntax/stylus.vim
@@ -1 +1 @@
-syn cluster stylusCssAttributes add=@cssColors
+syn include syntax/css/vim-coloresque.vim
diff --git a/after/syntax/vim.vim b/after/syntax/vim.vim
new file mode 100644
index 00000000..d6ab73ff
--- /dev/null
+++ b/after/syntax/vim.vim
@@ -0,0 +1 @@
+syn include syntax/css/vim-coloresque.vim