injector CSS loaded twice

[meelie]

1. Open your console on network and filter css
2. Go on https://krds.com/fr/fr/

---

Problem #1 We can see that the injector css is loaded by KRDS html first

<link href="https://app.yelda.ai/static/css/yeldaWebchatInjector.css" rel="stylesheet" type="text/css" />

And then https://yelda-webchat.s3.eu-west-3.amazonaws.com/css/yeldaWebchatInjector.min.css is loaded by the injector JS

    // Load Async css only if style sheet not found
    if (!this.isStyleSheetLoaded()) {
      this.loadCssAsync()
    }

Problem #2 all.css is loaded twice (once for each yeldaWebchatInjector) Problem #3 all.css is loaded again from https://yelda-chat.s3.eu-west-3.amazonaws.com/css/styles.edb4cef07b898e9c2b76.css

---

Why?

I added a debug in the code, and for yelda css, we got a JS error on r.cssRules; which is explained by cross domain : https://stackoverflow.com/questions/49993633/uncaught-domexception-failed-to-read-the-cssrules-property

DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

because the

What to do?

If you have any other suggestion to detect that the file is loaded, please share, but it should require no change on client side.

As a suggestion (but if you have a better idea, go on), I would maybe add an additional backup check in the catch to handle that case

       try {
          const rules = sheet.cssRules
          if (typeof rules !== 'undefined') {
            for (let j = 0; j < rules.length; j++) {
              if (typeof rules[j].selectorText !== 'undefined' && rules[j].selectorText === cssSelector) {
                isFound = true
                break sheetsLoop
              }
            }
          }
        } catch (e) {
          if(isYeldaCssInjector(r.href)) {
            isFound = true
            break sheetsLoop
          }
          continue
        }

isYeldaCssInjector(cssHref) {
  const injectorCSSRegex = new RegExp('\/yeldaWebchatInjector(.min)?.css')
  return injectorCSSRegex.test(cssHref)
}