@discoveryjs/discovery/lib/core/utils/inject-styles.js

Frontend framework for rapid data (JSON) analysis, shareable serverless reports and dashboards

import { createElement } from "./dom.js";
export async function injectStyles(el, styles) {
  const foucFix = createElement("style", null, ":host{display:none}");
  const awaitingStyles = /* @__PURE__ */ new Set();
  if (Array.isArray(styles)) {
    el.append(...styles.map((style) => {
      if (typeof style === "string") {
        style = {
          type: "style",
          content: style
        };
      }
      switch (style.type) {
        case "style":
        case "inline":
          return createElement("style", {
            media: style.media
          }, style.content);
        case "link":
        case "external": {
          let resolveStyle;
          let rejectStyle;
          const state = new Promise((resolve, reject) => {
            resolveStyle = resolve;
            rejectStyle = reject;
          });
          awaitingStyles.add(state);
          const linkEl = createElement("link", {
            rel: "stylesheet",
            href: style.href,
            media: style.media,
            onerror(err) {
              awaitingStyles.delete(state);
              rejectStyle(err);
            },
            onload() {
              awaitingStyles.delete(state);
              resolveStyle();
            }
          });
          return linkEl;
        }
        default:
          throw new Error(`Unknown type "${style.type}" for a style descriptor`);
      }
    }));
    if (awaitingStyles.size) {
      el.append(foucFix);
      await Promise.all(awaitingStyles);
      foucFix.remove();
    }
  }
}