enh(css): support SVG highlighting (#3893)

* enh(css): support svg properties
* enh(css): support svg elements
* Separate the TAGS into HTML_TAGS and SVG_TAGS

src/languages/lib/css-shared.js

@@ -43,7 +43,7 @@ export const MODES = (hljs) => {
   };
 };
 
-export const TAGS = [
+const HTML_TAGS = [
   'a',
   'abbr',
   'address',
@@ -118,6 +118,55 @@ export const TAGS = [
   'video'
 ];
 
+const SVG_TAGS = [
+  'defs',
+  'g',
+  'marker',
+  'mask',
+  'pattern',
+  'svg',
+  'switch',
+  'symbol',
+  'feBlend',
+  'feColorMatrix',
+  'feComponentTransfer',
+  'feComposite',
+  'feConvolveMatrix',
+  'feDiffuseLighting',
+  'feDisplacementMap',
+  'feFlood',
+  'feGaussianBlur',
+  'feImage',
+  'feMerge',
+  'feMorphology',
+  'feOffset',
+  'feSpecularLighting',
+  'feTile',
+  'feTurbulence',
+  'linearGradient',
+  'radialGradient',
+  'stop',
+  'circle',
+  'ellipse',
+  'image',
+  'line',
+  'path',
+  'polygon',
+  'polyline',
+  'rect',
+  'text',
+  'use',
+  'textPath',
+  'tspan',
+  'foreignObject',
+  'clipPath'
+];
+
+export const TAGS = [
+  ...HTML_TAGS,
+  ...SVG_TAGS,
+];
+
 // Sorting, then reversing makes sure longer attributes/elements like
 // `font-weight` are matched fully instead of getting false positives on say `font`
 
@@ -243,6 +292,7 @@ export const ATTRIBUTES = [
   'align-content',
   'align-items',
   'align-self',
+  'alignment-baseline',
   'all',
   'animation',
   'animation-delay',
@@ -264,6 +314,7 @@ export const ATTRIBUTES = [
   'background-position',
   'background-repeat',
   'background-size',
+  'baseline-shift',
   'block-size',
   'border',
   'border-block',
@@ -329,13 +380,19 @@ export const ATTRIBUTES = [
   'break-after',
   'break-before',
   'break-inside',
+  'cx',
+  'cy',
   'caption-side',
   'caret-color',
   'clear',
   'clip',
   'clip-path',
   'clip-rule',
   'color',
+  'color-interpolation',
+  'color-interpolation-filters',
+  'color-profile',
+  'color-rendering',
   'column-count',
   'column-fill',
   'column-gap',
@@ -357,7 +414,12 @@ export const ATTRIBUTES = [
   'cursor',
   'direction',
   'display',
+  'dominant-baseline',
   'empty-cells',
+  'enable-background',
+  'fill',
+  'fill-opacity',
+  'fill-rule',
   'filter',
   'flex',
   'flex-basis',
@@ -368,6 +430,8 @@ export const ATTRIBUTES = [
   'flex-wrap',
   'float',
   'flow',
+  'flood-color',
+  'flood-opacity',
   'font',
   'font-display',
   'font-family',
@@ -389,6 +453,7 @@ export const ATTRIBUTES = [
   'font-variation-settings',
   'font-weight',
   'gap',
+  'glyph-orientation-horizontal',
   'glyph-orientation-vertical',
   'grid',
   'grid-area',
@@ -416,15 +481,22 @@ export const ATTRIBUTES = [
   'ime-mode',
   'inline-size',
   'isolation',
+  'kerning',
   'justify-content',
   'left',
   'letter-spacing',
+  'lighting-color',
   'line-break',
   'line-height',
   'list-style',
   'list-style-image',
   'list-style-position',
   'list-style-type',
+  'marker',
+  'marker-end',
+  'marker-mid',
+  'marker-start',
+  'mask',
   'margin',
   'margin-block',
   'margin-block-end',
@@ -506,6 +578,7 @@ export const ATTRIBUTES = [
   'pointer-events',
   'position',
   'quotes',
+  'r',
   'resize',
   'rest',
   'rest-after',
@@ -543,11 +616,23 @@ export const ATTRIBUTES = [
   'shape-image-threshold',
   'shape-margin',
   'shape-outside',
+  'shape-rendering',
+  'stop-color',
+  'stop-opacity',
+  'stroke',
+  'stroke-dasharray',
+  'stroke-dashoffset',
+  'stroke-linecap',
+  'stroke-linejoin',
+  'stroke-miterlimit',
+  'stroke-opacity',
+  'stroke-width',
   'speak',
   'speak-as',
   'src', // @font-face
   'tab-size',
   'table-layout',
+  'text-anchor',
   'text-align',
   'text-align-all',
   'text-align-last',
@@ -579,6 +664,7 @@ export const ATTRIBUTES = [
   'transition-property',
   'transition-timing-function',
   'unicode-bidi',
+  'vector-effect',
   'vertical-align',
   'visibility',
   'voice-balance',
@@ -597,6 +683,8 @@ export const ATTRIBUTES = [
   'word-spacing',
   'word-wrap',
   'writing-mode',
+  'x',
+  'y',
   'z-index'
 ].sort().reverse();