hail2u / vim-css3-syntax Goto Github PK
View Code? Open in Web Editor NEWCSS3 syntax (and syntax defined in some foreign specifications) support for Vim's built-in syntax/css.vim
CSS3 syntax (and syntax defined in some foreign specifications) support for Vim's built-in syntax/css.vim
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?
Only highlights "vertical", without the "align" part.
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.
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
Is this something done as easily as you did scss.vim
?
There are several WebKit-prefixed things standardized in the Compatibility Standard. You may want to add them to the syntax file.
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. :-(
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.
Add support for stylus ~ ,it's like sass.
div.test {
white-space: nowrap;
}
currently (v2.0.0) shows up like this:
Color names should only be taken into account for property values.
This is a new property value for font-family.
And already supported Firefox and Safari, Chrome also proposed to support.
The following values for this property are also not highlighted correctly:
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
Cannot highlight pseudo classes and elements inside @media
directive. This problem reproduce on SCSS nesting.
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 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.
ease-in-out
is not highlighted; ease-in
is, but not the -out
portion.
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
を両方とも更新続けられればありがたいです。
よろしくお願いします。
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:
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?
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?
scroll-behavior is new style and now only implemented in Firefox
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!
flex-grow
is not highlighted; the flex
portion is, but not the -grow
part.
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
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).
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...
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.
pointer-events
is not highlight.
I think this is missing one.
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
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
Here the screenshot of test/test.css:
I've install this plugin by Vundle:
Bundle 'hail2u/vim-css3-syntax'
:BundleUpdate
And:
: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
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.