Merge pull request #29 from adelarsq/patch-1

spelling correction

README.md

@@ -1,15 +1,20 @@
 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
 ------------
 
+I **strongly** recommend to install this plugin on *Vim 7.4 or higher with
+default runtime files*.
+
+
 ### Manual Installation
 
-Download from GitHub, extract `vim-css3-syntax.tar.gz`, and copy the contents to your `~/.vim` directory.
+Download from GitHub, extract `vim-css3-syntax.tar.gz`, and copy the contents to
+your `~/.vim` directory.
 
 
 ### Installing with Git and pathogen
@@ -18,97 +23,61 @@ Download from GitHub, extract `vim-css3-syntax.tar.gz`, and copy the contents to
     $ git clone https://github.com/hail2u/vim-css3-syntax.git
 
 
-About Vendor Prefixes
----------------------
+NOTES
+-----
 
-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:
+### 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 seperate syntax plugins. Or, if you want to highlight prefixed properties or functions, `:highlight` and `:match` would help.
+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).
+These commands highlight vendor prefixed properties and functions instantly with
+cyan and bold (on gVim).
 
 
-HISTORY
--------
+### CSS Preprocessors: [Sass][2], [LESS][3], and [Stylus][4]
 
-### 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
+`vim-css3-syntax` supports Sass's SCSS syntax only. If you want to use this
+plugin with LESS, install [VIM-LESS][5]. Sass's indent syntax and Stylus are not
+supported.
 
 
-### v0.7
+### Media Queries
 
-  * 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
-  * Add CSS Exclusions and Shapes Module Level 3 features
-  * Add CSS Grid Layout features
-  * Add CSS Box Alignment features
-  * Add `gr` unit
-  * Follow spec updates
-  * Some minor bug fixes
-
-
-### v0.4
-
-  * Add CSS Fragmentation Module Level 3 features
-  * Fix a problem on pseudo-class and pseudo-element names inside @media block
-  * Fix a problem on media type and expression
-  * Add CSS Values and Units Module Level 3 features
-  * Follow spec updates
-  * Some minor bug fixes
-
-
-### v0.3
-
-  * Add CSS3 Presentation Levels Module features
-  * Add CSS3 Lists Module features
-  * Add CSS3 Generated and Replaced Content Module features
-  * Add CSS Template Layout Module features
-  * Add CSS Image Values and Replaced Content Module Level 3 features
-  * Fix a problem on class names inside @media block
-  * Some minor bug fixes
-
-
-### v0.2
-
-  * Almost all CSS3 features added
-
-
-### v0.1
-
-  * Initial release
+I drop Media Queries Level 3 support in v0.12.0. There is no easy way to support
+Media Queries properly with `after` syntax plugin like this one, sorry. If you
+want to highlight Media Queries correctly, you must update Vim to 7.4+ or
+install [JulesWang/css.vim][6].
 
 
 AUTHOR
@@ -121,3 +90,11 @@ 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
+[6]: https://github.com/JulesWang/css.vim

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,12 @@
+" TODO: create cssCounterStyleDescriptor for `@counter-style` descriptors
+syn region cssInclude start=/@counter-style\>/ end=/\ze{/ skipwhite skipnl contains=css.*Prop,css.*Attr,cssValueInteger,cssValueLength,cssMediaKeyword,cssVendor,cssIncludeKeyword,cssComment nextgroup=cssMediaBlock
+syn keyword cssGeneratedContentProp contained system negative prefix suffix range pad fallback
+syn match cssGeneratedContentProp contained "\<\(additive-\)\=symbols\>"
+syn match cssGeneratedContentProp contained "\<speak-as\>"
+syn keyword cssGeneratedContentAttr contained cyclic symbolic additive extends bullets numbers words
+syn match cssGeneratedContentAttr contained "\<cjk-decimal\>"
+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\|list\|suppress\)\>"
+syn keyword cssFontAttr contained contents show
+syn match cssFontAttr contained "\<\(block\|inline\)-level\>"
+syn match cssFontAttr contained "\<inline-list-item\>"

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

@@ -4,3 +4,4 @@ syn match cssFontProp contained "\<flex\(-\(basis\|direction\|flow\|grow\|shrink
 syn keyword cssFontAttr contained flex row wrap
 syn match cssFontAttr contained "\<inline-flex\>"
 syn match cssFontAttr contained "\<\(row\|column\|wrap\)-reverse\>"
+syn match cssFontAttr contained "\<main-size\>"

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

@@ -0,0 +1,7 @@
+syn keyword cssGeneratedContentProp contained running
+syn match cssGeneratedContentProp contained "\<string-set\>"
+syn match cssGeneratedContentProp contained "\<footnote-\(display\|policy\)\>"
+syn match cssGeneratedContentProp contained "\<bookmark-\(label\|level\|state\)\>"
+syn keyword cssGeneratedContentAttr contained footnote line open closed
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(string\|running\|element\|leader\|target-\(counter\|counters\|text\)\)\s*(" end=")" oneline keepend
+syn match cssPseudoClassId contained "\<footnote-\(call\|marker\)\>"

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,6 @@
+" TODO: create cssLineGridProp and cssLineGridAttr
+syn match cssFontProp contained "\<line-\(grid\|snap\)"
+syn match cssFontProp contained "\<box-snap\>"
+syn keyword cssFontAttr contained create
+syn match cssFontAttr contained "\<block-\(start\|end\)\>"
+syn match cssFontAttr contained "\<\(first\|last\)-baseline\>"

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,10 @@
+" TODO: create cssMaskingProp group and cssMaskingValue group
+syn match cssFontProp contained "\<clip-\(path\|rule\)\>"
+syn match cssFontProp contained "\<mask\(-\(image\|mode\|repeat\|position\|clip\|origin\|size\|composite\|type\)\)\=\>"
+syn match cssFontProp contained "\<mask-border\(-\(source\|mode\|slice\|width\|outset\|repeat\)\)\=\>"
+syn keyword cssFontAttr contained nonzero evenodd alpha luminance add subtract intersect exclude
+syn match cssFontAttr contained "\<\(fill\|stroke\|view\)-box\>"
+syn match cssFontAttr contained "\<no-clip\>"
+
+" http://www.w3.org/TR/css-masking/#MaskElement
+syn keyword cssTagName mask

after/syntax/css/css-masking.vim

@@ -1,8 +0,0 @@
-" 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 evenodd luminance alpha
-
-" http://www.w3.org/TR/css-masking/#MaskElement
-" syn keyword cssTagName mask

after/syntax/css/css-ruby-1.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/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-shapes.vim

@@ -1,3 +0,0 @@
-" TODO: create cssShapesProp group
-syn match cssFontProp contained "\<shape-\(image-threshold\|inside\|outside\)\>"
-syn region cssFunction contained matchgroup=cssFunctionName start="\<\(\(inset-\)\=rectangle\|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

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

@@ -1,4 +1,4 @@
-" TODO: create cssWritingModeProp group and cssWritingModeAttr group
+" 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

after/syntax/css/css3-background.vim

@@ -2,6 +2,6 @@
 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-\(decoration-break\|shadow\)\>"
+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-break.vim

@@ -1,2 +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

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

after/syntax/css/css3-conditional.vim

@@ -1,4 +1 @@
-" 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
+syn region cssInclude start=/@supports\>/ end=/\ze{/ skipwhite skipnl contains=css.*Prop,css.*Attr,cssValueInteger,cssValueLength,cssMediaKeyword,cssVendor,cssIncludeKeyword,cssComment nextgroup=cssMediaBlock

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,6 +0,0 @@
-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-grid-layout.vim

@@ -1,4 +0,0 @@
-" TODO: create cssGridLayoutProp group and cssGridLayoutAttr group
-syn match cssFontProp contained "\<grid-\(definition-\(rows\|columns\)\|template\|auto-\(rows\|columns\)\|before\|start\|after\|end\|column\|row\|area\|auto-flow\)\>"
-syn keyword cssFontAttr contained grid subgrid rows
-syn match cssFontAttr contained "\<inline-grid\>"

after/syntax/css/css3-hyperlinks.vim

@@ -1,3 +0,0 @@
-" 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-lists.vim

@@ -1,22 +0,0 @@
-syn keyword cssGeneratedContentProp contained type negative prefix suffix range fallback
-syn match cssGeneratedContentProp contained "\<\(additive-\)\=glyphs\>"
-syn keyword cssGeneratedContentAttr contained box check afar agaw ari asterisks bengali binary blin burmese cambodian dash devanagari diamond dizi footnotes gedeo greek gujarati gumuz gurmukhi hadiyya harari hindi kaffa kannada kebena kembata khmer konso kunama lao lepcha malayalam marathi meen mongolian myanmar octal oriya oromo persian saho sidama silti tamil telugu thai tibetan tigre wolaita yemsa
-syn match cssGeneratedContentAttr contained "\<ancient-tamil\>"
-syn match cssGeneratedContentAttr contained "\<arabic-indic\>"
-syn match cssGeneratedContentAttr contained "\<circled-\(decimal\|korean-\(consonants\|syllables\)\|\(lower\|upper\)-latin\)\>"
-syn match cssGeneratedContentAttr contained "\<cjk-\(decimal\|earthly-branch\|heavenly-stem\)\>"
-syn match cssGeneratedContentAttr contained "\<dotted-decimal\>"
-syn match cssGeneratedContentAttr contained "\<double-circled-decimal\>"
-syn match cssGeneratedContentAttr contained "\<eastern-nagari\>"
-syn match cssGeneratedContentAttr contained "\<filled-circled-decimal\>"
-syn match cssGeneratedContentAttr contained "\<fullwidth-\(decimal\|\(lower\|upper\)-\(alpha\|roman\)\)\>"
-syn match cssGeneratedContentAttr contained "\<japanese-\(in\)\=formal\>"
-syn match cssGeneratedContentAttr contained "\<korean-\(consonant\|hangul-formal\|hanja-\(in\)\=formal\|syllable\)\>"
-syn match cssGeneratedContentAttr contained "\<\(lower\|upper\)-\(alpha-symbolic\|armenian\|belorussian\|bulgarian\|hexadecimal\|macedonian\|oromo-qubee\|russian\(-full\)\=\|serbo-croatian\|ukrainian\(-full\)\=\)\>"
-syn match cssGeneratedContentAttr contained "\<new-base-60\>"
-syn match cssGeneratedContentAttr contained "\<parenthesized-\(decimal\|hangul-\(consonants\|syllable\)\|lower-latin\)\>"
-syn match cssGeneratedContentAttr contained "\<persian-\(abjad\|alphabetic\)\>"
-syn match cssGeneratedContentAttr contained "\<simple-\(lower\|upper\)-roman\>"
-syn match cssGeneratedContentAttr contained "\<super-decimal\>"
-syn match cssGeneratedContentAttr contained "\<thai-alphabetic\>"
-syn keyword cssPseudoClassId contained marker

after/syntax/css/css3-marquee.vim

@@ -1,4 +0,0 @@
-" 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

@@ -1,4 +0,0 @@
-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

@@ -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 keyword cssFontAttr contained page column balance
-syn match cssFontAttr contained "\<avoid-\(page\|column\)\>"
+syn keyword cssFontAttr contained balance
+syn match cssFontAttr contained "\<\(avoid-\)\=column\>"

after/syntax/css/css3-page.vim

@@ -1,2 +1,3 @@
-" TODO: Add support CSS Paged Media Module Level 3
-" URL:  http://www.w3.org/TR/css3-page/
+" TODO: Create cssPageAttr group
+syn keyword cssFontAttr contained recto verso
+syn match cssFontAttr contained "\<\(avoid-\)\=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 "\<flow-\(into\|from\)\>"
 syn match cssFontProp contained "\<region-fragment\>"
 syn keyword cssFontAttr contained element content break
 syn match cssFontAttr contained "\<\(avoid-\)\=region\>"
-syn region cssPseudoClassLang matchgroup=cssPseudoClassId start="::\=region(" end=")" oneline
+syn keyword cssPseudoClassId contained region

after/syntax/css/css3-ruby.vim

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

after/syntax/css/css3-selectors.vim

@@ -1,8 +1,5 @@
-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 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=":\(not\|matches\|current\|local-link\|nth\(-last\)\=-\(child\|of-type\|match\|column\)\|column\)(" end=")" oneline
+syn region cssPseudoClassLang matchgroup=cssPseudoClassId start=":\(nth\(-last\)\=-\(child\|of-type\)\|not\)(" end=")" oneline

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,16 +0,0 @@
-syn match cssTextProp contained "\<hanging-punctuation\>"
-syn match cssTextProp contained "\<line-break\>"
-syn match cssTextProp contained "\<\(word\|overflow\)-wrap\>"
-syn match cssTextProp contained "\<tab-size\>"
-syn match cssTextProp contained "\<text-\(align-last\|autospace\|justify\|shadow\|underline-position\)\>"
-syn match cssTextProp contained "\<word-break\>"
-syn keyword cssTextAttr contained loose strict 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\>"
-syn match cssTextAttr contained "\<break-\(all\|word\)\>"

after/syntax/css/css3-transitions.vim

@@ -1,4 +1,4 @@
-" TODO: create cssTransitionProp group and cssTransitionAttr group
+" 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\)\)\=\>"

after/syntax/css/html5-elements.vim

@@ -1,21 +1,19 @@
 " HTML5 new elements
-" Scripting
-syn keyword cssTagName template
 
 " Sections
-syn keyword cssTagName article section nav aside hgroup header footer
+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 rt rp bdi wbr
+syn keyword cssTagName data time mark ruby rb rt rtc rp bdi wbr
 
 " Embedded content
-syn keyword cssTagName embed video audio source track canvas
+syn keyword cssTagName embed video audio source track
 
 " Forms
 syn keyword cssTagName datalist keygen output progress meter
 
-" Interactive elements
-syn keyword cssTagName details summary menuitem dialog
+" Scripting
+syn keyword cssTagName template canvas

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

@@ -1,29 +1,45 @@
 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-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-fonts.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-text.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/css3-writing-modes.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-gcpm-3.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-ruby-1.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

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

test/test.css

@@ -37,7 +37,6 @@
   border-bottom-right-radius: auto;
   border-bottom-left-radius: auto;
   border-top-left-radius: auto;
-  box-decoration-break: auto;
   box-shadow: auto;
 }
 
@@ -56,21 +55,48 @@
 }
 
 .break {
-  break-after: auto;
+  break-after: any;
   break-before: auto;
   break-inside: auto;
+  box-decoration-break: auto;
 }
 
 .cascade {
-  all: default;
+  all: unset;
 }
 
 .colors {
   opacity: rgba(0, 0, 0, 1);
-  display: hsla(0, 0, 0, 1)
+  display: hsla(0, 0, 0, 1);
   display: currentColor;
 }
 
+@supports (display: auto) or
+  (display: auto) not
+  (display: auto) {
+  .conditional {
+    display: auto;
+  }
+}
+
+.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;
@@ -78,57 +104,119 @@
   display: last;
 }
 
+@counter-style counter-style {
+  system: cyclic;
+  negative: symbolic;
+  prefix: numbers;
+  suffix: additive;
+  range: extends;
+  pad: cjk-decimal;
+  fallback: disclosure-open;
+  symbols: disclosure-closed;
+  additive-symbols: simp-chinese-informal;
+  speak-as: simp-chinese-formal;
+  display: trad-chinese-informal;
+  display: trad-chinese-formal;
+  display: ethiopic-numeric;
+  display: symbols("*" "\2020" "\2021" "\A7");
+  display: bullets;
+  display: words;
+}
+
+.display {
+  display-inside: block-level;
+  display-outside: inline-level;
+  display-list: contents;
+  display-suppress: inline-list-item;
+  display: show;
+}
+
 .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-direction: flex;
+  flex-wrap: inline-flex;
+  flex-flow: row;
+  order: row-reverse;
+  flex: column-reverse;
+  flex-grow: wrap;
   flex-shrink: wrap-reverse;
-  flex-wrap: auto;
+  flex-basis: main-size;
 }
 
-.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;
+.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::footnote-call,
+.gcpm::footnote-marker {
+  string-set: string(heading, first);
+  running: running(heading);
+  footnote-display: element(header);
+  footnote-policy: footnote;
+  bookmark-label: line;
+  bookmark-level: leader('.');
+  bookmark-state: target-counter(attr(href url), page);
+  display: target-counters(lack-of-example);
+  display: target-text(attr(href url));
+  display: open;
+  display: closed;
 }
 
 .grid-layout {
-  grid-after: grid;
-  grid-area: subgrid;
-  grid-auto-columns: rows;
-  grid-auto-flow: inline-grid;
-  grid-auto-rows: auto;
-  grid-before: auto;
+  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-definition-columns: auto;
-  grid-definition-rows: auto;
-  grid-end: auto;
   grid-row: auto;
-  grid-start: auto;
-  grid-template: auto;
-}
-
-.hyperlinks {
-  target: current;
-  target-name: new;
-  target-new: modal;
-  target-position: window;
-  display: tab;
-  display: front;
-  display: back;
+  grid-area: auto;
 }
 
 .images {
@@ -148,6 +236,14 @@
   display: same;
 }
 
+.line-grid {
+  line-grid: create;
+  line-snap: block-start;
+  box-snap: block-end;
+  display: first-baseline;
+  display: last-baseline;
+}
+
 .linebox {
   alignment-adjust: central;
   alignment-baseline: mathematical;
@@ -171,163 +267,39 @@
 }
 
 .lists::marker {
-  type: box;
-  negative: check;
-  prefix: afar;
-  suffix: agaw;
-  range: ancient-tamil;
-  fallback: arabic-indic;
-  glyphs: ari;
-  additive-glyphs: asterisks;
-  display: bengali;
-  display: binary;
-  display: blin;
-  display: burmese;
-  display: cambodian;
-  display: circled-decimal;
-  display: circled-korean-consonants;
-  display: circled-korean-syllables;
-  display: circled-lower-latin;
-  display: circled-upper-latin;
-  display: cjk-decimal;
-  display: cjk-earthly-branch;
-  display: cjk-heavenly-stem;
-  display: dash;
-  display: devanagari;
-  display: diamond;
-  display: dizi;
-  display: dotted-decimal;
-  display: double-circled-decimal;
-  display: eastern-nagari;
-  display: filled-circled-decimal;
-  display: footnotes;
-  display: fullwidth-decimal;
-  display: fullwidth-lower-alpha;
-  display: fullwidth-lower-roman;
-  display: fullwidth-upper-alpha;
-  display: fullwidth-upper-roman;
-  display: gedeo;
-  display: greek;
-  display: gujarati;
-  display: gumuz;
-  display: gurmukhi;
-  display: hadiyya;
-  display: harari;
-  display: hindi;
-  display: japanese-formal;
-  display: japanese-informal;
-  display: kaffa;
-  display: kannada;
-  display: kebena;
-  display: kembata;
-  display: khmer;
-  display: konso;
-  display: korean-consonant;
-  display: korean-hangul-formal;
-  display: korean-hanja-formal;
-  display: korean-hanja-informal;
-  display: korean-syllable;
-  display: kunama;
-  display: lao;
-  display: lepcha;
-  display: lower-alpha-symbolic;
-  display: lower-armenian;
-  display: lower-belorussian;
-  display: lower-bulgarian;
-  display: lower-hexadecimal;
-  display: lower-macedonian;
-  display: lower-oromo-qubee;
-  display: lower-russian;
-  display: lower-russian-full;
-  display: lower-serbo-croatian;
-  display: lower-ukrainian;
-  display: lower-ukrainian-full;
-  display: malayalam;
-  display: marathi;
-  display: meen;
-  display: mongolian;
-  display: myanmar;
-  display: new-base-60;
-  display: octal;
-  display: oriya;
-  display: oromo;
-  display: parenthesized-decimal;
-  display: parenthesized-hangul-consonants;
-  display: parenthesized-hangul-syllable;
-  display: parenthesized-lower-latin;
-  display: persian;
-  display: persian-abjad;
-  display: persian-alphabetic;
-  display: saho;
-  display: sidama;
-  display: silti;
-  display: simple-lower-roman;
-  display: simple-upper-roman;
-  display: super-decimal;
-  display: tamil;
-  display: telugu;
-  display: thai;
-  display: thai-alphabetic;
-  display: tibetan;
-  display: tigre;
-  display: upper-alpha-symbolic;
-  display: upper-armenian;
-  display: upper-belorussian;
-  display: upper-bulgarian;
-  display: upper-hexadecimal;
-  display: upper-macedonian;
-  display: upper-oromo-qubee;
-  display: upper-russian;
-  display: upper-russian-full;
-  display: upper-serbo-croatian;
-  display: upper-ukrainian;
-  display: upper-ukrainian-full;
-  display: wolaita;
-  display: yemsa;
-}
-
-.marquee {
-  marquee-direction: forward;
-  marquee-play-count: reverse;
-  marquee-speed: infinite;
-  marquee-style: slide;
-  display: alternate;
-  display: marquee-line;
-  display: marquee-block;
+  marker-side: marker;
+  counter-set: list-container;
+  display: counters(list-item, '.');
 }
 
 .masking {
-  mask-image: evenodd;
-  mask-source-type: luminance;
-  mask-repeat: alpha;
-  mask-position: auto;
-  mask-clip: auto;
-  mask-origin: auto;
-  mask-size: auto;
-  mask: auto;
+  clip-path: fill-box;
+  clip-rule: stroke-box;
+  mask-image: view-box;
+  mask-mode: nonzero;
+  mask-repeat: evenodd;
+  mask-position: alpha;
+  mask-clip: luminance;
+  mask-origin: no-clip;
+  mask-size: add;
+  mask-composite: subtract;
+  mask: intersect;
+  mask-border-source: exclude;
+  mask-border-mode: auto;
+  mask-border-slice: auto;
+  mask-border-width: auto;
+  mask-border-outset: auto;
+  mask-border-repeat: auto;
+  mask-border: 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;
+  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;
@@ -343,74 +315,107 @@
   display: fragments;
 }
 
+.page {
+  display: avoid-page;
+  display: page;
+  display: recto;
+  display: verso;
+}
+
 .preslev {
   presentation-level: increment;
 }
 
-.regions:region(p),
-.regions::region(p) {
-  flow-from: break;
-  flow-into: region;
-  region-fragment: avoid-region;
-  display: element;
-  display: content;
+.regions:region {
+  flow-into: element;
+  flow-from: content;
+  region-fragment: break;
+  display: region;
+  display: avoid-region;
 }
 
 .ruby {
-  ruby-align: start;
-  ruby-overhang: end;
-  ruby-position: distribute-letter;
-  ruby-span: distribute-space;
-  display: line-edge;
+  ruby-position: ruby-base-container;
+  ruby-merge: ruby-text-container;
+  ruby-align: inter-character;
 }
 
-.selectors:not([DISABLED]),
-.selectors:matches(:hover, :focus),
-.selectors:any-link,
-.selectors:local-link,
-.selectors:local-link(0),
-.selectors:target,
-.selectors:scope,
-.selectors:current,
-.selectors:current(p, li, dt, dd),
-.selectors:past,
-.selectors:future,
-.selectors:enabled,
-.selectors:disabled,
-.selectors:checked,
-.selectors:indeterminate,
-.selectors:default,
-.selecors:in-range,
-.selectors:out-of-range,
-.selectors:required,
-.selectors:optional,
-.selectors:read-only,
-.selectors:read-write,
-.selectors:root,
-.selectors:empty,
-.selectors:nth-child(2n+1),
-.selectors:last-child,
-.selectors:nth-last-child(-n+2),
-.selectors:only-child,
-.selectors:first-of-type,
-.selectors:nth-of-type(2n+1),
-.selectors:last-of-type,
-.selectors:nth-last-of-type(n+2),
-.selectors:only-of-type,
-.selectors:nth-match(2n+1),
-.selectors:nth-last-match(-n+2),
-.selectors:column(p, li, dt, dd),
-.selectors:nth-column(2n+1),
-.selectors:nth-last-column(-n+2) {
+@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-image-threshold: rectangle(1px 1px 1198px 398px);
-  shape-inside: inset-rectangle(400px 100px 400px 200px);
-  shape-outside: circle(600px 200px 100px);
+  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(350px,75px  379px,161px 469px,161px 397px,215px 423px,301px 350px,250px 277px,301px 303px,215px 231px,161px 321px,161px);
+  display: polygon(0 0, 100% 100%, 0 100%);
 }
 
 .sizing {
@@ -421,33 +426,31 @@
   display: contain-floats;
 }
 
-@supports (display: auto) or
-  (display: auto) not
-  (display: auto) {
-    .supports {
-      display: auto;
-    }
+.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;
 }
 
 .text {
-  hanging-punctuation: loose;
-  line-break: strict;
-  word-wrap: auto;
-  overflow-wrap: hanging;
-  tab-size: distribute;
-  text-align-last: kashida;
-  text-autospace: preserve;
-  text-justify: each-line;
-  text-shadow: allow-end;
-  text-underline-position: keep-all;
-  word-break: double-circle;
-  display: inter-word;
-  display: inter-ideograph;
-  display: inter-cluster;
-  display: preserve-breaks;
+  hyphens: manual;
+  line-break: loose;
+  overflow-wrap: strict;
+  tab-size: match-parent;
+  display: hanging;
+  display: each-line;
   display: full-width;
-  display: break-all;
-  display: break-word;
 }
 
 .text-decor-3 {
@@ -536,6 +539,10 @@
   var-foo: var(foo);
 }
 
+.will-change {
+  will-change: scroll-position;
+}
+
 .writing-modes {
   text-orientation: before;
   text-combine-horizontal: after;
@@ -554,12 +561,10 @@
 }
 
 .html5-elements,
-template,
 article,
 section,
 nav,
 aside,
-hgroup,
 header,
 footer,
 figure,
@@ -569,7 +574,9 @@ data,
 time,
 mark,
 ruby,
+rb,
 rt,
+rtc,
 rp,
 bdi,
 wbr,
@@ -578,15 +585,12 @@ video,
 audio,
 source,
 track,
-canvas,
 datalist,
 keygen,
 output,
 progress,
 meter,
-details,
-summary,
-menuitem,
-dialog {
+template,
+canvas {
   display: auto;
 }

test/test.html

@@ -0,0 +1,615 @@
+<!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;
+      }
+
+      @supports (display: auto) or
+        (display: auto) not
+        (display: auto) {
+        .conditional {
+          display: auto;
+        }
+      }
+
+      .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-style counter-style {
+        system: cyclic;
+        negative: symbolic;
+        prefix: numbers;
+        suffix: additive;
+        range: extends;
+        pad: cjk-decimal;
+        fallback: disclosure-open;
+        symbols: disclosure-closed;
+        additive-symbols: simp-chinese-informal;
+        speak-as: simp-chinese-formal;
+        display: trad-chinese-informal;
+        display: trad-chinese-formal;
+        display: ethiopic-numeric;
+        display: symbols("*" "\2020" "\2021" "\A7");
+        display: bullets;
+        display: words;
+      }
+
+      .display {
+        display-inside: block-level;
+        display-outside: inline-level;
+        display-list: contents;
+        display-suppress: inline-list-item;
+        display: show;
+      }
+
+      .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: main-size;
+      }
+
+      .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::footnote-call,
+      .gcpm::footnote-marker {
+        string-set: string(heading, first);
+        running: running(heading);
+        footnote-display: element(header);
+        footnote-policy: footnote;
+        bookmark-label: line;
+        bookmark-level: leader('.');
+        bookmark-state: target-counter(attr(href url), page);
+        display: target-counters(lack-of-example);
+        display: target-text(attr(href url));
+        display: open;
+        display: closed;
+      }
+
+      .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;
+      }
+
+      .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: block-start;
+        box-snap: block-end;
+        display: first-baseline;
+        display: last-baseline;
+      }
+
+      .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;
+      }
+
+      .masking {
+        clip-path: fill-box;
+        clip-rule: stroke-box;
+        mask-image: view-box;
+        mask-mode: nonzero;
+        mask-repeat: evenodd;
+        mask-position: alpha;
+        mask-clip: luminance;
+        mask-origin: no-clip;
+        mask-size: add;
+        mask-composite: subtract;
+        mask: intersect;
+        mask-border-source: exclude;
+        mask-border-mode: auto;
+        mask-border-slice: auto;
+        mask-border-width: auto;
+        mask-border-outset: auto;
+        mask-border-repeat: auto;
+        mask-border: auto;
+        mask-type: 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-position: ruby-base-container;
+        ruby-merge: ruby-text-container;
+        ruby-align: inter-character;
+      }
+
+      @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;
+      }
+
+      .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,
+      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>