1.9.1

https://www.w3.org/TR/2021/WD-css-values-4-20211016/

.github/FUNDING.yml

@@ -1 +1 @@
-github: hail2u
+github: [hail2u]

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 8.1 or higher with
+I **strongly** recommend to install this plugin on *Vim 8.2 or higher with
 default runtime files*.
 
 
@@ -83,13 +83,13 @@ want to highlight Media Queries correctly, you must update Vim to 8.0+.
 AUTHOR
 ------
 
-Kyo Nagashima <hail2u@gmail.com> (https://kyonagashima.com/)
+Kyo Nagashima <hail2u@gmail.com> (https://hail2u.net/)
 
 
 LICENSE
 -------
 
-MIT License
+MIT
 
 
 [1]: http://www.vim.org/

after/syntax/css/box-3.vim

@@ -1,9 +0,0 @@
-syn match cssBoxProp contained "\<margin-trim\>"
-syn match cssBoxAttr contained "\<in-flow\>"
-" These will be moved to block-3
-syn match cssBoxProp contained "\<clear-after\>"
-syn match cssBoxProp contained "\<float-displace\>"
-syn match cssBoxProp contained "\<indent-edge-reset\>"
-syn keyword cssBoxAttr contained scrollbar panner marquee decendants
-syn match cssBoxAttr contained "\<block-within-page\>"
-syn match cssBoxAttr contained "\<\(margin\|border\|padding\|content\)-edge\>"

after/syntax/css/box-4.vim

@@ -0,0 +1,2 @@
+syn match cssBoxProp contained "\<margin-trim\>"
+syn match cssBoxAttr contained "\<in-flow\>"

after/syntax/css/cascade-5.vim

@@ -0,0 +1 @@
+syn match cssFontAttr contained "\<revert-layer\>"

after/syntax/css/color-4.vim

@@ -1,4 +1,4 @@
 syn keyword cssFontAttr contained perceptual
 syn match cssFontAttr contained "\<\(relative\|absolute\)-colorimetric\>"
-syn region cssFunction contained matchgroup=cssFunctionName start="\<\(hwb\|lab\|lch\|gray\|color\|device-cmyk\=\)\s*(" end=")" oneline keepend
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(hwb\|lab\|lch\|color\|device-cmyk\=\)\s*(" end=")" oneline keepend
 syn match cssFontDescriptor "@color-profile\>" nextgroup=cssFontDescriptorBlock skipwhite skipnl

after/syntax/css/color-5.vim

@@ -1 +1 @@
-syn region cssFunction contained matchgroup=cssFunctionName start="\<\(color-\(mix\|contrast\|adjust\)\|red\|green\|blue\|alpha\|hue\|saturation\|lightness\|whiteness\|blackness\|a\|b\|chroma\)\s*(" end=")" contains=cssCustomProp,cssFunction,cssColor,cssFunctionComma oneline
+syn region cssFunction contained matchgroup=cssFunctionName start="\<color-\(mix\|contrast\)\s*(" end=")" contains=cssCustomProp,cssFunction,cssColor,cssFunctionComma oneline

after/syntax/css/color-adjust-1.vim

@@ -0,0 +1,3 @@
+syn match cssColorProp contained "\<\(forced-\|print-\)\=color-adjust\>"
+syn match cssColorProp contained "\<color-scheme\>"
+syn keyword cssFontAttr contained economy exact

after/syntax/css/color-adjust.vim

@@ -1,3 +0,0 @@
-syn match cssColorProp contained "\<\(forced-\)\=color-adjust\>"
-syn match cssColorProp contained "\<color-scheme\>"
-syn keyword cssFontAttr contained only economy exact

after/syntax/css/contain-2.vim

@@ -0,0 +1 @@
+syn match cssFontProp contained "\<content-visibility\>"

after/syntax/css/display-3.vim

@@ -1,2 +1,3 @@
 syn keyword cssFontAttr contained contents discard
-syn match cssBoxAttr contained "\<ruby\(-\(base\(-group\)\=\|text\(-group\)\=\)\)\=\>"
+syn match cssBoxAttr contained "\<run-in\>"
+syn match cssBoxAttr contained "\<ruby\(-\(base\|text\)\)\=\>"

after/syntax/css/fonts-4.vim

@@ -1,16 +1,19 @@
+syn match cssFontProp contained "\<font-synthesis\(-\(weight\|style\|small-caps\|settings\)\)\=\>"
+syn match cssFontProp contained "\<font-named-instance\>"
 syn match cssFontProp contained "\<font-display\>"
+syn match cssFontProp contained "\<\(ascent\|descent\|line-gap\)-override\>"
 syn match cssFontProp contained "\<font-optical-sizing\>"
 syn match cssFontProp contained "\<font-variation-settings\>"
 syn match cssFontProp contained "\<font-palette\>"
+syn match cssFontProp contained "\<font-variant-emoji\>"
 syn match cssFontProp contained "\<font-presentation\>"
 syn match cssFontProp contained "\<base-palette\>"
 syn match cssFontProp contained "\<override-color\>"
-syn match cssFontProp contained "\<font-variant-emoji\>"
-syn keyword cssFontAttr contained emoji math fangsong infinity swap fallback optional light dark
+syn keyword cssFontAttr contained emoji math fangsong swap fallback light dark
 syn match cssFontAttr contained "\<system-ui\>"
 syn match cssFontAttr contained "\<ui-\(\(sans-\)\=serif\|monospace\|rounded\)\>"
-syn match cssFontAttr contained "\<historical-forms\>"
 syn match cssFontAttr contained "\<xxx-large\>"
+syn match cssFontAttr contained "\<historical-forms\>"
 syn region cssFunction contained matchgroup=cssFunctionName start="\<\(stylistic\|styleset\|character-variant\|swash\|ornaments\|annotation\)\s*(" end=")" oneline keepend
-" syn match cssFontDescriptor "@font-feature-values\>" nextgroup=cssFontDescriptorBlock skipwhite skipnl
+syn match cssFontDescriptor "@font-feature-values\>" nextgroup=cssFontDescriptorBlock skipwhite skipnl
 syn match cssFontDescriptor "@font-palette-values\>" nextgroup=cssFontDescriptorBlock skipwhite skipnl

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

@@ -0,0 +1 @@
+syn region cssPseudoClassFn contained matchgroup=cssFunctionName start="\<highlight(" end=")" contains=cssStringQ,cssStringQQ

after/syntax/css/images-3.vim

@@ -1,6 +1,6 @@
 syn match cssFontProp contained "\<object-\(fit\|position\)\>"
 syn match cssFontProp contained "\<image-orientation\>"
-syn keyword cssFontAttr contained snap flip
+syn keyword cssFontAttr contained snap flip pixelated
 syn match cssFontAttr contained "\<scale-down\>"
 syn match cssFontAttr contained "\<from-image\>"
 syn region cssFunction contained matchgroup=cssFunctionName start="\<\(repeating-\(linear\|radial\)-gradient\)\s*(" end=")" oneline keepend

after/syntax/css/inline-3.vim

@@ -1,5 +1,8 @@
 syn match cssFontProp contained "\<\(dominant\|alignment\)-baseline\>"
-syn match cssFontProp contained "\<baseline-shift\>"
+syn match cssFontProp contained "\<baseline-\(shift\|source\)\>"
+syn match cssFontProp contained "\<text-edge\>"
+syn match cssFontProp contained "\<leading-trim\>"
 syn match cssFontProp contained "\<inline-sizing\>"
-syn match cssFontProp contained "\<initial-letters\(-\(align\|wrap\)\)\="
-syn keyword cssFontAttr contained mathematical ideographic
+syn match cssFontProp contained "\<initial-letter\(-\(align\|wrap\)\)\=\>"
+syn keyword cssFontAttr contained central mathematical leading cap ex drop raise
+syn match cssFontAttr contained "\<ideographic\(-ink\)\=\>"

after/syntax/css/logical-1.vim

@@ -1,5 +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 "\<\(margin\|padding\)\(-\(block\|inline\)\(-\(start\|end\)\)\=\)\=\>"
 syn match cssFontProp contained "\<border-\(block\|inline\)\(\(-\(start\|end\)\)\=\(-\(width\|style\|color\)\)\=\)\=\>"
 syn match cssFontProp contained "\<border-\(start\|end\)-\(start\|end\)-radius\>"
 syn keyword cssFontAttr contained logical physical rotate

after/syntax/css/overflow-3.vim

@@ -1,5 +1,5 @@
 syn keyword cssFontProp contained continue
-syn match cssFontProp contained "\<block-overflow\>"
+syn match cssFontProp contained "\<overflow-\(clip-margin\|block\|inline\)\>"
+syn match cssFontProp contained "\<block-ellipsis\>"
 syn match cssFontProp contained "\<line-clamp\>"
 syn match cssFontProp contained "\<max-lines\>"
-syn match cssFontProp contained "\<overflow-\(block\|inline\)\>"

after/syntax/css/position-3.vim

@@ -1,2 +1,2 @@
-syn match cssFontProp contained "\<offset-\(before\|end\|after\|start\)\>"
+syn match cssFontProp contained "\<inset\(-\(block\|inline\)\(-\(start\|end\)\)\=\)\=\>"
 syn keyword cssFontAttr contained sticky

after/syntax/css/pseudo-4.vim

@@ -1,2 +1,3 @@
-syn match cssPseudoClassId contained "\<inactive-selection\>"
+syn match cssPseudoClassId contained "\<target-text\>"
 syn match cssPseudoClassId contained "\<\(spelling\|grammer\)-error\>"
+syn match cssPseudoClassId contained "\<file-selectors-button\>"

after/syntax/css/ruby-1.vim

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

after/syntax/css/sizing-4.vim

@@ -0,0 +1,3 @@
+syn match cssFontProp contained "\<contain-intrinsic-size\>"
+syn match cssFontProp contained "\<min-intrinsic-sizing\>"
+syn match cssFontAttr contained "\<zero-if-\(scroll\|extrinsic\)\>"

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

@@ -1,4 +1,6 @@
-syn match cssTextProp contained "\<text-\(decoration-\(width\|skip\|skip-ink\)\|underline-offset\|emphasis-skip\)\>"
+syn match cssTextProp contained "\<text-\(decoration-\(thickness\|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 "\<\(spelling\|grammer\)-error\>"
+syn match cssTextAttr contained "\<from-font\>"
 syn match cssTextAttr contained "\<\(\(leading\|trailing\)-\)\=spaces\>"
+syn match cssTextAttr contained "\<box-decoration\>"

after/syntax/css/unofficials.vim

@@ -0,0 +1,2 @@
+syn match cssFontProp contained "\<backdrop-filter\>"
+syn region cssFunction contained matchgroup=cssFunctionName start="\<env\s*(" end=")" oneline keepend

after/syntax/css/values-4.vim

@@ -1,2 +1,3 @@
-syn match cssValueLength contained "[-+]\=\d\+\(\.\d*\)\=\(vi\|vb\|ic\|cap\|lh\|rlh\)"
-syn region cssFunction contained matchgroup=cssFunctionName start="\<\(min\|max\|clamp\|toggle\)\s*(" end=")" oneline keepend
+syn match cssValueLength contained "[-+]\=\d\+\(\.\d*\)\=\(rex\|cap\|rcap\|rch\|ic\|ric\|lh\|rlh\)"
+syn match cssValueLength contained "[-+]\=\d\+\(\.\d*\)\=\(s\|l\|d\)\=v\(h\|w\|i\|b\|min\|max\)"
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\(mix\|min\|max\|clamp\|toggle\|round\|mod\|rem\|a\=\(sin\|cos\|tan\)\|atan2\|pow\|sqrt\|hypot\|log\|exp\|abs\|sign\)\s*(" end=")" oneline keepend

test/test.css

@@ -43,22 +43,12 @@
 }
 
 .box-3 {
+	display: auto;
+}
+
+.box-4 {
 	margin-trim: auto;
 	display: in-flow;
-	/* .block-3 */
-	clear-after: auto;
-	float-displace: auto;
-	indent-edge-reset: auto;
-	display: scrollbar;
-	display: panner;
-	display: marquee;
-	display: discard;
-	display: decendants;
-	display: block-within-page;
-	display: margin-edge;
-	display: border-edge;
-	display: padding-edge;
-	display: content-edge;
 }
 
 .break-3 {
@@ -75,14 +65,16 @@
 	display: auto;
 }
 
+@import "cascade-4.css" supports(display: auto);
+
 .cascade-4 {
 	display: revert;
 }
 
-@import "conditional-3.css" supports(display: auto);
+@import "cascade-5.css" layer(framework component);
 
-@supports (selector(.conditional-4)) {
-	display: auto;
+.cascade-5 {
+	display: revert-layer;
 }
 
 .color-3 {
@@ -93,7 +85,6 @@
 	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: relative-colorimetric;
@@ -108,14 +99,14 @@
 .color-5 {
 	display: color-mix(red yellow 65%);
 	display: color-contrast(wheat tan, sienna, var(--myAccent), #d2691e);
-	display: color-adjust(peru lightness(-20%));
 }
 
 .color-adjust-1 {
 	color-scheme: auto;
 	forced-color-adjust: auto;
+	print-color-adjust: auto;
 	color-adjust: auto;
-	display: only;
+	display: light;
 	display: economy;
 	display: exact;
 }
@@ -142,13 +133,17 @@
 }
 
 @supports (display: auto) or
-	(display: auto) not
-	(display: auto) {
+(display: auto) not
+(display: auto) {
 	.conditional-3 {
-	  display: auto;
+		display: auto;
 	}
 }
 
+@supports (selector(.conditional-4)) {
+	display: auto;
+}
+
 .contain-1 {
 	contain: auto;
 	display: layout;
@@ -157,7 +152,7 @@
 }
 
 .contain-2 {
-	display: auto;
+	content-visibility: auto;
 }
 
 .content-3 {
@@ -250,11 +245,10 @@
 
 .display-3 {
 	display: contents;
+	display: run-in;
 	display: ruby;
 	display: ruby-base;
 	display: ruby-text;
-	display: ruby-base-group;
-	display: ruby-text-group;
 }
 
 .easing-1 {
@@ -365,34 +359,47 @@
 }
 
 .fonts-4 {
+	font-synthesis-weight: auto;
+	font-synthesis-style: auto;
+	font-synthesis-small-caps: auto;
+	font-variation-settings: auto;
+	font-named-instance: auto;
 	font-display: auto;
+	ascent-override: auto;
+	descent-override: auto;
+	line-gap-override: auto;
 	font-optical-sizing: auto;
 	font-variation-settings: auto;
 	font-palette: auto;
-	font-presentation: auto;
 	font-variant-emoji: auto;
+	font-presentation: auto;
 	display: system-ui;
 	display: emoji;
 	display: math;
 	display: fangsong;
-	display: infinity;
-	display: stylistic(feature-value-name);
-	display: 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: swap;
-	display: fallback;
-	display: optional;
-	display: light;
-	display: dark;
 	display: ui-serif;
 	display: ui-sans-serif;
 	display: ui-monospace;
 	display: ui-rounded;
 	display: xxx-large;
+	display: swap;
+	display: fallback;
+	display: historical-forms;
+	display: stylistic(feature-value-name);
+	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: light;
+	display: dark;
+}
+
+@font-feature-values Test {
+	@swash {
+		swishy: 1;
+		flowing: 2;
+	}
 }
 
 @font-palette-values Test {
@@ -406,7 +413,7 @@
 	footnote-display: auto;
 	footnote-policy: auto;
 	display: footnote;
-	display: line; 
+	display: line;
 	display: element(header);
 	display: running(heading);
 }
@@ -427,6 +434,10 @@
 	display: auto;
 }
 
+.highlight-api-1::highlight(test) {
+	display: auto;
+}
+
 .html5,
 picture,
 rb,
@@ -444,6 +455,7 @@ template {
 	display: flip;
 	display: scale-down;
 	display: from-image;
+	display: pixelated;
 	display: repeating-linear-gradient(to bottom, yellow, blue);
 	display: repeating-radial-gradient(farthest-corner at 50% 50%, yellow, green);
 }
@@ -458,13 +470,23 @@ template {
 .inline-3 {
 	dominant-baseline: auto;
 	alignment-baseline: auto;
+	baseline-source: auto;
 	baseline-shift: auto;
+	text-edge: auto;
+	leading-trim: auto;
 	inline-sizing: auto;
-	initial-letters: auto;
-	initial-letters-align: auto;
-	initial-letters-wrap: auto;
+	initial-letter: auto;
+	initial-letter-align: auto;
+	initial-letter-wrap: auto;
 	display: mathematical;
+	display: central;
 	display: ideographic;
+	display: leading;
+	display: cap;
+	display: ex;
+	display: ideographic-ink;
+	display: drop;
+	display: raise;
 }
 
 .layout-api-1 {
@@ -503,13 +525,6 @@ template {
 	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;
@@ -611,12 +626,13 @@ mask {
 }
 
 .overflow-3 {
-	max-lines: auto;
-	block-overflow: auto;
-	line-clamp: auto;
-	continue: auto;
+	overflow-clip-margin: auto;
 	overflow-block: auto;
 	overflow-inline: auto;
+	block-ellipsis: auto;
+	line-clamp: auto;
+	max-lines: auto;
+	continue: auto;
 }
 
 .overflow-4::nth-fragment(1) {
@@ -665,10 +681,13 @@ mask {
 }
 
 .position-3 {
-	offset-before: auto;
-	offset-end: auto;
-	offset-after: auto;
-	offset-start: 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;
 	display: sticky;
 }
 
@@ -678,9 +697,10 @@ mask {
 	initial-value: auto;
 }
 
-.pseudo-4::inactive-selection,
+.pseudo-4::target-text,
 .pseudo-4::spelling-error,
-.pseudo-4::grammer-error {
+.pseudo-4::grammer-error,
+.pseudi-4::file-selectors-button {
 	display: auto;
 }
 
@@ -714,14 +734,14 @@ mask {
 
 @media (device-radius: 50%) {
 	.round-display-1 {
-	  shape-inside: auto;
-	  border-boundary: auto;
-	  polar-angle: auto;
-	  polar-distance: auto;
-	  display: outside-shape;
-	  display: shape-box;
-	  display: parent;
-	  display: polar;
+		shape-inside: auto;
+		border-boundary: auto;
+		polar-angle: auto;
+		polar-distance: auto;
+		display: outside-shape;
+		display: shape-box;
+		display: parent;
+		display: polar;
 	}
 }
 
@@ -729,6 +749,7 @@ mask {
 	ruby-position: auto;
 	ruby-merge: auto;
 	ruby-align: auto;
+	ruby-overhang: auto;
 	display: ruby-base-container;
 	display: ruby-text-container;
 	display: inter-character;
@@ -746,7 +767,7 @@ mask {
 
 @scope .scoping-1 {
 	div {
-	  display: auto;
+		display: auto;
 	}
 }
 
@@ -835,10 +856,6 @@ mask {
 	display: auto;
 }
 
-.selectors-nonelement-1::attr(title) {
-	display: auto;
-}
-
 .shadow-parts::part(textspan) {
 	display: auto;
 }
@@ -860,6 +877,14 @@ mask {
 	display: fit-content(10%);
 }
 
+.sizing-4 {
+	contain-intrinsic-size: auto;
+	min-intrinsic-sizing: auto;
+	display: fit-content;
+	display: zero-if-scroll;
+	display: zero-if-extrinsic;
+}
+
 .speech-1 {
 	voice-volume: auto;
 	voice-balance: auto;
@@ -1076,12 +1101,15 @@ view {
 }
 
 .text-decor-4 {
-	text-decoration-width: auto;
+	text-decoration-thickness: auto;
 	text-underline-offset: auto;
 	text-decoration-skip: auto;
 	text-decoration-skip-ink: auto;
 	text-emphasis-skip: auto;
+	display: spelling-error;
+	display: grammer-error;
 	display: objects;
+	display: from-font;
 	display: spaces;
 	display: leading-spaces;
 	display: trailing-spaces;
@@ -1128,6 +1156,11 @@ view {
 	display: underscore;
 }
 
+.unofficials {
+	backdrop-filter: auto;
+	display: env(safe-area-inset-top, 20px);
+}
+
 .values-3 {
 	display: 1ch;
 	display: 1q;
@@ -1137,14 +1170,54 @@ view {
 .values-4 {
 	display: 1vi;
 	display: 1vb;
-	display: 1ic;
+	display: 1rex;
 	display: 1cap;
+	display: 1rcap;
+	display: 1rch;
+	display: 1ic;
+	display: 1ric;
 	display: 1lh;
 	display: 1rlh;
+	display: 1svh;
+	display: 1svw;
+	display: 1svi;
+	display: 1svb;
+	display: 1svmin;
+	display: 1svmax;
+	display: 1lvh;
+	display: 1lvw;
+	display: 1lvi;
+	display: 1lvb;
+	display: 1lvmin;
+	display: 1lvmax;
+	display: 1dvh;
+	display: 1dvw;
+	display: 1dvi;
+	display: 1dvb;
+	display: 1dvmin;
+	display: 1dvmax;
 	display: min(0, 1);
 	display: max(0, 1);
 	display: clamp(0, 100, 2);
 	display: toggle(italic, normal);
+	display: round(var(--width), 50px);
+	display: mod(-18px, 5px);
+	display: rem(-18px, 5px);
+	display: sin(45deg);
+	display: cos(1);
+	display: tan(1);
+	display: asin(45deg);
+	display: acos(1);
+	display: atan(1);
+	display: atan2(1, -1);
+	display: pow(1.5, -1);
+	display: sqrt(4);
+	display: hypot(30px, 40px);
+	display: log(10);
+	display: exp(1);
+	display: abs(-1);
+	display: sign(-4);
+	display: mix(33%; 1px; 2px);
 }
 
 .variables-1 {