Fix: Add support for Css variables

Author: TOKdawn

src/context/stylesheets.ts

@@ -5,11 +5,12 @@ export class StyleSheets {
   private rootSvg: Element
   private readonly loadExternalSheets: boolean
   private readonly styleSheets: CSSStyleSheet[]
-
+  private cssValueMap: Map<string, string>
   constructor(rootSvg: Element, loadExtSheets: boolean) {
     this.rootSvg = rootSvg
     this.loadExternalSheets = loadExtSheets
     this.styleSheets = []
+    this.cssValueMap = new Map()
   }
 
   public async load(): Promise<void> {
@@ -88,6 +89,27 @@ export class StyleSheets {
     }
   }
 
+  getCssValue(selector: string): string | undefined {
+    const value: string = selector
+      .replace(/var\(/g, '')
+      .replace(/\)/g, '')
+      .replace(/^\s+|\s+$/g, '')
+    if (this.cssValueMap.get(value)) {
+      return this.cssValueMap.get(value)
+    }
+    for (const sheet of this.styleSheets) {
+      for (let i = 0; i < sheet.cssRules.length; i++) {
+        const rule = sheet.cssRules[i] as CSSStyleRule
+        const res = rule.style.getPropertyValue(value)
+        if (res) {
+          this.cssValueMap.set(value, res)
+          return res
+        }
+      }
+    }
+    return undefined
+  }
+
   private static splitSelectorAtCommas(selectorText: string): string[] {
     const initialRegex = /,|["']/g
     const closingDoubleQuotesRegex = /[^\\]["]/g
@@ -184,6 +206,18 @@ export class StyleSheets {
     const mostSpecificRule = matchingRules.reduce((previousValue, currentValue) =>
       compare(previousValue, currentValue) === 1 ? previousValue : currentValue
     )
-    return mostSpecificRule.style.getPropertyValue(propertyCss) || undefined
+    const cssValue: string = mostSpecificRule.style.getPropertyValue(propertyCss)
+    const varReg = /var\(.*?\)/gi
+    if (cssValue && varReg.test(cssValue)) {
+      const cssValueList: RegExpMatchArray = cssValue.match(varReg) || []
+      cssValueList.map(cssValue => {
+        console.log(cssValue, this.styleSheets)
+        const res = this.getCssValue(cssValue)
+        if (res) {
+          cssValue = cssValue.replace(cssValue, res)
+        }
+      })
+    }
+    return cssValue || undefined
   }
 }