@dash-ui/styles/dist/esm/index.dev.mjs

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

import unitless from '@dash-ui/unitless';
import Stylis from '@dash-ui/stylis';

/**
 * An FNV-1a hashing algorithm with a 32-bit offset basis. FNV-1a hashes are designed
 * to be fast while maintaining a low collision rate. The high dispersion rate makes
 * them well-suited for hashing nearly identical strings.
 *
 * @param string - A string you want to hash
 */
function hash(string) {
  // 32-bit offset basis
  var out = 2166136261;
  var i = 0;
  var len = string.length;

  for (; i < len; ++i) {
    out = (out ^= string.charCodeAt(i)) + (out << 1) + (out << 4) + (out << 7) + (out << 8) + (out << 24);
  }

  return (out >>> 0).toString(36);
}
var minL = /(^|[:;,{}\s])\s+|$/g;
var minR = / +{/g;
function safeHash(key, hashFn) {
  var hashCache = {};
  var value;
  return string => {
    if (value = hashCache[string]) return value;
    value = hashFn(string.replace(minL, "$1").replace(minR, "{")); // allows class names to start with numbers

    return hashCache[string] = value = !key && !isNaN(value[0]) ? "_" + value : value;
  };
}
function noop() {}

/**
 * Dash is a tiny, performant CSS-in-JS style rule sheet manager similar to Emotion.
 *
 * @param options - Configuration options
 */

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

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

  if (typeof document !== "undefined") {
    var nodes = document.querySelectorAll('style[data-cache="' + key + '"]');
    var i = 0;
    var attr;
    var node;

    var _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" && "production" !== "production") {
    var commentStart = /\/\*/g;
    var 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;
      }
    });
  }

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

  function _insert2(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 = _insert2;
  }

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

      delete(name) {
        var 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
function styleSheet(options) {
  // Based off emotion and glamor's StyleSheet
  var {
    key,
    container,
    nonce,
    batchInserts,
    speedy
  } = options;
  var tag = null;
  var sheet = null;
  var 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
        var {
          styleSheets
        } = document;

        for (var 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 _ref(s) {
    return s !== sheet;
  }

  return {
    key,
    nonce,
    container,
    speedy,

    insert(rule) {
      /* istanbul ignore next */
      var 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" && "production" !== "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(_ref);
      }
    }

  };
}
var scheduled = false;
var tasks = [];

function _ref2$1() {
  var task;

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

  scheduled = false;

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

function scheduleFlush() {
  if (!scheduled) {
    scheduled = true;
    requestAnimationFrame(_ref2$1);
  }
}

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

function _ref3$1(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(_ref3$1);
  }
}

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

/**
 * A factory function that returns a new `styles` instance with
 * your custom configuration options.
 *
 * @param options - Configuration options
 */

function _ref2(curr, arg) {
  function _ref(k) {
    return typeof arg[k] === "number" || arg[k];
  }

  if (typeof arg === "string") {
    curr += "-" + arg;
  } else if (typeof arg === "object") {
    var keys = Object.keys(arg).filter(_ref);

    if (keys.length) {
      curr += "-" + keys.join("-");
    }
  }

  return curr;
}

function _label(args) {
  // add helpful labels to the name in development
  return [...args].reduce(_ref2, "").replace(/[^\w-]/g, "-");
}

function _ref3(e) {
  return e();
}

function createStyles(options) {
  if (options === void 0) {
    options = {};
  }

  var dash = options.dash || createDash();
  var {
    key,
    insert,
    sheets
  } = dash;
  var themes = {};
  var tokens = {};
  var hash$1 = safeHash(key, options.hash || hash);
  var label; // explicit here on purpose so it's not in every test

  /* istanbul ignore next */

  if (typeof process !== "undefined" && "production" === "development") {
    label = _label;
  }

  var styles = {
    variants(styleMap) {
      var compiledStyleMap = {};
      var styleKey;
      /* istanbul ignore next */

      for (styleKey in styleMap) {
        compiledStyleMap[styleKey] = compileStyles(styleMap[styleKey], tokens);
      }

      var defaultStyles = compiledStyleMap.default || ""; // style('text', {})

      function style() {
        // eslint-disable-next-line prefer-spread
        var css_ = css.apply(null, arguments);
        if (!css_) return "";
        var name = hash$1(css_);
        /* istanbul ignore next */

        if (label) name += label(arguments);
        var className = key + "-" + name;
        insert(name, "." + className, css_);
        return className;
      }

      function css() {
        var args = arguments;
        var numArgs = args.length;

        if (numArgs === 1 && typeof args[0] !== "object") {
          return defaultStyles + (compiledStyleMap[args[0]] || "");
        } else if (numArgs > 0) {
          var nextStyles = defaultStyles;

          for (var i = 0; i < numArgs; i++) {
            var arg = args[i];

            if (typeof arg !== "object") {
              nextStyles += compiledStyleMap[arg] || "";
            } else if (arg !== null) {
              for (var _key in arg) {
                if (arg[_key]) nextStyles += compiledStyleMap[_key] || "";
              }
            }
          }

          return nextStyles;
        }

        return defaultStyles;
      }

      style.styles = styleMap;
      style.css = css;
      return style;
    },

    one() {
      var one = compileStyles(compileLiterals(arguments), tokens);
      var name = hash$1(one);
      var className = key + "-" + name;

      var callback = function callback(createClassName) {
        if (!createClassName && createClassName !== void 0) return "";
        insert(name, "." + className, one);
        return className;
      };

      callback.css = function (createCss) {
        return !createCss && createCss !== void 0 ? "" : one;
      };

      return callback;
    },

    cls() {
      var css = compileStyles(compileLiterals(arguments), tokens);
      var name = hash$1(css);
      var className = key + "-" + name;
      insert(name, "." + className, css);
      return className;
    },

    lazy(lazyFn) {
      var cache = new Map();

      function css(value) {
        if (value === void 0) return "";
        var key = typeof value === "object" ? JSON.stringify(value) : value;
        var css = cache.get(key);

        if (css === void 0) {
          css = compileStyles(lazyFn(value), tokens);
          cache.set(key, css);
        }

        return css;
      }

      var lazyStyle = function lazyStyle(value) {
        var css_ = css(value);
        if (!css_) return "";
        var name = hash$1(css_);
        var className = key + "-" + name;
        insert(name, "." + className, css_);
        return className;
      };

      lazyStyle.css = css;
      return lazyStyle;
    },

    join() {
      var css = "".concat(...Array.prototype.slice.call(arguments));
      var name = hash$1(css);
      var className = key + "-" + name;
      insert(name, "." + className, css);
      return className;
    },

    keyframes() {
      var css = compileStyles(compileLiterals(arguments), tokens);
      var name = hash$1(css);
      var animationName = key + "-" + name; // Adding to a cached sheet here rather than the default sheet because
      // we want this to persist between `clearCache()` calls.

      insert(name, "", "@keyframes " + animationName + "{" + css + "}", sheets.add(name));
      return animationName;
    },

    insertGlobal() {
      var css = compileStyles(compileLiterals(arguments), tokens);
      if (!css) return noop;
      var name = hash$1(css);
      insert(name, "", css, sheets.add(name));
      return function () {
        !sheets.delete(name) && dash.inserted.delete(name);
      };
    },

    insertTokens(nextTokens, selector) {
      if (selector === void 0) {
        selector = ":root";
      }

      var {
        css,
        vars
      } = serializeTokens(nextTokens, options.mangleTokens);
      if (!css) return noop;
      mergeTokens(tokens, vars);
      return styles.insertGlobal(selector + "{" + css + "}");
    },

    insertThemes(nextThemes) {
      var flush = [];

      for (var _name in nextThemes) {
        flush.push(styles.insertTokens(themes[_name] = themes[_name] === void 0 ? // @ts-expect-error
        nextThemes[_name] : mergeTokens(themes[_name], nextThemes[_name]), "." + styles.theme(_name)));
      }

      return function () {
        flush.forEach(_ref3);
      };
    },

    theme(theme) {
      return key + "-" + theme + "-theme";
    },

    dash,
    hash: hash$1,
    tokens
  };
  Object.defineProperty(styles, "tokens", {
    get() {
      return tokens;
    },

    configurable: false
  });
  styles.insertTokens(options.tokens || emptyObj);
  styles.insertThemes(options.themes || emptyObj);
  return typeof process !== "undefined" && "production" !== "production" ? Object.freeze(styles) : styles;
}
var emptyObj = {};

/**
 * A utility function that will compile style objects and callbacks into CSS strings.
 *
 * @param styles - A style callback, object, or string
 * @param tokens - A map of CSS tokens for style callbacks
 */
function compileStyles(styles, tokens) {
  var value = typeof styles === "function" ? styles(tokens) : styles;
  return typeof value === "object" && value !== null ? stringifyStyleObject(value) : value || "";
}

function stringifyStyleObject(object) {
  var string = "";

  for (var key in object) {
    var _value = object[key];

    if (typeof _value !== "object") {
      var isCustom = key.charCodeAt(1) === 45;
      string += (isCustom ? key : cssCase(key)) + ":" + (typeof _value !== "number" || unitless[key] || _value === 0 || isCustom ? _value : _value + "px") + ";";
    } else {
      string += key + "{" + stringifyStyleObject(_value) + "}";
    }
  }

  return string;
}

function compileLiterals(args) {
  var literals = args[0];
  return Array.isArray(literals) ? literals.reduce((curr, next, i) => curr + next + (args[i + 1] || ""), "") : literals;
} //
// Variable and theme serialization


var cssCaseRe = /[A-Z]|^ms/g;
var cssDisallowedRe = /[^\w-]/g; // We cache the case transformations below because the cache
// will grow to a predictable size and the regex is slowwwww

var caseCache = {};

function cssCase(string) {
  var _caseCache$string;

  return (_caseCache$string = caseCache[string]) !== null && _caseCache$string !== void 0 ? _caseCache$string : caseCache[string] = string.replace(cssCaseRe, "-$&").toLowerCase();
}

function serializeTokens(tokens, mangle, names) {
  if (names === void 0) {
    names = [];
  }

  var vars = {};
  var css = "";

  for (var key in tokens) {
    var _value2 = tokens[key];

    if (typeof _value2 === "object") {
      var result = serializeTokens(_value2, mangle, names.concat(key));
      vars[key] = result.vars;
      css += result.css;
    } else {
      var _name2 = cssCase(names.length > 0 ? names.join("-") + "-" + key : key).replace(cssDisallowedRe, "-");

      vars[key] = "var(" + (_name2 = "--" + (mangle === true || mangle && !mangle[_name2] ? mangled(_name2) : _name2)) + ")";
      css += _name2 + ":" + _value2 + ";";
    }
  }

  return {
    vars,
    css
  };
}

var mangled = /*#__PURE__*/safeHash("", hash);

function mergeTokens(target, source) {
  for (var key in source) {
    var _value3 = source[key];
    target[key] = typeof _value3 === "object" ? mergeTokens(target[key] || {}, _value3) : _value3;
  }

  return target;
}
/**
 * A utility function that will convert a camel-cased, dot-notation string
 * into a dash-cased CSS property variable.
 *
 * @param path - A dot-notation string that represents the path to a value
 */


function pathToToken(path) {
  return "var(--" + path.replace(/\./g, "-").replace(cssCaseRe, "-$&").toLowerCase() + ")";
}
//
// Creates and exports default `styles` instance
var styles = /*#__PURE__*/createStyles();
/**
 * These are CSS variable type definitions that tell functions like
 * style callbacks which tokens are available. They can be defined
 * globally in your application like so:
 *
 * @example
 * declare module '＠dash-ui/styles' {
 *   export interface DashTokens {
 *     color: {
 *       red: string
 *     }
 *   }
 * }
 *
 * They can also be created automatically when you use a `createStyles()` factory.
 * @example
 * const styles = createStyles({
 *   tokens: {
 *     foo: 'bar',
 *     bar: 'baz'
 *   }
 * })
 *
 * // "foo" | "bar"
 * type Level1VariableNames = keyof DashTokens
 */

export { compileStyles, createDash, createStyles, hash, pathToToken, styleSheet, styles };
//# sourceMappingURL=index.dev.mjs.map