From: DuckAfire <155199080+duckafire@users.noreply.github.com>
Date: Fri, 13 Feb 2026 08:02:28 +0000 (+0100)
Subject: runtime(css): Add missing numeric units
X-Git-Tag: v9.1.2148~7
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=1cf38bfebeeb322a8437a7c1fd12506661bbfa82;p=thirdparty%2Fvim.git

runtime(css): Add missing numeric units

- Add missing numeric units to css syntax script
  (baseline 2015, 2020, 2022, 2023, 2026):
    dvb, dvh, dvi, dvmax, dvmin, dvw ic,
    lvb, lvh, lvi, lvmax, lvmin, lvw, svb, svh,
    svi, svmax, svmin, svw, vb, vi, x, cap, lh,
    rlh, rcap, rch, rex, ric

closes: #19325

Signed-off-by: DuckAfire <155199080+duckafire@users.noreply.github.com>
Signed-off-by: Christian Brabandt <cb@256bit.org>
---

diff --git a/runtime/syntax/css.vim b/runtime/syntax/css.vim
index da3f3c73f1..3f28717959 100644
--- a/runtime/syntax/css.vim
+++ b/runtime/syntax/css.vim
@@ -8,7 +8,9 @@
 " URL:          https://github.com/vim-language-dept/css-syntax.vim
 " Maintainer:   Jay Sitter <jay@jaysitter.com>
 " Last Change:  2024 Mar 2
+" Changelog:
 " 2025 Nov 11: improve support for cssBoxProperties #18717
+" 2026 Feb 13: add missing numeric units (baseline 2015, 2020, 2022, 2023, 2026) #19325
 
 " quit when a syntax file was already loaded
 if !exists("main_syntax")
@@ -71,12 +73,14 @@ endtry
 
 " digits
 syn match cssValueInteger contained "[-+]\=\d\+" contains=cssUnitDecorators
-syn match cssValueNumber contained "[-+]\=\d\+\(\.\d*\)\=" contains=cssUnitDecorators
-syn match cssValueLength contained "[-+]\=\d\+\(\.\d*\)\=\(mm\|cm\|in\|pt\|pc\|em\|ex\|px\|rem\|dpi\|dppx\|dpcm\|fr\|vw\|vh\|vmin\|vmax\|ch\)\>" contains=cssUnitDecorators
-syn match cssValueLength contained "[-+]\=\d\+\(\.\d*\)\=%" contains=cssUnitDecorators
-syn match cssValueAngle contained "[-+]\=\d\+\(\.\d*\)\=\(deg\|grad\|rad\)\>" contains=cssUnitDecorators
-syn match cssValueTime contained "+\=\d\+\(\.\d*\)\=\(ms\|s\)\>" contains=cssUnitDecorators
-syn match cssValueFrequency contained "+\=\d\+\(\.\d*\)\=\(Hz\|kHz\)\>" contains=cssUnitDecorators
+syn match cssValueNumber contained "[-+]\=\d\+\%(\.\d*\)\=" contains=cssUnitDecorators
+syn match cssValueLength contained "[-+]\=\d\+\%(\.\d*\)\=\%(mm\|cm\|in\|pt\|pc\|px\|dpi\|dppx\|dpcm\|fr\|Q\|x\)\>" contains=cssUnitDecorators
+syn match cssValueLength contained "[-+]\=\d\+\%(\.\d*\)\=r\=\%(em\|ex\|cap\|lh\|ch\|ic\)\>" contains=cssUnitDecorators
+syn match cssValueLength contained "[-+]\=\d\+\%(\.\d*\)\=[dls]\=\%(vb\|vh\|vi\|vmax\|vmin\|vw\)\>" contains=cssUnitDecorators
+syn match cssValueLength contained "[-+]\=\d\+\%(\.\d*\)\=%" contains=cssUnitDecorators
+syn match cssValueAngle contained "[-+]\=\d\+\%(\.\d*\)\=\%(deg\|grad\|rad\|turn\)\>" contains=cssUnitDecorators
+syn match cssValueTime contained "+\=\d\+\%(\.\d*\)\=\%(ms\|s\)\>" contains=cssUnitDecorators
+syn match cssValueFrequency contained "+\=\d\+\%(\.\d*\)\=\%(Hz\|kHz\)\>" contains=cssUnitDecorators
 
 " The 16 basic color names
 syn keyword cssColor contained aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal yellow
@@ -85,23 +89,23 @@ syn keyword cssColor contained aqua black blue fuchsia gray green lime maroon na
 syn keyword cssColor contained aliceblue antiquewhite aquamarine azure
 syn keyword cssColor contained beige bisque blanchedalmond blueviolet brown burlywood
 syn keyword cssColor contained cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan
-syn match cssColor contained /\<dark\(blue\|cyan\|goldenrod\|gray\|green\|grey\|khaki\)\>/
-syn match cssColor contained /\<dark\(magenta\|olivegreen\|orange\|orchid\|red\|salmon\|seagreen\)\>/
-syn match cssColor contained /\<darkslate\(blue\|gray\|grey\)\>/
-syn match cssColor contained /\<dark\(turquoise\|violet\)\>/
+syn match cssColor contained /\<dark\%(blue\|cyan\|goldenrod\|gray\|green\|grey\|khaki\)\>/
+syn match cssColor contained /\<dark\%(magenta\|olivegreen\|orange\|orchid\|red\|salmon\|seagreen\)\>/
+syn match cssColor contained /\<darkslate\%(blue\|gray\|grey\)\>/
+syn match cssColor contained /\<dark\%(turquoise\|violet\)\>/
 syn keyword cssColor contained deeppink deepskyblue dimgray dimgrey dodgerblue firebrick
 syn keyword cssColor contained floralwhite forestgreen gainsboro ghostwhite gold
 syn keyword cssColor contained goldenrod greenyellow grey honeydew hotpink
 syn keyword cssColor contained indianred indigo ivory khaki lavender lavenderblush lawngreen
 syn keyword cssColor contained lemonchiffon limegreen linen magenta
-syn match cssColor contained /\<light\(blue\|coral\|cyan\|goldenrodyellow\|gray\|green\)\>/
-syn match cssColor contained /\<light\(grey\|pink\|salmon\|seagreen\|skyblue\|yellow\)\>/
-syn match cssColor contained /\<light\(slategray\|slategrey\|steelblue\)\>/
-syn match cssColor contained /\<medium\(aquamarine\|blue\|orchid\|purple\|seagreen\)\>/
-syn match cssColor contained /\<medium\(slateblue\|springgreen\|turquoise\|violetred\)\>/
+syn match cssColor contained /\<light\%(blue\|coral\|cyan\|goldenrodyellow\|gray\|green\)\>/
+syn match cssColor contained /\<light\%(grey\|pink\|salmon\|seagreen\|skyblue\|yellow\)\>/
+syn match cssColor contained /\<light\%(slategray\|slategrey\|steelblue\)\>/
+syn match cssColor contained /\<medium\%(aquamarine\|blue\|orchid\|purple\|seagreen\)\>/
+syn match cssColor contained /\<medium\%(slateblue\|springgreen\|turquoise\|violetred\)\>/
 syn keyword cssColor contained midnightblue mintcream mistyrose moccasin navajowhite
 syn keyword cssColor contained oldlace olivedrab orange orangered orchid
-syn match cssColor contained /\<pale\(goldenrod\|green\|turquoise\|violetred\)\>/
+syn match cssColor contained /\<pale\%(goldenrod\|green\|turquoise\|violetred\)\>/
 syn keyword cssColor contained papayawhip peachpuff peru pink plum powderblue
 syn keyword cssColor contained rosybrown royalblue rebeccapurple saddlebrown salmon
 syn keyword cssColor contained sandybrown seagreen seashell sienna skyblue slateblue
@@ -126,25 +130,25 @@ syn match cssColor contained "#\x\{3,4\}\>" contains=cssUnitDecorators
 syn match cssColor contained "#\x\{6\}\>" contains=cssUnitDecorators
 syn match cssColor contained "#\x\{8\}\>" contains=cssUnitDecorators
 
-syn region cssURL contained matchgroup=cssFunctionName start="\<\(uri\|url\|local\|format\)\s*(" end=")" contains=cssStringQ,cssStringQQ oneline
+syn region cssURL contained matchgroup=cssFunctionName start="\<\%(uri\|url\|local\|format\)\s*(" end=")" contains=cssStringQ,cssStringQQ oneline
 syn region cssMathGroup contained matchgroup=cssMathParens start="(" end=")" containedin=cssFunction,cssMathGroup contains=cssCustomProp,cssValue.*,cssFunction,cssColor,cssStringQ,cssStringQQ oneline
-syn region cssFunction contained matchgroup=cssFunctionName start="\<\(var\|calc\)\s*(" end=")" contains=cssCustomProp,cssValue.*,cssFunction,cssURL,cssColor,cssStringQ,cssStringQQ oneline
-syn region cssFunction contained matchgroup=cssFunctionName start="\<\(rgb\|clip\|attr\|counter\|rect\|cubic-bezier\|steps\)\s*(" end=")" oneline  contains=cssValueInteger,cssValueNumber,cssValueLength,cssFunctionComma
-syn region cssFunction contained matchgroup=cssFunctionName start="\<\(rgba\|hsl\|hsla\|color-stop\|from\|to\)\s*(" end=")" oneline  contains=cssColor,cssValueInteger,cssValueNumber,cssValueLength,cssFunctionComma,cssFunction
-syn region cssFunction contained matchgroup=cssFunctionName start="\<\(linear-\|radial-\|conic-\)\=\gradient\s*(" end=")" oneline  contains=cssColor,cssValueInteger,cssValueNumber,cssValueLength,cssFunction,cssGradientAttr,cssFunctionComma
-syn region cssFunction contained matchgroup=cssFunctionName start="\<\(matrix\(3d\)\=\|scale\(3d\|X\|Y\|Z\)\=\|translate\(3d\|X\|Y\|Z\)\=\|skew\(X\|Y\)\=\|rotate\(3d\|X\|Y\|Z\)\=\|perspective\)\s*(" end=")" oneline contains=cssValueInteger,cssValueNumber,cssValueLength,cssValueAngle,cssFunctionComma
-syn region cssFunction contained matchgroup=cssFunctionName start="\<\(blur\|brightness\|contrast\|drop-shadow\|grayscale\|hue-rotate\|invert\|opacity\|saturate\|sepia\)\s*(" end=")" oneline contains=cssValueInteger,cssValueNumber,cssValueLength,cssValueAngle,cssFunctionComma
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\%(var\|calc\)\s*(" end=")" contains=cssCustomProp,cssValue.*,cssFunction,cssURL,cssColor,cssStringQ,cssStringQQ oneline
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\%(rgb\|clip\|attr\|counter\|rect\|cubic-bezier\|steps\)\s*(" end=")" oneline  contains=cssValueInteger,cssValueNumber,cssValueLength,cssFunctionComma
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\%(rgba\|hsl\|hsla\|color-stop\|from\|to\)\s*(" end=")" oneline  contains=cssColor,cssValueInteger,cssValueNumber,cssValueLength,cssFunctionComma,cssFunction
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\%(linear-\|radial-\|conic-\)\=\gradient\s*(" end=")" oneline  contains=cssColor,cssValueInteger,cssValueNumber,cssValueLength,cssFunction,cssGradientAttr,cssFunctionComma
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\%(matrix\%(3d\)\=\|scale\%(3d\|X\|Y\|Z\)\=\|translate\%(3d\|X\|Y\|Z\)\=\|skew\%(X\|Y\)\=\|rotate\%(3d\|X\|Y\|Z\)\=\|perspective\)\s*(" end=")" oneline contains=cssValueInteger,cssValueNumber,cssValueLength,cssValueAngle,cssFunctionComma
+syn region cssFunction contained matchgroup=cssFunctionName start="\<\%(blur\|brightness\|contrast\|drop-shadow\|grayscale\|hue-rotate\|invert\|opacity\|saturate\|sepia\)\s*(" end=")" oneline contains=cssValueInteger,cssValueNumber,cssValueLength,cssValueAngle,cssFunctionComma
 syn keyword cssGradientAttr contained top bottom left right cover center middle ellipse at
 syn match cssFunctionComma contained ","
 
 " Common Prop and Attr
 syn keyword cssCommonAttr contained auto none inherit all default normal
 syn keyword cssCommonAttr contained top bottom center stretch hidden visible
-syn match cssCommonAttr contained "\<\(max-\|min-\|fit-\)content\>"
+syn match cssCommonAttr contained "\<\%(max-\|min-\|fit-\)content\>"
 "------------------------------------------------
 " CSS Animations
 " http://www.w3.org/TR/css3-animations/
-syn match cssAnimationProp contained "\<animation\(-\(delay\|direction\|duration\|fill-mode\|name\|play-state\|timing-function\|iteration-count\)\)\=\>"
+syn match cssAnimationProp contained "\<animation\%(-\%(delay\|direction\|duration\|fill-mode\|name\|play-state\|timing-function\|iteration-count\)\)\=\>"
 
 " animation-direction attributes
 syn keyword cssAnimationAttr contained alternate reverse
@@ -161,7 +165,7 @@ syn keyword cssAnimationAttr contained infinite
 "------------------------------------------------
 "  CSS Backgrounds and Borders Module Level 3
 "  http://www.w3.org/TR/css3-background/
-syn match cssBackgroundProp contained "\<background\(-\(attachment\|clip\|color\|image\|origin\|position\|repeat\|size\)\)\=\>"
+syn match cssBackgroundProp contained "\<background\%(-\%(attachment\|clip\|color\|image\|origin\|position\|repeat\|size\)\)\=\>"
 " background-attachment attributes
 syn keyword cssBackgroundAttr contained scroll fixed local
 
@@ -170,16 +174,16 @@ syn keyword cssBackgroundAttr contained left center right top bottom
 
 " background-repeat attributes
 syn match cssBackgroundAttr contained "\<no-repeat\>"
-syn match cssBackgroundAttr contained "\<repeat\(-[xy]\)\=\>"
+syn match cssBackgroundAttr contained "\<repeat\%(-[xy]\)\=\>"
 
 " background-size attributes
 syn keyword cssBackgroundAttr contained cover contain
 
-syn match cssBorderProp contained "\<border\(-\(top\|right\|bottom\|left\)\)\=\(-\(width\|color\|style\)\)\=\>"
-syn match cssBorderProp contained "\<border\(-\(top\|bottom\)-\(left\|right\)\)\=-radius\>"
-syn match cssBorderProp contained "\<border-\(inline\|block\)\(-\(start\|end\)\)\=\(-\(style\|width\|color\)\)\=\>"
-syn match cssBorderProp contained "\<border-\(start\|end\)-\(start\|end\)-radius\>"
-syn match cssBorderProp contained "\<border-image\(-\(outset\|repeat\|slice\|source\|width\)\)\=\>"
+syn match cssBorderProp contained "\<border\%(-\%(top\|right\|bottom\|left\)\)\=\%(-\%(width\|color\|style\)\)\=\>"
+syn match cssBorderProp contained "\<border\%(-\%(top\|bottom\)-\%(left\|right\)\)\=-radius\>"
+syn match cssBorderProp contained "\<border-\%(inline\|block\)\%(-\%(start\|end\)\)\=\%(-\%(style\|width\|color\)\)\=\>"
+syn match cssBorderProp contained "\<border-\%(start\|end\)-\%(start\|end\)-radius\>"
+syn match cssBorderProp contained "\<border-image\%(-\%(outset\|repeat\|slice\|source\|width\)\)\=\>"
 syn match cssBorderProp contained "\<box-decoration-break\>"
 syn match cssBorderProp contained "\<box-shadow\>"
 
@@ -196,13 +200,13 @@ syn keyword cssBorderAttr contained thin thick medium
 syn keyword cssBorderAttr contained clone slice
 "------------------------------------------------
 
-syn match cssBoxProp contained "\<padding\(-\(top\|right\|bottom\|left\)\)\=\>"
-syn match cssBoxProp contained "\<margin\(-\(top\|right\|bottom\|left\)\)\=\>"
-syn match cssBoxProp contained "\<\(margin\|padding\)\(-\(inline\|block\)\(-\(start\|end\)\)\=\)\=\>"
-syn match cssBoxProp contained "\<overflow\(-\(x\|y\|style\)\)\=\>"
-syn match cssBoxProp contained "\<rotation\(-point\)\=\>"
+syn match cssBoxProp contained "\<padding\%(-\%(top\|right\|bottom\|left\)\)\=\>"
+syn match cssBoxProp contained "\<margin\%(-\%(top\|right\|bottom\|left\)\)\=\>"
+syn match cssBoxProp contained "\<\%(margin\|padding\)\%(-\%(inline\|block\)\%(-\%(start\|end\)\)\=\)\=\>"
+syn match cssBoxProp contained "\<overflow\%(-\%(x\|y\|style\)\)\=\>"
+syn match cssBoxProp contained "\<rotation\%(-point\)\=\>"
 syn keyword cssBoxAttr contained visible hidden scroll auto
-syn match cssBoxAttr contained "\<no-\(display\|content\)\>"
+syn match cssBoxAttr contained "\<no-\%(display\|content\)\>"
 
 syn keyword cssCascadeProp contained all
 syn keyword cssCascadeAttr contained initial unset revert
@@ -212,7 +216,7 @@ syn match cssColorProp contained "\<color-profile\>"
 syn match cssColorProp contained "\<rendering-intent\>"
 
 
-syn match cssDimensionProp contained "\<\(min\|max\)-\(width\|height\)\>"
+syn match cssDimensionProp contained "\<\%(min\|max\)-\%(width\|height\)\>"
 syn keyword cssDimensionProp contained height
 syn keyword cssDimensionProp contained width
 
@@ -220,32 +224,32 @@ syn keyword cssDimensionProp contained width
 " http://www.w3.org/TR/css3-flexbox/
 " CSS Box Alignment Module Level 3
 " http://www.w3.org/TR/css-align-3/
-syn match cssFlexibleBoxProp contained "\<flex\(-\(direction\|wrap\|flow\|grow\|shrink\|basis\)\)\=\>"
-syn match cssFlexibleBoxProp contained "\<\(align\|justify\)\(-\(items\|self\|content\)\)\=\>"
+syn match cssFlexibleBoxProp contained "\<flex\%(-\%(direction\|wrap\|flow\|grow\|shrink\|basis\)\)\=\>"
+syn match cssFlexibleBoxProp contained "\<\%(align\|justify\)\%(-\%(items\|self\|content\)\)\=\>"
 syn keyword cssFlexibleBoxProp contained order
 
-syn match cssFlexibleBoxAttr contained "\<\(row\|column\|wrap\)\(-reverse\)\=\>"
+syn match cssFlexibleBoxAttr contained "\<\%(row\|column\|wrap\)\%(-reverse\)\=\>"
 syn keyword cssFlexibleBoxAttr contained nowrap stretch baseline center
-syn match cssFlexibleBoxAttr contained "\<flex\(-\(start\|end\)\)\=\>"
-syn match cssFlexibleBoxAttr contained "\<space\(-\(between\|around\|evenly\)\)\=\>"
+syn match cssFlexibleBoxAttr contained "\<flex\%(-\%(start\|end\)\)\=\>"
+syn match cssFlexibleBoxAttr contained "\<space\%(-\%(between\|around\|evenly\)\)\=\>"
 
 " CSS Fonts Module Level 3
 " http://www.w3.org/TR/css-fonts-3/
-syn match cssFontProp contained "\<font\(-\(display\|family\|feature-settings\|kerning\|language-override\|size\(-adjust\)\=\|stretch\|style\|synthesis\|variant\(-\(alternates\|caps\|east-asian\|ligatures\|numeric\|position\)\)\=\|weight\)\)\=\>"
+syn match cssFontProp contained "\<font\%(-\%(display\|family\|feature-settings\|kerning\|language-override\|size\%(-adjust\)\=\|stretch\|style\|synthesis\|variant\%(-\%(alternates\|caps\|east-asian\|ligatures\|numeric\|position\)\)\=\|weight\)\)\=\>"
 
 " font attributes
 syn keyword cssFontAttr contained icon menu caption
 syn match cssFontAttr contained "\<message-box\>"
 syn match cssFontAttr contained "\<status-bar\>"
 syn keyword cssFontAttr contained larger smaller
-syn match cssFontAttr contained "\<\(x\{1,2\}-\)\=\(large\|small\)\>"
-syn match cssFontAttr contained "\<small-\(caps\|caption\)\>"
+syn match cssFontAttr contained "\<\%(x\{1,2\}-\)\=\%(large\|small\)\>"
+syn match cssFontAttr contained "\<small-\%(caps\|caption\)\>"
 " font-family attributes
 syn keyword cssFontAttr contained sans-serif serif cursive fantasy monospace
 " font-feature-settings attributes
 syn keyword cssFontAttr contained on off
 " font-stretch attributes
-syn match cssFontAttr contained "\<\(\(ultra\|extra\|semi\)-\)\=\(condensed\|expanded\)\>"
+syn match cssFontAttr contained "\<\%(\%(ultra\|extra\|semi\)-\)\=\%(condensed\|expanded\)\>"
 " font-style attributes
 syn keyword cssFontAttr contained italic oblique
 " font-synthesis attributes
@@ -259,89 +263,89 @@ syn keyword cssFontAttr contained auto block swap fallback optional
 
 " Webkit specific property/attributes
 syn match cssFontProp contained "\<font-smooth\>"
-syn match cssFontAttr contained "\<\(subpixel-\)\=\antialiased\>"
+syn match cssFontAttr contained "\<\%(subpixel-\)\=\antialiased\>"
 
 
 " CSS Multi-column Layout Module
 " http://www.w3.org/TR/css3-multicol/
-syn match cssMultiColumnProp contained "\<break-\(after\|before\|inside\)\>"
-syn match cssMultiColumnProp contained "\<column-\(count\|fill\|gap\|rule\(-\(color\|style\|width\)\)\=\|span\|width\)\>"
+syn match cssMultiColumnProp contained "\<break-\%(after\|before\|inside\)\>"
+syn match cssMultiColumnProp contained "\<column-\%(count\|fill\|gap\|rule\%(-\%(color\|style\|width\)\)\=\|span\|width\)\>"
 syn keyword cssMultiColumnProp contained columns
 syn keyword cssMultiColumnAttr contained balance medium
 syn keyword cssMultiColumnAttr contained always left right page column
-syn match cssMultiColumnAttr contained "\<avoid\(-\(page\|column\)\)\=\>"
+syn match cssMultiColumnAttr contained "\<avoid\%(-\%(page\|column\)\)\=\>"
 
 " http://www.w3.org/TR/css3-break/#page-break
-syn match cssMultiColumnProp contained "\<page\(-break-\(before\|after\|inside\)\)\=\>"
+syn match cssMultiColumnProp contained "\<page\%(-break-\%(before\|after\|inside\)\)\=\>"
 
 " http://www.w3.org/TR/SVG11/interact.html
 syn match cssInteractProp contained "\<pointer-events\>"
-syn match cssInteractAttr contained "\<\(visible\)\=\(Painted\|Fill\|Stroke\)\=\>"
+syn match cssInteractAttr contained "\<\%(visible\)\=\%(Painted\|Fill\|Stroke\)\=\>"
 
 " TODO find following items in w3c docs.
 syn keyword cssGeneratedContentProp contained quotes crop
-syn match cssGeneratedContentProp contained "\<counter-\(reset\|increment\)\>"
+syn match cssGeneratedContentProp contained "\<counter-\%(reset\|increment\)\>"
 syn match cssGeneratedContentProp contained "\<move-to\>"
 syn match cssGeneratedContentProp contained "\<page-policy\>"
-syn match cssGeneratedContentAttr contained "\<\(no-\)\=\(open\|close\)-quote\>"
+syn match cssGeneratedContentAttr contained "\<\%(no-\)\=\%(open\|close\)-quote\>"
 
 " https://www.w3.org/TR/css-grid-1/
 syn match cssGridProp contained "\<grid\>"
-syn match cssGridProp contained "\<grid-template\(-\(columns\|rows\|areas\)\)\=\>"
-syn match cssGridProp contained "\<\(grid-\)\=\(column\|row\)\(-\(start\|end\|gap\)\)\=\>"
-syn match cssGridProp contained "\<grid-\(area\|gap\)\>"
+syn match cssGridProp contained "\<grid-template\%(-\%(columns\|rows\|areas\)\)\=\>"
+syn match cssGridProp contained "\<\%(grid-\)\=\%(column\|row\)\%(-\%(start\|end\|gap\)\)\=\>"
+syn match cssGridProp contained "\<grid-\%(area\|gap\)\>"
 syn match cssGridProp contained "\<gap\>"
-syn match cssGridProp contained "\<grid-auto-\(flow\|rows\|columns\)\>"
+syn match cssGridProp contained "\<grid-auto-\%(flow\|rows\|columns\)\>"
 
-syn match cssHyerlinkProp contained "\<target\(-\(name\|new\|position\)\)\=\>"
+syn match cssHyerlinkProp contained "\<target\%(-\%(name\|new\|position\)\)\=\>"
 
-syn match cssListProp contained "\<list-style\(-\(type\|position\|image\)\)\=\>"
-syn match cssListAttr contained "\<\(lower\|upper\)-\(roman\|alpha\|greek\|latin\)\>"
-syn match cssListAttr contained "\<\(hiragana\|katakana\)\(-iroha\)\=\>"
-syn match cssListAttr contained "\<\(decimal\(-leading-zero\)\=\|cjk-ideographic\)\>"
+syn match cssListProp contained "\<list-style\%(-\%(type\|position\|image\)\)\=\>"
+syn match cssListAttr contained "\<\%(lower\|upper\)-\%(roman\|alpha\|greek\|latin\)\>"
+syn match cssListAttr contained "\<\%(hiragana\|katakana\)\%(-iroha\)\=\>"
+syn match cssListAttr contained "\<\%(decimal\%(-leading-zero\)\=\|cjk-ideographic\)\>"
 syn keyword cssListAttr contained disc circle square hebrew armenian georgian
 syn keyword cssListAttr contained inside outside
 
 " object-fit https://www.w3.org/TR/css-images-3/#the-object-fit
-syn match cssObjectProp contained "\<object-\(fit\|position\)\>"
+syn match cssObjectProp contained "\<object-\%(fit\|position\)\>"
 syn keyword cssObjectAttr contained fill contain cover scale-down
 
 syn keyword cssPositioningProp contained bottom clear clip display float left
 syn keyword cssPositioningProp contained position right top visibility
 syn match cssPositioningProp contained "\<z-index\>"
 syn keyword cssPositioningAttr contained block compact grid
-syn match cssPositioningAttr contained "\<table\(-\(row-group\|\(header\|footer\)-group\|row\|column\(-group\)\=\|cell\|caption\)\)\=\>"
+syn match cssPositioningAttr contained "\<table\%(-\%(row-group\|\%(header\|footer\)-group\|row\|column\%(-group\)\=\|cell\|caption\)\)\=\>"
 syn keyword cssPositioningAttr contained left right both
 syn match cssPositioningAttr contained "\<list-item\>"
-syn match cssPositioningAttr contained "\<inline\(-\(block\|box\|table\|grid\|flex\)\)\=\>"
-syn match cssPositioningAttr contained "\<flow\(-root\)\=\>"
+syn match cssPositioningAttr contained "\<inline\%(-\%(block\|box\|table\|grid\|flex\)\)\=\>"
+syn match cssPositioningAttr contained "\<flow\%(-root\)\=\>"
 syn keyword cssPositioningAttr contained static relative absolute fixed subgrid sticky
 
 syn keyword cssPrintAttr contained landscape portrait crop cross always
 
-syn match cssTableProp contained "\<\(caption-side\|table-layout\|border-collapse\|border-spacing\|empty-cells\)\>"
+syn match cssTableProp contained "\<\%(caption-side\|table-layout\|border-collapse\|border-spacing\|empty-cells\)\>"
 syn keyword cssTableAttr contained fixed collapse separate show hide once always
 
 
 syn keyword cssTextProp contained color direction hyphens
-syn match cssTextProp "\<\(\(word\|letter\)-spacing\|text\(-\(decoration\|transform\|align\|index\|shadow\)\)\=\|vertical-align\|unicode-bidi\|line-height\)\>"
-syn match cssTextProp contained "\<text-\(justify\|outline\|warp\|align-last\|size-adjust\|rendering\|stroke\|indent\)\>"
-syn match cssTextProp contained "\<\(word\|line\)-break\|\(overflow\|word\)-wrap\>"
+syn match cssTextProp "\<\%(\%(word\|letter\)-spacing\|text\%(-\%(decoration\|transform\|align\|index\|shadow\)\)\=\|vertical-align\|unicode-bidi\|line-height\)\>"
+syn match cssTextProp contained "\<text-\%(justify\|outline\|warp\|align-last\|size-adjust\|rendering\|stroke\|indent\)\>"
+syn match cssTextProp contained "\<\%(word\|line\)-break\|\%(overflow\|word\)-wrap\>"
 syn match cssTextProp contained "\<white-space\>"
 syn match cssTextProp contained "\<hanging-punctuation\>"
 syn match cssTextProp contained "\<tab-size\>"
 syn match cssTextProp contained "\<punctuation-trim\>"
 syn match cssTextAttr contained "\<line-through\>"
-syn match cssTextAttr contained "\<\(text-\)\=\(top\|bottom\)\>"
+syn match cssTextAttr contained "\<\%(text-\)\=\%(top\|bottom\)\>"
 syn keyword cssTextAttr contained ltr rtl embed nowrap
 syn keyword cssTextAttr contained underline overline blink sub super middle
 syn keyword cssTextAttr contained capitalize uppercase lowercase
 syn keyword cssTextAttr contained justify baseline sub super
 syn keyword cssTextAttr contained optimizeLegibility optimizeSpeed geometricPrecision
-syn match cssTextAttr contained "\<pre\(-\(line\|wrap\)\)\=\>"
-syn match cssTextAttr contained "\<\(allow\|force\)-end\>"
+syn match cssTextAttr contained "\<pre\%(-\%(line\|wrap\)\)\=\>"
+syn match cssTextAttr contained "\<\%(allow\|force\)-end\>"
 syn keyword cssTextAttr contained start end adjacent
-syn match cssTextAttr contained "\<inter-\(word\|ideographic\|cluster\)\>"
+syn match cssTextAttr contained "\<inter-\%(word\|ideographic\|cluster\)\>"
 syn keyword cssTextAttr contained distribute kashida first last
 syn keyword cssTextAttr contained clip ellipsis unrestricted suppress
 syn match cssTextAttr contained "\<break-all\>"
@@ -349,40 +353,40 @@ syn match cssTextAttr contained "\<break-word\>"
 syn keyword cssTextAttr contained manual
 syn match cssTextAttr contained "\<bidi-override\>"
 
-syn match cssTransformProp contained "\<transform\(-\(origin\|style\)\)\=\>"
-syn match cssTransformProp contained "\<perspective\(-origin\)\=\>"
+syn match cssTransformProp contained "\<transform\%(-\%(origin\|style\)\)\=\>"
+syn match cssTransformProp contained "\<perspective\%(-origin\)\=\>"
 syn match cssTransformProp contained "\<backface-visibility\>"
 
 " CSS Transitions
 " http://www.w3.org/TR/css3-transitions/
-syn match cssTransitionProp contained "\<transition\(-\(delay\|duration\|property\|timing-function\)\)\=\>"
+syn match cssTransitionProp contained "\<transition\%(-\%(delay\|duration\|property\|timing-function\)\)\=\>"
 
 " transition-time-function attributes
-syn match cssTransitionAttr contained "\<linear\(-gradient\)\@!\>"
-syn match cssTransitionAttr contained "\<ease\(-\(in-out\|out\|in\)\)\=\>"
-syn match cssTransitionAttr contained "\<step\(-start\|-end\)\=\>"
+syn match cssTransitionAttr contained "\<linear\%(-gradient\)\@!\>"
+syn match cssTransitionAttr contained "\<ease\%(-\%(in-out\|out\|in\)\)\=\>"
+syn match cssTransitionAttr contained "\<step\%(-start\|-end\)\=\>"
 "------------------------------------------------
 " CSS Basic User Interface Module Level 3 (CSS3 UI)
 " http://www.w3.org/TR/css3-ui/
 syn match cssUIProp contained "\<box-sizing\>"
-syn match cssUIAttr contained "\<\(content\|padding\|border\)\(-box\)\=\>"
+syn match cssUIAttr contained "\<\%(content\|padding\|border\)\%(-box\)\=\>"
 
 syn keyword cssUIProp contained cursor
-syn match cssUIAttr contained "\<\(\([ns]\=[ew]\=\)\|col\|row\|nesw\|nwse\)-resize\>"
+syn match cssUIAttr contained "\<\%(\%([ns]\=[ew]\=\)\|col\|row\|nesw\|nwse\)-resize\>"
 syn keyword cssUIAttr contained crosshair help move pointer alias copy
 syn keyword cssUIAttr contained progress wait text cell move
 syn match cssUIAttr contained "\<context-menu\>"
 syn match cssUIAttr contained "\<no-drop\>"
 syn match cssUIAttr contained "\<not-allowed\>"
 syn match cssUIAttr contained "\<all-scroll\>"
-syn match cssUIAttr contained "\<\(vertical-\)\=text\>"
-syn match cssUIAttr contained "\<zoom\(-in\|-out\)\=\>"
+syn match cssUIAttr contained "\<\%(vertical-\)\=text\>"
+syn match cssUIAttr contained "\<zoom\%(-in\|-out\)\=\>"
 
 syn match cssUIProp contained "\<ime-mode\>"
 syn keyword cssUIAttr contained active inactive disabled
 
-syn match cssUIProp contained "\<nav-\(down\|index\|left\|right\|up\)\=\>"
-syn match cssUIProp contained "\<outline\(-\(width\|style\|color\|offset\)\)\=\>"
+syn match cssUIProp contained "\<nav-\%(down\|index\|left\|right\|up\)\=\>"
+syn match cssUIProp contained "\<outline\%(-\%(width\|style\|color\|offset\)\)\=\>"
 syn keyword cssUIAttr contained invert
 
 syn keyword cssUIProp contained icon resize
@@ -402,27 +406,27 @@ syn match cssUIAttr contained '\<preserve-3d\>'
 syn match cssIEUIAttr contained '\<bicubic\>'
 
 " Webkit/iOS specific properties
-syn match cssUIProp contained '\<\(tap-highlight-color\|user-select\|touch-callout\)\>'
+syn match cssUIProp contained '\<\%(tap-highlight-color\|user-select\|touch-callout\)\>'
 " IE specific properties
-syn match cssIEUIProp contained '\<\(interpolation-mode\|zoom\|filter\)\>'
+syn match cssIEUIProp contained '\<\%(interpolation-mode\|zoom\|filter\)\>'
 
 " Webkit/Firebox specific properties/attributes
 syn keyword cssUIProp contained appearance
 syn keyword cssUIAttr contained window button field icon document menu
 
 
-syn match cssAuralProp contained "\<\(pause\|cue\)\(-\(before\|after\)\)\=\>"
-syn match cssAuralProp contained "\<\(play-during\|speech-rate\|voice-family\|pitch\(-range\)\=\|speak\(-\(punctuation\|numeral\|header\)\)\=\)\>"
+syn match cssAuralProp contained "\<\%(pause\|cue\)\%(-\%(before\|after\)\)\=\>"
+syn match cssAuralProp contained "\<\%(play-during\|speech-rate\|voice-family\|pitch\%(-range\)\=\|speak\%(-\%(punctuation\|numeral\|header\)\)\=\)\>"
 syn keyword cssAuralProp contained volume during azimuth elevation stress richness
-syn match cssAuralAttr contained "\<\(x-\)\=\(soft\|loud\)\>"
+syn match cssAuralAttr contained "\<\%(x-\)\=\%(soft\|loud\)\>"
 syn keyword cssAuralAttr contained silent
 syn match cssAuralAttr contained "\<spell-out\>"
 syn keyword cssAuralAttr contained non mix
-syn match cssAuralAttr contained "\<\(left\|right\)-side\>"
-syn match cssAuralAttr contained "\<\(far\|center\)-\(left\|center\|right\)\>"
+syn match cssAuralAttr contained "\<\%(left\|right\)-side\>"
+syn match cssAuralAttr contained "\<\%(far\|center\)-\%(left\|center\|right\)\>"
 syn keyword cssAuralAttr contained leftwards rightwards behind
 syn keyword cssAuralAttr contained below level above lower higher
-syn match cssAuralAttr contained "\<\(x-\)\=\(slow\|fast\|low\|high\)\>"
+syn match cssAuralAttr contained "\<\%(x-\)\=\%(slow\|fast\|low\|high\)\>"
 syn keyword cssAuralAttr contained faster slower
 syn keyword cssAuralAttr contained male female child code digits continuous
 
@@ -432,15 +436,15 @@ syn match cssMobileTextProp contained "\<text-size-adjust\>"
 syn keyword cssMediaProp contained width height orientation scan
 syn keyword cssMediaProp contained any-hover any-pointer color-gamut grid hover
 syn keyword cssMediaProp contained overflow-block overflow-inline pointer update
-syn match cssMediaProp contained /\<\(\(max\|min\)-\)\=\(\(device\)-\)\=aspect-ratio\>/
-syn match cssMediaProp contained /\<\(\(max\|min\)-\)\=device-pixel-ratio\>/
-syn match cssMediaProp contained /\<\(\(max\|min\)-\)\=device-\(height\|width\)\>/
-syn match cssMediaProp contained /\<\(\(max\|min\)-\)\=\(height\|width\|resolution\|monochrome\|color\(-index\)\=\)\>/
+syn match cssMediaProp contained /\<\%(\%(max\|min\)-\)\=\%(\%(device\)-\)\=aspect-ratio\>/
+syn match cssMediaProp contained /\<\%(\%(max\|min\)-\)\=device-pixel-ratio\>/
+syn match cssMediaProp contained /\<\%(\%(max\|min\)-\)\=device-\%(height\|width\)\>/
+syn match cssMediaProp contained /\<\%(\%(max\|min\)-\)\=\%(height\|width\|resolution\|monochrome\|color\%(-index\)\=\)\>/
 syn keyword cssMediaAttr contained portrait landscape progressive interlace
 syn keyword cssMediaAttr contained coarse fast fine hover infinite p3 paged
 syn keyword cssMediaAttr contained rec2020 scroll slow srgb
-syn match cssKeyFrameProp contained /\(\d\+\(\.\d\+\)\?%\|\(\<from\|to\>\)\)/ nextgroup=cssDefinition
-syn match cssPageMarginProp /@\(\(top\|left\|right\|bottom\)-\(left\|center\|right\|middle\|bottom\)\)\(-corner\)\=/ contained nextgroup=cssDefinition
+syn match cssKeyFrameProp contained /\%(\d\+\%(\.\d\+\)\?%\|\%(\<from\|to\>\)\)/ nextgroup=cssDefinition
+syn match cssPageMarginProp /@\%(\%(top\|left\|right\|bottom\)-\%(left\|center\|right\|middle\|bottom\)\)\%(-corner\)\=/ contained nextgroup=cssDefinition
 syn keyword cssPageProp contained content size
 syn keyword cssPageProp contained orphans widows
 syn keyword cssFontDescriptorProp contained src
@@ -460,18 +464,18 @@ syn match cssAttrComma ","
 syn match cssPseudoClass ":[A-Za-z0-9_-]*" contains=cssNoise,cssPseudoClassId,cssUnicodeEscape,cssVendor,cssPseudoClassFn
 syn keyword cssPseudoClassId contained link visited active hover before after left right
 syn keyword cssPseudoClassId contained root empty target enabled disabled checked invalid
-syn match cssPseudoClassId contained "\<first-\(line\|letter\)\>"
-syn match cssPseudoClassId contained "\<\(first\|last\|only\)-\(of-type\|child\)\>"
-syn match cssPseudoClassId contained  "\<focus\(-within\|-visible\)\=\>"
-syn region cssPseudoClassFn contained matchgroup=cssFunctionName start="\<\(not\|is\|lang\|\(nth\|nth-last\)-\(of-type\|child\)\)(" end=")" contains=cssStringQ,cssStringQQ,cssTagName,cssAttributeSelector,cssClassName,cssIdentifier
+syn match cssPseudoClassId contained "\<first-\%(line\|letter\)\>"
+syn match cssPseudoClassId contained "\<\%(first\|last\|only\)-\%(of-type\|child\)\>"
+syn match cssPseudoClassId contained  "\<focus\%(-within\|-visible\)\=\>"
+syn region cssPseudoClassFn contained matchgroup=cssFunctionName start="\<\%(not\|is\|lang\|\%(nth\|nth-last\)-\%(of-type\|child\)\)(" end=")" contains=cssStringQ,cssStringQQ,cssTagName,cssAttributeSelector,cssClassName,cssIdentifier
 " ------------------------------------
 " Vendor specific properties
 syn match cssPseudoClassId contained  "\<selection\>"
-syn match cssPseudoClassId contained  "\<\(input-\)\=placeholder\>"
+syn match cssPseudoClassId contained  "\<\%(input-\)\=placeholder\>"
 
 " Misc highlight groups
-syntax match cssUnitDecorators /\(#\|-\|+\|%\|mm\|cm\|in\|pt\|pc\|em\|ex\|px\|ch\|rem\|vh\|vw\|vmin\|vmax\|dpi\|dppx\|dpcm\|Hz\|kHz\|s\|ms\|deg\|grad\|rad\)/ contained
-syntax match cssNoise contained /\(:\|;\|\/\)/
+syntax match cssUnitDecorators /\%(#\|-\|+\|%\|mm\|cm\|in\|pt\|pc\|em\|ex\|px\|ch\|rem\|vh\|vw\|vmin\|vmax\|dpi\|dppx\|dpcm\|Hz\|kHz\|s\|ms\|deg\|grad\|rad\)/ contained
+syntax match cssNoise contained /\%(:\|;\|\/\)/
 
 " Comment
 syn region cssComment start="/\*" end="\*/" contains=@Spell fold
@@ -483,7 +487,7 @@ syn region cssStringQQ start=+"+ skip=+\\\\\|\\"+ end=+"+ contains=cssUnicodeEsc
 syn region cssStringQ start=+'+ skip=+\\\\\|\\'+ end=+'+ contains=cssUnicodeEscape,cssSpecialCharQ
 
 " Vendor Prefix
-syn match cssVendor contained "-\(webkit\|moz\|o\|ms\)-"
+syn match cssVendor contained "-\%(webkit\|moz\|o\|ms\)-"
 
 " Various CSS Hack characters
 " In earlier versions of IE (6 and 7), one can prefix property names
@@ -491,18 +495,18 @@ syn match cssVendor contained "-\(webkit\|moz\|o\|ms\)-"
 " This is purely decorative and therefore we assign to the same highlight
 " group to cssVendor, for more information:
 " http://www.paulirish.com/2009/browser-specific-css-hacks/
-syn match cssHacks contained /\(_\|*\)/
+syn match cssHacks contained /\%(_\|*\)/
 
 " Attr Enhance
 " Some keywords are both Prop and Attr, so we have to handle them
 " cssPseudoClassId is hidden by cssAttrRegion, so we add it here. see #69
-syn region cssAttrRegion start=/:/ end=/\ze\(;\|)\|}\|{\)/ contained contains=cssPseudoClassId,css.*Attr,cssColor,cssImportant,cssValue.*,cssFunction,cssString.*,cssURL,cssComment,cssUnicodeEscape,cssVendor,cssError,cssAttrComma,cssNoise
+syn region cssAttrRegion start=/:/ end=/\ze\%(;\|)\|}\|{\)/ contained contains=cssPseudoClassId,css.*Attr,cssColor,cssImportant,cssValue.*,cssFunction,cssString.*,cssURL,cssComment,cssUnicodeEscape,cssVendor,cssError,cssAttrComma,cssNoise
 
 " Hack for transition
 " 'transition' has Props after ':'.
-syn region cssAttrRegion start=/transition\s*:/ end=/\ze\(;\|)\|}\)/ contained contains=css.*Prop,css.*Attr,cssColor,cssImportant,cssValue.*,cssFunction,cssString.*,cssURL,cssComment,cssUnicodeEscape,cssVendor,cssError,cssAttrComma,cssNoise
+syn region cssAttrRegion start=/transition\s*:/ end=/\ze\%(;\|)\|}\)/ contained contains=css.*Prop,css.*Attr,cssColor,cssImportant,cssValue.*,cssFunction,cssString.*,cssURL,cssComment,cssUnicodeEscape,cssVendor,cssError,cssAttrComma,cssNoise
 
-syn match cssAtKeyword /@\(font-face\|media\|keyframes\|import\|charset\|namespace\|page\|supports\)/
+syn match cssAtKeyword /@\%(font-face\|media\|keyframes\|import\|charset\|namespace\|page\|supports\)/
 
 syn keyword cssAtRuleLogical only not and contained
 
@@ -514,10 +518,10 @@ syn keyword cssMediaType contained screen print aural braille embossed handheld
 " @page
 " http://www.w3.org/TR/css3-page/
 syn region cssAtRule start=/@page\>/ end=/\ze{/ skipwhite skipnl matchgroup=cssAtKeyword contains=cssPagePseudo,cssComment nextgroup=cssDefinition
-syn match cssPagePseudo /:\(left\|right\|first\|blank\)/ contained skipwhite skipnl
+syn match cssPagePseudo /:\%(left\|right\|first\|blank\)/ contained skipwhite skipnl
 " @keyframe
 " http://www.w3.org/TR/css3-animations/#keyframes
-syn region cssAtRule start=/@\(-[a-z]\+-\)\=keyframes\>/ end=/\ze{/ skipwhite skipnl matchgroup=cssAtKeyword contains=cssVendor,cssComment nextgroup=cssDefinition
+syn region cssAtRule start=/@\%(-[a-z]\+-\)\=keyframes\>/ end=/\ze{/ skipwhite skipnl matchgroup=cssAtKeyword contains=cssVendor,cssComment nextgroup=cssDefinition
 
 syn region cssAtRule start=/@import\>/    end=/\ze;/ contains=cssStringQ,cssStringQQ,cssUnicodeEscape,cssComment,cssAtKeyword,cssURL,cssMediaProp,cssValueLength,cssAtRuleLogical,cssValueInteger,cssMediaAttr,cssMediaType
 syn region cssAtRule start=/@charset\>/   end=/\ze;/ contains=cssStringQ,cssStringQQ,cssUnicodeEscape,cssComment,cssAtKeyword