@dash-ui/styles/dist/module/create-dash.js

A tiny, powerful, framework-agnostic CSS-in-JS library.

import Stylis from "@dash-ui/stylis";
import { noop } from "./utils";
/**
 * Dash is a tiny, performant CSS-in-JS style rule sheet manager similar to Emotion.
 *
 * @param options - Configuration options
 */

export function createDash(options) {
  if (options === void 0) {
    options = {};
  }

  let {
    key = "ui",
    nonce,
    stylisPlugins,
    prefix = true,
    batchInserts,
    speedy,
    container = typeof document !== "undefined" ? document.head : void 0
  } = options;
  const stylis = new Stylis({
    prefix
  });
  const inserted = new Set();
  const cache = new Map();
  const sheetsCache = new Map();
  const sheet = styleSheet({
    key,
    container,
    nonce,
    speedy,
    batchInserts
  });

  if (typeof document !== "undefined") {
    let nodes = document.querySelectorAll('style[data-cache="' + key + '"]');
    let i = 0;
    let attr;
    let node;
    const insert = inserted.add.bind(inserted);

    for (; i < nodes.length; i++) {
      /* istanbul ignore next */
      if ((attr = (node = nodes[i]).getAttribute(`data-dash`)) === null) continue;
      attr.split(" ").forEach(insert);
      container && node.parentNode !== container && container.appendChild(node);
    }

    stylis.use(stylisPlugins)(ruleSheet);
  }
  /* istanbul ignore next */


  if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
    const commentStart = /\/\*/g;
    const commentEnd = /\*\//g;
    stylis.use((context, content) => {
      if (context === -1) {
        while (commentStart.test(content)) {
          commentEnd.lastIndex = commentStart.lastIndex;
          /* istanbul ignore next */

          if (commentEnd.test(content)) {
            commentStart.lastIndex = commentEnd.lastIndex;
            continue;
          }

          throw new Error('Your styles have an unterminated comment ("/*" without ' + 'corresponding "*/").');
        }

        commentStart.lastIndex = 0;
      }
    });
  }

  let insert = function (key, selector, styles, styleSheet) {
    if (inserted.has(key)) return;
    inserted.add(key);
    Sheet.x = styleSheet === void 0 ? sheet : styleSheet;
    stylis(selector, styles);
  };

  function _ref(key, selector, styles, styleSheet) {
    if (inserted.has(key)) return;
    inserted.add(key);
    Sheet.x = styleSheet === void 0 ? sheet : styleSheet;
    cache.set(key, stylis(selector, styles));
  }

  if (typeof document === "undefined") {
    insert = _ref;
  }

  return {
    key,
    sheet,
    sheets: {
      add(name) {
        const sheetRef = sheetsCache.get(name) || {
          n: 0,
          s: styleSheet(sheet)
        };
        sheetsCache.set(name, sheetRef);
        sheetRef.n++;
        return sheetRef.s;
      },

      delete(name) {
        const sheetRef = sheetsCache.get(name);
        if (!sheetRef) return -1;

        if (sheetRef.n === 1) {
          sheetsCache.delete(name);
          sheetRef.s.flush();
        }

        return --sheetRef.n;
      },

      keys: sheetsCache.keys.bind(sheetsCache)
    },
    stylis,
    insert,
    inserted,
    cache
  };
}
//
// Stylesheet
export function styleSheet(options) {
  // Based off emotion and glamor's StyleSheet
  const {
    key,
    container,
    nonce,
    batchInserts,
    speedy
  } = options;
  let tag = null;
  let sheet = null;
  let supportsConstructableStylesheets = false;

  if (typeof document !== "undefined") {
    supportsConstructableStylesheets = "CSSStyleSheet" in window && "replace" in CSSStyleSheet.prototype && "adoptedStyleSheets" in Document.prototype;

    if (!supportsConstructableStylesheets) {
      tag = document.createElement("style");
      tag.setAttribute(`data-dash`, key);

      if (nonce) {
        tag.setAttribute("nonce", nonce);
      }

      container === null || container === void 0 ? void 0 : container.appendChild(tag);
      sheet = tag.sheet;
      /* istanbul ignore next */

      if (!sheet) {
        // this weirdness brought to you by firefox
        const {
          styleSheets
        } = document;

        for (let i = 0; i < styleSheets.length; i++) if (styleSheets[i].ownerNode === tag) {
          sheet = styleSheets[i];
          break;
        }
      }
    } else {
      sheet = new CSSStyleSheet();
      document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
    }
  }

  function _ref2(s) {
    return s !== sheet;
  }

  return {
    key,
    nonce,
    container,
    speedy,

    insert(rule) {
      /* istanbul ignore next */
      const insertRule = () => {
        try {
          // this is the ultrafast version, works across browsers
          // the big drawback is that the css won't be editable in devtools
          sheet.insertRule(rule, sheet.cssRules.length);
        } catch (e) {
          if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
            console.warn('There was a problem inserting the following rule: "' + rule + '"', e);
          }
        }
      };

      if (batchInserts) {
        tasks.push(insertRule);
        scheduleFlush();
      } else {
        insertRule();
      }
    },

    flush() {
      if (tag && tag.parentNode) {
        tag.parentNode.removeChild(tag);
      } else if (supportsConstructableStylesheets) {
        document.adoptedStyleSheets = document.adoptedStyleSheets.filter(_ref2);
      }
    }

  };
}
let scheduled = false;
const tasks = [];

function _ref3() {
  let task;

  while (task = tasks.shift()) task();

  scheduled = false;

  if (tasks.length) {
    scheduleFlush();
  }
}

function scheduleFlush() {
  if (!scheduled) {
    scheduled = true;
    requestAnimationFrame(_ref3);
  }
}

//
// Stylis plugins
const RULE_DELIMITER = "/*|*/";
const RULE_NEEDLE = RULE_DELIMITER + "}";

function _ref4(block) {
  block && Sheet.x.insert(block + "}");
}

function ruleSheet( // https://github.com/thysultan/stylis.js/tree/master/plugins/rule-sheet
context, content, selectors, parents, line, column, length, ns, depth, at) {
  // selector
  if (context === 2) {
    if (ns === 0) return content + RULE_DELIMITER;
  } // at-rule
  else if (context === 3) {
    // @font-face, @page
    if (ns === 102 || ns === 112) {
      Sheet.x.insert(selectors[0] + content);
      return "";
    } else {
      /* istanbul ignore next */
      return content + (at === 0 ? RULE_DELIMITER : "");
    }
  } else if (context === -2) {
    content.split(RULE_NEEDLE).forEach(_ref4);
  }
}

const Sheet = {
  x: {
    insert: noop
  }
};