search

ap / vim-css-color

Preview colours in source code while editing
http://www.vim.org/scripts/script.php?script_id=5056
MIT License
1.79k stars 80 forks source link

Making it compatible with vim-styled-components #101

Closed sassanh closed 6 years ago

ap commented 6 years ago

Hi, thank you for the patch.

I’m confused why this is necessary though. Since vim-styled-components uses syntax include to load syntax/css.vim, it will automatically also load css-color’s own after/syntax/css.vim, and that should cause any highlighted inline CSS to automatically also get highlighted colours, without this patch needed.

Is that not enough? Does it not happen? What happens or doesn’t happen that makes this patch necessary?

For starters: what does echo b:css_color_grp say in such a buffer?

sassanh commented 6 years ago

Without this patch this is the value of b:css_color_grp:

['xmlComment', 'xmlCommentPart', 'xmlString', 'javaScriptComment', 'javaScriptLineComment', 'javaScriptStringS', 'javaScriptStringD', 'jsComment', 'jsString', 'jsTemplateString', 'jsObjectKeyString', 'jsObjectStringKey', 'jsClassStringKey', 'cssMediaBlock', 'cssFunction', 'cssDefinition', 'cssAttrRegion', 'cssComment', 'javaScriptComment', 'javaScriptLineComment', 'javaScriptStringS', 'javaScriptStringD', 'jsComment', 'jsString', 'jsTemplateString', 'jsObjectKeyString', 'jsObjectStringKey', 'jsClassStringKey', 'cssMediaBlock', 'cssFunction', 'cssDefinition', 'cssAttrRegion', 'cssComment', 'xmlComment', 'xmlCommentPart', 'xmlString', 'javaScriptComment', 'javaScriptLineComment', 'javaScriptStringS', 'javaScriptStringD', 'jsComment', 'jsString', 'jsTemplateString', 'jsObjectKeyString', 'jsObjectStringKey', 'jsClassStringKey', 'cssMediaBlock', 'cssFunction', 'cssDefinition', 'cssAttrRegion', 'cssComment', 'javaScriptComment', 'javaScriptLineComment', 'javaScriptStringS', 'javaScriptStringD', 'jsComment', 'jsString', 'jsTemplateString', 'jsObjectKeyString', 'jsObjectStringKey', 'jsClassStringKey', 'cssMediaBlock', 'cssFunction', 'cssDefinition', 'cssAttrRegion', 'cssComment']

With this patch, it also has cssColor.

ap commented 6 years ago

OK… so the acconglomeration of highlight groups is doing its job. And what’s going on is that styled-components includes the CSS syntax into the Javascript one, but does it by defining multiple cssCustomFoobar highlight groups mirroring a corresponding cssFoobar highlight group from the CSS syntax – including the ones css-color needs, cssMediaBlock and cssAttrRegion.

So adding cssColor is not enough. It works around the most common case but leaves out rgb() and hsl() support. I have to add cssCustomMediaBlock and cssCustomAttrRegion instead.

And I have to check to make sure that the cssFunction in css-color’s list of highlight groups in after/syntax/css.vim is actually useful. After this exercise I believe it to be useless. But I am also considering adding a hack to make it useful (and submitting that as a patch upstream), and then replacing cssMediaBlock and cssAttrRegion in that list with just cssColor. That would also confer proper colouring to styled-component as a side effect.

sassanh commented 6 years ago

OK, thanks for info, looking forward for new updates then.

silicakes commented 3 years ago

Hi, Any news on this?