Support option_set and hl_group_set events about firenvim HOT 1 CLOSED

diff --git a/src/render/Redraw.ts b/src/render/Redraw.ts
index f1e659a..bd86e1a 100644
--- a/src/render/Redraw.ts
+++ b/src/render/Redraw.ts
@@ -7,6 +7,7 @@ import { Grid } from "./Grid";
 const defaultColors = { background: 16777215, foreground: 0 };
 const grids: Grid[] = [];
 const highlights: HighlightArray = [{ background: "#FFFFFF", foreground: "#000000" }];
+let highlightsNames: string[][] = [];
 const cursorStyles: string[] = [];
 const nvimCursorStyle = document.getElementById("nvim_cursor_style");
 const nvimHighlightStyle = document.getElementById("nvim_highlight_style");
@@ -80,9 +81,9 @@ const redrawFuncs = {
             defaultColors.background = bg;
             highlights[0].background = toHexCss(defaultColors.background);
          }
-         nvimHighlightStyle.innerText = toCss(highlights);
+         nvimHighlightStyle.innerText = toCss(highlights, highlightsNames);
    },
-   flush: (elem: HTMLElement) => nvimHighlightStyle.innerText = toCss(highlights),
+   flush: (elem: HTMLElement) => nvimHighlightStyle.innerText = toCss(highlights, highlightsNames),
    grid_clear: (elem: HTMLElement, selector: string, [id]: [number]) => grids[id].clear(),
    grid_cursor_goto: (elem: HTMLElement, selector: string, [id, y, x]: GotoUpdate) => {
       grids[id].cursor_goto(x, y);
@@ -149,6 +150,12 @@ const redrawFuncs = {
       highlights[id].undercurl = undercurl;
       highlights[id].underline = underline;
    },
+   hl_group_set: (elem: HTMLElement, selector: string, [hlName, hlId]: [string, number]) => {
+      if (highlightsNames[hlId] === undefined) {
+         highlightsNames[hlId] = [];
+      }
+      highlightsNames[hlId].push(hlName);
+   },
    mode_change: (elem: HTMLElement, selector: string, [modename, modeid]: [string, number]) => {
       const modePrefix = "nvim_mode_";
       Array.from(elem.classList)
@@ -249,6 +256,9 @@ export function onRedraw(nvimFunctions: any,
                          selector: string) {
    events.forEach(evt => {
       const [name, ...evts]: [keyof typeof redrawFuncs, any] = evt;
+      if (name === "hl_group_set") {
+         highlightsNames = [];
+      }
       if (redrawFuncs[name] !== undefined) {
          evts.forEach((args) => redrawFuncs[name](elem, selector, args, nvimFunctions, extCmdline, extMessages));
       }
diff --git a/src/utils/CSSUtils.ts b/src/utils/CSSUtils.ts
index 90b43ce..accf509 100644
--- a/src/utils/CSSUtils.ts
+++ b/src/utils/CSSUtils.ts
@@ -94,14 +94,16 @@ export function toHexCss(n: number) {
     return "#" + (new Array(6 - str.length)).fill("0").join("") + str;
 }
 
-export function toHighlightClassName(n: number) {
+export function toHighlightClassName(n: number | string) {
     return "nvim_highlight_" + n;
 }
 
-export function toCss(highlights: HighlightArray) {
+export function toCss(highlights: HighlightArray, highlightsNames: string[][]) {
     const bg = highlights[0].background;
     const fg = highlights[0].foreground;
+    // ???: Having everything on one line is critical for performance. We
+    //      should try to understand why and perhaps report a bug to Mozilla.
     return highlights.reduce((css, elem, id) => css +
-        `.${toHighlightClassName(id)}{background: ${elem.background || bg};color:${elem.foreground || fg};font-style:${elem.italic ? "italic" : "normal"};font-weight:${elem.bold ? "bold" : "normal"};text-decoration-line:${(elem.undercurl || elem.underline) ? "underline" : (elem.strikethrough ? "line-through" : "none")};text-decoration-style:${elem.undercurl ? "wavy" : "solid"};}`
+        `.${toHighlightClassName(id)}${highlightsNames[id] !== undefined ? ("," + highlightsNames[id].map(n => "." + toHighlightClassName(n)).join(",")) : ""}{background: ${elem.background || bg};color:${elem.foreground || fg};font-style:${elem.italic ? "italic" : "normal"};font-weight:${elem.bold ? "bold" : "normal"};text-decoration-line:${(elem.undercurl || elem.underline) ? "underline" : (elem.strikethrough ? "line-through" : "none")};text-decoration-style:${elem.undercurl ? "wavy" : "solid"};}`
         , "");
 }