wix-style-processor
Advanced tools
Comparing version 1.1.27 to 2.0.0
@@ -5,4 +5,6 @@ "use strict"; | ||
var wixStylesFontUtils_1 = require("./wixStylesFontUtils"); | ||
var replacer_1 = require("./replacer"); | ||
var lodash_1 = require("lodash"); | ||
var Stylis = require("stylis"); | ||
var processor_1 = require("./processor"); | ||
var extractVarsPlugin_1 = require("./extractVarsPlugin"); | ||
exports.default = function (wixService, domService, options) { return ({ | ||
@@ -12,3 +14,3 @@ update: function () { | ||
domService.getAllStyleTags().forEach(function (tagStyle) { | ||
var css = (tagStyle.originalTemplate || tagStyle.textContent).split('\n').join(' '); | ||
var css = (tagStyle.originalTemplate || tagStyle.textContent); | ||
var isStringHack = function (fontParam) { return fontParam.fontStyleParam === false; }; | ||
@@ -22,9 +24,17 @@ var isValidFontParam = function (fontParam) { return fontParam.family !== undefined; }; | ||
var strings = lodash_1.pickBy(styleParams.fonts, isStringHack); | ||
var newCss = replacer_1.default({ | ||
css: css, | ||
colors: colors, | ||
fonts: fonts, | ||
numbers: numbers, | ||
strings: strings | ||
}, options.plugins); | ||
var stylis = new Stylis({ semicolon: false, compress: false, preserve: true }); | ||
var vars = getVars(css, stylis); | ||
stylis.use(function (context, declaration) { | ||
if (context === 1) { | ||
return processor_1.processor({ | ||
declaration: declaration, | ||
colors: colors, | ||
fonts: fonts, | ||
numbers: numbers, | ||
strings: strings, | ||
vars: vars | ||
}, options.plugins); | ||
} | ||
}); | ||
var newCss = stylis('', css); | ||
domService.overrideStyle(tagStyle, newCss); | ||
@@ -38,2 +48,13 @@ }); | ||
}); }; | ||
function getVars(css, stylis) { | ||
var vars = {}; | ||
stylis.use(function (context, decleration) { | ||
if (context === 1) { | ||
extractVarsPlugin_1.extractVarsPlugin(decleration, vars); | ||
} | ||
}); | ||
stylis('', css); | ||
stylis.use(null); | ||
return vars; | ||
} | ||
//# sourceMappingURL=styleUpdater.js.map |
"use strict"; | ||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
return new (P || (P = Promise))(function (resolve, reject) { | ||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } | ||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } | ||
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); } | ||
step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
}); | ||
}; | ||
var __generator = (this && this.__generator) || function (thisArg, body) { | ||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; | ||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; | ||
function verb(n) { return function (v) { return step([n, v]); }; } | ||
function step(op) { | ||
if (f) throw new TypeError("Generator is already executing."); | ||
while (_) try { | ||
if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t; | ||
if (y = 0, t) op = [0, t.value]; | ||
switch (op[0]) { | ||
case 0: case 1: t = op; break; | ||
case 4: _.label++; return { value: op[1], done: false }; | ||
case 5: _.label++; y = op[1]; op = [0]; continue; | ||
case 7: op = _.ops.pop(); _.trys.pop(); continue; | ||
default: | ||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } | ||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } | ||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } | ||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } | ||
if (t[2]) _.ops.pop(); | ||
_.trys.pop(); continue; | ||
} | ||
op = body.call(thisArg, _); | ||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } | ||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; | ||
} | ||
}; | ||
var _this = this; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var tslib_1 = require("tslib"); | ||
var protractor_1 = require("protractor"); | ||
@@ -20,5 +54,5 @@ function waitForVisibilityOf(element) { | ||
}); | ||
it('should not change the number of style tags', function () { return tslib_1.__awaiter(_this, void 0, void 0, function () { | ||
it('should not change the number of style tags', function () { return __awaiter(_this, void 0, void 0, function () { | ||
var styleNum, _a, _b; | ||
return tslib_1.__generator(this, function (_c) { | ||
return __generator(this, function (_c) { | ||
switch (_c.label) { | ||
@@ -48,5 +82,5 @@ case 0: return [4 /*yield*/, protractor_1.browser.get('/')]; | ||
}); }); | ||
it('should update styles after change form sdk', function () { return tslib_1.__awaiter(_this, void 0, void 0, function () { | ||
it('should update styles after change form sdk', function () { return __awaiter(_this, void 0, void 0, function () { | ||
var styleNum, _a, _b; | ||
return tslib_1.__generator(this, function (_c) { | ||
return __generator(this, function (_c) { | ||
switch (_c.label) { | ||
@@ -53,0 +87,0 @@ case 0: return [4 /*yield*/, protractor_1.browser.get('/')]; |
@@ -5,3 +5,3 @@ { | ||
"description": "An alternative Wix Styles TPA processor", | ||
"version": "1.1.27", | ||
"version": "2.0.0", | ||
"author": { | ||
@@ -33,3 +33,4 @@ "name": "Eran Shabi", | ||
"parse-css-font": "^2.0.2", | ||
"q": "^1.5.0" | ||
"q": "^1.5.0", | ||
"stylis": "^3.2.4" | ||
}, | ||
@@ -36,0 +37,0 @@ "devDependencies": { |
@@ -16,2 +16,3 @@ # wix-style-processor | ||
--my-font: "font(Body-M)"; /* define a custom variable with a default value */ | ||
--my-font2: "font({theme: 'Body-M', size: '10px', lineHeight: '2em', weight: 'bold', style:'italic'})" /* will use Body-M as base font and override the given attributes */ | ||
--default-width: "number(42)"; /* define a numeric custom var */ | ||
@@ -24,2 +25,5 @@ | ||
color: "opacity(color-8, 0.3)"; /* add opacity to a site palette color */ | ||
color: "withoutOpacity(opacity(color-8, 0.3))"; /* will remove the opacity of site palette color */ | ||
color: "darken(color-8, 0.3)"; /* make a darken version of site palette color */ | ||
font: "font(--my-font2)"; /* will use the overridden default unless it was defined in settings */ | ||
} | ||
@@ -26,0 +30,0 @@ ``` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
4825280
40
34830
128
9
+ Addedstylis@^3.2.4
+ Addedstylis@3.5.4(transitive)