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

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

import unitless from "@dash-ui/unitless";
import { createDash } from "./create-dash";
import { hash as fnv1aHash, noop, safeHash } from "./utils";
/**
 * 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") {
    const keys = Object.keys(arg).filter(_ref);

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

  return curr;
}

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

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

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

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

  /* istanbul ignore next */

  if (typeof process !== "undefined" && process.env.NODE_ENV === "development") {
    label = _ref3;
  }

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

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

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

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

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

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

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

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

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

          return nextStyles;
        }

        return defaultStyles;
      }

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

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

      const callback = function (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() {
      const css = compileStyles(compileLiterals(arguments), tokens);
      const name = hash(css);
      const className = key + "-" + name;
      insert(name, "." + className, css);
      return className;
    },

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

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

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

        return css;
      }

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

      lazyStyle.css = css;
      return lazyStyle;
    },

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

    keyframes() {
      const css = compileStyles(compileLiterals(arguments), tokens);
      const name = hash(css);
      const 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() {
      const css = compileStyles(compileLiterals(arguments), tokens);
      if (!css) return noop;
      const name = hash(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";
      }

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

    insertThemes(nextThemes) {
      const flush = [];

      for (const 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(_ref4);
      };
    },

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

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

    configurable: false
  });
  styles.insertTokens(options.tokens || emptyObj);
  styles.insertThemes(options.themes || emptyObj);
  return typeof process !== "undefined" && process.env.NODE_ENV !== "production" ? Object.freeze(styles) : styles;
}
const 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
 */
export function compileStyles(styles, tokens) {
  const value = typeof styles === "function" ? styles(tokens) : styles;
  return typeof value === "object" && value !== null ? stringifyStyleObject(value) : value || "";
}

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

  for (const key in object) {
    const value = object[key];

    if (typeof value !== "object") {
      const 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) {
  const literals = args[0];
  return Array.isArray(literals) ? literals.reduce((curr, next, i) => curr + next + (args[i + 1] || ""), "") : literals;
} //
// Variable and theme serialization


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

const 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 = [];
  }

  const vars = {};
  let css = "";

  for (let key in tokens) {
    const value = tokens[key];

    if (typeof value === "object") {
      const result = serializeTokens(value, mangle, names.concat(key));
      vars[key] = result.vars;
      css += result.css;
    } else {
      let name = cssCase(names.length > 0 ? names.join("-") + "-" + key : key).replace(cssDisallowedRe, "-");
      vars[key] = "var(" + (name = "--" + (mangle === true || mangle && !mangle[name] ? mangled(name) : name)) + ")";
      css += name + ":" + value + ";";
    }
  }

  return {
    vars,
    css
  };
}

const mangled = /*#__PURE__*/safeHash("", fnv1aHash);

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

  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
 */


export function pathToToken(path) {
  return "var(--" + path.replace(/\./g, "-").replace(cssCaseRe, "-$&").toLowerCase() + ")";
}
//
// Creates and exports default `styles` instance
export const 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
 */