zeplin-extension-style-kit
Version:
Models and utilities to generate CSS-like style code in Zeplin extensions.
399 lines (358 loc) • 15.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.extensionFactory = void 0;
var _utils = require("./utils");
var _color = _interopRequireDefault(require("./values/color"));
var _fontFace = _interopRequireDefault(require("./elements/fontFace"));
var _textStyle = _interopRequireDefault(require("./elements/textStyle"));
var _layer = _interopRequireDefault(require("./elements/layer"));
var _ruleSet = _interopRequireDefault(require("./ruleSet"));
var _mixin = _interopRequireDefault(require("./declarations/mixin"));
var _length = _interopRequireDefault(require("./values/length"));
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; }
var hasSameName = function hasSameName(a, b) {
return (0, _utils.generateIdentifier)(a.name) === (0, _utils.generateIdentifier)(b.name);
};
var isFirstItem = function isFirstItem(color, i, array) {
return i === array.findIndex(function (searchedColor) {
return hasSameName(color, searchedColor);
});
};
var colorsFactory = function colorsFactory(_ref) {
var language = _ref.language,
createGenerator = _ref.createGenerator,
_ref$options = _ref.options;
_ref$options = _ref$options === void 0 ? {} : _ref$options;
var _ref$options$prefix = _ref$options.prefix,
prefix = _ref$options$prefix === void 0 ? "" : _ref$options$prefix,
_ref$options$separato = _ref$options.separator,
separator = _ref$options$separato === void 0 ? "\n" : _ref$options$separato,
_ref$options$suffix = _ref$options.suffix,
suffix = _ref$options$suffix === void 0 ? "" : _ref$options$suffix,
isColorsFromParam = _ref.isColorsFromParam;
return function (context, colorsParam) {
var params = (0, _utils.getParams)(context);
var generator = createGenerator(context, params);
var allColors = isColorsFromParam ? colorsParam : (0, _utils.getResources)({
context,
useLinkedStyleguides: params.useLinkedStyleguides,
key: "colors"
});
var uniqueColors = allColors.filter(isFirstItem);
var code = "".concat(prefix).concat(uniqueColors.map(function (c) {
return generator.variable(c.name, new _color.default(c));
}).join(separator)).concat(suffix);
return {
code,
language
};
};
};
var textStylesFactory = function textStylesFactory(_ref2) {
var language = _ref2.language,
createGenerator = _ref2.createGenerator,
_ref2$options = _ref2.options;
_ref2$options = _ref2$options === void 0 ? {} : _ref2$options;
var _ref2$options$prefix = _ref2$options.prefix,
prefix = _ref2$options$prefix === void 0 ? "" : _ref2$options$prefix,
_ref2$options$separat = _ref2$options.separator,
separator = _ref2$options$separat === void 0 ? "\n\n" : _ref2$options$separat,
_ref2$options$fontFac = _ref2$options.fontFaceSeparator,
fontFaceSeparator = _ref2$options$fontFac === void 0 ? separator : _ref2$options$fontFac,
_ref2$options$textSty = _ref2$options.textStyleSeparator,
textStyleSeparator = _ref2$options$textSty === void 0 ? separator : _ref2$options$textSty,
_ref2$options$suffix = _ref2$options.suffix,
suffix = _ref2$options$suffix === void 0 ? "" : _ref2$options$suffix,
isTextStylesFromParam = _ref2.isTextStylesFromParam;
return function (context, textStylesParam) {
var params = (0, _utils.getParams)(context);
var generator = createGenerator(context, params);
var textStyles = isTextStylesFromParam ? textStylesParam : (0, _utils.getResources)({
context,
useLinkedStyleguides: params.useLinkedStyleguides,
key: "textStyles"
});
var uniqueTextStyles = textStyles.filter(isFirstItem);
var fontFaces = (0, _utils.getFontFaces)(uniqueTextStyles);
var fontFaceCode = fontFaces.map(function (ts) {
var _FontFace = new _fontFace.default(ts),
style = _FontFace.style;
return generator.atRule(style);
}).join(fontFaceSeparator);
var textStyleCode = uniqueTextStyles.map(function (t) {
var _TextStyle = new _textStyle.default(t),
style = _TextStyle.style;
return generator.ruleSet(style, {
mixin: params.useMixin
});
}).join(textStyleSeparator);
return {
code: "".concat(prefix).concat(fontFaceCode).concat(separator).concat(textStyleCode).concat(suffix),
language
};
};
};
var useRemUnitForMeasurement = function useRemUnitForMeasurement(_ref3) {
var useForMeasurements = _ref3.useForMeasurements;
return useForMeasurements;
};
var spacingFactory = function spacingFactory(_ref4) {
var language = _ref4.language,
createGenerator = _ref4.createGenerator,
_ref4$options = _ref4.options;
_ref4$options = _ref4$options === void 0 ? {} : _ref4$options;
var _ref4$options$prefix = _ref4$options.prefix,
prefix = _ref4$options$prefix === void 0 ? "" : _ref4$options$prefix,
_ref4$options$separat = _ref4$options.separator,
separator = _ref4$options$separat === void 0 ? "\n" : _ref4$options$separat,
_ref4$options$suffix = _ref4$options.suffix,
suffix = _ref4$options$suffix === void 0 ? "" : _ref4$options$suffix;
return function (context) {
var params = (0, _utils.getParams)(context);
var cssGenerator = createGenerator(context, params);
var spacingSections = (0, _utils.getResources)({
context,
useLinkedStyleguides: params.useLinkedStyleguides,
key: "spacingSections"
});
var spacingTokens = spacingSections.map(function (_ref5) {
var items = _ref5.spacingTokens;
return items;
}).reduce(function (prev, current) {
return [].concat(_toConsumableArray(prev), _toConsumableArray(current));
}).filter(isFirstItem);
var code = "".concat(prefix).concat(spacingTokens.map(function (_ref6) {
var name = _ref6.name,
value = _ref6.value;
return cssGenerator.variable(name, new _length.default(value, {
useRemUnit: useRemUnitForMeasurement,
useDensityDivisor: false
}));
}).join(separator)).concat(suffix);
return {
code,
language
};
};
};
var layerFactory = function layerFactory(_ref7) {
var language = _ref7.language,
createGenerator = _ref7.createGenerator,
_ref7$options = _ref7.options;
_ref7$options = _ref7$options === void 0 ? {} : _ref7$options;
var _ref7$options$separat = _ref7$options.separator,
separator = _ref7$options$separat === void 0 ? "\n\n" : _ref7$options$separat;
return function (context, selectedLayer) {
var params = (0, _utils.getParams)(context);
var useMixin = params.useMixin;
var generator = createGenerator(context, params);
var l = new _layer.default(selectedLayer);
var layerRuleSet = l.style;
var childrenRuleSet = [];
var defaultTextStyle = selectedLayer.defaultTextStyle;
if (selectedLayer.type === "text" && defaultTextStyle) {
var textStyles = (0, _utils.getResources)({
context,
useLinkedStyleguides: params.useLinkedStyleguides,
key: "textStyles"
}).filter(isFirstItem);
var containerTextStyle = textStyles.find(function (textStyle) {
return textStyle.equals(defaultTextStyle);
});
var declarations = l.getLayerTextStyleDeclarations(defaultTextStyle);
var textStyleName = containerTextStyle && containerTextStyle.name;
if (useMixin && textStyleName && !(0, _utils.isHtmlTag)((0, _utils.selectorize)(textStyleName))) {
var mixinRuleSet = new _ruleSet.default("mixin", l.getLayerTextStyleDeclarations(containerTextStyle));
declarations.forEach(function (d) {
if (!mixinRuleSet.hasProperty(d.name)) {
layerRuleSet.addDeclaration(d);
}
});
layerRuleSet.addDeclaration(new _mixin.default((0, _utils.selectorize)(textStyleName).replace(/^\./, "")));
} else {
declarations.forEach(function (d) {
return layerRuleSet.addDeclaration(d);
});
}
(0, _utils.getUniqueLayerTextStyles)(selectedLayer).filter(function (textStyle) {
return !defaultTextStyle.equals(textStyle);
}).forEach(function (textStyle, idx) {
childrenRuleSet.push(new _ruleSet.default("".concat((0, _utils.selectorize)(selectedLayer.name), " ").concat((0, _utils.selectorize)("text-style-".concat(idx + 1))), l.getLayerTextStyleDeclarations(textStyle)));
});
}
var layerStyle = generator.ruleSet(layerRuleSet);
var childrenStyles = childrenRuleSet.map(function (s) {
return generator.ruleSet(s, {
parentDeclarations: layerRuleSet.declarations
});
});
return {
code: [layerStyle].concat(_toConsumableArray(childrenStyles)).join(separator),
language
};
};
};
var comment = function comment(context, text) {
return "/* ".concat(text, " */");
};
var exportColorsFactory = function exportColorsFactory(_ref8) {
var colors = _ref8.colors,
_ref8$options = _ref8.options;
_ref8$options = _ref8$options === void 0 ? {} : _ref8$options;
var _ref8$options$prefix = _ref8$options.prefix,
prefix = _ref8$options$prefix === void 0 ? "" : _ref8$options$prefix,
_ref8$options$suffix = _ref8$options.suffix,
suffix = _ref8$options$suffix === void 0 ? "" : _ref8$options$suffix;
return function (context, colorsParam) {
var _colors = colors(context, colorsParam),
code = _colors.code,
language = _colors.language;
return {
code: "".concat(prefix).concat(code).concat(suffix),
filename: "colors.".concat(language),
language
};
};
};
var exportTextStylesFactory = function exportTextStylesFactory(_ref9) {
var textStyles = _ref9.textStyles,
_ref9$options = _ref9.options;
_ref9$options = _ref9$options === void 0 ? {} : _ref9$options;
var _ref9$options$prefix = _ref9$options.prefix,
prefix = _ref9$options$prefix === void 0 ? "" : _ref9$options$prefix,
_ref9$options$suffix = _ref9$options.suffix,
suffix = _ref9$options$suffix === void 0 ? "" : _ref9$options$suffix;
return function (context, textStylesParam) {
var _textStyles = textStyles(context, textStylesParam),
code = _textStyles.code,
language = _textStyles.language;
return {
code: "".concat(prefix).concat(code).concat(suffix),
filename: "fonts.".concat(language),
language
};
};
};
var exportSpacingFactory = function exportSpacingFactory(_ref10) {
var spacing = _ref10.spacing,
_ref10$options = _ref10.options;
_ref10$options = _ref10$options === void 0 ? {} : _ref10$options;
var _ref10$options$prefix = _ref10$options.prefix,
prefix = _ref10$options$prefix === void 0 ? "" : _ref10$options$prefix,
_ref10$options$suffix = _ref10$options.suffix,
suffix = _ref10$options$suffix === void 0 ? "" : _ref10$options$suffix;
return function (context) {
var _spacing = spacing(context),
code = _spacing.code,
language = _spacing.language;
return {
code: "".concat(prefix).concat(code).concat(suffix),
filename: "spacing.".concat(language),
language
};
};
};
var extensionFactory = function extensionFactory(_ref11) {
var language = _ref11.language,
Generator = _ref11.Generator,
colorsOptions = _ref11.colorsOptions,
textStylesOptions = _ref11.textStylesOptions,
spacingOptions = _ref11.spacingOptions,
layerOptions = _ref11.layerOptions,
exportColorsOptions = _ref11.exportColorsOptions,
exportTextStylesOptions = _ref11.exportTextStylesOptions,
exportSpacingOptions = _ref11.exportSpacingOptions;
var getVariableMap = function getVariableMap(containerColors) {
var variables = {};
containerColors.forEach(function (containerColor) {
// Colors are sorted by their priorities; so, we don't override already set colors
var colorValue = new _color.default(containerColor).valueOf();
variables[colorValue] = variables[colorValue] ? variables[colorValue] : containerColor.name;
});
return variables;
};
var createGenerator = function createGenerator(context, params) {
var containerColors = (0, _utils.getResources)({
context,
useLinkedStyleguides: params.useLinkedStyleguides,
key: "colors"
});
var uniqueColors = containerColors.filter(isFirstItem);
return new Generator(getVariableMap(uniqueColors), params);
};
var colors = colorsFactory({
language,
createGenerator,
options: colorsOptions
});
var textStyles = textStylesFactory({
language,
createGenerator,
options: textStylesOptions
});
var spacing = spacingFactory({
language,
createGenerator,
options: spacingOptions
});
var layer = layerFactory({
language,
createGenerator,
options: layerOptions
});
var exportColors = exportColorsFactory({
colors,
options: exportColorsOptions
});
var exportTextStyles = exportTextStylesFactory({
textStyles,
options: exportTextStylesOptions
});
var exportSpacing = exportSpacingFactory({
spacing,
options: exportSpacingOptions
});
var styleguideColors = colorsFactory({
language,
createGenerator,
options: colorsOptions,
isColorsFromParam: true
});
var styleguideTextStyles = textStylesFactory({
language,
createGenerator,
options: textStylesOptions,
isTextStylesFromParam: true
});
var exportStyleguideColors = exportColorsFactory({
colors: styleguideColors,
options: exportColorsOptions
});
var exportStyleguideTextStyles = exportTextStylesFactory({
textStyles: styleguideTextStyles,
options: exportTextStylesOptions
});
return {
colors,
textStyles,
spacing,
layer,
comment,
exportColors,
exportTextStyles,
exportSpacing,
styleguideColors,
styleguideTextStyles,
exportStyleguideColors,
exportStyleguideTextStyles
};
};
exports.extensionFactory = extensionFactory;