Add css-will-change-1.vim and test

See Also: http://www.w3.org/TR/2014/WD-css-will-change-1-20140429/

README.md

@@ -1,37 +1,81 @@
-TITLE
-=====
-
 vim-css3-syntax
+===============
 
-
-DESCRIPTION
-===========
-
-Add CSS3 syntax support to vim's built-in `syntax/css.vim`.
+Add CSS3 syntax support to [Vim][1]'s built-in `syntax/css.vim`.
 
 
 INSTALLATION
-============
+------------
 
-Extract vim-css3-syntax.tar.gz and copy contents to `~/.vim` directory.
+I **strongly** recommend to install this plugin on *Vim 7.4 or higher with default runtime files*.
 
 
-Git and pathogen
-================
+### Manual Installation
+
+Download from GitHub, extract `vim-css3-syntax.tar.gz`, and copy the contents to your `~/.vim` directory.
+
+
+### Installing with Git and pathogen
 
     $ cd ~/.vim/bundle
-    $ git clone https://hail2u@github.com/hail2u/vim-css3-syntax.git
+    $ git clone https://github.com/hail2u/vim-css3-syntax.git
 
 
-HISTORY
-=======
+NOTES
+-----
 
-v0.1
-----
-  * Initial release
+### Highlighting problems on: `vertical-align`, `box-shadow`, and others
+
+Some properties do not highlight correctly by default. This is a limitation of Vim's highlight priority mechanism. To fix this problems, put following lines in your `~/.vim/after/css.vim`:
+
+    setlocal iskeyword+=-
+
+Or in your `~/.vimrc`:
+
+    augroup VimCSS3Syntax
+      autocmd!
+
+      autocmd FileType css setlocal iskeyword+=-
+    augroup END
+
+This setting have side effects, so use it at your own risk.
+
+
+### 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).
+
+
+### CSS Preprocessors: [Sass][2], [LESS][3], and [Stylus][4]
+
+`vim-css3-syntax` supports Sass's SCSS syntax only. If you want use this plugin with LESS, install [VIM-LESS][5]. Sass's indent synatx and Stylus are not supported.
 
 
 AUTHOR
-======
+------
 
-  * Kyo Namegashima <kyo@hail2u.net>
+Kyo Namegashima <kyo@hail2u.net>
+
+
+LICENSE
+-------
+
+MIT: http://hail2u.mit-license.org/2011
+
+
+[1]: http://www.vim.org/
+[2]: http://sass-lang.com/
+[3]: http://lesscss.org/
+[4]: http://learnboost.github.io/stylus/
+[5]: https://github.com/groenewege/vim-less

after/syntax/css/compositing-1.vim

@@ -0,0 +1,4 @@
+" TODO: create cssCompositingProp and cssCompositingAttr
+syn keyword cssFontProp contained isolation
+syn match cssFontProp contained "\<\(mix\|background\)-blend-mode\>"
+syn keyword cssFontAttr contained multiply screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity

after/syntax/css/css-counter-styles-3.vim

@@ -0,0 +1,9 @@
+" TODO: create cssCounterStyleDescriptor for `@counter-style` descriptor
+syn keyword cssGeneratedContentProp contained negative prefix suffix range pad fallback
+syn match cssGeneratedContentProp contained "\<\(additive-\)\=symbols\>"
+syn match cssGeneratedContentProp contained "\<speak-as\>"
+syn match cssGeneratedContentAttr contained "\<disclosure-\(open\|closed\)\>"
+syn match cssGeneratedContentAttr contained "\<simp-chinese-\(in\)\=formal\>"
+syn match cssGeneratedContentAttr contained "\<trad-chinese-\(in\)\=formal\>"
+syn match cssGeneratedContentAttr contained "\<ethiopic-numeric\>"
+syn region cssFunction contained matchgroup=cssFunctionName start="\<symbols\s*(" end=")" oneline keepend

after/syntax/css/css-display-3.vim

@@ -0,0 +1,5 @@
+" TODO: create cssDisplayProp group and cssDisplayAttr group
+syn match cssFontProp contained "\<display-\(inside\|outside\|extras\|box\)\>"
+syn keyword cssFontAttr contained contents
+syn match cssFontAttr contained "\<\(block\|inline\)-level\>"
+syn match cssFontAttr contained "\<inline-list-item\>"

after/syntax/css/css-flexbox-1.vim

@@ -0,0 +1,6 @@
+" TODO: create cssFlexboxProp group and cssFlexboxAttr group
+syn keyword cssFontProp order
+syn match cssFontProp contained "\<flex\(-\(basis\|direction\|flow\|grow\|shrink\|wrap\)\)\=\>"
+syn keyword cssFontAttr contained flex row wrap
+syn match cssFontAttr contained "\<inline-flex\>"
+syn match cssFontAttr contained "\<\(row\|column\|wrap\)-reverse\>"

after/syntax/css/css-grid-1.vim

@@ -0,0 +1,8 @@
+syn match cssFontProp contained "\<grid-template\(-\(columns\|rows\|areas\)\)\=\>"
+syn match cssFontProp contained "\<grid-auto-\(columns\|rows\|flow\|position\)\>"
+syn match cssFontProp contained "\<grid-\(row\|column\)\(-\(start\|end\)\)\=\>"
+syn match cssFontProp contained "\<grid-area\>"
+syn keyword cssFontAttr contained grid subgrid rows columns dense span
+syn match cssFontAttr contained "\<inline-grid\>"
+syn match cssValueNumber contained "[01]\(.\d\+\)\=fr"
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(minmax\|repeat\)\s*(" end=")" oneline keepend

after/syntax/css/css-line-grid-1.vim

@@ -0,0 +1,7 @@
+" TODO: create cssLineGridProp and cssLineGridAttr
+syn match cssFontProp contained "\<line-\(grid\|snap\|slack\)"
+syn match cssFontProp contained "\<box-snap\>"
+syn match cssFontAttr contained "\<half-border\>"
+syn keyword cssFontAttr contained create
+syn match cssValueNumber contained "\d\+gd"
+syn region cssFunction contained matchgroup=cssFunctionName start="\<round\(down\|up\)\s*(" end=")" oneline keepend

after/syntax/css/css-lists-3.vim

@@ -0,0 +1,6 @@
+syn match cssGeneratedContentProp contained "\<marker-side\>"
+syn match cssGeneratedContentProp contained "\<counter-set\>"
+syn keyword cssGeneratedContentAttr contained marker
+syn match cssGeneratedContentAttr contained "\<list-container\>"
+syn keyword cssPseudoClassId contained marker
+syn region cssFunction contained matchgroup=cssFunctionName start="\<counters\s*(" end=")" oneline keepend

after/syntax/css/css-masking-1.vim

@@ -0,0 +1,9 @@
+" TODO: create cssMaskingProp group and cssMaskingValue group
+syn match cssFontProp contained "\<mask\(-\(image\|source-type\|repeat\|position\|clip\|origin\|size\|type\)\)\=\>"
+syn match cssFontProp contained "\<mask-box-image\(-\(source\|slice\|width\|outset\|repeat\)\)\=\>"
+syn match cssFontProp contained "\<clip-\(path\|rule\)\>"
+syn keyword cssFontAttr contained alpha luminance nonzero evenodd
+syn match cssFontAttr contained "\<no-clip\>"
+
+" http://www.w3.org/TR/css-masking/#MaskElement
+" syn keyword cssTagName mask

after/syntax/css/css-overflow-3.vim

@@ -0,0 +1,4 @@
+" TODO: create cssOverflowProp group and cssOverflowAttr group
+syn match cssFontProp contained "\<max-lines\>"
+syn keyword cssFontAttr contained fragments
+syn match cssFontAttr contained "\<paged-\(x\|y\)\(-controls\)\=\>"

after/syntax/css/css-scoping-1.vim

@@ -0,0 +1,5 @@
+syn region cssInclude start=/@scope\>/ end=/\ze{/ skipwhite skipnl nextgroup=cssMediaBlock
+syn keyword cssPseudoClassId contained host shadow content
+syn match cssPseudoClassId contained "\<\(scope\|host\)-context\>"
+syn region cssPseudoClassLang matchgroup=cssPseudoClassId start=":\(host\)(" end=")" oneline
+syn match cssSelectorOp2 "/deep/"

after/syntax/css/css-shapes-1.vim

@@ -0,0 +1,4 @@
+" TODO: create cssShapesProp group and cssShapesAttr group
+syn match cssFontProp contained "\<shape-\(outside\|image-threshold\|margin\)\>"
+syn match cssFontAttr contained "\<margin-box\>"
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(inset\|circle\|ellipse\|polygon\)\s*(" end=")" oneline keepend

after/syntax/css/css-text-3.vim

@@ -0,0 +1,8 @@
+syn keyword cssTextProp contained hyphens
+syn match cssTextProp contained "\<line-break\>"
+syn match cssTextProp contained "\<overflow-wrap\>"
+syn match cssTextProp contained "\<tab-size\>"
+syn keyword cssTextAttr contained manual loose strict hanging
+syn match cssTextAttr contained "\<match-parent\>"
+syn match cssTextAttr contained "\<each-line\>"
+syn match cssTextAttr contained "\<full-width\>"

after/syntax/css/css-text-decor-3.vim

@@ -0,0 +1,3 @@
+syn match cssTextProp contained "\<text-\(decoration\(-\(color\|line\|skip\|style\)\)\=\|underline-position\|emphasis\(-\(color\|position\|style\)\)\=\)\>"
+syn keyword cssTextAttr contained wavy objects alphabetic spaces edges ink under filled dot triangle sesame over
+syn match cssTextAttr contained "\<box-decoration\>"

after/syntax/css/css-variables.vim

@@ -0,0 +1,3 @@
+" TODO: create cssVariableProp group
+syn match cssFontProp contained "\<var-[A-Za-z_][A-Za-z0-9_-]\+\>"
+syn region cssFunction contained matchgroup=cssFunctionName start="\<var\s*(" end=")" oneline keepend

after/syntax/css/css-will-change-1.vim

@@ -0,0 +1,3 @@
+" TODO: create cssWillChangeProp group and cssWillChangeAttr group
+syn match cssFontProp contained "\<will-change\>"
+syn match cssFontAttr contained "\<scroll-position\>"

after/syntax/css/css-writing-modes-3.vim

@@ -0,0 +1,7 @@
+" TODO: create cssWritingModesProp group and cssWritingModesAttr group
+syn match cssFontProp contained "\<text-\(orientation\|combine-horizontal\)\>"
+syn match cssFontProp contained "\<writing-mode\>"
+syn keyword cssFontAttr contained before after mixed isolate plaintext
+syn match cssFontAttr contained "\<\(upright\|sideways\(-right\|-left\)\=\|use-glyph-orientation\)\>"
+syn match cssFontAttr contained "\<isolate-override\>"
+syn match cssFontAttr contained "\<\(horizontal-tb\|vertical-\(rl\|lr\)\)\>"

after/syntax/css/css3-align.vim

@@ -0,0 +1,5 @@
+" TODO: create cssAlignProp group and cssAlignAttr group
+syn match cssFontProp contained "\<\(justify\|align\)-\(self\|content\|items\)\>"
+syn keyword cssFontAttr contained safe true
+syn match cssFontAttr contained "\<\(self\|flex\)-\(start\|end\)\>"
+syn match cssFontAttr contained "\<space-\(between\|around\|evenly\)\>"

after/syntax/css/css3-animations.vim

@@ -0,0 +1,4 @@
+" TODO: create cssAnimationsProp group and cssAnimationsAttr group
+syn match cssFontProp contained "\<animation\(-\(name\|duration\|timing-function\|iteration-count\|direction\|play-state\|delay\|fill-mode\)\)\=\>"
+syn keyword cssFontAttr contained forwards backwards running paused
+syn match cssFontAttr contained "\<alternate-reverse\>"

after/syntax/css/css3-background.vim

@@ -0,0 +1,7 @@
+" TODO: create cssBackgroundProp group and cssBackgroundAttr group
+syn match cssFontProp contained "\<background-\(clip\|origin\|size\)\>"
+syn match cssFontProp contained "\<border-image\(-\(source\|slice\|width\|outset\|repeat\)\)\=\>"
+syn match cssFontProp contained "\<border-\(\(top-right\|bottom-right\|bottom-left\|top-left\)-\)\=radius\>"
+syn match cssFontProp contained "\<box-shadow\>"
+syn keyword cssFontAttr contained space round local fill stretch clone slice
+syn match cssFontAttr contained "\<\(padding\|border\|content\)-box\>"

after/syntax/css/css3-box.vim

@@ -0,0 +1,5 @@
+syn match cssBoxProp contained "\<overflow-\(style\|x\|y\)\>"
+syn match cssBoxProp contained "\<rotation\(-point\)\=\>"
+syn keyword cssBoxAttr contained scrollbar panner marquee
+syn match cssBoxAttr contained "\<ruby\(-\(base\(-group\)\=\|text\(-group\)\=\)\)\=\>"
+syn match cssBoxAttr contained "\<no-\(display\|content\)\>"

after/syntax/css/css3-break.vim

@@ -0,0 +1,4 @@
+" TODO: create cssBreakProp group and cssBreakAttr group
+syn match cssFontProp contained "\<break-\(after\|before\|inside\)\>"
+syn match cssFontProp contained "\<box-decoration-break\>"
+syn keyword cssFontAttr contained any

after/syntax/css/css3-cascade.vim

@@ -0,0 +1,3 @@
+" TODO: create cssCascadeProp and cssCascadeAttr
+syn keyword cssFontProp all
+syn keyword cssFontAttr unset

after/syntax/css/css3-colors.vim

@@ -0,0 +1,3 @@
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(rgba\|hsla\=\)\s*(" end=")" oneline keepend
+syn keyword cssColorProp contained opacity
+syn match cssColor contained "\<currentColor\>"

after/syntax/css/css3-conditional.vim

@@ -0,0 +1 @@
+syn region cssInclude start=/@supports\>/ end=/\ze{/ skipwhite skipnl contains=cssMediaType,cssMediaKeyword nextgroup=cssMediaBlock

after/syntax/css/css3-content.vim

@@ -0,0 +1,3 @@
+syn match cssGeneratedContentProp contained "\<move-to\>"
+syn match cssGeneratedContentProp contained "\<page-policy\>"
+syn keyword cssGeneratedContentAttr contained inhibit here first last

after/syntax/css/css3-exclusions.vim

@@ -0,0 +1,3 @@
+" TODO: create cssExclusionsProp group and cssExclusionsAttr group
+syn match cssFontProp contained "\<wrap-\(flow\|through\)\>"
+syn keyword cssFontAttr contained minimum maximum

after/syntax/css/css3-fonts.vim

@@ -0,0 +1,17 @@
+syn match cssFontProp contained "\<font-feature-settings\>"
+syn match cssFontProp contained "\<font-kerning\>"
+syn match cssFontProp contained "\<font-language-override\>"
+syn match cssFontProp contained "\<font-synthesis\>"
+syn match cssFontProp contained "\<font-variant-\(alternates\|caps\|east-asian\|ligatures\|numeric\|position\)\>"
+syn keyword cssFontAttr contained unicase ordinal jis78 jis83 jis90 jis04 simplified traditional
+syn match cssFontAttr contained "\<\(no-\)\=\(common\|discretionary\|historical\)-ligatures\>"
+syn match cssFontAttr contained "\<\(no-\)\=contextual\>"
+syn match cssFontAttr contained "\<historical-forms\>"
+syn match cssFontAttr contained "\<all-small-caps\>"
+syn match cssFontAttr contained "\<\(all-\)\=petite-caps\>"
+syn match cssFontAttr contained "\<titling-caps\>"
+syn match cssFontAttr contained "\<\(lining\|oldstyle\|proportional\|tabular\)-nums\>"
+syn match cssFontAttr contained "\<\(diagonal\|stacked\)-fractions\>"
+syn match cssFontAttr contained "\<slashed-zero\>"
+syn match cssFontAttr contained "\<proportional-width\>"
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(stylistic\|styleset\|character-variant\|swash\|ornaments\|annotation\)\s*(" end=")" oneline keepend

after/syntax/css/css3-gcpm.vim

@@ -0,0 +1,6 @@
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(target-\(counter\|counters\|text\)\|symbols\)\s*(" end=")" oneline keepend
+syn keyword cssGeneratedContentProp contained bleed marks
+syn match cssGeneratedContentProp contained "\<bookmark-\(label\|level\|state\|target\)\>"
+syn match cssGeneratedContentProp contained "\<float-offset\>"
+syn match cssGeneratedContentProp contained "\<string-set\>"
+syn keyword cssGeneratedContentAttr contained open closed crop cross

after/syntax/css/css3-hyperlinks.vim

@@ -0,0 +1,3 @@
+" TODO: create cssHyperlinksProp group and cssHyperlinksAttr group
+syn match cssFontProp contained "\<target\(-\(name\|new\|position\)\)\=\>"
+syn keyword cssFontAttr contained current new modal window tab front back

after/syntax/css/css3-images.vim

@@ -0,0 +1,7 @@
+" TODO: create cssImagesProp group and cssImagesAttr group
+syn match cssFontProp contained "\<object-\(fit\|position\)\>"
+syn match cssFontProp contained "\<image-\(resolution\|orientation\)\>"
+syn keyword cssFontAttr contained contain cover snap
+syn match cssFontAttr contained "\<from-image\>"
+syn match cssFontAttr contained "\<scale-down\>"
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(image\|\(repeating-\)\=\(linear\|radial\)-gradient\)\s*(" end=")" oneline keepend

after/syntax/css/css3-layout.vim

@@ -0,0 +1,3 @@
+" TODO: create cssLayoutAttr group
+syn keyword cssFontAttr contained same
+syn keyword cssPseudoClassId contained slot

after/syntax/css/css3-linebox.vim

@@ -0,0 +1,16 @@
+" TODO: create cssLineboxProp group and cssLineboxAttr group
+syn match cssFontProp contained "\<alignment-\(adjust\|baseline\)\>"
+syn match cssFontProp contained "\<baseline-shift\>"
+syn match cssFontProp contained "\<dominate-baseline\>"
+syn match cssFontProp contained "\<drop-initial-\(after-\(adjust\|align\)\|before-\(adjust\|align\)\|size\|value\)\>"
+syn match cssFontProp contained "\<inline-box-align\>"
+syn match cssFontProp contained "\<line-stacking\(-\(ruby\|shift\|strategy\)\)\=\>"
+syn match cssFontProp contained "\<text-height\>"
+syn keyword cssFontAttr contained central mathematical
+syn match cssFontAttr contained "\<\(text-\)\=\(before\|after\)-edge\>"
+syn match cssFontAttr contained "\<use-script\>"
+syn match cssFontAttr contained "\<caps-height\>"
+syn match cssFontAttr contained "\<\(exclude\|include\)-ruby\>"
+syn match cssFontAttr contained "\<\(consider\|disregard\)-shift\>"
+syn match cssFontAttr contained "\<\(\(inline\|block\)-line\|max\|grid\)-height\>"
+syn match cssFontAttr contained "\<\(font\|text\|max\)-size\>"

after/syntax/css/css3-marquee.vim

@@ -0,0 +1,4 @@
+" TODO: create cssMarqueeProp group and cssMarqueeAttr group
+syn match cssFontProp contained "\<marquee-\(direction\|play-count\|speed\|style\)\>"
+syn keyword cssFontAttr contained forward reverse infinite slide alternate
+syn match cssFontAttr contained "\<marquee-\(line\|block\)\>"

after/syntax/css/css3-mediaqueries.vim

@@ -0,0 +1,4 @@
+syn region cssMediaType contained start='(' end=')' contains=css.*Attr,css.*Prop,cssComment,cssValue.*,cssColor,cssURL,cssImportant,cssError,cssStringQ,cssStringQQ,cssFunction,cssUnicodeEscape nextgroup=cssMediaComma,cssMediaAnd,cssMediaBlock skipwhite skipnl
+syn match cssMediaAnd "and" nextgroup=cssMediaType skipwhite skipnl
+syn clear cssMediaBlock
+syn region cssMediaBlock contained transparent matchgroup=cssBraces start='{' end='}' contains=cssTagName,cssSelectorOp,cssAttributeSelector,cssIdentifier,cssError,cssDefinition,cssPseudoClass,cssPseudoClassLang,cssComment,cssUnicodeEscape,cssClassName,cssURL

after/syntax/css/css3-multicol.vim

@@ -0,0 +1,5 @@
+" TODO: create cssMulticolProp group and cssMulticolAttr group
+syn keyword cssFontProp contained columns
+syn match cssFontProp contained "\<column-\(count\|fill\|gap\|rule\(-\(color\|style\|width\)\)\=\|span\|width\)\>"
+syn keyword cssFontAttr contained balance
+syn match cssFontAttr contained "\<\(avoid-\)\=column\>"

after/syntax/css/css3-new-functions.vim

@@ -1 +0,0 @@
-syn region cssFunction contained matchgroup=cssFunctionName start="\<\(rgba\|hsla\?\|calc\|\(linear\|radial\)-gradient\)\s*(" end=")" oneline keepend

after/syntax/css/css3-new-properties.vim

@@ -1,15 +0,0 @@
-syn match cssBoxProp contained "\<border-\(color\|image\|radius\)\>"
-syn match cssBoxProp contained "\<box-shadow\>"
-
-syn match cssColorProp contained "\<background-\(origin\|clip\|size\)\>"
-
-syn keyword cssColorProp contained opacity
-
-syn match cssTextProp contained "\<text-\(shadow\|overflow\)\>"
-syn match cssTextProp contained "\<word-wrap\>"
-
-syn match cssBoxProp contained "\<box-sizing\>"
-syn keyword cssBoxProp contained resize
-syn match cssBoxProp contained "\<nav-\(up\|right\|down\|left\)"
-
-syn match cssBoxProp contained "\<overflow-\(x\|y\)\>"

after/syntax/css/css3-page.vim

@@ -0,0 +1,3 @@
+" TODO: Create cssPageAttr group
+syn keyword cssFontAttr contained recto verso
+syn match cssFontAttr contained "\<\(avoid-\)\=page\>"

after/syntax/css/css3-preslev.vim

@@ -0,0 +1,3 @@
+" TODO: create cssPresLevProp group and cssPresLevAttr group
+syn match cssFontProp contained "\<presentation-level\>"
+syn keyword cssFontAttr contained increment

after/syntax/css/css3-regions.vim

@@ -0,0 +1,6 @@
+" TODO: create cssRegionsProp group and cssRegionsAttr group
+syn match cssFontProp contained "\<flow-\(into\|from\)\>"
+syn match cssFontProp contained "\<region-fragment\>"
+syn keyword cssFontAttr contained element content break
+syn match cssFontAttr contained "\<\(avoid-\)\=region\>"
+syn keyword cssPseudoClassId contained region

after/syntax/css/css3-ruby.vim

@@ -0,0 +1,4 @@
+" TODO: create cssRubyProp group and cssRubyAttr group
+syn match cssFontProp contained "\<ruby-\(position\|merge\|align\)"
+syn match cssFontAttr contained "\<ruby-\(base\|text\)-container\>"
+syn match cssFontAttr contained "\<inter-character\>"

after/syntax/css/css3-selectors.vim

@@ -0,0 +1,5 @@
+syn keyword cssPseudoClassId contained target enabled disabled checked indeterminate root empty
+syn match cssPseudoClassId contained "\<last-\(child\|of-type\)\>"
+syn match cssPseudoClassId contained "\<first-of-type\>"
+syn match cssPseudoClassId contained "\<only-\(child\|of-type\)\>"
+syn region cssPseudoClassLang matchgroup=cssPseudoClassId start=":\(nth\(-last\)\=-\(child\|of-type\)\|not\)(" end=")" oneline

after/syntax/css/css3-sizing.vim

@@ -0,0 +1,3 @@
+" TODO: create cssSizingAttr group
+syn match cssFontAttr contained "\<\(\(min\|max\|fit\)-content\|fill-available\|repudiate-floats\)\>"
+syn match cssFontAttr contained "\<contain-floats\>"

after/syntax/css/css3-speech.vim

@@ -0,0 +1,6 @@
+syn match cssAuralProp contained "\<voice-\(volume\|balance\|rate\|pitch\|range\|stress\|duration\)\>"
+syn match cssAuralProp contained "\<rest\(-\(before\|after\)\)\=\>"
+syn keyword cssAuralAttr contained young old neutral preserve moderate reduced
+syn match cssAuralAttr contained "\<\(literal\|no\)-punctuation\>"
+syn match cssAuralAttr contained "\<\(x-\)\=\(weak\|strong\)\>"
+syn match cssValueNumber contained "[-+]\=\d\+\(dB\|st\)"

after/syntax/css/css3-transforms.vim

@@ -0,0 +1,7 @@
+" TODO: create cssTransformsProp group and cssTransformsAttr group
+syn match cssFontProp contained "\<backface-visibility\>"
+syn match cssFontProp contained "\<perspective\(-origin\)\=\>"
+syn match cssFontProp contained "\<transform\(-\(origin\|style\)\)\=\>"
+syn keyword cssFontAttr contained flat
+syn match cssFontAttr contained "\<preserve-3d\>"
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(matrix\(3d\)\=\|translate\(3d\|X\|Y\|Z\)\=\|scale\(3d\|X\|Y\|Z\)\=\|rotate\(3d\|X\|Y\|Z\)\=\|skew\(X\|Y\)\=\|perspective\)\s*(" end=")" oneline keepend

after/syntax/css/css3-transitions.vim

@@ -0,0 +1,6 @@
+" TODO: create cssTransitionsProp group and cssTransitionsAttr group
+syn match cssFontProp contained "\<transition\(-\(property\|duration\|timing-function\|delay\)\)\=\>"
+syn keyword cssFontAttr contained linear
+syn match cssFontAttr contained "\<ease\(-\(in\|out\|in-out\)\)\=\>"
+syn match cssFontAttr contained "\<step-\(start\|end\)\>"
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(steps\|cubic-bezier\)\s*(" end=")" oneline keepend

after/syntax/css/css3-ui.vim

@@ -0,0 +1,7 @@
+syn keyword cssUIProp contained icon resize
+syn match cssUIProp contained "\<box-sizing\>"
+syn match cssUIProp contained "\<ime-mode\>"
+syn match cssUIProp contained "\<nav-\(index\|up\|right\|down\|left\)"
+syn match cssUIProp contained "\<outline-offset\>"
+syn match cssUIProp contained "\<text-overflow\>"
+syn keyword cssUIAttr contained active inactive disabled root horizontal vertical clip ellipsis

after/syntax/css/css3-values.vim

@@ -0,0 +1,6 @@
+syn match cssValueLength contained "[-+]\=\d\+\(\.\d*\)\=\(ch\|rem\|vw\|vh\|vmin\|vmax\)"
+syn match cssValueAngle contained "[-+]\=\d\+\(\.\d*\)\=turn"
+" TODO: create cssValueResolution group
+syn match cssValueNumber contained "[-+]\=\d\+\(\.\d*\)\=dp\(i\|cm\|px\)"
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(calc\|toggle\)\s*(" end=")" oneline keepend
+syn keyword cssCommonAttr contained initial

after/syntax/css/html5-elements.vim

@@ -0,0 +1,22 @@
+" HTML5 new elements
+
+" Sections
+syn keyword cssTagName article section nav aside header footer
+
+" Grouping content
+syn keyword cssTagName figure figcaption main
+
+" Text-level semantics
+syn keyword cssTagName data time mark ruby rb rt rtc rp bdi wbr
+
+" Embedded content
+syn keyword cssTagName embed video audio source track
+
+" Forms
+syn keyword cssTagName datalist keygen output progress meter
+
+" Interactive elements
+syn keyword cssTagName details summary dialog
+
+" Scripting
+syn keyword cssTagName template canvas

after/syntax/css/html5-new-elements.vim

@@ -1,2 +0,0 @@
-" HTML5 new elements
-syn keyword section article aside hgroup header footer nav figure figcaption video audio source embed mark progress meter time ruby rt rp bdi wbr canvas command details summary datalist keygen output

after/syntax/css/media-queries.vim

@@ -1,2 +0,0 @@
-syn region cssMediaType start='(' end=')' contains=css.*Attr,css.*Prop,cssComment,cssValue.*,cssColor,cssURL,cssImportant,cssError,cssStringQ,cssStringQQ,cssFunction,cssUnicodeEscape nextgroup=cssMediaComma,cssMediaAnd,cssMediaBlock skipwhite skipnl
-syn match cssMediaComma "and" nextgroup=cssMediaType skipwhite skipnl

after/syntax/css/selectors4.vim

@@ -0,0 +1,9 @@
+syn match cssSelectorOp "[|]"
+syn keyword cssPseudoClassId contained scope current past future default valid invalid required optional blank
+syn match cssPseudoClassId contained "\<\(any\|local\)-link\>"
+syn match cssPseudoClassId contained "\<read-\(only\|write\)\>"
+syn match cssPseudoClassId contained "\<placeholder-shown\>"
+syn match cssPseudoClassId contained "\<\(in\|out-of\)-range\>"
+syn match cssPseudoClassId contained "\<user-error\>"
+syn match cssPseudoClassId contained "\<\(active\|valid\|invalid\)-drop-target\>"
+syn region cssPseudoClassLang matchgroup=cssPseudoClassId start=":\(matches\|dir\|local-link\|current\|nth\(-last\)\=-\(match\|column\)\|column\)(" end=")" oneline

after/syntax/html.vim

@@ -0,0 +1,48 @@
+syn include @htmlCss syntax/css/html5-elements.vim
+syn include @htmlCss syntax/css/compositing-1.vim
+syn include @htmlCss syntax/css/css3-align.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-cascade.vim
+syn include @htmlCss syntax/css/css3-colors.vim
+" syn include @htmlCss syntax/css/css3-conditional.vim
+syn include @htmlCss syntax/css/css3-content.vim
+syn include @htmlCss syntax/css/css3-exclusions.vim
+syn include @htmlCss syntax/css/css3-fonts.vim
+syn include @htmlCss syntax/css/css3-gcpm.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-marquee.vim
+" syn include @htmlCss syntax/css/css3-mediaqueries.vim
+syn include @htmlCss syntax/css/css3-multicol.vim
+syn include @htmlCss syntax/css/css3-page.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-sizing.vim
+syn include @htmlCss syntax/css/css3-speech.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/css-counter-styles-3.vim
+syn include @htmlCss syntax/css/css-display-3.vim
+syn include @htmlCss syntax/css/css-flexbox-1.vim
+syn include @htmlCss syntax/css/css-grid-1.vim
+syn include @htmlCss syntax/css/css-line-grid-1.vim
+syn include @htmlCss syntax/css/css-lists-3.vim
+syn include @htmlCss syntax/css/css-masking-1.vim
+syn include @htmlCss syntax/css/css-overflow-3.vim
+syn include @htmlCss syntax/css/css-scoping-1.vim
+syn include @htmlCss syntax/css/css-shapes-1.vim
+syn include @htmlCss syntax/css/css-text-3.vim
+syn include @htmlCss syntax/css/css-text-decor-3.vim
+syn include @htmlCss syntax/css/css-variables.vim
+syn include @htmlCss syntax/css/css-will-change-1.vim
+syn include @htmlCss syntax/css/css-writing-modes-3.vim
+syn include @htmlCss syntax/css/selectors4.vim

after/syntax/scss.vim

@@ -0,0 +1,3 @@
+runtime! syntax/css/*.vim
+syn clear cssMediaBlock
+syn region cssMediaBlock contained transparent matchgroup=cssBraces start='{' end='}' contains=TOP

test/test.css

@@ -0,0 +1,611 @@
+.align {
+  justify-self: safe;
+  justify-content: true;
+  justify-items: self-start;
+  align-self: self-end;
+  align-content: flex-start;
+  align-items: flex-end;
+  display: space-around;
+  display: space-between;
+  display: space-evenly;
+}
+
+.animations {
+  animation: forwards;
+  animation-delay: backwards;
+  animation-direction: running;
+  animation-duration: paused;
+  animation-fill-mode: alternate-reverse;
+  animation-iteration-count: auto;
+  animation-name: auto;
+  animation-play-state: auto;
+  animation-timing-function: auto;
+}
+
+.background {
+  background-clip: space;
+  background-origin: round;
+  background-size: local;
+  border-image: fill;
+  border-image-source: stretch;
+  border-image-slice: clone;
+  border-image-width: slice;
+  border-image-outset: padding-box;
+  border-image-repeat: border-box;
+  border-radius: content-box;
+  border-top-right-radius: auto;
+  border-bottom-right-radius: auto;
+  border-bottom-left-radius: auto;
+  border-top-left-radius: auto;
+  box-shadow: auto;
+}
+
+.box {
+  overflow-style: scrollbar;
+  overflow-x: panner;
+  overflow-y: move;
+  rotation-point: marquee;
+  display: ruby;
+  display: ruby-base;
+  display: ruby-text;
+  display: ruby-base-group;
+  display: ruby-text-group;
+  display: no-display;
+  display: no-content;
+}
+
+.break {
+  break-after: any;
+  break-before: auto;
+  break-inside: auto;
+  box-decoration-break: auto;
+}
+
+.cascade {
+  all: unset;
+}
+
+.colors {
+  opacity: rgba(0, 0, 0, 1);
+  display: hsla(0, 0, 0, 1);
+  display: currentColor;
+}
+
+.compositing {
+  mix-blend-mode: multiply;
+  isolation: screen;
+  background-blend-mode: overlay;
+  display: darken;
+  display: lighten;
+  display: color-dodge;
+  display: color-burn;
+  display: hard-light;
+  display: soft-light;
+  display: difference;
+  display: exclusion;
+  display: hue;
+  display: saturation;
+  display: color;
+  display: luminosity;
+}
+
+.content {
+  move-to: inhibit;
+  page-policy: here;
+  display: first;
+  display: last;
+}
+
+.counter-styles {
+  negative: disclosure-open;
+  prefix: disclosure-closed;
+  suffix: simp-chinese-informal;
+  range: simp-chinese-formal;
+  pad: trad-chinese-informal;
+  fallback: trad-chinese-formal;
+  symbols: ethiopic-numeric;
+  additive-symbols: symbols("*" "\2020" "\2021" "\A7");
+  speak-as: auto;
+}
+
+.display {
+  display-inside: block-level;
+  display-outside: inline-level;
+  display-extras: inline-list-item;
+  display-box: contents;
+}
+
+.exclusions {
+  wrap-flow: minimum;
+  wrap-through: maximum;
+}
+
+.flexbox {
+  flex-direction: flex;
+  flex-wrap: inline-flex;
+  flex-flow: row;
+  order: row-reverse;
+  flex: column-reverse;
+  flex-grow: wrap;
+  flex-shrink: wrap-reverse;
+  flex-basis: auto;
+}
+
+.fonts {
+  font-feature-settings: common-ligatures;
+  font-kerning: no-common-ligatures;
+  font-language-override: discretionary-ligatures;
+  font-synthesis: no-discretionary-ligatures;
+  font-variant-alternates: historical-ligatures;
+  font-variant-caps: no-historical-ligatures;
+  font-variant-east-asian: contextual;
+  font-variant-ligatures: no-contextual;
+  font-variant-numeric: stylistic(feature-value-name);
+  font-variant-position: historical-forms;
+  display: styleset(feature-value-name #);
+  display: character-variant(feature-vlue-name #);
+  display: swash(feature-value-name);
+  display: ornaments(feature-value-name);
+  display: annotation(feature-value-name);
+  display: all-small-caps;
+  display: petite-caps;
+  display: all-petite-caps;
+  display: unicase;
+  display: titling-caps;
+  display: lining-nums;
+  display: oldstyle-nums;
+  display: proportional-nums;
+  display: tabular-nums;
+  display: diagonal-fractions;
+  display: stacked-fractions;
+  display: ordinal;
+  display: slashed-zero;
+  display: jis78;
+  display: jis83;
+  display: jis90;
+  display: jis04;
+  display: simplified;
+  display: traditional;
+  display: proportional-width;
+}
+
+.gcpm {
+  bleed: target-counter(attr(href, url), page, decimal);
+  marks: target-text(attr(href), content());
+  bookmark-label: open;
+  bookmark-level: closed;
+  bookmark-state: target-text(attr(href), content());
+  bookmark-target: crop;
+  float-offset: cross;
+  string-set: auto;
+}
+
+.grid-layout {
+  grid-template-columns: grid;
+  grid-template-rows: inline-grid;
+  grid-template-areas: minmax(0, 1);
+  grid-template: repeat(4);
+  grid-auto-columns: 0.2fr;
+  grid-auto-rows: subgrid;
+  grid-auto-flow: rows;
+  grid-auto-position: columns;
+  grid: dense;
+  grid-row-start: span;
+  grid-column-start: auto;
+  grid-row-end: auto;
+  grid-column-end: auto;
+  grid-column: auto;
+  grid-row: auto;
+  grid-area: auto;
+}
+
+.hyperlinks {
+  target: current;
+  target-name: new;
+  target-new: modal;
+  target-position: window;
+  display: tab;
+  display: front;
+  display: back;
+}
+
+.images {
+  object-fit: contain;
+  object-position: cover;
+  image-resolution: snap;
+  image-orientation: scale-down;
+  display: from-image;
+  display: image("sprite.svg#xywh=40,0,20,20");
+  display: linear-gradient(to bottom, yellow, blue);
+  display: radial-gradient(farthest-corner at 50% 50%, yellow, green);
+  display: repeating-linear-gradient(to bottom, yellow, blue);
+  display: repeating-radial-gradient(farthest-corner at 50% 50%, yellow, green);
+}
+
+.layout::slot(b) {
+  display: same;
+}
+
+.line-grid {
+  line-grid: create;
+  line-snap: half-border;
+  line-slack: rounddown(1em);
+  box-snap: roundup(1em);
+  display: 10gd;
+}
+
+.linebox {
+  alignment-adjust: central;
+  alignment-baseline: mathematical;
+  baseline-shift: before-edge;
+  dominate-baseline: after-edge;
+  drop-initial-after-adjust: text-before-edge;
+  drop-initial-after-align: text-after-edge;
+  drop-initial-before-adjust: use-script;
+  drop-initial-before-align: caps-height;
+  drop-initial-size: exclude-ruby;
+  drop-initial-value: include-ruby;
+  inline-box-align: consider-shift;
+  line-stacking: disregard-shift;
+  line-stacking-ruby: inline-line-height;
+  line-stacking-shift: block-line-height;
+  line-stacking-strategy: max-height;
+  text-height: grid-height;
+  display: font-size;
+  display: text-size;
+  display: max-size;
+}
+
+.lists::marker {
+  marker-side: marker;
+  counter-set: list-container;
+  display: counters(list-item, '.');
+}
+
+.marquee {
+  marquee-direction: forward;
+  marquee-play-count: reverse;
+  marquee-speed: infinite;
+  marquee-style: slide;
+  display: alternate;
+  display: marquee-line;
+  display: marquee-block;
+}
+
+.masking {
+  mask-image: alpha;
+  mask-source-type: luminance;
+  mask-repeat: no-clip;
+  mask-position: nonzero;
+  mask-clip: evenodd;
+  mask-origin: auto;
+  mask-size: auto;
+  mask: auto;
+  mask-type: auto;
+  mask-box-image-source: auto;
+  mask-box-image-slice: auto;
+  mask-box-image-width: auto;
+  mask-box-image-outset: auto;
+  mask-box-image-repeat: auto;
+  mask-box-image: auto;
+  clip-path: auto;
+  clip-rule: auto;
+}
+
+@media screen and (min-width: 999px) {
+  .mediaqueries {
+    display: auto;
+  }
+}
+
+.multicol {
+  columns: column;
+  column-count: balance;
+  column-fill: avoid-column;
+  column-gap: auto;
+  column-rule: auto;
+  column-rule-color: auto;
+  column-rule-style: auto;
+  column-rule-width: auto;
+  column-span: auto;
+  column-width: auto;
+}
+
+.overflow {
+  max-lines: paged-x;
+  display: paged-y;
+  display: paged-x-controls;
+  display: paged-y-controls;
+  display: fragments;
+}
+
+.page {
+  display: avoid-page;
+  display: page;
+  display: recto;
+  display: verso;
+}
+
+.preslev {
+  presentation-level: increment;
+}
+
+.regions:region {
+  flow-into: element;
+  flow-from: content;
+  region-fragment: break;
+  display: region;
+  display: avoid-region;
+}
+
+.ruby {
+  ruby-merge: ruby-text-container;
+  ruby-align: inter-character;
+  ruby-position: ruby-base-container;
+}
+
+@scope .scoping {
+  div {
+    display: auto;
+  }
+}
+
+.scoping:scope-context div,
+.scoping:host,
+.scping:host(.foo),
+.scoping:host-context,
+.scoping::shadow,
+.scoping::content,
+.scoping /deep/ span {
+  display: auto;
+}
+
+.selectors3:target,
+.selectors3:enabled,
+.selectors3:disabled,
+.selectors3:checked,
+.selectors3:indeterminate,
+.selectors3:root,
+.selectors3:empty,
+.selectors3:last-child,
+.selectors3:last-of-type,
+.selectors3:first-of-type,
+.selectors3:only-child,
+.selectors3:only-of-type,
+.selectors3:nth-child(2n+1),
+.selectors3:nth-last-child(-n+2),
+.selectors3:nth-of-type(2n+1),
+.selectors3:nth-last-of-type(n+2),
+.selectors3:not([DISABLED]) {
+  display: auto;
+}
+
+.selectors4 | h1,
+.selectors4:scope,
+.selectors4:current,
+.selectors4:past,
+.selectors4:future,
+.selectors4:default,
+.selectors4:valid,
+.selectors4:invalid,
+.selectors4:required,
+.selectors4:optional,
+.selectors4:blank,
+.selectors4:any-link,
+.selectors4:local-link,
+.selectors4:read-only,
+.selectors4:read-write,
+.selectors4:placeholder-shown,
+.selectors4:in-range,
+.selectors4:out-of-range,
+.selectors4:user-error,
+.selectors4:active-drop-target,
+.selectors4:valid-drop-target,
+.selectors4:invalid-drop-target,
+.selectors3:matches(:hover, :focus),
+.selectors4:dir(ltr),
+.selectors4:local-link(0),
+.selectors4:current(p, li, dt, dd),
+.selectors4:nth-match(2n+1),
+.selectors4:nth-last-match(-n+2),
+.selectors4:nth-column(2n+1),
+.selectors4:nth-last-column(-n+2),
+.selectors4:column(p, li, dt, dd) {
+  display: auto;
+}
+
+.shapes {
+  shape-outside: margin-box;
+  shape-image-threshold: inset(50% 50% 50% 50%);
+  shape-margin: circle(100px 50px 100px);
+  display: ellipse(0 0 250px 100px);
+  display: polygon(0 0, 100% 100%, 0 100%);
+}
+
+.sizing {
+  display: max-content;
+  display: fit-content;
+  display: fill-available;
+  display: repudiate-floats;
+  display: contain-floats;
+}
+
+.speech {
+  voice-volume: 10dB;
+  voice-balance: literal-punctuation;
+  rest-before: no-punctuation;
+  rest-after: x-weak;
+  rest: weak;
+  voice-rate: strong;
+  voice-pitch: x-strong;
+  voice-range: young;
+  voice-stress: old;
+  voice-duration: neutral;
+  display: preserve;
+  display: 10st;
+  display: moderate;
+  display: reduced;
+}
+
+@supports (display: auto) or
+  (display: auto) not
+  (display: auto) {
+    .supports {
+      display: auto;
+    }
+}
+
+.text {
+  hyphens: manual;
+  line-break: loose;
+  overflow-wrap: strict;
+  tab-size: match-parent;
+  display: hanging;
+  display: each-line;
+  display: full-width;
+}
+
+.text-decor-3 {
+  text-decoration-color: filled;
+  text-decoration-line: dot;
+  text-decoration-skip: triangle;
+  text-decoration-style: sesame;
+  text-emphasis: objects;
+  text-emphasis-color: ink;
+  text-emphasis-position: edges;
+  text-emphasis-style: wavy;
+  display: alphabetic;
+  display: spaces;
+  display: box-decoration;
+  display: under;
+  display: over;
+}
+
+.transforms {
+  backface-visibility: flat;
+  perspective: preserve-3d;
+  perspective-origin: matrix(1);
+  transform: matrix3d(1);
+  transform-origin: translate(1);
+  transform-style: translate3d(1);
+  display: translateX(1);
+  display: translateY(1);
+  display: translateZ(1);
+  display: scale(1);
+  display: scale3d(1);
+  display: scaleX(1);
+  display: scaleY(1);
+  display: scaleZ(1);
+  display: rotate(1);
+  display: rotate3d(1);
+  display: rotateX(1);
+  display: rotateY(1);
+  display: rotateZ(1);
+  display: skew(1);
+  display: skewX(1);
+  display: skewY(1);
+  display: perspective(1);
+}
+
+.transitions {
+  transition: linear;
+  transition-property: ease;
+  transition-duration: ease-in;
+  transition-timing-function: ease-out;
+  transition-delay: ease-in-out;
+  display: step-start;
+  display: step-end;
+  display: steps(1, start);
+  display: cubic-bezier(0.25, 0.1, 0.25, 1.0);
+}
+
+.ui {
+  icon: active;
+  resize: inactive;
+  box-sizing: disabled;
+  ime-mode: root;
+  nav-index: horizontal;
+  nav-up: vertical;
+  nav-right: clip;
+  nav-down: ellipsis;
+  nav-left: auto;
+  outline-offset: auto;
+}
+
+.values {
+  display: 1ch;
+  display: 1rem;
+  display: 1vw;
+  display: 1vh;
+  display: 1vmin;
+  display: 1turn;
+  display: 1dpi;
+  display: 1dpcm;
+  display: 1dppx;
+  display: calc(100%/3 - 2*1em - 2*1px);
+  display: toggle(italic, normal);
+  display: initial;
+}
+
+.variables {
+  var-foo: var(foo);
+}
+
+.will-change {
+  will-change: scroll-position;
+}
+
+.writing-modes {
+  text-orientation: before;
+  text-combine-horizontal: after;
+  writing-mode: isolate;
+  display: isolate;
+  display: plaintext;
+  display: mixed;
+  display: upright;
+  display: sideways;
+  display: sideways-right;
+  display: sideways-left;
+  display: use-glyph-orientation;
+  display: horizontal-tb;
+  display: vertical-rl;
+  display: vertical-lr;
+}
+
+.html5-elements,
+article,
+section,
+nav,
+aside,
+header,
+footer,
+figure,
+figcaption,
+main,
+data,
+time,
+mark,
+ruby,
+rb,
+rt,
+rtc,
+rp,
+bdi,
+wbr,
+embed,
+video,
+audio,
+source,
+track,
+datalist,
+keygen,
+output,
+progress,
+meter,
+details,
+summary,
+dialog,
+template,
+canvas {
+  display: auto;
+}

test/test.html

@@ -0,0 +1,629 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+
+    <title>vim-css3-syntax</title>
+
+    <link rel="stylesheet" href="http://hail2u.net/styles/natural.min.css">
+    <style>
+      .align {
+        justify-self: safe;
+        justify-content: true;
+        justify-items: self-start;
+        align-self: self-end;
+        align-content: flex-start;
+        align-items: flex-end;
+        display: space-around;
+        display: space-between;
+        display: space-evenly;
+      }
+
+      .animations {
+        animation: forwards;
+        animation-delay: backwards;
+        animation-direction: running;
+        animation-duration: paused;
+        animation-fill-mode: alternate-reverse;
+        animation-iteration-count: auto;
+        animation-name: auto;
+        animation-play-state: auto;
+        animation-timing-function: auto;
+      }
+
+      .background {
+        background-clip: space;
+        background-origin: round;
+        background-size: local;
+        border-image: fill;
+        border-image-source: stretch;
+        border-image-slice: clone;
+        border-image-width: slice;
+        border-image-outset: padding-box;
+        border-image-repeat: border-box;
+        border-radius: content-box;
+        border-top-right-radius: auto;
+        border-bottom-right-radius: auto;
+        border-bottom-left-radius: auto;
+        border-top-left-radius: auto;
+        box-shadow: auto;
+      }
+
+      .box {
+        overflow-style: scrollbar;
+        overflow-x: panner;
+        overflow-y: move;
+        rotation-point: marquee;
+        display: ruby;
+        display: ruby-base;
+        display: ruby-text;
+        display: ruby-base-group;
+        display: ruby-text-group;
+        display: no-display;
+        display: no-content;
+      }
+
+      .break {
+        break-after: any;
+        break-before: auto;
+        break-inside: auto;
+        box-decoration-break: auto;
+      }
+
+      .cascade {
+        all: unset;
+      }
+
+      .colors {
+        opacity: rgba(0, 0, 0, 1);
+        display: hsla(0, 0, 0, 1);
+        display: currentColor;
+      }
+
+      .compositing {
+        mix-blend-mode: multiply;
+        isolation: screen;
+        background-blend-mode: overlay;
+        display: darken;
+        display: lighten;
+        display: color-dodge;
+        display: color-burn;
+        display: hard-light;
+        display: soft-light;
+        display: difference;
+        display: exclusion;
+        display: hue;
+        display: saturation;
+        display: color;
+        display: luminosity;
+      }
+
+      .content {
+        move-to: inhibit;
+        page-policy: here;
+        display: first;
+        display: last;
+      }
+
+      .counter-styles {
+        negative: disclosure-open;
+        prefix: disclosure-closed;
+        suffix: simp-chinese-informal;
+        range: simp-chinese-formal;
+        pad: trad-chinese-informal;
+        fallback: trad-chinese-formal;
+        symbols: ethiopic-numeric;
+        additive-symbols: symbols("*" "\2020" "\2021" "\A7");
+        speak-as: auto;
+      }
+
+      .display {
+        display-inside: block-level;
+        display-outside: inline-level;
+        display-extras: inline-list-item;
+        display-box: contents;
+      }
+
+      .exclusions {
+        wrap-flow: minimum;
+        wrap-through: maximum;
+      }
+
+      .flexbox {
+        flex-direction: flex;
+        flex-wrap: inline-flex;
+        flex-flow: row;
+        order: row-reverse;
+        flex: column-reverse;
+        flex-grow: wrap;
+        flex-shrink: wrap-reverse;
+        flex-basis: auto;
+      }
+
+      .fonts {
+        font-feature-settings: common-ligatures;
+        font-kerning: no-common-ligatures;
+        font-language-override: discretionary-ligatures;
+        font-synthesis: no-discretionary-ligatures;
+        font-variant-alternates: historical-ligatures;
+        font-variant-caps: no-historical-ligatures;
+        font-variant-east-asian: contextual;
+        font-variant-ligatures: no-contextual;
+        font-variant-numeric: stylistic(feature-value-name);
+        font-variant-position: historical-forms;
+        display: styleset(feature-value-name #);
+        display: character-variant(feature-vlue-name #);
+        display: swash(feature-value-name);
+        display: ornaments(feature-value-name);
+        display: annotation(feature-value-name);
+        display: all-small-caps;
+        display: petite-caps;
+        display: all-petite-caps;
+        display: unicase;
+        display: titling-caps;
+        display: lining-nums;
+        display: oldstyle-nums;
+        display: proportional-nums;
+        display: tabular-nums;
+        display: diagonal-fractions;
+        display: stacked-fractions;
+        display: ordinal;
+        display: slashed-zero;
+        display: jis78;
+        display: jis83;
+        display: jis90;
+        display: jis04;
+        display: simplified;
+        display: traditional;
+        display: proportional-width;
+      }
+
+      .gcpm {
+        bleed: target-counter(attr(href, url), page, decimal);
+        marks: target-text(attr(href), content());
+        bookmark-label: open;
+        bookmark-level: closed;
+        bookmark-state: target-text(attr(href), content());
+        bookmark-target: crop;
+        float-offset: cross;
+        string-set: auto;
+      }
+
+      .grid-layout {
+        grid-template-columns: grid;
+        grid-template-rows: inline-grid;
+        grid-template-areas: minmax(0, 1);
+        grid-template: repeat(4);
+        grid-auto-columns: 0.2fr;
+        grid-auto-rows: subgrid;
+        grid-auto-flow: rows;
+        grid-auto-position: columns;
+        grid: dense;
+        grid-row-start: span;
+        grid-column-start: auto;
+        grid-row-end: auto;
+        grid-column-end: auto;
+        grid-column: auto;
+        grid-row: auto;
+        grid-area: auto;
+      }
+
+      .hyperlinks {
+        target: current;
+        target-name: new;
+        target-new: modal;
+        target-position: window;
+        display: tab;
+        display: front;
+        display: back;
+      }
+
+      .images {
+        object-fit: contain;
+        object-position: cover;
+        image-resolution: snap;
+        image-orientation: scale-down;
+        display: from-image;
+        display: image("sprite.svg#xywh=40,0,20,20");
+        display: linear-gradient(to bottom, yellow, blue);
+        display: radial-gradient(farthest-corner at 50% 50%, yellow, green);
+        display: repeating-linear-gradient(to bottom, yellow, blue);
+        display: repeating-radial-gradient(farthest-corner at 50% 50%, yellow, green);
+      }
+
+      .layout::slot(b) {
+        display: same;
+      }
+
+      .line-grid {
+        line-grid: create;
+        line-snap: half-border;
+        line-slack: rounddown(1em);
+        box-snap: roundup(1em);
+        display: 10gd;
+      }
+
+      .linebox {
+        alignment-adjust: central;
+        alignment-baseline: mathematical;
+        baseline-shift: before-edge;
+        dominate-baseline: after-edge;
+        drop-initial-after-adjust: text-before-edge;
+        drop-initial-after-align: text-after-edge;
+        drop-initial-before-adjust: use-script;
+        drop-initial-before-align: caps-height;
+        drop-initial-size: exclude-ruby;
+        drop-initial-value: include-ruby;
+        inline-box-align: consider-shift;
+        line-stacking: disregard-shift;
+        line-stacking-ruby: inline-line-height;
+        line-stacking-shift: block-line-height;
+        line-stacking-strategy: max-height;
+        text-height: grid-height;
+        display: font-size;
+        display: text-size;
+        display: max-size;
+      }
+
+      .lists::marker {
+        display: auto;
+      }
+
+      .marquee {
+        marquee-direction: forward;
+        marquee-play-count: reverse;
+        marquee-speed: infinite;
+        marquee-style: slide;
+        display: alternate;
+        display: marquee-line;
+        display: marquee-block;
+      }
+
+      .masking {
+        mask-image: alpha;
+        mask-source-type: luminance;
+        mask-repeat: no-clip;
+        mask-position: nonzero;
+        mask-clip: evenodd;
+        mask-origin: auto;
+        mask-size: auto;
+        mask: auto;
+        mask-type: auto;
+        mask-box-image-source: auto;
+        mask-box-image-slice: auto;
+        mask-box-image-width: auto;
+        mask-box-image-outset: auto;
+        mask-box-image-repeat: auto;
+        mask-box-image: auto;
+        clip-path: auto;
+        clip-rule: auto;
+      }
+
+      @media screen and (min-width: 999px) {
+        .mediaqueries {
+          display: auto;
+        }
+      }
+
+      .multicol {
+        columns: column;
+        column-count: balance;
+        column-fill: avoid-column;
+        column-gap: auto;
+        column-rule: auto;
+        column-rule-color: auto;
+        column-rule-style: auto;
+        column-rule-width: auto;
+        column-span: auto;
+        column-width: auto;
+      }
+
+      .overflow {
+        max-lines: paged-x;
+        display: paged-y;
+        display: paged-x-controls;
+        display: paged-y-controls;
+        display: fragments;
+      }
+
+      .page {
+        display: avoid-page;
+        display: page;
+        display: recto;
+        display: verso;
+      }
+
+      .preslev {
+        presentation-level: increment;
+      }
+
+      .regions:region {
+        flow-into: element;
+        flow-from: content;
+        region-fragment: break;
+        display: region;
+        display: avoid-region;
+      }
+
+      .ruby {
+        ruby-merge: ruby-text-container;
+        ruby-align: inter-character;
+        ruby-position: ruby-base-container;
+      }
+
+      @scope .scoping {
+        div {
+          display: auto;
+        }
+      }
+
+      .scoping:scope-context div,
+      .scoping:host,
+      .scping:host(.foo),
+      .scoping:host-context,
+      .scoping::shadow,
+      .scoping::content,
+      .scoping /deep/ span {
+        display: auto;
+      }
+
+      .selectors3:target,
+      .selectors3:enabled,
+      .selectors3:disabled,
+      .selectors3:checked,
+      .selectors3:indeterminate,
+      .selectors3:root,
+      .selectors3:empty,
+      .selectors3:last-child,
+      .selectors3:last-of-type,
+      .selectors3:first-of-type,
+      .selectors3:only-child,
+      .selectors3:only-of-type,
+      .selectors3:nth-child(2n+1),
+      .selectors3:nth-last-child(-n+2),
+      .selectors3:nth-of-type(2n+1),
+      .selectors3:nth-last-of-type(n+2),
+      .selectors3:not([DISABLED]) {
+        display: auto;
+      }
+
+      .selectors4 | h1,
+      .selectors4:scope,
+      .selectors4:current,
+      .selectors4:past,
+      .selectors4:future,
+      .selectors4:default,
+      .selectors4:valid,
+      .selectors4:invalid,
+      .selectors4:required,
+      .selectors4:optional,
+      .selectors4:blank,
+      .selectors4:any-link,
+      .selectors4:local-link,
+      .selectors4:read-only,
+      .selectors4:read-write,
+      .selectors4:placeholder-shown,
+      .selectors4:in-range,
+      .selectors4:out-of-range,
+      .selectors4:user-error,
+      .selectors4:active-drop-target,
+      .selectors4:valid-drop-target,
+      .selectors4:invalid-drop-target,
+      .selectors3:matches(:hover, :focus),
+      .selectors4:dir(ltr),
+      .selectors4:local-link(0),
+      .selectors4:current(p, li, dt, dd),
+      .selectors4:nth-match(2n+1),
+      .selectors4:nth-last-match(-n+2),
+      .selectors4:nth-column(2n+1),
+      .selectors4:nth-last-column(-n+2),
+      .selectors4:column(p, li, dt, dd) {
+        display: auto;
+      }
+
+      .shapes {
+        shape-outside: margin-box;
+        shape-image-threshold: inset(50% 50% 50% 50%);
+        shape-margin: circle(100px 50px 100px);
+        display: ellipse(0 0 250px 100px);
+        display: polygon(0 0, 100% 100%, 0 100%);
+      }
+
+      .sizing {
+        display: max-content;
+        display: fit-content;
+        display: fill-available;
+        display: repudiate-floats;
+        display: contain-floats;
+      }
+
+      .speech {
+        voice-volume: 10dB;
+        voice-balance: literal-punctuation;
+        rest-before: no-punctuation;
+        rest-after: x-weak;
+        rest: weak;
+        voice-rate: strong;
+        voice-pitch: x-strong;
+        voice-range: young;
+        voice-stress: old;
+        voice-duration: neutral;
+        display: preserve;
+        display: 10st;
+        display: moderate;
+        display: reduced;
+      }
+
+      @supports (display: auto) or
+        (display: auto) not
+        (display: auto) {
+        .supports {
+          display: auto;
+        }
+      }
+
+      .text {
+        hyphens: manual;
+        line-break: loose;
+        overflow-wrap: strict;
+        tab-size: match-parent;
+        display: hanging;
+        display: each-line;
+        display: full-width;
+      }
+
+      .text-decor-3 {
+        text-decoration-color: filled;
+        text-decoration-line: dot;
+        text-decoration-skip: triangle;
+        text-decoration-style: sesame;
+        text-emphasis: objects;
+        text-emphasis-color: ink;
+        text-emphasis-position: edges;
+        text-emphasis-style: wavy;
+        display: alphabetic;
+        display: spaces;
+        display: box-decoration;
+        display: under;
+        display: over;
+      }
+
+      .transforms {
+        backface-visibility: flat;
+        perspective: preserve-3d;
+        perspective-origin: matrix(1);
+        transform: matrix3d(1);
+        transform-origin: translate(1);
+        transform-style: translate3d(1);
+        display: translateX(1);
+        display: translateY(1);
+        display: translateZ(1);
+        display: scale(1);
+        display: scale3d(1);
+        display: scaleX(1);
+        display: scaleY(1);
+        display: scaleZ(1);
+        display: rotate(1);
+        display: rotate3d(1);
+        display: rotateX(1);
+        display: rotateY(1);
+        display: rotateZ(1);
+        display: skew(1);
+        display: skewX(1);
+        display: skewY(1);
+        display: perspective(1);
+      }
+
+      .transitions {
+        transition: linear;
+        transition-property: ease;
+        transition-duration: ease-in;
+        transition-timing-function: ease-out;
+        transition-delay: ease-in-out;
+        display: step-start;
+        display: step-end;
+        display: steps(1, start);
+        display: cubic-bezier(0.25, 0.1, 0.25, 1.0);
+      }
+
+      .ui {
+        icon: active;
+        resize: inactive;
+        box-sizing: disabled;
+        ime-mode: root;
+        nav-index: horizontal;
+        nav-up: vertical;
+        nav-right: clip;
+        nav-down: ellipsis;
+        nav-left: auto;
+        outline-offset: auto;
+      }
+
+      .values {
+        display: 1ch;
+        display: 1rem;
+        display: 1vw;
+        display: 1vh;
+        display: 1vmin;
+        display: 1turn;
+        display: 1dpi;
+        display: 1dpcm;
+        display: 1dppx;
+        display: calc(100%/3 - 2*1em - 2*1px);
+        display: toggle(italic, normal);
+        display: initial;
+      }
+
+      .variables {
+        var-foo: var(foo);
+      }
+
+      .will-change {
+        will-change: scroll-position;
+      }
+
+      .writing-modes {
+        text-orientation: before;
+        text-combine-horizontal: after;
+        writing-mode: isolate;
+        display: isolate;
+        display: plaintext;
+        display: mixed;
+        display: upright;
+        display: sideways;
+        display: sideways-right;
+        display: sideways-left;
+        display: use-glyph-orientation;
+        display: horizontal-tb;
+        display: vertical-rl;
+        display: vertical-lr;
+      }
+
+      .html5-elements,
+      article,
+      section,
+      nav,
+      aside,
+      header,
+      footer,
+      figure,
+      figcaption,
+      main,
+      data,
+      time,
+      mark,
+      ruby,
+      rb,
+      rt,
+      rtc,
+      rp,
+      bdi,
+      wbr,
+      embed,
+      video,
+      audio,
+      source,
+      track,
+      datalist,
+      keygen,
+      output,
+      progress,
+      meter,
+      details,
+      summary,
+      dialog,
+      template,
+      canvas {
+        display: auto;
+      }
+    </style>
+
+    <!--[if lt IE 9]><script src="http://hail2u.net/scripts/html5shiv.min.js"></script><![endif]-->
+  </head>
+  <body>
+    <header>
+      <h1>vim-css3-syntax</h1>
+    </header>
+  </body>
+</html>