How to enable color highlighting for strings in CSS

[sedimentation-fault]

❓Problem

css-color works wonderfully - only problem is that it colors unquoted hex colors only, i.e. it colors #ad2e0b, but not '#ad2e0b'. I have a dynamic CSS - a CSS that contains PHP code and is interpreted by PHP at the server before it is served as a pure CSS to the client. As such, it contains a mix of PHP code and CSS directives. While hex color codes in quoted strings that happen to be in the PHP comments do get highlighted, single-quoted strings that contain such hex codes in the PHP code dot not. How to color such quoted color code strings in CSS?

💡Reason

The reason is that a CSS file with a .css ending is recognized as being of CSS type, even if internally it uses PHP! Therefore my file is recognized as having filetype CSS, not PHP. Thus, while hex color strings do get color highlighted in PHP files, this highlighting does not kick-in for my CSS. One thus must check what happens with single-quoted color hex codes in CSS syntax, not in PHP syntax! That is, we must check /usr/share/vim/vimfiles/after/syntax/css/css-color.vim. And - indeed! - there we have:

call css_color#init('css', 'extended', 'cssMediaBlock,cssFunction,cssDefinition,cssAttrRegion,cssComment')

There is no cssStringSingle or cssStringDouble there, as one might expect from the existence of phpStringSingle,phpStringDouble in the PHP syntax file /usr/share/vim/vimfiles/after/syntax/php/css-color.vim - actually, there is no cssStringSingle or cssStringDouble anywhere in the syntax files!

💡But there is cssStringQ and cssStringQQ in /usr/share/vim/vim82/syntax/css.vim and there is cssString in

/usr/share/vim/vimfiles/syntax/xsl.vim
/usr/share/vim/vim82/syntax/html.vim

➡️Solution

Since

"this plugin relies on the 'after' and 'autoload' mechanisms of Vim"

(from: #125)

, you have to either modify /usr/share/vim/vimfiles/after/syntax/css/css-color.vim directly, or, better, overwrite its functionality by a local copy at /usr/local/share/vim/after/syntax/css/css-color.vim

➡️NOTE: You cannot "chain" files that use the "after" mechanism in vim. You have to completely overwrite them with your version. See: https://stackoverflow.com/questions/50244756/vim-load-syntax-file-from-local-directory .

Therefore, add cssStringQ,cssStringQQ to

call css_color#init('css', 'extended', 'cssMediaBlock,cssFunction,cssDefinition,cssAttrRegion,cssComment')

and put that into a local syntax file, e.g. /usr/local/share/vim/after/syntax/css/css-color.vim like this:

call css_color#init('css', 'extended', 'cssMediaBlock,cssFunction,cssDefinition,cssAttrRegion,cssComment,cssStringQ,cssStringQQ')

Voilà! Strings with hex color codes are now highlighted in CSS files! 😄

☝️CAVEAT: This may make fast scrolling in vim somewhat sluggish for CSS files.

⭐P.S. Feel free to close this - or change it to something else than a "bug". I just had to document this solution somewhere.