zeplin-extension-style-kit/utils.js

Models and utilities to generate CSS-like style code in Zeplin extensions.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.blendColors = blendColors;
exports.getDeclarationValue = getDeclarationValue;
exports.getUniqueLayerTextStyles = getUniqueLayerTextStyles;
exports.getFontFaces = getFontFaces;
exports.isHtmlTag = isHtmlTag;
exports.isDeclarationInherited = isDeclarationInherited;
exports.selectorize = selectorize;
exports.generateIdentifier = generateIdentifier;
exports.webkit = webkit;
exports.getResources = getResources;
exports.getResourceContainer = getResourceContainer;
exports.getParams = getParams;

var _css = _interopRequireDefault(require("css.escape"));

var _fontFace = _interopRequireDefault(require("./elements/fontFace"));

var _constants = require("./constants");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct; } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

var HTML_TAGS = ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "math", "menu", "menuitem", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "slot", "small", "source", "source", "span", "strong", "style", "sub", "summary", "sup", "svg", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "var", "video", "wbr"];

function isHtmlTag(str) {
  return HTML_TAGS.includes(str.toLowerCase());
}

var NOT_INHERITED_PROPS = ["-webkit-background-clip", "background-clip", "-webkit-text-fill-color"];

function isDeclarationInherited(declaration) {
  return !NOT_INHERITED_PROPS.includes(declaration);
}

function blendColors(colors) {
  return colors.reduce(function (blendedColor, color) {
    return blendedColor.blend(color);
  });
}

function generateIdentifier(str) {
  var escapedStr = str.trim().replace(/[^\s\w-]/g, "").replace(/^(-?\d+)+/, "").replace(/\s+/g, "-");

  if (_css.default) {
    escapedStr = (0, _css.default)(escapedStr);
  }

  return escapedStr;
}

function selectorize(str) {
  if (!str) {
    return "";
  }

  var selectorizedStr = str.trim();

  if (isHtmlTag(selectorizedStr)) {
    return selectorizedStr.toLowerCase();
  }

  if (/^[#.]/.test(selectorizedStr)) {
    var name = generateIdentifier(selectorizedStr.substr(1));

    if (name) {
      return selectorizedStr[0] + name;
    }
  }

  selectorizedStr = generateIdentifier(selectorizedStr);
  return selectorizedStr && ".".concat(selectorizedStr);
}

function webkit(Declaration) {
  return /*#__PURE__*/function () {
    function _class() {
      _classCallCheck(this, _class);

      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      this.instance = _construct(Declaration, args);
    }

    _createClass(_class, [{
      key: "equals",
      value: function equals(other) {
        return this.instance.equals(other.instance || other);
      }
    }, {
      key: "getValue",
      value: function getValue(params) {
        return this.instance.getValue(params);
      }
    }, {
      key: "name",
      get: function get() {
        return "-webkit-".concat(this.instance.name);
      }
    }]);

    return _class;
  }();
}

function getDeclarationValue(value, variables, params) {
  var styleValue = value.toStyleValue(params);

  if (!variables) {
    return styleValue;
  }

  var varName = Object.keys(variables).find(function (name) {
    return styleValue === variables[name].toStyleValue(params);
  });
  return varName ? varName : styleValue;
}

function getUniqueLayerTextStyles(layer) {
  var uniqueTextStyles = [];
  layer.textStyles.forEach(function (_ref) {
    var textStyle = _ref.textStyle;
    var found = uniqueTextStyles.some(textStyle.equals, textStyle);

    if (found) {
      return;
    }

    uniqueTextStyles.push(textStyle);
  });
  return uniqueTextStyles;
}

function getFontFaces(textStyles) {
  var textStyleSet = [];
  textStyles.forEach(function (textStyle) {
    if (textStyleSet.find(function (ts) {
      return ts.fontFace === textStyle.fontFace;
    })) {
      return;
    }

    textStyleSet.push(textStyle);
  });
  return textStyleSet.sort(_fontFace.default.comparator);
}

function getResourceContainer(context) {
  if (context.styleguide) {
    return {
      container: context.styleguide,
      type: "styleguide"
    };
  }

  return {
    container: context.project,
    type: "project"
  };
}

function getLinkedResources(container, type, resourceKey) {
  var resources = container[resourceKey];
  var itContainer = type === "project" ? container.linkedStyleguide : container.parent;

  while (itContainer) {
    resources = [].concat(_toConsumableArray(resources), _toConsumableArray(itContainer[resourceKey]));
    itContainer = itContainer.parent;
  }

  return resources;
}

function getResources(_ref2) {
  var context = _ref2.context,
      useLinkedStyleguides = _ref2.useLinkedStyleguides,
      key = _ref2.key;

  var _getResourceContainer = getResourceContainer(context),
      container = _getResourceContainer.container,
      type = _getResourceContainer.type;

  if (useLinkedStyleguides) {
    return getLinkedResources(container, type, key);
  }

  return container[key];
}

function getParams(context) {
  var _getResourceContainer2 = getResourceContainer(context),
      container = _getResourceContainer2.container;

  return {
    densityDivisor: container.densityDivisor,
    useLinkedStyleguides: context.getOption(_constants.OPTION_NAMES.USE_LINKED_STYLEGUIDES),
    colorFormat: context.getOption(_constants.OPTION_NAMES.COLOR_FORMAT),
    showDimensions: context.getOption(_constants.OPTION_NAMES.SHOW_DIMENSIONS),
    showDefaultValues: context.getOption(_constants.OPTION_NAMES.SHOW_DEFAULT_VALUES),
    unitlessLineHeight: context.getOption(_constants.OPTION_NAMES.UNITLESS_LINE_HEIGHT),
    useMixin: context.getOption(_constants.OPTION_NAMES.MIXIN),
    remPreferences: context.getOption(_constants.OPTION_NAMES.USE_REM_UNIT) && container.remPreferences
  };
}