@web-atoms/core/dist/style/styled.js

Web Atoms Core

System.register([], function (_export, _context) {
  "use strict";

  var StyleFragment, id, nextId, first, markers, addMarker, styles, styled, svgAsCssDataUrl;
  function* divide(text) {
    const regex = /^(([^\{\n]+\{[\t\x20]*)|([^\n\}]*\}[^\S\n\r]*))$/gm;
    let m;
    let sentOnce = false;
    let lastIndex = 0;
    let lastMatch;
    while ((m = regex.exec(text)) !== null) {
      if (m.index === regex.lastIndex) {
        regex.lastIndex++;
      }
      const match = m[0];
      if (!sentOnce) {
        sentOnce = true;
        yield text.substring(lastIndex, m.index);
        lastIndex = m.index + match.length;
        lastMatch = match;
        continue;
      }
      if (lastMatch.includes("}")) {
        yield [lastMatch.trim()];
        lastIndex = m.index + match.length;
        lastMatch = match;
        continue;
      }
      yield [lastMatch, text.substring(lastIndex, m.index), match];
      lastIndex = m.index + match.length;
      lastMatch = match;
    }
    if (lastMatch === null || lastMatch === void 0 ? void 0 : lastMatch.includes("}")) {
      yield [lastMatch.trim()];
    }
  }
  return {
    setters: [],
    execute: function () {
      ;
      id = 1;
      nextId = () => `styled-r${id++}`;
      first = document.head.firstElementChild;
      markers = {};
      addMarker = name => {
        let m = document.head.querySelector(`meta[name="${name}"]`);
        if (m) {
          first = m;
          return markers[name] = m;
        }
        m = document.createElement("meta");
        m.name = name;
        if (first) {
          first.insertAdjacentElement("afterend", m);
        } else {
          document.head.insertAdjacentElement("afterbegin", m);
        }
        first = m;
        return markers[name] = m;
      };
      addMarker("global-low-marker");
      addMarker("global-marker");
      addMarker("global-high-marker");
      addMarker("local-low-marker");
      addMarker("local-marker");
      addMarker("local-high-marker");
      StyleFragment = class StyleFragment {
        static newStyle({
          selector = "",
          content = ""
        }) {
          return new StyleFragment({
            selector,
            content
          });
        }
        constructor({
          selector,
          content
        }) {
          this.order = "low";
          this.selector = selector;
          this.content = content;
        }
        expand(selector) {
          selector !== null && selector !== void 0 ? selector : selector = this.selector;
          let en = divide(this.content);
          let parts = en.next();
          if (parts.done) {
            if (!this.content) {
              return "";
            }
            return `${selector} {\n${this.content}\n}`;
          }
          const first = parts.value;
          let content = (first === null || first === void 0 ? void 0 : first.trim()) ? `${selector} {\n${first}\n}\n` : "";
          let selectorStack = [];
          while (!(parts = en.next()).done) {
            const [key, value] = parts.value;
            if (key.endsWith("}")) {
              selector = selectorStack.pop();
              if (selector === "@") {
                content += "\n}\n";
                selector = selectorStack.pop();
              }
              continue;
            }
            let keySelector = key.replace("{", "");
            const isMedia = /\@/.test(keySelector);
            const replace = !isMedia;
            const replaced = replace ? selector.split(",").map(x => keySelector.replace(/\&/g, x).trim()).join(",") : keySelector;
            selectorStack.push(selector);
            selector = replace ? replaced : selector;
            if (isMedia) {
              selectorStack.push("@");
            }
            if (value === null || value === void 0 ? void 0 : value.trim()) {
              content += `${replaced} {\n${value}\n}\n`;
            } else {
              if (isMedia) {
                content += `${replaced} {\n`;
              }
            }
          }
          return content;
        }
        toString() {
          return this.content.replace(/\\n/g, "");
        }
        installGlobal(selector = "", id = this.id || selector, description) {
          const style = document.createElement("style");
          style.textContent = this.expand(selector);
          if (description) {
            style.setAttribute("data-desc", description);
          }
          switch (this.order) {
            case "low":
              document.head.insertBefore(style, markers["global-low-marker"]);
              break;
            case "default":
            case "medium":
              document.head.insertBefore(style, markers["global-marker"]);
              break;
            case "high":
              document.head.insertBefore(style, markers["global-high-marker"]);
              break;
          }
          style.id = id;
        }
        installLocal(prefix = "", description = this.description) {
          const selector = nextId();
          const style = document.createElement("style");
          const id = `${prefix}.${selector}`;
          style.id = id;
          style.textContent = this.expand(id);
          if (description) {
            style.setAttribute("data-desc", description);
          }
          switch (this.order) {
            case "low":
              document.head.insertBefore(style, markers["local-low-marker"]);
              break;
            case "default":
            case "medium":
              document.head.insertBefore(style, markers["local-marker"]);
              break;
            case "high":
              document.head.insertBefore(style, markers["local-high-marker"]);
              break;
          }
          return selector;
        }
        withId(id) {
          this.id = id;
          return this;
        }
        withDescription(description) {
          this.description = description;
          return this;
        }
        withOrder(order) {
          this.order = order;
          return this;
        }
      };
      styles = [];
      styled = {
        get styles() {
          return styles;
        },
        css: (t, ...a) => {
          let r = "";
          for (let index = 0; index < t.length; index++) {
            const element = t[index];
            r += element;
            if (index < a.length) {
              r += a[index];
            }
          }
          return StyleFragment.newStyle({
            content: r
          });
        },
        add(x) {
          styles.push(x);
        }
      };
      _export("default", styled);
      _export("svgAsCssDataUrl", svgAsCssDataUrl = text => `url(${JSON.stringify(`data:image/svg+xml,${text}`)})`);
    }
  };
});
//# sourceMappingURL=styled.js.map