hail2u/vim-css3-syntax

CSS3 syntax (and syntax defined in some foreign specifications) support for Vim's built-in syntax/css.vim

vim-css3-syntax

CSS3 syntax (and syntax defined in some foreign specifications) support for Vim’s built-in syntax/css.vim

COMPATIBILITY

This syntax files are compatible with the default runtime files that come with Vim 9.0 or higher. If you still use Vim 8.x or lower, you must:

• Copy latest CSS syntax file to your ~/.vim/ directory (recommended)
• Update runtime files
• Use older version
• Switch to vim80 branch

INSTALLATION

Vim package

$ mkdir -p ~/.vim/pack/css3-syntax/start
$ cd ~/.vim/pack/css3-syntax/start
$ git clone https://github.com/hail2u/vim-css3-syntax.git

pathogen.vim

$ cd ~/.vim/bundle
$ git clone https://github.com/hail2u/vim-css3-syntax.git

Manual

Download vim-css3-syntax.tar.gz from GitHub, extract it, and copy the contents to your ~/.vim directory.

NOTES

Vendor Prefixes

I do not plan to support CSS3 properties (or functions) with vendor prefixes, such as -webkit- or -moz-, etc. These are hard to maintain because they are:

• Added frequently
• Changed unexpectedly
• Removed silently

These must be supported by separate syntax plugins (Vim 7.4’s default CSS syntax file supports this). If you want to highlight prefixed properties or functions manually, :highlight and :match would help:

:highlight VendorPrefix guifg=#00ffff gui=bold
:match VendorPrefix /-\(moz\|webkit\|o\|ms\)-[a-zA-Z-]\+/

These commands highlight vendor prefixed properties and functions instantly with cyan and bold (on gVim).

Media Queries

I drop Media Queries Level 3 support in v0.12.0. There is no easy way to support Media Queries properly with after syntax plugin like this one, sorry. If you want to highlight Media Queries correctly, you must update Vim to 8.0+.

AUTHOR

Kyo Nagashima [email protected] (https://hail2u.net/)

LICENSE

MIT

vim-css3-syntax's Issues

make it support for qss

error highlight in scss file!

VIM 7.4.52 in ubuntu 14.04

maybe conflict with scss-syntax.vim plugin

the problem is if I use your plugin, I have right css3 highlight, while error highlight in nested scss syntax, parent's right '}' is always highlight for error.

.parent { 
　　width: 100px; 
　　height: 100px;

　　.child{
　　　　width: 10px; 
　　　　height: 10px;
　　} 
}　// highlight here...

If I don't use your plugin, I will not have right css3 highlight...

while

rm ~/.vim/bundle/vim-css3-syntax/after/syntax/scss.vim

Both works.

Maybe the problem in my pc...

space-between not highlight

foo {
   display: flex;
   justify-content: space-between;
}

The space-between part is not highlight correctly.
Its because the space is a keyword and have higher priority.
I believe other value starts with space are all effected.

Makes file very slow to open

I have a file that is 744 lines long. With theis plugin enabled it takes over 10 seconds to open. With the plugin disabled it is more or less instant

css3-text.vim not exists

When I open any file. Error has occurred.
Like this.

/Users/admin/dotfiles/vimfiles/bundle/vim-css3-syntax/after/syntax/html.vim, line 25
Vim(syntax):E484: Can't open file syntax/css/css3-text.vim
Error occured while executing action!
Action name is open

Missing `pointer-events`

pointer-events is not highlight.
I think this is missing one.

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

Can you add support for stylus?

Add support for stylus ~ ，it's like sass.

This plugin cannot work on my gvim/vim (Both Linux and Windows)

Here the screenshot of test/test.css:

---

I've install this plugin by Vundle:

Bundle 'hail2u/vim-css3-syntax'
:BundleUpdate

And:

• rainbow was installed for show rainbow parentheses.
• vim-coloresque was installed for shown RGB colors;
• The schemecolor is marslo.vim which made by myself.
• This is my vimrc file.

---

My Vim version

:version
VIM - Vi IMproved 7.4 (2013 Aug 10, compiled Jan 13 2014 10:17:06)
MS-Windows 32-bit GUI version with OLE support
Included patches: 1-142
Compiled by Yongwei@Shanghai

---

All plugins for my vim/gvim

gmarik/vundle
Yggdroot/indentLine
kien/ctrlp.vim.git
sjl/gundo.vim.git
majutsushi/tagbar
dantezhu/authorinfo
Marslo/EnhCommentify.vim
tpope/vim-pathogen
gregsexton/MatchTag
ervandew/supertab
Marslo/auto-pairs
Marslo/snipmate.vim.git
Conque-Shell
mru.vim
taglist.vim
winmanager
" For Python
" Bundle python-mode
python_fold
pyflakes.vim
python_match.vim
Marslo/python-syntax
" For ruby
tpope/vim-rails
vim-ruby/vim-ruby
nelstrom/vim-textobj-rubyblock
kana/vim-textobj-user
ruby-matchit
" For Javascript
"pangloss/vim-javascript"
jelera/vim-javascript-syntax
" For web design
"tpope/vim-surround"
tpope/vim-repeat
" Colors and themes and syntax
luochen1990/rainbow
txt.vim
hail2u/vim-css3-syntax
Marslo/vim-coloresque
Marslo/marslo.vim
Marslo/MarsloVimOthers
plasticboy/vim-markdown.git

Question about the Installation

Hi Kyu,

I installed your plugin with pathogen and would like to know from you if I need to perform the steps of the With HTML file and With SCSS (Sassy CSS) file section of the the your installation description on the README.md of the project?

Thanks for clarification!

Color preview is also applied to CSS property names

div.test {
    white-space: nowrap;
}

currently (v2.0.0) shows up like this:

Color names should only be taken into account for property values.

Requst for new style property scroll-behavior

scroll-behavior is new style and now only implemented in Firefox

invert() filter function not highlighted correctly

There is a conflict between filter-effects.vim and Vim’s default css.vim.

Highlight for nested properties?

SCSS supports the following notation:

.foo {
   font: {
      size: 160%;
      weight: bold;
   }
}

The suffixes do not get highlighted correctly unless they match existing properties, like top:. Is this even possible?

WebVTT ::cues

Suggest to add ::cue, :past, :future and ::cue-region support.
This is from WebVTT spec1.
And major browser all supports WebVTT now2.
Spec3.

Extremely slow on startup

I noticed my vim startup time was very slow when loading a file. I profiled with

vim --startuptime vim.log

Here I noticed vim actually started very quickly, much quicker than when actually loading a buffer. What's going on? I profiled again with the buffer loading:

vim --startuptime vim-readme.log README.md
vim --startuptime vim-nobuffer.log

I noticed that my startup time was ~300ms for the case without a buffer and ~2500ms with the README.md file (the file has 1 line).

I view the log files side by side:

diff --side-by-side vim-readme.log vim-nobuffer.log --width 220 | less

In the vim-readme case the screen is cleared (line clearing screen) at around 300ms, after which there is a huge amount of plugins sourced. Since many plugins have multiple files I wanted to group by file, after the initial 300ms.

I wrote a short Python script Github gist here which counted the number of times the file was sourced and how long the total time was and sorted descending by time. The top 10 results:

/Users/daniel_kats/.vim/plugged/vim-css3-syntax/after/syntax/html.vim -> 1633.521 ms (2 occurrences)
/Users/daniel_kats/.vim/colors/github.vim -> 93.303 ms (3 occurrences)
/usr/local/share/vim/vim74/syntax/html.vim -> 88.008 ms (2 occurrences)
/usr/local/share/vim/vim74/ftplugin/markdown.vim -> 75.706 ms (2 occurrences)
/Users/daniel_kats/.vim/colors/molokai.vim -> 40.774 ms (1 occurrences)
/usr/local/share/vim/vim74/syntax/css.vim -> 26.084 ms (2 occurrences)
/usr/local/share/vim/vim74/syntax/markdown.vim -> 25.842 ms (2 occurrences)
/usr/local/share/vim/vim74/syntax/vb.vim -> 7.192 ms (2 occurrences)
/Users/daniel_kats/.vim/plugged/vim-css3-syntax/after/syntax/css/css-counter-styles-3.vim -> 6.836 ms (2 occurrences)
/usr/local/share/vim/vim74/syntax/syncolor.vim -> 6.179 ms (11 occurrences)

A few interesting things here:

• why is the CSS3 plugin taking any time to source at all, given this is a README file?
• why is the CSS3 plugin taking 1633!!! ms to load?

Note that this doesn't even group by plugin, just by file. If I were to group by plugin, then css3-syntax plugin would take even more time.

What is the cause of this?

Work together proposal

hi,
I`m kight, I authored another css3 syntax project https://github.com/kight/CSS3-syntax-file-for-vim

Instead of working alone, and doing a lot of duplicated things, I suggest we work together at css3 syntax file and finally submit it to the vim project.

There is a issue that you splited the syntax file into many small files to make code more readable, but I`m afraid that the vim project will not accept that. :-(

master -> main

I use vim-css3-syntax through SpaceVim (Dein plugin installer).

Since last night, when I run :SPU, I noticed I got the error x vim-css3-syntax: Updating failed, The plugin dir is dirty.

When I go to the cloned repo itself (~/.cache/vimfiles/repos/github.com/hail2u/vim-css3-syntax), and run git log origin/master..HEAD, I get the following logs:

commit 5a004b69ad3ee4435553004288b2e44f0941e549 (HEAD -> master)
Author: Kyo Nagashima <[email protected]>
Date:   Sat Nov 21 08:41:21 2020 +0900

    Update text-3.vim

    https://www.w3.org/TR/2020/WD-css-text-3-20201119/

commit 750667a31252ded5a989955afca864968ef0fe52
Author: Kyo Nagashima <[email protected]>
Date:   Thu Nov 19 16:24:04 2020 +0900

    Update lists-3.vim

    https://www.w3.org/TR/2020/WD-css-lists-3-20201117/

commit ab5722664a12667077083e80aabbc014ad771e10
Author: Kyo Nagashima <[email protected]>
Date:   Thu Nov 19 16:21:47 2020 +0900

    Update fonts-4.vim

    https://www.w3.org/TR/2020/WD-css-fonts-4-20201117/

These show up as "changes that have not been pushed" in my repo.

Checking your remote repository, it seems you changed the master branch to be main and I believe this might be the issue.

いずれみんな master branch から main branch に切り替える時が来ると思いますが、今現在git pull に頼る Dein などのソフトはまだ master branch と main branchを両立できない状態であると僕は考えてます。

そこで「両立サポート」が普及するまでは、master branch とmain branchを両方とも更新続けられればありがたいです。

よろしくお願いします。

Incorrect highlighting for: space-{around|evenly|between} and ease-in-out

Using the latest vim-css3-syntax, happening in both Vim and NeoVim for *.css files with any color scheme (Dracula in the example screenshot).

> vim --version
8.0 with patches 1-1427

> nvim -v
NVIM v0.2.2

touch-action property

From pointer events. ref1
Bootstrap already uses it. ref2

ease-in-out not highlighted

ease-in-out is not highlighted; ease-in is, but not the -out portion.

`content` parsed as cssAttr when it should be a cssProp

Hi,

The content keyword can either be the value of a display property, or the name of a property itself (often used with :after and :before pseudo classes. The plugin currently only parses it as a cssFontAttr, even if placed as a property.

Tested with the following code :

div {
    display: content;
    content: "test";
}

As I rarely use content as a value myself, I've forked and edited the code in css3-regions.vim to remove the matching of content but this is as far as my vim syntax matching skills can go.

cssnext support?

vertical-align not working

Only highlights "vertical", without the "align" part.

flex-grow not highlighted

flex-grow is not highlighted; the flex portion is, but not the -grow part.

`font-size` parsed as a cssFontAttr when it should be a cssFontProp

Hi,

Same kind of error as in #15, font-size is incorrectly parsed as a cssFontAttr when it should be a property. I actually have never used font-size as the value for any property myself.

Tested with:

div {
    font-family: monospace;
    font-style: normal;
    font-size: xx-small;
    font-variant: normal;
    font-weight: bold;
}

Once again, I've made some monkey patching in my fork, simply removing the matching rule in css3-linebox.vim, but this is no real fix, just something I can live with.

`pointer-events` property is not properly highlighted

The following values for this property are also not highlighted correctly:

• painted
• stroke
• visibleFill
• visiblePainted
• visibleStroke

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

`@media` directive and pseudo classes and elements

Cannot highlight pseudo classes and elements inside @media directive. This problem reproduce on SCSS nesting.

You may want to add some of WebKit-prefixed things in the Compat spec

There are several WebKit-prefixed things standardized in the Compatibility Standard. You may want to add them to the syntax file.

Inline styles syntax highlight

Hey. What can I do to enable css syntax highlight of inline stylse?

Submit these improvements as PRs to the official Vim CSS syntax file

Vim natively ships with this CSS syntax file:

https://github.com/JulesWang/css.vim

It would be more helpful if these improvements were submitted as PRs to that repo.

`system-ui` font family

This is a new property value for font-family.
And already supported Firefox and Safari, Chrome also proposed to support.

Properly highlight &-selectors (Sass)

fit-content() function is not highlighted correctly

There is a conflict between css-grid-1.vim and css-sizing-3.vim.

MacVim slowdown and laggy

I've been using the plugin for a number of years now. Sometime last year I ran :BundleUpdate and then saw a performance decrease using MacVim, especially with many files open.

I tracked it down to vim-cs3-syntax plugin by setting :syntax off. MacVim performs as expected without syntax highlighting on. By removing the plugin and turning syntax highlighting on, I again see great performance.

I'm not sure what's causing the issue, but commenting out runtime! syntax/css/*.vim from scss.vim makes the app perform better. There are a lot of file in syntax/css/ which I dont have time to debug. Perhaps there are a few lines in there that are causing issues, or maybe it's the sheer volume?

Running macvim snapshot 72.

vim-less and mixins with parentheses highlighting

There seems to be a conflict between vim-less and vim-css3-syntax when mixin uses parentheses.
A hope screenshots will illustrate the issue better:

With parentheses:

Without parentheses:

Filetype is detected successfully.
Highlighting works correctly when vim-css3-syntax is disabled.

Distribute as Vim 8.0 package

Vim 8.0 adds package system for plugins. If this plugin is distributed as a package, life is simpler than we think. However, package system requires changes in current directory structure. This means it is not compatible with pathogen (or something similar).

.less, .styl and .sass support

Is this something done as easily as you did scss.vim?

(Optional) support for nested selectors

First off, thanks for writing this plugin, it's amazing. It supports pretty much everything I throw at it save nesting.

I know you have removed support for SCSS in #53, but I was wondering you would consider adding support for nested selctors? This may be behind some sort of flag/option, let g:css3_nesting = 1, but would be very useful none then less.

The nesting I'm referring to is not the full-blown one from SASS/SCSS/LESS but rather the proposal linked above. So something like:

article section {
    & h1, & h2, & h3
    & h4, & h5 & h6 {
        &:target {
            font-weight: bolder;
        }
    }
}

But note that & has to prefix every selector, so no .disabled & or .&-disabled. That's about it. I tried to do it myself, but Vim's syntax files are might confusing, and I was hoping you might be able to help.

For reference I'm using https://preset-env.cssdb.org/ with https://github.com/jonathantneal/postcss-nesting enabled.

What do you think?

Update "Installation" documentation for Sass

Installation code for Sass could rewrite like that:

runtime! syntax/css/*.vim
syn clear cssMediaBlock
syn region cssMediaBlock contained transparent matchgroup=cssBraces start='{' end='}' contains=TOP

Some CSS functions not highlighted correctly

• invert()
• running()
• element()
• fit-content()
• inset()
• circle()
• ellipse()
• fade()

There are many conflicts around syntaxes.
#36 and #39 are merged to this issue.