https://github.com/postcss/postcss/tree/master/test/cases

There are some strange syntax-highlight in css.vim

atrule-decls.css

seems to be mis-matched ; as end of the property value.

escape.csss

seems to be mis-matched ) as end of note() in quoted-string.

quotes.css

seems to be mis-matched \' as end of single-quoted-string.

Using Vim 7.4, several property names related to column layout are not correctly highlighted.

Test case:

#example1 {

    /* not correctly highlighted: */

    column-width: 1px;
    column-span: inherit;

    break-before: avoid;
    break-after: avoid;
    break-inside: avoid;

    column-break-before: avoid;
    column-break-after: avoid;
    column-break-inside: avoid;

    /* work as expected: */

    column-gap: inherit;
    column-rule-width: inherit;
    column-count: inherit;

    page-break-before: avoid;
    page-break-after: avoid;
    page-break-inside: avoid;

}

Screenshot:

See linked screenshot:

https://www.dropbox.com/s/y3m6aq3jmjyanvi/Modules.css_20130731_015100.png

Ever since this commit:

ba8bbee#diff-fb314318a0bd0551bd1e2dbeb9681dc2R417

percentages aren't highlighted as cssKeyFrameValue

Try the following valid CSS:

:root {
  --small-height: 100px;
}

div {
  height: var(--small-height);
}

Here is the highlighting I see:

The first --small is being recognized as a cssTagName, due to this line:

syn keyword cssTagName option p param pre q s samp script small

The second --small is being recognized as a cssFontAttr, due to this line:

syn match cssFontAttr contained "\<\(x\{1,2\}-\)\=\(large\|small\)\>"

These keyword and match lines are far too general; small is only a cssTagName when it is used in a selector; and it is only a cssFontAttr when it is used as the value of a definition.

The example used here uses custom properties, but words like this could occur in other places as well, especially in SCSS files, which inherit CSS syntax highlighting definitions.

In any case it seems overzealous to assume that all instances of small will refer to font size or tag names.

Visualforce is sort of a meta-HTML language that can be used to create web pages via Force.com, and it contains a number of builtin functions for integrating with the platform. As an example, something like this would constitute valid CSS when included or embedded into a Visualforce page:

.myClass {
    background-image: url('{!URLFOR($Resource.images)}/background.png');
}

As a side note, looks like I might need to ask Github to fix this in their syntax highlighting too. =)

The highlighting stops when it encounters the first closing parenthesis, which then causes the highlighter to be confused by everything that follows.

The ideal fix would be to do proper paren-matching and only stop when the url() function actually closes, but I came up with a much simpler quick-fix: instead of marking the first closing parenthesis as the end of the region, look for a closing parenthesis followed immediately by either a semicolon or a newline. In my local css.vim I changed

syn region cssURL contained matchgroup=cssFunctionName start="\<url\s*(" end=")" oneline keepend

to

syn region cssURL contained matchgroup=cssFunctionName start="\<url\s*(" end=")\(;\|\n\)" oneline keepend

This does seem to cause the ending semicolon to be highlighted incorrectly, but that's much less annoying than having the rest of your CSS highlighted like it's one long string.

I understand that this is an edge case and that relatively few people have actually used Visualforce much less written their own CSS for it, but this seems like a pretty low-risk fix, and it makes my life at least much more bearable.

Using Vim 7.4, the values repeat-x and repeat-y are not recognized by css.vim:

#example2 {

    background-repeat: repeat;
    background-repeat: repeat-x;
    background-repeat: repeat-y;

}

Screenshot:

Closing bracket for the media query seems to be thrown off by the colon for the pseudo-element.
&&
"unset" is not reconised when used in conjuction with the display property (this is not affected by the media query).

In the latest Vim v8 distribution, I see that the bundled css.vim is ostensibly from this repo:

 " Language:     Cascading Style Sheets
 " Previous Contributor List:
 "               Claudio Fleiner <[email protected]> (Maintainer)
 "               Yeti            (Add full CSS2, HTML4 support)
 "               Nikolai Weibull (Add CSS2 support)
 " Maintainer:   Jules Wang      <[email protected]>
 " URL:          https://github.com/JulesWang/css.vim
 " Last Change:  2017 Jan 14
 "               cssClassName updated by Ryuichi Hayashida Jan 2016

However, the version bundled with Vim and the latest version in this repo do not match. In fact, the Last Change called out in the Vim-bundled file is Jan of this year:

" Last Change:  2017 Jan 14

Which does not appear to have come from this repo as the last change here was Mar 2016.

A quick diff shows the latest commit here in this repo is quite a bit diff from latest in the Vim distribution.

I am asking because I found a few issues with the syntax highlighting with the Vim-bundled css.vim and would like to know where to fix it 😉 .

So wondering if this the repo of the official css.vim? If so, is it just a matter of the Vim distribution getting an update from this repo?

Thx for your help to sort this out!

Please add rebeccapurple (CSS 4 color) highlighting.

First of all, thanks for all the great work!

I'd like to add flexbox module syntax highlighting. Currently terms look like this:

Still wrapping my head around vimscript, but I can make a PR for this if the idea is accepted.

This is more of a general post on what I see still needs to be fixed with this repo.

I've been using it a lot recently, and things are working very well, however there are still a couple things and I wanted to get your thoughts on them.

• CSS Animation declaration support: There's an open pull request for this, however it's a bit of a hack to support. On this vein however, I do feel like even the CSS transition support is a bit of a hack, it would be nice to figure out a way to elegantly solve both of those problems.
• Improve support for Pseudo selectors. We already support the simpler onces, it's the more 'functional' ones that we need to still add support for. Here's a nice rundown of them: http://css-tricks.com/pseudo-class-selectors/ It's really in the department of selectors like :not(), :nth-child() and all their related derivatives.
• Fixing broken keyword support when this syntax file is loaded with other html5 syntax plugins. Basically vendor prefixes break everything with property names that include a - since most html5 support plugins do setlocal iskeyword+=-. I think the only real solution would be to remove dependence on keywords, and remove the "//" type of syntax. This seems less than ideal, and not sure it does fully solve the problem, but it is one possibility.
• Font declarations. It's silly to try and keep every single font in here, I don't think we should error correct it. Especially now with services like Typekit, custom fonts are quite common. I think we should refactor the font and font-family declarations to properly support any font name.

Hey,

I tried to fix the regexp myself, but I think it's very hard to understand and I have no clue why you did these regexp in the first place.

syn match cssFlexibleBoxProp contained "\<box-\(align\|direction\|flex\|ordinal-group\|orient\|pack\|shadow\|sizing\)\>"

This regexp is broken as it doesn't match the properties properly: http://i.imgur.com/VT11FsY.png
The flex-flow and flex-pack syntax were the previous ones before justify-content was introduced.

What do I need to do in order to support all previous syntaxes?
Would it make sense to split this regexp up into the multiple variants?

In the following example:

.foo:after {
    content: "}";
}

.bar:after {
    content: "?";
}

The closing brace inside the first string seems to be interpreted as a true closing brace.

Vim only highlights "bottom" in property "border-bottom", it does not highlight "border".

nav {

border-bottom: 1px solid #666666;
border: 1px solid #666666;
}

The following file "test.css" is valid CSS according to http://jigsaw.w3.org/css-validator/

@media screen and (max-width: 1023px) {
body {
padding: 0px 0px 0px 0px;
}

links{

left: 0px; top: 140px; width: 120px;
}
}

Vim does not highlight keywords "and" and "max-width" in the media query.

The error seems to be the following line in file runtime/syntax/css.vim

syn keyword cssMediaType contained screen print aural braile embosed handheld projection ty tv all nextgroup=cssMediaComma,cssMediaBlock skipwhite skipnl

It ignores that a media type can be build as logical expression in CSS3, cf.
http://www.w3.org/TR/css3-mediaqueries/

I set cssPositioningProp yellow and cssPositioningAttr red in my theme plugin, what I expected is the cssPositioningProp all have yellow frontend color, but this is what I get:

Then I change frontend color of cssPositioningAttr into green, the result is:

I ignored cssPositioningAttr at the last time, rigtht and left are not colored then.
It seems cssPositioningProp doesn't control all properties as we want and cssPositioningAttr effects some properties, I noticed the syntax in css.vim, and seems this part makes the overwritten, but why doesn't it work if I only set cssPositioningProp?

syn keyword cssPositioningProp contained bottom clear clip display float left
syn keyword cssPositioningProp contained position right top visibility
...
syn keyword cssPositioningAttr contained left right both

max-content, a property for things like width and height, isn't a keyword.

Default color scheme:

'Desert' color scheme, just to be sure:

Hi there. Take it into consideration.

Parsing this file: https://gitlab.gnome.org/GNOME/gitg/-/blob/master/gitg/resources/ui/style.css#L1

this at rules are not correctly identified (colors show as cssIdentifier when starts by #letter):

@define-color butter1 #fce94f;
@define-color butter2 #edd400;
@define-color butter3 #c4a000;

@define-color orange1 #fcaf3e;
@define-color orange2 #f57900;
@define-color orange3 #ce5c00;

@define-color chocolate1 #e9b96e;
@define-color chocolate2 #c17d11;
@define-color chocolate3 #8f5902;

In this format, colors are recognized as cssDefinition:

@define-color {
	butter1 #fce94f;
	butter2 #edd400;
	butter3 #c4a000;

	orange1 #fcaf3e;
	orange2 #f57900;
	orange3 #ce5c00;

	chocolate1 #e9b96e;
	chocolate2 #c17d11;
	chocolate3 #8f5902;

The plan is to modify the file to use the second format, but looks like this syntax is uncovered by css.

When I have this:

@media embossed, print, aural {
.noprint {
    display: none;
}
}

all media types (print, aural) after the first (embossed) are not highlighted (as cssMediaType), and the last closing } is mistakenly highlighted with cssBraceError. It only works as expected when I have exactly one media type.

Installing the css.vim directory in ~/.vim/syntax/ has no impact on syntax highlighting.
Installing the file via Vundle works as expected.
Are there any more steps to follow when manually installing this file? I'd rather not use a plugin manager.

Also display: unset does not work either.

Here's some information on pointer-events, it's supported everywhere:

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Here's the valid properties according to MDN:

auto, none, visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, inherit;

Here's properties that Chrome supports:

all, auto, bounding-box, fill, inherit, initial, none, painted, stroke, visible, visiblefill, visiblepainted, visiblestroke

Maybe there's a rationale I'm missing, but highlighting non-comments as comments is a significant impediment to a major functional advantage of syntax highlighting.

https://www.w3.org/TR/css-grid-1/#explicit-grid-shorthand

While grid-template-rows and grid-template-columns are highlighted, grid-template is missed.

Hello,

Thanks for your CSS3 syntax file.

A proposal: could you move css.vim to after/syntax in the repository? If the file is in that folder, it will be easy to install your syntax file with Vundle (https://github.com/gmarik/vundle), a plugin manager for Vim.

http://snook.ca/archives/html_and_css/font-size-with-rem

Take the following CSS:

div {
  background-color: blue;
  color: white;
  transition: 0.2s background-color, color ease-in-out;
}

In the second line, background-color is a CSS property being assigned a value. In the fourth line, background-color is part of the value of transition, yet both are assigned to the group cssBackgroundProp.

They're related, but different things, and as such it would be nice if they had different highlight groups assigned to them.