dotfiles / vim / bundle / vim-css3-syntax / README.md

vim-css3-syntax

Add CSS3 syntax support to vim's built-in syntax/css.vim.

INSTALLATION

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

Git and pathogen

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

With HTML file

Create ~/.vim/after/syntax/html.vim and write these line:

syn include @htmlCss syntax/css/html5-elements.vim
syn include @htmlCss syntax/css/css3-animations.vim
syn include @htmlCss syntax/css/css3-background.vim
syn include @htmlCss syntax/css/css3-box.vim
syn include @htmlCss syntax/css/css3-break.vim
syn include @htmlCss syntax/css/css3-colors.vim
syn include @htmlCss syntax/css/css3-content.vim
syn include @htmlCss syntax/css/css3-exclusions.vim
syn include @htmlCss syntax/css/css3-flexbox.vim
syn include @htmlCss syntax/css/css3-gcpm.vim
syn include @htmlCss syntax/css/css3-grid-layout.vim
syn include @htmlCss syntax/css/css3-hyperlinks.vim
syn include @htmlCss syntax/css/css3-images.vim
syn include @htmlCss syntax/css/css3-layout.vim
syn include @htmlCss syntax/css/css3-linebox.vim
syn include @htmlCss syntax/css/css3-lists.vim
syn include @htmlCss syntax/css/css3-marquee.vim
" syn include @htmlCss syntax/css/css3-mediaqueries.vim
syn include @htmlCss syntax/css/css3-multicol.vim
syn include @htmlCss syntax/css/css3-preslev.vim
syn include @htmlCss syntax/css/css3-regions.vim
syn include @htmlCss syntax/css/css3-ruby.vim
syn include @htmlCss syntax/css/css3-selectors.vim
syn include @htmlCss syntax/css/css3-text.vim
syn include @htmlCss syntax/css/css3-transforms.vim
syn include @htmlCss syntax/css/css3-transitions.vim
syn include @htmlCss syntax/css/css3-ui.vim
syn include @htmlCss syntax/css/css3-values.vim
syn include @htmlCss syntax/css/css3-writing-modes.vim

With SCSS (Sassy CSS) file

Create ~/.vim/after/syntax/scss.vim and write these lines:

runtime! syntax/css/html5-elements.vim
runtime! syntax/css/css3-animations.vim
runtime! syntax/css/css3-background.vim
runtime! syntax/css/css3-box.vim
runtime! syntax/css/css3-break.vim
runtime! syntax/css/css3-colors.vim
runtime! syntax/css/css3-content.vim
runtime! syntax/css/css3-exclusions.vim
runtime! syntax/css/css3-flexbox.vim
runtime! syntax/css/css3-gcpm.vim
runtime! syntax/css/css3-grid-layout.vim
runtime! syntax/css/css3-hyperlinks.vim
runtime! syntax/css/css3-images.vim
runtime! syntax/css/css3-layout.vim
runtime! syntax/css/css3-linebox.vim
runtime! syntax/css/css3-lists.vim
runtime! syntax/css/css3-marquee.vim
" runtime! syntax/css/css3-mediaqueries.vim
runtime! syntax/css/css3-multicol.vim
runtime! syntax/css/css3-preslev.vim
runtime! syntax/css/css3-regions.vim
runtime! syntax/css/css3-ruby.vim
runtime! syntax/css/css3-selectors.vim
runtime! syntax/css/css3-text.vim
runtime! syntax/css/css3-transforms.vim
runtime! syntax/css/css3-transitions.vim
runtime! syntax/css/css3-ui.vim
runtime! syntax/css/css3-values.vim
runtime! syntax/css/css3-writing-modes.vim

About Vendor Extension

I do not hava a plan to support a CSS 3 property (and function) with vendor extension, such as -webkit- or -moz-, etc.. These are hard to maintain because:

  • Added frequently
  • Changed unexpectedly
  • Removed silently

These must be supported by seperate syntax plugin. Or, if you want to highlight prefixed properties or functions, :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).

HISTORY

v0.7 (in progress)

  • Follow spec updates
  • Some minor bug fixes

v0.6

  • Add Test
  • Remove deprecated CSS Grid Positioning Module
  • Follow spec updates
  • Some minor bug fixes

v0.5

  • Add CSS Regions Module Level 3 features
  • Add CSS Exclusions and Shapes Module Level 3 features
  • Add CSS Grid Layout features
  • Add CSS Box Alignment features
  • Add gr unit
  • Follow spec updates
  • Some minor bug fixes

v0.4

  • Add CSS Fragmentation Module Level 3 features
  • Fix a problem on pseudo-class and pseudo-element names inside @media block
  • Fix a problem on media type and expression
  • Add CSS Values and Units Module Level 3 features
  • Follow spec updates
  • Some minor bug fixes

v0.3

  • Add CSS3 Presentation Levels Module features
  • Add CSS3 Lists Module features
  • Add CSS3 Generated and Replaced Content Module features
  • Add CSS Template Layout Module features
  • Add CSS Image Values and Replaced Content Module Level 3 features
  • Fix a problem on class names inside @media block
  • Some minor bug fixes

v0.2

  • Almost all CSS3 features added

v0.1

  • Initial release

AUTHOR

Kyo Namegashima kyo@hail2u.net

LICENSE

MIT: http://hail2u.mit-license.org/2011

Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.