tpa-style-webpack-plugin
Version:
A Webpack plugin that handles wix tpa styles, it separates static css file that injects dynamic style at runtime.
190 lines • 7.56 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { TinyColor, isReadable } from '@ctrl/tinycolor';
import { escapeHtml, isJsonLike, parseJson } from './utils/utils';
import { wixStylesFontUtils } from './utils/wixStyleFontUtils';
import { directionMap, IS_RTL_PARAM } from './constants';
var hexColorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
var WHITE = new TinyColor('white');
var BLACK = new TinyColor('black');
export var cssFunctions = {
join: function (color1, strength1, color2, strength2) {
color1 = new TinyColor(color1).toRgb();
color2 = new TinyColor(color2).toRgb();
// todo: use strength
//let color1strength = args[1];
//let color2strength = args[3];
var r = (color1.r / 255 + color2.r / 255) * 255;
var g = (color1.g / 255 + color2.g / 255) * 255;
var b = (color1.b / 255 + color2.b / 255) * 255;
var a = (color1.a + color2.a) / 2;
return new TinyColor({ r: r, g: g, b: b, a: a }).toRgbString();
},
color: function (colorValue, tpaParams) {
if (tpaParams.colors[colorValue]) {
return tpaParams.colors[colorValue];
}
if (hexColorRegex.test(colorValue)) {
return colorValue;
}
else if (colorValue) {
var color = new TinyColor(colorValue);
if (color.isValid) {
return color.toRgbString();
}
else {
throw new Error("Unparsable color " + colorValue);
}
}
else {
return '';
}
},
font: function (font, tpaParams) {
var fontValue;
if (typeof font === 'object') {
fontValue = font;
}
else if (isJsonLike(font)) {
var _a = parseJson(font), theme = _a.theme, overrides = __rest(_a, ["theme"]);
fontValue = __assign(__assign({ style: '', variant: '', weight: '', stretch: '', size: '', lineHeight: '', family: [] }, tpaParams.fonts[theme]), overrides);
}
else if (tpaParams.fonts[font]) {
fontValue = tpaParams.fonts[font];
}
else if (typeof font === 'string' && font.indexOf('font:') === 0) {
return font.slice(5, font.length - 1);
}
else {
return escapeHtml(font);
}
var fontCssValue = wixStylesFontUtils.toFontCssValue(fontValue);
if (fontCssValue[fontCssValue.length - 1] === ';') {
fontCssValue = fontCssValue.split(';')[0];
}
return escapeHtml(fontCssValue);
},
opacity: function (color, opacity) {
var oldColor = new TinyColor(color);
var newOpacity = oldColor.toRgb().a * opacity;
return oldColor.setAlpha(newOpacity).toRgbString();
},
withoutOpacity: function (color) {
return new TinyColor(color).setAlpha(1).toRgbString();
},
string: function (value) {
return escapeHtml(value);
},
darken: function (colorVal, darkenValue) {
return new TinyColor(colorVal).brighten(-1 * darkenValue * 100).toRgbString();
},
lighten: function (colorVal, lightenVal) {
return new TinyColor(colorVal).lighten(lightenVal * 100).toRgbString();
},
whiten: function (colorVal, whitenVal) {
return new TinyColor(colorVal).tint(whitenVal * 100).toRgbString();
},
number: function (value) {
return +value;
},
underline: function (font) {
return font && font.underline ? 'underline' : '';
},
unit: function (value, unit) {
return escapeHtml("" + value + unit);
},
fallback: function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var argsWithoutTPAParams = args.slice(0, -1);
return argsWithoutTPAParams.filter(Boolean)[0];
},
direction: function (value, tpaParams) {
var direction = tpaParams.booleans[IS_RTL_PARAM] ? 'rtl' : 'ltr';
return directionMap[value][direction];
},
zeroAsTrue: function (zero) {
return typeof zero === 'number' ? "" + zero : zero;
},
//a work around for https://github.com/thysultan/stylis.js/issues/116
calculate: function (operator) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
var numbersWithoutTPAParams = args.slice(0, -1);
if (numbersWithoutTPAParams.length > 1) {
return "calc(" + numbersWithoutTPAParams.join(" " + operator + " ") + ")";
}
else {
return numbersWithoutTPAParams[0];
}
},
readableFallback: function (baseColor, suggestedColor, fallbackColor) {
var baseColorTC = new TinyColor(baseColor);
var suggestedColorTC = new TinyColor(suggestedColor);
return isReadable(baseColorTC, suggestedColorTC) ? suggestedColor : fallbackColor;
},
/**
* Given foreground and background colors, checks to see if the colors are readable together.
* If not, it returns the first to be readable among:
* background color lightened/darkened by 1%
* background color lightened/darkened by 5%
* background color lightened/darkened by 10%
* background color lightened/darkened by 20%
* background color lightened/darkened by 30%
* background color lightened/darkened by 40%
* background color lightened/darkened by 50%
* background color lightened/darkened by 60%
* the method (lighten or darken) is determined by the ratio between the two given colors
* @param foreground - the foreground (text) color
* @param background - a background color
*/
smartBGContrast: function (foreground, background) {
var fgColor = new TinyColor(foreground);
var bgColor = new TinyColor(background);
var fgLuminance = fgColor.getLuminance();
var bgLuminance = bgColor.getLuminance();
var isBackgroundBrighter = fgLuminance <= bgLuminance;
var luminositySteps = [1, 5, 10, 20, 30, 40, 50, 60];
// tslint:disable-next-line:prefer-for-of
for (var i = 0; i < luminositySteps.length; i++) {
if (!isReadable(fgColor, bgColor)) {
var luminosityStep = luminositySteps[i];
if (isBackgroundBrighter) {
bgColor = bgColor.lighten(luminosityStep);
}
else {
bgColor = bgColor.darken(luminosityStep);
}
}
else {
break;
}
}
return bgColor.toRgbString();
},
};
//# sourceMappingURL=cssFunctions.js.map