Version 0.9

Spec URL changes to: http://www.w3.org/TR/css-counter-styles-3/

README.md

@@ -1,103 +1,38 @@
 vim-css3-syntax
 ===============
 
-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
 ------------
 
-Download from GitHub, 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://github.com/hail2u/vim-css3-syntax.git
 
 
-### With HTML file
+NOTES
+-----
 
-Create `~/.vim/after/syntax/html.vim` and write these line:
+### Vendor Prefixes
 
-    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.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.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:
+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 seperate syntax plugin. Or, if you want to highlight prefixed properties or functions, `:highlight` and `:match` would help.
+These must be supported by seperate 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-]\+/
@@ -105,9 +40,59 @@ These must be supported by seperate syntax plugin. Or, if you want to highlight
 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.
+
+
 HISTORY
 -------
 
+### v0.9
+
+  * Add Compositing and Blending Level 1 features
+  * Add CSS Fonts Module Level 3 features
+  * Add CSS Speech Module features
+  * Add Selectors Level 4 features
+  * Split CSS Counter Styles Level 3 features from `css3-lists.vim`
+  * Follow spec updates
+  * Add missing values
+  * Add notes about CSS preprocessors
+  * Fix test
+  * Add version checking
+
+
+### v0.8
+
+  * Add CSS Masking Level 1 features
+  * Add CSS Shapes Module Level 1 features
+  * Follow spec updates
+  * Add missing properties
+  * Some minor bug fixes
+
+
+### v0.7
+
+  * Add CSS Conditional Rules Module Level 3 features
+  * Add CSS Intrinsic & Extrinsic Sizing Module Level 3 features
+  * Add CSS Cascading and Inheritance Level 3 features
+  * Add CSS Paged Media Module Level 3 features
+  * Add CSS Custom Properties for Cascading Variables Module Level 1 features
+  * Add CSS Overflow Module Level 3 features
+  * Seperate CSS Text Decoration Module Level 3 features
+  * Follow spec updates
+  * Bundle `after/syntax/html.vim` and `after/syntax/scss.vim`
+  * 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
@@ -118,6 +103,7 @@ HISTORY
   * Follow spec updates
   * Some minor bug fixes
 
+
 ### v0.4
 
   * Add CSS Fragmentation Module Level 3 features
@@ -159,3 +145,10 @@ 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-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-shapes-1.vim

@@ -0,0 +1,5 @@
+if !hlexists('cssShapesProp')
+  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
+endif

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-writing-modes-3.vim

@@ -0,0 +1,8 @@
+if !hlexists('cssWritingModeProp')
+  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\)\)\>"
+endif

after/syntax/css/css3-align.vim

@@ -1,5 +1,5 @@
 " TODO: create cssAlignProp group and cssAlignAttr group
 syn match cssFontProp contained "\<\(justify\|align\)-\(self\|content\|items\)\>"
-syn keyword cssFontAttr contained head foot true
-syn match cssFontAttr contained "\<flex-\(start\|end\)\>"
-syn match cssFontAttr contained "\<space-\(between\|around\)\>"
+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-box.vim

@@ -1,5 +1,5 @@
 syn match cssBoxProp contained "\<overflow-\(style\|x\|y\)\>"
 syn match cssBoxProp contained "\<rotation\(-point\)\=\>"
-syn keyword cssBoxAttr contained scrollbar panner move marquee
+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-cascade.vim

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

after/syntax/css/css3-conditional.vim

@@ -0,0 +1,4 @@
+" TODO: create cssSupports group and cssSupportsType group
+syn match cssMedia "@supports\>" nextgroup=cssMediaType skipwhite skipnl
+syn match cssMediaAnd "or" nextgroup=cssMediaType skipwhite skipnl
+syn match cssMediaAnd "not" nextgroup=cssMediaType skipwhite skipnl

after/syntax/css/css3-content.vim

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

after/syntax/css/css3-exclusions.vim

@@ -1,5 +1,3 @@
 " TODO: create cssExclusionsProp group and cssExclusionsAttr group
-syn match cssFontProp contained "\<shape-\(image-threshold\|inside\|outside\)\>"
-syn match cssFontProp contained "\<wrap\(-\(flow\|margin\|padding\|through\)\)\=\>"
-syn keyword cssFontAttr contained maximum
-syn match cssFontAttr contained "\<outside-shape\>"
+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

@@ -1,10 +1,6 @@
 syn region cssFunction contained matchgroup=cssFunctionName start="\<\(target-\(counter\|counters\|text\)\|symbols\)\s*(" end=")" oneline keepend
-syn keyword cssGeneratedContentProp contained bleed hyphens marks
-syn match cssGeneratedContentProp contained "\<bookmark-\(lable\|level\|state\|target\)\>"
+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 "\<hyphenate-\(before\|character\|lines\|resource\)\>"
-syn match cssGeneratedContentProp contained "\<image-resolution\>"
 syn match cssGeneratedContentProp contained "\<string-set\>"
-syn keyword cssGeneratedContentAttr contained open closed manual crop cross
-syn match cssGeneratedContentAttr contained "\<no-limit\>"
-syn match cssGeneratedContentAttr contained "\<super-decimal\>"
+syn keyword cssGeneratedContentAttr contained open closed crop cross

after/syntax/css/css3-grid-layout.vim

@@ -1,4 +1,9 @@
 " TODO: create cssGridLayoutProp group and cssGridLayoutAttr group
-syn match cssFontProp contained "\<grid-\(cell\|\(column\|row\)\(-\(align\|sizing\|span\)\)\=\|columns\|flow\|rows\|template\)\>"
-syn keyword cssFontAttr contained grid rows
+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/css3-grid.vim

@@ -1,3 +0,0 @@
-" TODO: create cssGridProp group and cssValueGrid group
-syn match cssFontProp contained "\<grid-\(columns\|rows\)\>"
-syn match cssValueInteger contained "\d\+gr"

after/syntax/css/css3-images.vim

@@ -2,5 +2,6 @@
 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\|element\|\(repeating-\)\=\(linear\|radial\)-gradient\)\s*(" end=")" oneline keepend
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(image\|\(repeating-\)\=\(linear\|radial\)-gradient\)\s*(" end=")" oneline keepend

after/syntax/css/css3-lists.vim

@@ -1,18 +1 @@
-syn keyword cssGeneratedContentAttr contained box check diamond hyphen
-syn keyword cssGeneratedContentAttr contained syriac tamil
-syn match cssGeneratedContentAttr contained "\<\(lower\|upper\)-armenian\>"
-syn match cssGeneratedContentAttr contained "\<ethiopic-numeric\>"
-syn match cssGeneratedContentAttr contained "\<japanese-\(formal\|informal\)\>"
-syn match cssGeneratedContentAttr contained "\<\(simp\|trad\)-chinese-\(formal\|informal\)\>"
-syn keyword cssGeneratedContentAttr contained binary bengali cambodian devanagari gujarati gurmukhi kannada khmer lao malayalam mongolian myanmar octal oriya persian telugu tibetan thai urdu
-syn match cssGeneratedContentAttr contained "\<arabic-indic\>"
-syn match cssGeneratedContentAttr contained "\<\(lower\|upper\)-hexadecimal\>"
-syn keyword cssGeneratedContentAttr contained afar amharic oromo sidama somali tigre
-syn match cssGeneratedContentAttr contained "\<ethiopic\(-\(abegede\|abegede-am-et\|abegede-gez\|abegede-ti-er\|abegede-ti-et\|halehame-aa-er\|halehame-aa-et\|halehame-am-et\|halehame-gez\|halehame-om-et\|halehame-sid-et\|halehame-so-et\|halehame-ti-er\|halehame-ti-et\|halehame-tig\)\)\=\>"
-syn match cssGeneratedContentAttr contained "\<hangul\(-consonant\)\=\>"
-syn match cssGeneratedContentAttr contained "\<\(lower\|upper\)-norwegian\>"
-syn match cssGeneratedContentAttr contained "\<tigrinya-\(er\|er-abegede\|et\|et-abegede\)\>"
-syn keyword cssGeneratedContentAttr contained asterisks footnotes
-syn match cssGeneratedContentAttr contained "\<\(circled\|dotted\|double-circled\|filled-circled\|parenthesised\)-decimal\>"
-syn match cssGeneratedContentAttr contained "\<\(circled-\(lower\|upper\)\|parenthesised-lower\)-latin\>"
 syn keyword cssPseudoClassId contained marker

after/syntax/css/css3-marquee.vim

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

after/syntax/css/css3-multicol.vim

@@ -1,5 +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 match cssFontProp contained "\<column-\(count\|fill\|gap\|rule\(-\(color\|style\|width\)\)\=\|span\|width\)\>"
 syn keyword cssFontAttr contained page column balance
 syn match cssFontAttr contained "\<avoid-\(page\|column\)\>"

after/syntax/css/css3-page.vim

@@ -0,0 +1,2 @@
+" TODO: Add support CSS Paged Media Module Level 3
+" URL:  http://www.w3.org/TR/css3-page/

after/syntax/css/css3-regions.vim

@@ -1,6 +1,6 @@
 " TODO: create cssRegionsProp group and cssRegionsAttr group
 syn match cssFontProp contained "\<flow-\(from\|into\)\>"
-syn match cssFontProp contained "\<region-overflow\>"
-syn keyword cssFontAttr contained break
+syn match cssFontProp contained "\<region-fragment\>"
+syn keyword cssFontAttr contained element content break
 syn match cssFontAttr contained "\<\(avoid-\)\=region\>"
-syn match cssTagName "@region\>" nextgroup=cssDefinition
+syn region cssPseudoClassLang matchgroup=cssPseudoClassId start="::\=region(" end=")" oneline

after/syntax/css/css3-ruby.vim

@@ -1,5 +1,4 @@
 " TODO: create cssRubyProp group and cssRubyAttr group
-syn match cssFontProp contained "\<ruby-\(align\|overhang\|position\|span\)"
-syn keyword cssUIAttr contained start end
-syn match cssUIAttr contained "\<distribute-\(letter\|space\)\>"
-syn match cssUIAttr contained "\<line-edge\>"
+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

@@ -1,5 +1,8 @@
-syn keyword cssPseudoClassId contained target enabled disabled checked indeterminate root empty
+syn keyword cssPseudoClassId contained target scope current past future enabled disabled checked indeterminate default required optional root empty blank
+syn match cssPseudoClassId contained "\<\(any\|local\)-link\>"
+syn match cssPseudoClassId contained "\<\(in\|out-of\)-range\>"
+syn match cssPseudoClassId contained "\<read-\(only\|write\)\>"
 syn match cssPseudoClassId contained "\<first-of-type\>"
 syn match cssPseudoClassId contained "\<last-\(child\|of-type\)\>"
 syn match cssPseudoClassId contained "\<only-\(child\|of-type\)\>"
-syn region cssPseudoClassLang matchgroup=cssPseudoClassId start=":\(nth\(-last\)\=-\(child\|of-type\)\|not\)(" end=")" oneline
+syn region cssPseudoClassLang matchgroup=cssPseudoClassId start=":\(not\|matches\|current\|local-link\|nth\(-last\)\=-\(child\|of-type\|match\|column\)\|column\)(" 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-text.vim

@@ -1,17 +0,0 @@
-syn match cssTextProp contained "\<hanging-punctuation\>"
-syn match cssTextProp contained "\<line-break\>"
-syn match cssTextProp contained "\<overflow-wrap\>"
-syn match cssTextProp contained "\<tab-size\>"
-syn match cssTextProp contained "\<text-\(align-last\|autospace\|decoration\(-\(color\|line\|skip\|style\)\)\=\|emphasis\(-\(color\|position\|style\)\)\=\|justify\|shadow\|space-collapse\|underline-position\|wrap\)\>"
-syn match cssTextProp contained "\<word-break\>"
-syn keyword cssTextAttr contained loose strict start end blink objects spaces ink edges wavy filled open dot circle triangle sesame hanging distribute kashida preserve alphabetic
-syn match cssTextAttr contained "\<\(allow\|force\)-end\>"
-syn match cssTextAttr contained "\<keep-all\>"
-syn match cssTextAttr contained "\<match-parent\>"
-syn match cssTextAttr contained "\<double-circle\>"
-syn match cssTextAttr contained "\<each-line\>"
-syn match cssTextAttr contained "\<inter-\(word\|ideograph\|cluster\)\>"
-syn match cssTextAttr contained "\<preserve-breaks\>"
-syn match cssTextAttr contained "\<full-\(width\|size-kana\)\>"
-syn match cssTextAttr contained "\<pre-\(wrap\|line\)\>"
-syn match cssTextAttr contained "\<break-\(all\|word\)\>"

after/syntax/css/css3-transitions.vim

@@ -1,6 +1,7 @@
-" TODO: create cssTransitionProp group and cssTransitionAttr group
-syn match cssFontProp contained "\<transition\(-\(property\|duration\|timing-function\|delay\)\)\=\>"
-syn keyword cssFontAttr contained IDENT 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
+if !hlexists('cssTransitionProp')
+  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
+endif

after/syntax/css/css3-ui.vim

@@ -2,6 +2,6 @@ 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\(-\(color\|offset\|style\|width\)\)\="
+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

@@ -1,6 +1,6 @@
-syn match cssValueLength contained "[-+]\=\d\+\(\.\d*\)\=\(ch\|rem\|vw\|vh\|vmin\)"
+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\|cycle\)\s*(" end=")" oneline keepend
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(calc\|toggle\)\s*(" end=")" oneline keepend
 syn keyword cssCommonAttr contained initial

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

@@ -1,8 +0,0 @@
-" TODO: create cssWritingModeProp group and cssWritingModeAttr group
-syn match cssFontProp contained "\<text-\(orientation\|combine-\(horizontal\|mode\)\)\>"
-syn match cssFontProp contained "\<writing-mode\>"
-syn keyword cssFontAttr contained before after numeric digits alpha latin alphanumeric isolate plaintext
-syn match cssFontAttr contained "\<\(\(min\|max\|fit\)-content\|fill-available\)\>"
-syn match cssFontAttr contained "\<\(\(no-\)\=compress\|use-glyphs\)\>"
-syn match cssFontAttr contained "\<\(mixed-right\|upright\|sideways\(-right\|-left\)\=\|use-glyph-orientation\)\>"
-syn match cssFontAttr contained "\<\(horizontal-tb\|vertical-\(rl\|lr\)\)\>"

after/syntax/css/html5-elements.vim

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

after/syntax/css/selectors4.vim

@@ -0,0 +1,5 @@
+syn match cssSelectorOp "[|]"
+syn match cssPseudoClassId contained "\<\(active\|valid\|invalid\)-drop-target\>"
+syn match cssPseudoClassId contained "\<placeholder-shown\>"
+syn match cssPseudoClassId contained "\<user-error\>"
+syn region cssPseudoClassLang matchgroup=cssPseudoClassId start=":dir(" end=")" oneline

after/syntax/html.vim

@@ -0,0 +1,44 @@
+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-flexbox.vim
+syn include @htmlCss syntax/css/css3-fonts.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-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-masking-1.vim
+syn include @htmlCss syntax/css/css-overflow-3.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-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,565 @@
+.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-decoration-break: 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: auto;
+  break-before: auto;
+  break-inside: 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;
+}
+
+.exclusions {
+  wrap-flow: minimum;
+  wrap-through: maximum;
+}
+
+.flexbox {
+  order: flex;
+  flex: row;
+  flex-basis: wrap;
+  flex-direction: inline-flex;
+  flex-flow: row-reverse;
+  flex-grow: column-reverse;
+  flex-shrink: wrap-reverse;
+  flex-wrap: 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;
+}
+
+.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: page;
+  column-count: column;
+  column-fill: balance;
+  column-gap: avoid-column;
+  column-rule: avoid-page;
+  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;
+}
+
+.preslev {
+  presentation-level: increment;
+}
+
+.regions:region(p),
+.regions::region(p) {
+  flow-from: break;
+  flow-into: region;
+  region-fragment: avoid-region;
+  display: element;
+  display: content;
+}
+
+.ruby {
+  ruby-merge: ruby-text-container;
+  ruby-align: inter-character;
+  ruby-position: ruby-base-container;
+}
+
+.selectors3:not([DISABLED]),
+.selectors3:matches(:hover, :focus),
+.selectors3:any-link,
+.selectors3:local-link,
+.selectors3:local-link(0),
+.selectors3:target,
+.selectors3:scope,
+.selectors3:current,
+.selectors3:current(p, li, dt, dd),
+.selectors3:past,
+.selectors3:future,
+.selectors3:enabled,
+.selectors3:disabled,
+.selectors3:checked,
+.selectors3:indeterminate,
+.selectors3:default,
+.selectors3:in-range,
+.selectors3:out-of-range,
+.selectors3:required,
+.selectors3:optional,
+.selectors3:read-only,
+.selectors3:read-write,
+.selectors3:root,
+.selectors3:empty,
+.selectors3:nth-child(2n+1),
+.selectors3:last-child,
+.selectors3:nth-last-child(-n+2),
+.selectors3:only-child,
+.selectors3:first-of-type,
+.selectors3:nth-of-type(2n+1),
+.selectors3:last-of-type,
+.selectors3:nth-last-of-type(n+2),
+.selectors3:only-of-type,
+.selectors3:nth-match(2n+1),
+.selectors3:nth-last-match(-n+2),
+.selectors3:column(p, li, dt, dd),
+.selectors3:nth-column(2n+1),
+.selectors3:nth-last-column(-n+2) {
+  display: auto;
+}
+
+foo | h1,
+.selectors4:dir(ltr),
+.selectors4:active-drop-target,
+.selectors4:valid-drop-target,
+.selectors4:invalid-drop-target,
+.selectors4:placeholder-shown,
+.selectors4:user-error {
+  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);
+}
+
+.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,
+template,
+article,
+section,
+nav,
+aside,
+hgroup,
+header,
+footer,
+figure,
+figcaption,
+main,
+data,
+time,
+mark,
+ruby,
+rt,
+rp,
+bdi,
+wbr,
+embed,
+video,
+audio,
+source,
+track,
+canvas,
+datalist,
+keygen,
+output,
+progress,
+meter,
+details,
+summary,
+menuitem,
+dialog {
+  display: auto;
+}

test/test.html

@@ -0,0 +1,585 @@
+<!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-decoration-break: 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: auto;
+        break-before: auto;
+        break-inside: 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;
+      }
+
+      .exclusions {
+        wrap-flow: minimum;
+        wrap-through: maximum;
+      }
+
+      .flexbox {
+        order: flex;
+        flex: row;
+        flex-basis: wrap;
+        flex-direction: inline-flex;
+        flex-flow: row-reverse;
+        flex-grow: column-reverse;
+        flex-shrink: wrap-reverse;
+        flex-wrap: 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;
+      }
+
+      .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: page;
+        column-count: column;
+        column-fill: balance;
+        column-gap: avoid-column;
+        column-rule: avoid-page;
+        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;
+      }
+
+      .preslev {
+        presentation-level: increment;
+      }
+
+      .regions:region(p),
+      .regions::region(p) {
+        flow-from: break;
+        flow-into: region;
+        region-fragment: avoid-region;
+        display: element;
+        display: content;
+      }
+
+      .ruby {
+        ruby-merge: ruby-text-container;
+        ruby-align: inter-character;
+        ruby-position: ruby-base-container;
+      }
+
+      .selectors3:not([DISABLED]),
+      .selectors3:matches(:hover, :focus),
+      .selectors3:any-link,
+      .selectors3:local-link,
+      .selectors3:local-link(0),
+      .selectors3:target,
+      .selectors3:scope,
+      .selectors3:current,
+      .selectors3:current(p, li, dt, dd),
+      .selectors3:past,
+      .selectors3:future,
+      .selectors3:enabled,
+      .selectors3:disabled,
+      .selectors3:checked,
+      .selectors3:indeterminate,
+      .selectors3:default,
+      .selectors3:in-range,
+      .selectors3:out-of-range,
+      .selectors3:required,
+      .selectors3:optional,
+      .selectors3:read-only,
+      .selectors3:read-write,
+      .selectors3:root,
+      .selectors3:empty,
+      .selectors3:nth-child(2n+1),
+      .selectors3:last-child,
+      .selectors3:nth-last-child(-n+2),
+      .selectors3:only-child,
+      .selectors3:first-of-type,
+      .selectors3:nth-of-type(2n+1),
+      .selectors3:last-of-type,
+      .selectors3:nth-last-of-type(n+2),
+      .selectors3:only-of-type,
+      .selectors3:nth-match(2n+1),
+      .selectors3:nth-last-match(-n+2),
+      .selectors3:column(p, li, dt, dd),
+      .selectors3:nth-column(2n+1),
+      .selectors3:nth-last-column(-n+2) {
+        display: auto;
+      }
+
+      foo | h1,
+      .selectors4:dir(ltr),
+      .selectors4:active-drop-target,
+      .selectors4:valid-drop-target,
+      .selectors4:invalid-drop-target,
+      .selectors4:placeholder-shown,
+      .selectors4:user-error {
+        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);
+      }
+
+      .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,
+      template,
+      article,
+      section,
+      nav,
+      aside,
+      hgroup,
+      header,
+      footer,
+      figure,
+      figcaption,
+      main,
+      data,
+      time,
+      mark,
+      ruby,
+      rt,
+      rp,
+      bdi,
+      wbr,
+      embed,
+      video,
+      audio,
+      source,
+      track,
+      canvas,
+      datalist,
+      keygen,
+      output,
+      progress,
+      meter,
+      details,
+      summary,
+      menuitem,
+      dialog {
+        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>