0.28.0

See also: http://www.w3.org/TR/2018/WD-css-grid-2-20180427/

README.md

@@ -8,7 +8,7 @@ CSS3 syntax (and syntax defined in some foreign specifications) support for
 INSTALLATION
 ------------
 
-I **strongly** recommend to install this plugin on *Vim 7.4 or higher with
+I **strongly** recommend to install this plugin on *Vim 8.0 or higher with
 default runtime files*.
 
 
@@ -37,8 +37,8 @@ NOTES
 ### 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`:
+Vim’s highlight priority mechanism. To fix this problems, put following lines
+in your `~/.vim/after/css.vim`:
 
     setlocal iskeyword+=-
 
@@ -62,9 +62,9 @@ such as `-webkit-` or `-moz-`, etc. These are hard to maintain because they are:
   * Changed unexpectedly
   * Removed silently
 
-These must be supported by separate syntax plugins (Vim 7.4’s default CSS syntax
-file supports this). If you want to highlight prefixed properties or functions
-manually, `:highlight` and `:match` would help:
+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-]\+/
@@ -73,19 +73,11 @@ 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 to use this
-plugin with LESS, install [VIM-LESS][5]. Sass’s indent syntax and Stylus are not
-supported.
-
-
 ### Media Queries
 
 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].
+want to highlight Media Queries correctly, you must update Vim to 8.0+.
 
 
 AUTHOR
@@ -101,8 +93,3 @@ 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/css-align-3.vim

@@ -1,4 +1,5 @@
-syn match cssFontProp contained "\<\(justify\|align\)-\(self\|content\|items\)\>"
+syn match cssFontProp contained "\<\(justify\|align\|place\)-\(self\|content\|items\)\>"
+syn match cssFontProp contained "\<\(\(row\|column\)-\)\=gap\>"
 syn keyword cssFontAttr contained safe unsafe legacy
 syn match cssFontAttr contained "\<\(self\|flex\)-\(start\|end\)\>"
 syn match cssFontAttr contained "\<space-\(between\|around\|evenly\)\>"

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

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

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

@@ -1,4 +1,3 @@
-" TODO: create cssBackgroundProp group and cssBackgroundAttr group
 syn match cssFontProp contained "\<background-\(clip\|origin\|size\)\>"
 syn match cssFontProp contained "\<border-image\(-\(source\|slice\|width\|outset\|repeat\)\)\=\>"
 syn match cssFontProp contained "\<border-\(\(top-right\|bottom-right\|bottom-left\|top-left\)-\)\=radius\>"

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

@@ -1,2 +1,3 @@
 syn match cssFontProp contained "\<break-\(after\|before\|inside\)\>"
 syn match cssFontProp contained "\<box-decoration-break\>"
+syn match cssFontAttr contained "\<\(avoid-\)\=column\>"

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

@@ -0,0 +1,2 @@
+syn keyword cssFontProp contained contain
+syn keyword cssFontAttr contained layout paint size

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

@@ -1,5 +1,2 @@
-" TODO: create cssDisplayProp group and cssDisplayAttr group
-syn match cssFontProp contained "\<box-suppress\>"
 syn keyword cssFontAttr contained contents discard
 syn match cssFontAttr contained "\<flow\(-root\)\=\>"
-syn match cssFontAttr contained "\<inline-list-item\>"

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

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

after/syntax/css/css-fonts-4.vim

@@ -1,4 +1,12 @@
+syn match cssFontProp contained "\<font-\(min\|max\)-size\>"
+syn match cssFontProp contained "\<font-display\>"
 syn match cssFontProp contained "\<font-optical-sizing\>"
 syn match cssFontProp contained "\<font-variation-settings\>"
-syn keyword cssFontAttr contained emoji math fangsong
+syn match cssFontProp contained "\<font-palette\>"
+syn match cssFontProp contained "\<font-presentation\>"
+syn match cssFontProp contained "\<base-palette\>"
+syn match cssFontProp contained "\<font-language-override\>"
+syn match cssFontProp contained "\<font-variant-emoji\>"
+syn keyword cssFontAttr contained emoji math fangsong infinity swap fallback optional light dark
 syn match cssFontAttr contained "\<system-ui\>"
+syn region cssInclude start=/@font-palette-values\>/ end=/\ze{/ skipwhite skipnl contains=css.*Prop,css.*Attr,cssValueInteger,cssValueLength,cssMediaKeyword,cssVendor,cssIncludeKeyword,cssComment nextgroup=cssMediaBlock

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

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

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

@@ -0,0 +1,2 @@
+syn keyword cssFontAttr contained subgrid
+syn match cssValueNumber contained "\d\(.\d\+\)\=ar"

after/syntax/css/css-images-4.vim

@@ -0,0 +1,2 @@
+syn match cssFontProp contained "\<image-resolution\>"
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(image\|element\|conic-gradient\)\s*(" end=")" oneline keepend

after/syntax/css/css-layout-api-1.vim

@@ -0,0 +1 @@
+" N/A

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

@@ -0,0 +1,5 @@
+syn match cssFontProp contained "\<\(\(min\|max\)-\)\=\(block\|inline\)-size\>"
+syn match cssFontProp contained "\<\(margin\|inset\|padding\)\(-\(block\|inline\)\(-\(start\|end\)\)\=\)\=\>"
+syn match cssFontProp contained "\<border-\(block\|inline\)\(\(-\(start\|end\)\)\=\(-\(width\|style\|color\)\)\=\)\=\>"
+syn match cssFontProp contained "\<\(background\|border\)-image-transform\>"
+syn keyword cssFontAttr contained logical physical rotate

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

@@ -0,0 +1,3 @@
+syn keyword cssFontProp contained columns
+syn match cssFontProp contained "\<column-\(count\|fill\|rule\(-\(color\|style\|width\)\)\=\|span\|width\)\>"
+syn match cssFontAttr contained "\<balance\(-all\)\=\>"

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

@@ -0,0 +1,4 @@
+syn keyword cssFontProp contained continue
+syn match cssFontProp contained "\<scrollbar-gutter\>"
+syn keyword cssFontAttr contained stable force overflow paginate fragments
+syn region cssPseudoClassLang matchgroup=cssPseudoClassId start=":\(nth-fragment\)(" end=")" oneline

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

@@ -0,0 +1,3 @@
+syn match cssFontProp contained "\<line-height-step\>"
+syn match cssFontProp contained "\<block-step\(-\(size\|insert\|align\|round\)\)\=\>"
+syn keyword cssFontAttr contained margin up down nearest

after/syntax/css/css-scroll-snap-1.vim

@@ -1,3 +1,3 @@
 syn match cssFontProp contained "\<scroll-snap-\(type\|align\|stop\)\>"
-syn match cssFontProp contained "\<scroll-\(padding\|snap-margin\)\(-\(top\|bottom\|right\|left\|\(block\|inline\)\(-\(end\|start\)\)\=\)\)\=\>"
+syn match cssFontProp contained "\<scroll-\(padding\|margin\)\(-\(top\|bottom\|right\|left\|\(block\|inline\)\(-\(end\|start\)\)\=\)\)\=\>"
 syn keyword cssFontAttr contained x y mandatory proximity

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

@@ -1 +1,2 @@
-syn match cssFontAttr contained "\<\(\(min\|max\|fit\)-content\)\>"
+syn match cssFontAttr contained "\<\(\(min\|max\)-content\)\>"
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(fit-content\)\s*(" end=")" oneline keepend

after/syntax/css/css-style-attr.vim

@@ -0,0 +1 @@
+" N/A

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

@@ -2,7 +2,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 cssTextProp contained "\<text-align-all\>"
+syn keyword cssTextAttr contained manual loose strict hanging anywhere
 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,2 @@
-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\>"
+syn match cssTextProp contained "\<text-\(decoration\(-\(color\|line\|style\)\)\=\|underline-position\|emphasis\(-\(color\|position\|style\)\)\=\)\>"
+syn keyword cssTextAttr contained wavy alphabetic ink under filled dot triangle sesame over

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

@@ -0,0 +1,4 @@
+syn match cssTextProp contained "\<text-\(decoration-\(width\|skip\|skip-ink\)\|underline-offset\|emphasis-skip\)\>"
+syn keyword cssTextAttr contained objects edges symbols narrow
+syn match cssTextAttr contained "\<box-decoration\>"
+syn match cssTextAttr contained "\<\(\(leading\|trailing\)-\)\=spaces\>"

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

@@ -0,0 +1 @@
+syn region cssFunction contained matchgroup=cssFunctionName start="\<frames\s*(" end=")" oneline keepend

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

@@ -1,4 +1,3 @@
-" TODO: create cssTransformsProp group and cssTransformsAttr group
 syn match cssFontProp contained "\<backface-visibility\>"
 syn match cssFontProp contained "\<perspective\(-origin\)\=\>"
 syn match cssFontProp contained "\<transform\(-\(origin\|style\)\)\=\>"

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

@@ -1,4 +1,3 @@
-" 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/css-ui-4.vim

@@ -1,3 +1,3 @@
-syn match cssUIProp contained "\<caret\(-\(shape\|animation\)\)\=\>"
+syn match cssUIProp contained "\<caret\(-shape\)\=\>"
 syn keyword cssUIAttr contained fade underscore
 syn region cssFunction contained matchgroup=cssFunctionName start="\<fade\s*(" end=")" oneline keepend

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

@@ -1,3 +1,2 @@
-" TODO: create cssVariableProp group
-syn match cssFontProp contained "\<var-[A-Za-z_][A-Za-z0-9_-]\+\>"
+syn match cssFontProp contained "\<--[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

@@ -1,8 +1,7 @@
 syn match cssFontProp contained "\<writing-mode\>"
 syn match cssFontProp contained "\<text-\(orientation\|combine-upright\)\>"
 syn match cssFontProp contained "\<glyph-orientation-vertical\>"
-syn keyword cssFontAttr contained before after mixed upright plaintext
-syn match cssFontAttr contained "\<sideways\(-rl\|-lr\)\=\>"
+syn keyword cssFontAttr contained before after mixed upright plaintext sideways
 syn match cssFontAttr contained "\<isolate\(-override\)\=\>"
 syn match cssFontAttr contained "\<horizontal-tb\>"
 syn match cssFontAttr contained "\<vertical-\(rl\|lr\)\>"

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

@@ -0,0 +1 @@
+syn match cssFontAttr contained "\<sideways-\(rl\|lr\)\>"

after/syntax/css/css3-images.vim

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

after/syntax/css/css3-multicol.vim

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

after/syntax/css/css3-namespace.vim

@@ -0,0 +1 @@
+" N/A

after/syntax/css/fill-stroke-3.vim

@@ -0,0 +1,5 @@
+syn match cssFontProp contained "\<\(fill\|stroke\)\(-\(break\|color\|image\|origin\|position\|size\|repeat\|opacity\)\)\=\>"
+syn match cssFontProp contained "\<fill-rule\>"
+syn match cssFontProp contained "\<stroke-\(width\|align\|line\(cap\|join\)\|miterlimit\|dash\(array\|offset\)\|dash-\(corner\|justify\)\)\>"
+syn keyword cssFontAttr contained butt arcs stupid compress dashes gaps
+syn match cssFontAttr contained "\<bounding-box\>"

after/syntax/css/html5.vim

@@ -1 +1 @@
-syn keyword cssTagName picture rb rtc template
+syn keyword cssTagName picture rb rtc slot template

after/syntax/css/motion-1.vim

@@ -1,2 +1,2 @@
-syn match cssFontProp contained "\<motion\(-\(path\|offset\|rotation\)\)\=\>"
-syn region cssFunction contained matchgroup=cssFunctionName start="\<path\s*(" end=")" oneline keepend
+syn match cssFontProp contained "\<offset\(-\(path\|distance\|anchor\|rotate\)\)\=\>"
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(ray\|path\)\s*(" end=")" oneline keepend

after/syntax/css/selectors-4.vim

@@ -1,9 +1,10 @@
 syn match cssSelectorOp "[|]"
-syn keyword cssPseudoClassId contained scope current past future default valid invalid required optional blank
+syn keyword cssPseudoClassId contained scope current past future default valid invalid required optional blank playing paused
 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
+syn match cssPseudoClassId contained "\<user-invalid\>"
+syn match cssPseudoClassId contained "\<target-within\>"
+syn match cssPseudoClassId contained "\<focus-\(within\|visible\)\>"
+syn region cssPseudoClassLang matchgroup=cssPseudoClassId start=":\(matches\|dir\|local-link\|current\|nth\(-last\)\=-col\|has\|drop\)(" end=")" oneline

after/syntax/css/svg2.vim

@@ -2,19 +2,16 @@ syn keyword cssTagName animate animateMotion animateTransform circle clipPath cu
 
 syn keyword cssFontProp contained cx cy d r rx ry x y
 syn match cssFontProp contained "\<color-\(interpolation\|rendering\)\>"
-syn match cssFontProp contained "\<fill\(-\(opacity\|rule\)\)\=\>"
 syn match cssFontProp contained "\<image-rendering\>"
 syn match cssFontProp contained "\<marker-\(end\|mid\|start\)\>"
 syn match cssFontProp contained "\<pointer-events\>"
 syn match cssFontProp contained "\<shape-rendering\>"
 syn match cssFontProp contained "\<solid-\(color\|opacity\)\>"
 syn match cssFontProp contained "\<stop-\(color\|opacity\)\>"
-syn match cssFontProp contained "\<stroke\(-\(dash\(array\|offset\)\|line\(cap\|join\)\|miterlimit\|opacity\|width\)\)\=\>"
 syn match cssFontProp contained "\<text-anchor\>"
 syn match cssFontProp contained "\<vector-effect\>"
 
-syn keyword cssFontAttr contained arcs butt crispEdges geometricPrecision optimizeQuality painted stroke viewport visibleFill visiblePainted visibleStroke
-syn match cssFontAttr contained "\<bounding-box\>"
+syn keyword cssFontAttr contained crispEdges geometricPrecision optimizeQuality painted stroke viewport visibleFill visiblePainted visibleStroke
 syn match cssFontAttr contained "\<context-\(fill\|stroke\)\>"
 syn match cssFontAttr contained "\<fixed-position\>"
 syn match cssFontAttr contained "\<miter\(-clip\)\=\>"

after/syntax/css/webvtt1.vim

@@ -0,0 +1,2 @@
+syn match cssPseudoClassId contained "::\<cue\(-region\)\=\>"
+syn region cssPseudoClassLang matchgroup=cssPseudoClassId start="::cue\(-region\)\=(" end=")" oneline

after/syntax/html.vim

@@ -1,70 +0,0 @@
-syn include @htmlCss syntax/css/compositing-1.vim
-syn include @htmlCss syntax/css/css-align-3.vim
-syn include @htmlCss syntax/css/css-backgrounds-4.vim
-syn include @htmlCss syntax/css/css-break-3.vim
-syn include @htmlCss syntax/css/css-cascade-3.vim
-syn include @htmlCss syntax/css/css-cascade-4.vim
-syn include @htmlCss syntax/css/css-color-4.vim
-syn include @htmlCss syntax/css/css-content-3.vim
-syn include @htmlCss syntax/css/css-counter-styles-3.vim
-syn include @htmlCss syntax/css/css-device-adapt-1.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-font-loading-3.vim
-syn include @htmlCss syntax/css/css-fonts-3.vim
-syn include @htmlCss syntax/css/css-fonts-4.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-inline-3.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-page-floats-3.vim
-syn include @htmlCss syntax/css/css-paint-api-1.vim
-syn include @htmlCss syntax/css/css-position-3.vim
-syn include @htmlCss syntax/css/css-properties-values-api-1.vim
-syn include @htmlCss syntax/css/css-pseudo-4.vim
-syn include @htmlCss syntax/css/css-regions-1.vim
-syn include @htmlCss syntax/css/css-round-display-1.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-scroll-snap-1.vim
-syn include @htmlCss syntax/css/css-shapes-1.vim
-syn include @htmlCss syntax/css/css-sizing-3.vim
-syn include @htmlCss syntax/css/css-syntax-3.vim
-syn include @htmlCss syntax/css/css-text-3.vim
-syn include @htmlCss syntax/css/css-text-4.vim
-syn include @htmlCss syntax/css/css-text-decor-3.vim
-syn include @htmlCss syntax/css/css-transforms-1.vim
-syn include @htmlCss syntax/css/css-typed-om-1.vim
-syn include @htmlCss syntax/css/css-ui-3.vim
-syn include @htmlCss syntax/css/css-ui-4.vim
-syn include @htmlCss syntax/css/css-values-3.vim
-syn include @htmlCss syntax/css/css-variables-1.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/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-color.vim
-syn include @htmlCss syntax/css/css3-conditional.vim
-syn include @htmlCss syntax/css/css3-exclusions.vim
-syn include @htmlCss syntax/css/css3-images.vim
-syn include @htmlCss syntax/css/css3-multicol.vim
-syn include @htmlCss syntax/css/css3-page.vim
-syn include @htmlCss syntax/css/css3-speech.vim
-syn include @htmlCss syntax/css/css3-transitions.vim
-syn include @htmlCss syntax/css/cssom-1.vim
-syn include @htmlCss syntax/css/cssom-view-1.vim
-syn include @htmlCss syntax/css/filter-effects-1.vim
-syn include @htmlCss syntax/css/geometry-1.vim
-syn include @htmlCss syntax/css/html5.vim
-syn include @htmlCss syntax/css/motion-1.vim
-syn include @htmlCss syntax/css/pointerevents.vim
-syn include @htmlCss syntax/css/selectors-nonelement-1.vim
-syn include @htmlCss syntax/css/selectors.vim
-syn include @htmlCss syntax/css/selectors4.vim
-syn include @htmlCss syntax/css/svg2.vim
-syn include @htmlCss syntax/css/web-animations-1.vim
-syn include @htmlCss syntax/css/worklets-1.vim

after/syntax/scss.vim

@@ -1 +0,0 @@
-runtime! syntax/css/*.vim

test/test.css

@@ -5,10 +5,12 @@
   align-self: self-end;
   align-content: flex-start;
   align-items: flex-end;
-  display: space-around;
-  display: space-between;
-  display: space-evenly;
-  display: legacy;
+  place-self: space-around;
+  place-content: space-between;
+  place-items: space-evenly;
+  row-gap: legacy;
+  column-gap: auto;
+  gap: auto;
 }
 
 .animations {
@@ -23,7 +25,7 @@
   animation-timing-function: auto;
 }
 
-.background {
+.backgrounds-3 {
   background-clip: space;
   background-origin: round;
   background-size: local;
@@ -71,7 +73,7 @@
 }
 
 .break-3 {
-  break-after: auto;
+  break-after: avoid-column;
   break-before: auto;
   break-inside: auto;
   box-decoration-break: auto;
@@ -109,14 +111,6 @@
   display: color-mod(#112233 tint(50%));
 }
 
-@supports (display: auto) or
-  (display: auto) not
-  (display: auto) {
-  .conditional {
-    display: auto;
-  }
-}
-
 .compositing-1 {
   mix-blend-mode: multiply;
   isolation: screen;
@@ -135,6 +129,20 @@
   display: luminosity;
 }
 
+@supports (display: auto) or
+  (display: auto) not
+  (display: auto) {
+  .conditional {
+    display: auto;
+  }
+}
+
+.contain-1 {
+  contain: layout;
+  display: paint;
+  display: size;
+}
+
 .content-3 {
   string-set: open;
   bookmark-level: closed;
@@ -205,10 +213,9 @@
 }
 
 .display-3 {
-  box-suppress: flow;
+  display: flow;
   display: flow-root;
   display: contents;
-  display: inline-list-item;
   display: discard;
 }
 
@@ -217,6 +224,37 @@
   wrap-through: maximum;
 }
 
+.fill-stroke-3 {
+  fill-rule: butt;
+  fill-break: arcs;
+  fill-color: stupid;
+  fill-image: compress;
+  fill-origin: dashes;
+  fill-position: gaps;
+  fill-size: bounding-box;
+  fill-repeat: auto;
+  fill: auto;
+  fill-opacity: auto;
+  stroke-width: auto;
+  stroke-align: auto;
+  stroke-linecap: auto;
+  stroke-linejoin: auto;
+  stroke-miterlimit: auto;
+  stroke-break: auto;
+  stroke-dasharray: auto;
+  stroke-dashoffset: auto;
+  stroke-dash-corner: auto;
+  stroke-dash-justify: auto;
+  stroke-color: auto;
+  stroke-image: auto;
+  stroke-origin: auto;
+  stroke-position: auto;
+  stroke-size: auto;
+  stroke-repeat: auto;
+  stroke: auto;
+  stroke-opacity: auto;
+}
+
 .filter-effects-1 {
   flood-color: sRGB;
   flood-opacity: linearRGB;
@@ -251,7 +289,6 @@
 .fonts-3 {
   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;
@@ -284,13 +321,24 @@
   display: simplified;
   display: traditional;
   display: proportional-width;
+  display: discretionary-ligatures;
 }
 
 .fonts-4 {
-  font-optical-sizing: emoji;
-  font-variation-settings: math;
-  display: fangsong;
-  display: system-ui;
+  font-min-size: emoji;
+  font-max-size: math;
+  font-display: fangsong;
+  font-optical-sizing: system-ui;
+  font-variation-settings: infinity;
+  font-palette: swap;
+  font-presentation: fallback;
+  font-language-override: optional;
+  font-variant-emoji: light;
+  display: dark;
+}
+
+@font-palette-values Test {
+  base-palette: 1;
 }
 
 .gcpm-3::footnote-call,
@@ -309,36 +357,43 @@
   grid-template-columns: grid;
   grid-template-rows: inline-grid;
   grid-template-areas: minmax(0, 1);
-  grid-template: fit-content(10%);
+  grid-template: auto;
   grid-auto-rows: repeat(4);
   grid-auto-columns: 0.2fr;
   grid-auto-flow: dense;
   grid: auto-flow;
-  grid-row-start: subgrid;
-  grid-column-start: span;
+  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;
-  grid-column-gap: auto;
-  grid-row-gap: auto;
-  grid-gap: auto;
 }
 
-.images {
+.grid-2 {
+  display: subgrid;
+  display: 1.618ar;
+}
+
+.images-3 {
   object-fit: contain;
   object-position: cover;
-  image-resolution: snap;
-  image-orientation: scale-down;
+  image-orientation: snap;
+  display: 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);
 }
 
+.images-4 {
+  image-resolution: image("sprite.svg#xywh=40,0,20,20");
+  display: element(#test);
+  display: conic-gradient(at 25% 30%, white, black 60%);
+}
+
 .inline-3 {
   dominant-baseline: mathematical;
   alignment-baseline: ideographic;
@@ -348,6 +403,10 @@
   initial-letter-wrap: auto;
 }
 
+.layout-api-1 {
+  display: auto;
+}
+
 .line-grid-1 {
   line-grid: create;
   line-snap: block-start;
@@ -360,6 +419,60 @@
   display: auto;
 }
 
+.logical-1 {
+  block-size: logical;
+  inline-size: physical;
+  min-block-size: rotate;
+  min-inline-size: auto;
+  max-block-size: auto;
+  max-inline-size: auto;
+  margin-block-start: auto;
+  margin-block-end: auto;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  margin-block: auto;
+  margin-inline: auto;
+  inset-block-start: auto;
+  inset-block-end: auto;
+  inset-inline-start: auto;
+  inset-inline-end: auto;
+  inset-block: auto;
+  inset-inline: auto;
+  inset: auto;
+  padding-block-start: auto;
+  padding-block-end: auto;
+  padding-inline-start: auto;
+  padding-inline-end: auto;
+  padding-block: auto;
+  padding-inline: auto;
+  border-block-start-width: auto;
+  border-block-end-width: auto;
+  border-inline-start-width: auto;
+  border-inline-end-width: auto;
+  border-block-width: auto;
+  border-inline-width: auto;
+  border-block-start-style: auto;
+  border-block-end-style: auto;
+  border-inline-start-style: auto;
+  border-inline-end-style: auto;
+  border-block-style: auto;
+  border-inline-style: auto;
+  border-block-start-color: auto;
+  border-block-end-color: auto;
+  border-inline-start-color: auto;
+  border-inline-end-color: auto;
+  border-block-color: auto;
+  border-inline-color: auto;
+  border-block-start: auto;
+  border-block-end: auto;
+  border-inline-start: auto;
+  border-inline-end: auto;
+  border-block: auto;
+  border-inline: auto;
+  background-image-transform: auto;
+  border-image-transform: auto;
+}
+
 .masking-1 {
   clip-path: fill-box;
   clip-rule: stroke-box;
@@ -383,17 +496,17 @@
 }
 
 .motion-1 {
-  motion-path: path(M 100 100 L 300 100 L 200 300 z);
-  motion-offset: auto;
-  motion-rotation: auto;
-  motion: auto;
+  offset-path: ray(45deg closest-side);
+  offset-distance: path(M 100 100 L 300 100 L 200 300 z);
+  offset-anchor: auto;
+  offset-rotate: auto;
+  offset: auto;
 }
 
-.multicol {
+.multicol-1 {
   columns: column;
   column-count: balance;
-  column-fill: avoid-column;
-  column-gap: auto;
+  column-fill: balance-all;
   column-rule: auto;
   column-rule-color: auto;
   column-rule-style: auto;
@@ -402,10 +515,22 @@
   column-width: auto;
 }
 
+.namespace {
+  display: auto;
+}
+
 .overflow-3 {
   max-lines: auto;
 }
 
+.overflow-4::nth-fragment(1) {
+  scrollbar-gutter: stable;
+  continue: force;
+  display: overflow;
+  display: paginate;
+  display: fragments;
+}
+
 .page {
   display: avoid-page;
   display: page;
@@ -439,6 +564,10 @@
   offset-start: auto;
 }
 
+.properties-values-api-1 {
+  display: auto;
+}
+
 .pseudo-4::inactive-selection,
 .pseudo-4::spelling-error,
 .pseudo-4::grammer-error {
@@ -453,6 +582,15 @@
   display: avoid-region;
 }
 
+.rhythm-1 {
+  line-height-step: margin;
+  block-step-size: up;
+  block-step-insert: down;
+  block-step-align: nearest;
+  block-step-round: auto;
+  block-step: auto;
+}
+
 @media (device-radius: 50%) {
   .round-display-1 {
     shape-inside: outside-shape;
@@ -487,7 +625,7 @@
 .scroll-snap-1 {
   scroll-snap-type: x;
   scroll-padding: y;
-  scroll-snap-margin: mandatory;
+  scroll-margin: mandatory;
   scroll-snap-align: proximity;
   scroll-snap-stop: auto;
   scroll-padding-top: auto;
@@ -500,69 +638,70 @@
   scroll-padding-block-end: auto;
   scroll-padding-block: auto;
   scroll-padding-inline: auto;
-  scroll-snap-margin-top: auto;
-  scroll-snap-margin-right: auto;
-  scroll-snap-margin-bottom: auto;
-  scroll-snap-margin-left: auto;
-  scroll-snap-margin-inline-start: auto;
-  scroll-snap-margin-block-start: auto;
-  scroll-snap-margin-inline-end: auto;
-  scroll-snap-margin-block-end: auto;
-  scroll-snap-margin-block: auto;
-  scroll-snap-margin-inline: auto;
+  scroll-margin-top: auto;
+  scroll-margin-right: auto;
+  scroll-margin-bottom: auto;
+  scroll-margin-left: auto;
+  scroll-margin-inline-start: auto;
+  scroll-margin-block-start: auto;
+  scroll-margin-inline-end: auto;
+  scroll-margin-block-end: auto;
+  scroll-margin-block: auto;
+  scroll-margin-inline: auto;
 }
 
-.selectors:target,
-.selectors:enabled,
-.selectors:disabled,
-.selectors:checked,
-.selectors:indeterminate,
-.selectors:root,
-.selectors:empty,
-.selectors:last-child,
-.selectors:last-of-type,
-.selectors:first-of-type,
-.selectors:only-child,
-.selectors:only-of-type,
-.selectors:nth-child(2n+1),
-.selectors:nth-last-child(-n+2),
-.selectors:nth-of-type(2n+1),
-.selectors:nth-last-of-type(n+2),
-.selectors:not([DISABLED]) {
+.selectors-3:target,
+.selectors-3:enabled,
+.selectors-3:disabled,
+.selectors-3:checked,
+.selectors-3:indeterminate,
+.selectors-3:root,
+.selectors-3:empty,
+.selectors-3:last-child,
+.selectors-3:last-of-type,
+.selectors-3:first-of-type,
+.selectors-3:only-child,
+.selectors-3:only-of-type,
+.selectors-3:nth-child(2n+1),
+.selectors-3:nth-last-child(-n+2),
+.selectors-3:nth-of-type(2n+1),
+.selectors-3:nth-last-of-type(n+2),
+.selectors-3: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,
-.selectors4: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) {
+.selectors-4 | h1,
+.selectors-4:scope,
+.selectors-4:current,
+.selectors-4:past,
+.selectors-4:future,
+.selectors-4:default,
+.selectors-4:valid,
+.selectors-4:invalid,
+.selectors-4:required,
+.selectors-4:optional,
+.selectors-4:blank,
+.selectors-4:any-link,
+.selectors-4:local-link,
+.selectors-4:read-only,
+.selectors-4:read-write,
+.selectors-4:placeholder-shown,
+.selectors-4:in-range,
+.selectors-4:out-of-range,
+.selectors-4:user-invalid,
+.selectors-4:matches(:hover, :focus),
+.selectors-4:dir(ltr),
+.selectors-4:local-link(0),
+.selectors-4:current(p, li, dt, dd),
+.selectors-4:nth-col(2n+1),
+.selectors-4:nth-last-col(-n+2),
+.selectors-4:target-within,
+.selectors-4:focus-within,
+.selectors-4:focus-visible,
+.selectors-4:playing,
+.selectors-4:paused,
+.selectors-4:has(> img),
+.selectors-4:drop(active) {
   display: auto;
 }
 
@@ -581,7 +720,7 @@
 .sizing-3 {
   display: max-content;
   display: min-content;
-  display: fit-content;
+  display: fit-content(10%);
 }
 
 .speech {
@@ -601,6 +740,10 @@
   display: reduced;
 }
 
+.style-attr {
+  display: auto;
+}
+
 .syntax-3 {
   display: auto;
 }
@@ -614,9 +757,10 @@
   line-break: loose;
   overflow-wrap: strict;
   tab-size: match-parent;
-  display: hanging;
+  text-align-all: hanging;
   display: each-line;
   display: full-width;
+  display: anywhere;
 }
 
 .text-4 {
@@ -647,17 +791,29 @@
 .text-decor-3 {
   text-decoration-color: filled;
   text-decoration-line: dot;
-  text-decoration-skip: triangle;
   text-decoration-style: sesame;
-  text-emphasis: objects;
+  text-emphasis: alphabetic;
   text-emphasis-color: ink;
-  text-emphasis-position: edges;
+  text-emphasis-position: under;
   text-emphasis-style: wavy;
-  display: alphabetic;
-  display: spaces;
-  display: box-decoration;
   display: under;
   display: over;
+  display: triangle;
+}
+
+.text-decor-4 {
+  text-decoration-width: objects;
+  text-underline-offset: spaces;
+  text-decoration-skip: leading-spaces;
+  text-decoration-skip-ink: trailing-spaces;
+  text-emphasis-skip: edges;
+  display: box-decoration;
+  display: symbols;
+  display: narrow;
+}
+
+.timing-1 {
+  display: frames(2);
 }
 
 .transforms-1 {
@@ -698,6 +854,10 @@
   display: cubic-bezier(0.25, 0.1, 0.25, 1.0);
 }
 
+.typed-om-1 {
+  display: auto;
+}
+
 .ui-3 {
   caret-color: grab;
   display: grabbing;
@@ -706,7 +866,7 @@
 .ui-4 {
   caret: fade;
   caret-shape: fade(1em);
-  caret-animation: underscore;
+  display: underscore;
 }
 
 .values-3 {
@@ -720,7 +880,7 @@
 }
 
 .variables-1 {
-  var-foo: var(foo);
+  --var-foo: var(foo);
 }
 
 @viewport {
@@ -733,10 +893,21 @@
   display: auto;
 }
 
+.webvtt1::cue,
+.webvtt1::cue-region,
+.webvtt1::cue(#cue1),
+.webvtt1::cue-region(#scroll), {
+  display: auto;
+}
+
 .will-change-1 {
   will-change: scroll-position;
 }
 
+.worklets-1 {
+  display: auto;
+}
+
 .writing-modes-3 {
   writing-mode: before;
   text-orientation: after;
@@ -744,8 +915,6 @@
   glyph-orientation-vertical: upright;
   display: plaintext;
   display: sideways;
-  display: sideways-rl;
-  display: sideways-lr;
   display: isolate;
   display: isolate-override;
   display: horizontal-tb;
@@ -753,10 +922,16 @@
   display: vertical-lr;
 }
 
+.writing-modes-4 {
+  display: sideways-rl;
+  display: sideways-lr;
+}
+
 .html5,
 picture,
 rb,
 rtc,
+slot,
 template {
   display: auto;
 }
@@ -829,18 +1004,15 @@ tspan,
 unknown,
 use,
 view {
-  color-interpolation: arcs;
-  color-rendering: butt;
-  cx: crispEdges;
-  cy: geometricPrecision;
-  d: optimizeQuality;
-  fill-opacity: painted;
-  fill-rule: stroke;
-  fill: viewport;
+  color-interpolation: crispEdges;
+  color-rendering: geometricPrecision;
+  cx: optimizeQuality;
+  cy: painted;
+  d: visiblePainted;
   image-rendering: visibleFill;
-  marker-end: visiblePainted;
-  marker-mid: visibleStroke;
-  marker-start: bounding-box;
+  marker-end: stroke;
+  marker-mid: viewport;
+  marker-start: visibleStroke;
   pointer-events: context-fill;
   r: context-stroke;
   rx: fixed-position;
@@ -850,15 +1022,7 @@ view {
   solid-opacity: non-scaling-size;
   stop-color: non-rotation;
   stop-opacity: child(1);
-  stroke-dasharray: icc-color(foo);
-  stroke-dashoffset: auto;
-  stroke-linecap: auto;
-  stroke-linejoin: auto;
-  stroke-miterlimit: auto;
-  stroke-opacity: auto;
-  stroke-width: auto;
-  stroke: auto;
-  text-anchor: auto;
+  text-anchor: icc-color(foo);
   vector-effect: auto;
   x: auto;
   y: auto;

test/test.html

@@ -1,950 +0,0 @@
-<!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-3 {
-  justify-self: safe;
-  justify-content: unsafe;
-  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;
-  display: legacy;
-}
-</style>
-<style>
-.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;
-}
-</style>
-<style>
-.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;
-}
-</style>
-<style>
-.backgrounds-4 {
-  background-position-x: x-start;
-  background-position-y: x-end;
-  background-position-inline: y-start;
-  background-position-block: y-end;
-  corner-shape: bevel;
-  corners: scoop;
-  border-limit: notch;
-  border-clip: auto;
-  border-clip-top: auto;
-  border-clip-right: auto;
-  border-clip-bottom: auto;
-  border-clip-left: auto;
-}
-</style>
-<style>
-.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;
-}
-</style>
-<style>
-.break-3 {
-  break-after: auto;
-  break-before: auto;
-  break-inside: auto;
-  box-decoration-break: auto;
-}
-</style>
-<style>
-.cascade-3 {
-  all: initial;
-  display: unset;
-}
-</style>
-<style>
-@import "test.css" supports(display: auto);
-.cascade-4 {
-  display: revert;
-}
-</style>
-<style>
-.color {
-  opacity: rgba(0, 0, 0, 1);
-  display: hsla(0, 0, 0, 1);
-  display: currentcolor;
-}
-</style>
-<style>
-@color-profile swopc {
-  src: url('http://example.org/swop-coated.icc');
-}
-
-.color-4 {
-  color-adjust: #FFEEDDFF;
-  display: rebeccapurple;
-  display: hwb(120deg, 44%, 50%);
-  display: lab(1 2 3);
-  display: lch(4 5 6);
-  display: gray(50%);
-  display: color(swopc, 0 206 190 77);
-  display: device-cmyk(0, 81%, 81%, 30%);
-  display: color-mod(#112233 tint(50%));
-}
-</style>
-<style>
-@supports (display: auto) or
-  (display: auto) not
-  (display: auto) {
-  .conditional {
-    display: auto;
-  }
-}
-</style>
-<style>
-.compositing-1 {
-  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;
-}
-</style>
-<style>
-.content-3 {
-  string-set: open;
-  bookmark-level: closed;
-  bookmark-label: leader('.');
-  bookmark-state: string(heading, first);
-  display: target-counter(attr(href url), page);
-  display: target-counters(lack-of-example);
-  display: target-text(attr(href url));
-}
-</style>
-<style>
-@counter-style counter-styles-3 {
-  system: cyclic;
-  negative: symbolic;
-  prefix: additive;
-  suffix: extends;
-  range: bullets;
-  pad: numbers;
-  fallback: words;
-  symbols: symbols("*" "\2020" "\2021" "\A7");
-  additive-symbols: auto;
-  speak-as: auto;
-}
-
-.counter-styles-3 {
-  display: arabic-indic;
-  display: upper-armenian;
-  display: lower-armenian;
-  display: bengali;
-  display: cambodian;
-  display: khmer;
-  display: cjk-decimal;
-  display: devanagari;
-  display: gujarati;
-  display: gurmukhi;
-  display: kannada;
-  display: lao;
-  display: malayalam;
-  display: mongolian;
-  display: myanmar;
-  display: oriya;
-  display: persian;
-  display: tamil;
-  display: telugu;
-  display: thai;
-  display: tibetan;
-  display: cjk-earthly-branch;
-  display: cjk-heavenly-stem;
-  display: disclosure-closed;
-  display: disclosure-open;
-  display: japanese-informal;
-  display: japanese-formal;
-  display: korean-hangul-formal;
-  display: korean-hanja-informal;
-  display: korean-hanja-formal;
-  display: simp-chinese-informal;
-  display: simp-chinese-formal;
-  display: trad-chinese-informal;
-  display: trad-chinese-formal;
-  display: ethiopic-numeric;
-}
-</style>
-<style>
-.cssom-1 {
-  display: auto;
-}
-</style>
-<style>
-.cssom-view-1 {
-  scroll-behavior: smooth;
-}
-</style>
-<style>
-.display-3 {
-  box-suppress: flow;
-  display: flow-root;
-  display: contents;
-  display: inline-list-item;
-  display: discard;
-}
-</style>
-<style>
-.exclusions {
-  wrap-flow: minimum;
-  wrap-through: maximum;
-}
-</style>
-<style>
-.filter-effects-1 {
-  flood-color: sRGB;
-  flood-opacity: linearRGB;
-  color-interpolation-filters: auto;
-  lighting-color: auto;
-  display: blur(5px);
-  display: brightness(0.4);
-  display: contrast(200%);
-  display: drop-shadow(16px 16px 20px blue);
-  display: grayscale(50%);
-  display: hue-rotate(90deg);
-  display: invert(75%);
-  display: opacity(25%);
-  display: saturate(30%);
-  display: sepia(60%);
-}
-</style>
-<style>
-.flexbox-1 {
-  flex-direction: flex;
-  flex-wrap: inline-flex;
-  flex-flow: row;
-  order: row-reverse;
-  flex: column-reverse;
-  flex-grow: wrap;
-  flex-shrink: wrap-reverse;
-}
-</style>
-<style>
-.font-loading-3 {
-  display: auto;
-}
-</style>
-<style>
-.fonts-3 {
-  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;
-}
-</style>
-<style>
-.fonts-4 {
-  font-optical-sizing: emoji;
-  font-variation-settings: math;
-  display: fangsong;
-  display: system-ui;
-}
-</style>
-<style>
-.gcpm-3::footnote-call,
-.gcpm-3::footnote-marker {
-  running: footnote;
-  footnote-display: line; 
-  footnote-policy: element(header);
-  display: running(heading);
-}
-</style>
-<style>
-.geometry-1 {
-  display: auto;
-}
-</style>
-<style>
-.grid-1 {
-  grid-template-columns: grid;
-  grid-template-rows: inline-grid;
-  grid-template-areas: minmax(0, 1);
-  grid-template: fit-content(10%);
-  grid-auto-rows: repeat(4);
-  grid-auto-columns: 0.2fr;
-  grid-auto-flow: dense;
-  grid: auto-flow;
-  grid-row-start: subgrid;
-  grid-column-start: span;
-  grid-row-end: auto;
-  grid-column-end: auto;
-  grid-column: auto;
-  grid-row: auto;
-  grid-area: auto;
-  grid-column-gap: auto;
-  grid-row-gap: auto;
-  grid-gap: auto;
-}
-</style>
-<style>
-.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);
-}
-</style>
-<style>
-.inline-3 {
-  dominant-baseline: mathematical;
-  alignment-baseline: ideographic;
-  baseline-shift: auto;
-  initial-letter: auto;
-  initial-letter-align: auto;
-  initial-letter-wrap: auto;
-}
-</style>
-<style>
-.line-grid-1 {
-  line-grid: create;
-  line-snap: block-start;
-  box-snap: block-end;
-  display: first-baseline;
-  display: last-baseline;
-}
-</style>
-<style>
-.lists-3::marker {
-  display: auto;
-}
-</style>
-<style>
-.masking-1 {
-  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;
-}
-</style>
-<style>
-.motion-1 {
-  motion-path: path(M 100 100 L 300 100 L 200 300 z);
-  motion-offset: auto;
-  motion-rotation: auto;
-  motion: auto;
-}
-</style>
-<style>
-.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;
-}
-</style>
-<style>
-.overflow-3 {
-  max-lines: auto;
-}
-</style>
-<style>
-.page {
-  display: avoid-page;
-  display: page;
-  display: recto;
-  display: verso;
-}
-</style>
-<style>
-.page-floats-3 {
-  float-reference: inline-start;
-  float-defer: inline-end;
-  float-offset: snap-block;
-  display: snap-inline;
-  display: snap-block(2em, near);
-  display: snap-inline(2em, near);
-}
-</style>
-<style>
-.paint-api-1 {
-  display: paint(my_logo);
-}
-</style>
-<style>
-.pointerevents {
-  touch-action: pan-x;
-  display: pan-y;
-  display: manipulation;
-}
-</style>
-<style>
-.position-3 {
-  offset-before: sticky;
-  offset-end: auto;
-  offset-after: auto;
-  offset-start: auto;
-}
-</style>
-<style>
-.pseudo-4::inactive-selection,
-.pseudo-4::spelling-error,
-.pseudo-4::grammer-error {
-  display: auto;
-}
-</style>
-<style>
-.regions-1:region {
-  flow-into: element;
-  flow-from: content;
-  region-fragment: break;
-  display: region;
-  display: avoid-region;
-}
-</style>
-<style>
-@media (device-radius: 50%) {
-  .round-display-1 {
-    shape-inside: outside-shape;
-    border-boundary: shape-box;
-    polar-angle: parent;
-    polar-distance: polar;
-  }
-}
-</style>
-<style>
-.ruby-1 {
-  ruby-position: ruby-base-container;
-  ruby-merge: ruby-text-container;
-  ruby-align: inter-character;
-}
-</style>
-<style>
-@scope .scoping-1 {
-  div {
-    display: auto;
-  }
-}
-
-.scoping-1:scope-context div,
-.scoping-1:host,
-.scoping-1:host(.foo),
-.scoping-1:host-context,
-.scoping-1::shadow,
-.scoping-1::content,
-.scoping-1 /deep/ span {
-  display: auto;
-}
-</style>
-<style>
-.scroll-snap-1 {
-  scroll-snap-type: x;
-  scroll-padding: y;
-  scroll-snap-margin: mandatory;
-  scroll-snap-align: proximity;
-  scroll-snap-stop: auto;
-  scroll-padding-top: auto;
-  scroll-padding-right: auto;
-  scroll-padding-bottom: auto;
-  scroll-padding-left: auto;
-  scroll-padding-inline-start: auto;
-  scroll-padding-block-start: auto;
-  scroll-padding-inline-end: auto;
-  scroll-padding-block-end: auto;
-  scroll-padding-block: auto;
-  scroll-padding-inline: auto;
-  scroll-snap-margin-top: auto;
-  scroll-snap-margin-right: auto;
-  scroll-snap-margin-bottom: auto;
-  scroll-snap-margin-left: auto;
-  scroll-snap-margin-inline-start: auto;
-  scroll-snap-margin-block-start: auto;
-  scroll-snap-margin-inline-end: auto;
-  scroll-snap-margin-block-end: auto;
-  scroll-snap-margin-block: auto;
-  scroll-snap-margin-inline: auto;
-}
-</style>
-<style>
-.selectors:target,
-.selectors:enabled,
-.selectors:disabled,
-.selectors:checked,
-.selectors:indeterminate,
-.selectors:root,
-.selectors:empty,
-.selectors:last-child,
-.selectors:last-of-type,
-.selectors:first-of-type,
-.selectors:only-child,
-.selectors:only-of-type,
-.selectors:nth-child(2n+1),
-.selectors:nth-last-child(-n+2),
-.selectors:nth-of-type(2n+1),
-.selectors:nth-last-of-type(n+2),
-.selectors:not([DISABLED]) {
-  display: auto;
-}
-</style>
-<style>
-.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,
-.selectors4: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;
-}
-</style>
-<style>
-.selectors-nonelement-1::attr(title) {
-  display: auto;
-}
-</style>
-<style>
-.shapes-1 {
-  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%);
-}
-</style>
-<style>
-.sizing-3 {
-  display: max-content;
-  display: min-content;
-  display: fit-content;
-}
-</style>
-<style>
-.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;
-}
-</style>
-<style>
-.syntax-3 {
-  display: auto;
-}
-</style>
-<style>
-.tables-3 {
-  display: auto;
-}
-</style>
-<style>
-.text-3 {
-  hyphens: manual;
-  line-break: loose;
-  overflow-wrap: strict;
-  tab-size: match-parent;
-  display: hanging;
-  display: each-line;
-  display: full-width;
-}
-</style>
-<style>
-.text-4 {
-  text-space-collapse: preserve-auto;
-  text-space-trim: preserve-trim;
-  text-wrap: preserve-breaks;
-  wrap-before: preserve-spaces;
-  wrap-after: trim-inner;
-  wrap-inside: discard-before;
-  hyphenate-character: discard-after;
-  hyphenate-limit-zone: avoid-line;
-  hyphenate-limit-chars: avoid-flex;
-  hyphenate-limit-lines: pre-wrap-auto;
-  hyphenate-limit-last: no-limit;
-  text-spacing: spread;
-  display: trim-start;
-  display: space-start;
-  display: trim-end;
-  display: space-end;
-  display: trim-adjacent;
-  display: space-adjacent;
-  display: no-compress;
-  display: ideograph-alpha;
-  display: ideograph-numeric;
-  display: punctuation;
-}
-</style>
-<style>
-.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;
-}
-</style>
-<style>
-.transforms-1 {
-  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);
-}
-</style>
-<style>
-.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);
-}
-</style>
-<style>
-.ui-3 {
-  caret-color: grab;
-  display: grabbing;
-}
-</style>
-<style>
-.ui-4 {
-  caret: fade;
-  caret-shape: fade(1em);
-  caret-animation: underscore;
-}
-</style>
-<style>
-.values-3 {
-  display: 1ch;
-  display: 1vw;
-  display: 1vh;
-  display: 1vmin;
-  display: 1q;
-  display: 1turn;
-  display: calc(100%/3 - 2*1em - 2*1px);
-}
-</style>
-<style>
-.variables-1 {
-  var-foo: var(foo);
-}
-</style>
-<style>
-@viewport {
-  min-zoom: auto;
-  max-zoom: auto;
-  user-zoom: auto;
-}
-</style>
-<style>
-.web-animations-1 {
-  display: auto;
-}
-</style>
-<style>
-.will-change-1 {
-  will-change: scroll-position;
-}
-</style>
-<style>
-.writing-modes-3 {
-  writing-mode: before;
-  text-orientation: after;
-  text-combine-upright: mixed;
-  glyph-orientation-vertical: upright;
-  display: plaintext;
-  display: sideways;
-  display: sideways-rl;
-  display: sideways-lr;
-  display: isolate;
-  display: isolate-override;
-  display: horizontal-tb;
-  display: vertical-rl;
-  display: vertical-lr;
-}
-</style>
-<style>
-.html5,
-picture,
-rb,
-rtc,
-template {
-  display: auto;
-}
-</style>
-<style>
-.svg2,
-animate,
-animateMotion,
-animateTransform,
-circle,
-clipPath,
-cursor,
-defs,
-desc,
-discard,
-ellipse,
-feBlend,
-feColorMatrix,
-feComponentTransfer,
-feComposite,
-feConvolveMatrix,
-feDiffuseLighting,
-feDisplacementMap,
-feDistantLight,
-feDropShadow,
-feFlood,
-feFuncA,
-feFuncB,
-feFuncG,
-feFuncR,
-feGaussianBlur,
-feImage,
-feMerge,
-feMergeNode,
-feMorphology,
-feOffset,
-fePointLight,
-feSpecularLighting,
-feSpotLight,
-feTile,
-feTurbulence,
-filter,
-foreignObject,
-g,
-hatch,
-hatchpath,
-image,
-line,
-linearGradient,
-marker,
-mesh,
-meshgradient,
-meshpatch,
-meshrow,
-metadata,
-mpath,
-path,
-pattern,
-polygon,
-polyline,
-radialGradient,
-rect,
-set,
-solidcolor,
-stop,
-switch,
-symbol,
-text,
-textPath,
-tspan,
-unknown,
-use,
-view {
-  color-interpolation: arcs;
-  color-rendering: butt;
-  cx: crispEdges;
-  cy: geometricPrecision;
-  d: optimizeQuality;
-  fill-opacity: painted;
-  fill-rule: stroke;
-  fill: viewport;
-  image-rendering: visibleFill;
-  marker-end: visiblePainted;
-  marker-mid: visibleStroke;
-  marker-start: bounding-box;
-  pointer-events: context-fill;
-  r: context-stroke;
-  rx: fixed-position;
-  ry: miter;
-  shape-rendering: miter-clip;
-  solid-color: non-scaling-stroke;
-  solid-opacity: non-scaling-size;
-  stop-color: non-rotation;
-  stop-opacity: child(1);
-  stroke-dasharray: icc-color(foo);
-  stroke-dashoffset: auto;
-  stroke-linecap: auto;
-  stroke-linejoin: auto;
-  stroke-miterlimit: auto;
-  stroke-opacity: auto;
-  stroke-width: auto;
-  stroke: auto;
-  text-anchor: auto;
-  vector-effect: auto;
-  x: auto;
-  y: auto;
-}
-</style>
-  </head>
-  <body>
-    <header>
-      <h1>vim-css3-syntax</h1>
-    </header>
-  </body>
-</html>