@gitlab/ui/dist/utils/charts/css_values.js

GitLab UI Components

import { mapValues } from 'lodash-es';

function _arrayLikeToArray(r, a) {
  (null == a || a > r.length) && (a = r.length);
  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
  return n;
}
function _arrayWithHoles(r) {
  if (Array.isArray(r)) return r;
}
function _iterableToArrayLimit(r, l) {
  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
  if (null != t) {
    var e,
      n,
      i,
      u,
      a = [],
      f = !0,
      o = !1;
    try {
      if (i = (t = t.call(r)).next, 0 === l) {
        if (Object(t) !== t) return;
        f = !1;
      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
    } catch (r) {
      o = !0, n = r;
    } finally {
      try {
        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
      } finally {
        if (o) throw n;
      }
    }
    return a;
  }
}
function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(r, e) {
  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
function _unsupportedIterableToArray(r, a) {
  if (r) {
    if ("string" == typeof r) return _arrayLikeToArray(r, a);
    var t = {}.toString.call(r).slice(8, -1);
    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
  }
}

const CSS_VAR = /^var\(\s*(--[\w-]+)\s*(?:,\s*([\s\S]*?)\s*)?\)$/;
const resolveString = (value, styles) => {
  if (value.toLowerCase() === 'currentcolor') {
    return styles.color;
  }
  const match = CSS_VAR.exec(value);
  if (!match) {
    return value;
  }
  const _match = _slicedToArray(match, 3),
    name = _match[1],
    fallback = _match[2];
  const resolved = styles.getPropertyValue(name).trim();
  if (resolved) {
    return resolved;
  }
  return fallback ? resolveString(fallback, styles) : value;
};

/**
 * Deeply replaces `var(--token)` and `currentcolor` strings with the values they resolve to for the
 * given element.
 *
 * The SVG renderer needs none of this: it emits both forms into the DOM, where the browser resolves
 * them and keeps them live across a colour-mode change. Canvas has no such context. `fillStyle` is
 * a plain string setter, so an unparseable `var(--token)` is dropped on the floor and leaves the
 * previous fill in place, while `currentcolor` has no element to inherit from and is defined to
 * resolve to opaque black. Either way a canvas-rendered chart silently loses its themed colours.
 *
 * Resolution is relative to `element` rather than the document root so that `.gl-dark-scope`
 * ancestors are honoured.
 *
 * Values are resolved once, so callers are responsible for resolving again when the colour mode
 * changes.
 */
const resolveCssValues = (input, element) => {
  const styles = window.getComputedStyle(element);
  const walk = value => {
    if (typeof value === 'string') {
      return resolveString(value, styles);
    }
    if (Array.isArray(value)) {
      return value.map(item => walk(item));
    }
    // Themes carry functions (formatters) which must pass through untouched.
    if (value !== null && typeof value === 'object') {
      return mapValues(value, walk);
    }
    return value;
  };
  return walk(input);
};

export { resolveCssValues };