wix-style-processor - npm Package Compare versions

Comparing version 2.0.5 to 2.0.6

dist/src/external-types.d.ts

@@ -6,5 +6,12 @@ declare var expect: Function;
 interface Window {
-  Wix: any;
-  styleProcessor?: any;
-  changeStyles?: any;
+    Wix: any;
+    styleProcessor?: any;
+    changeStyles?: any;
 }
+
+interface ITPAParams {
+    colors: { [index: string]: { value: string } };
+    numbers: { [index: string]: number };
+    fonts: Object;
+    strings: Object;
+}

dist/src/index.js

@@ -6,15 +6,10 @@ "use strict";
 var wixService_1 = require("./wixService");
+var plugins_1 = require("./plugins");
+var defaultPlugins_1 = require("./defaultPlugins");
 exports.default = {
-    plugins: {
-        valueTransformers: {},
-        declarationTransformers: []
-    },
-    resetPlugins: function () {
-        this.plugins = {
-            valueTransformers: {},
-            declarationTransformers: []
-        };
-    },
+    plugins: new plugins_1.Plugins(),
     init: function (options, domServiceOverride) {
+        var _this = this;
         if (domServiceOverride === void 0) { domServiceOverride = domService_1.default; }
+        Object.keys(defaultPlugins_1.defaultPlugins).forEach(function (funcName) { return _this.plugins.addCssFunction(funcName, defaultPlugins_1.defaultPlugins[funcName]); });
         options = setDefaultOptions(options, this.plugins);
@@ -25,17 +20,2 @@ var wixService = wixService_1.default(window.Wix);
         return styleUpdater.update();
-    },
-    plugin: function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        return this.valuePlugin.apply(this, args);
-    },
-    valuePlugin: function (name, fun) {
-        this.plugins.valueTransformers[name] = fun;
-        return this;
-    },
-    declarationPlugin: function (fun) {
-        this.plugins.declarationTransformers.push(fun);
-        return this;
     }
@@ -42,0 +22,0 @@ };

dist/src/processor.js

 "use strict";
-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)
-            t[p[i]] = s[p[i]];
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var Color = require("color");
-var wixStylesFontUtils_1 = require("./wixStylesFontUtils");
 var utils_1 = require("./utils");
 var paramsRegex = /,(?![^(]*(?:\)|}))/g;
 var customSyntaxRegex = /"\w+\([^"]*\)"/g;
-var hexColorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
-var values;
 function processor(_a, plugins) {
-    var declaration = _a.declaration, colors = _a.colors, fonts = _a.fonts, numbers = _a.numbers, strings = _a.strings, vars = _a.vars;
-    var _b = declaration.split(':'), key = _b[0], value = _b.slice(1);
-    key = key.trim();
-    value = value.join(':').trim();
-    values = arguments[0];
-    if (plugins.declarationTransformers.length > 0) {
-        plugins.declarationTransformers.forEach(function (plugin) {
-            declaration = utils_1.concatKeyValue(plugin(key, value));
+    var declaration = _a.declaration, vars = _a.vars;
+    var _b = utils_1.splitDeclaration(declaration), key = _b.key, value = _b.value;
+    if (plugins.declarationReplacers.length > 0) {
+        plugins.declarationReplacers.forEach(function (plugin) {
+            var pluginResult = plugin(key, value);
+            key = pluginResult.key;
+            value = pluginResult.value;
         });
-        _c = declaration.split(':'), key = _c[0], value = _c.slice(1);
-        key = key.trim();
-        value = value.join(':').trim();
     }
     var newValue = value.replace(customSyntaxRegex, function (part) {
-        if (utils_1.isSupportedFunction(part)) {
-            return executeFunction(part);
+        if (plugins.isSupportedFunction(part)) {
+            return executeFunction(part, plugins, vars);
         }
@@ -40,111 +23,24 @@ return part;
     return key + ': ' + newValue;
-    var _c;
 }
 exports.processor = processor;
-var plugins = {
-    join: function (color1, strength1, color2, strength2) {
-        color1 = new Color(color1);
-        color2 = new Color(color2);
-        //todo: use strength
-        //let color1strength = args[1];
-        //let color2strength = args[3];
-        var r = ((color1.red() / 255 + color2.red() / 255) * 255);
-        var g = ((color1.green() / 255 + color2.green() / 255) * 255);
-        var b = ((color1.blue() / 255 + color2.blue() / 255) * 255);
-        var a = ((color1.alpha() + color2.alpha()) / 2);
-        return new Color({ r: r, g: g, b: b }).alpha(a).rgb().string();
-    },
-    color: function (colorValue) {
-        if (values.colors[colorValue]) {
-            return values.vars[colorValue] || values.colors[colorValue];
-        }
-        try {
-            if (hexColorRegex.test(colorValue)) {
-                return colorValue;
-            }
-            return new Color(colorValue).rgb().string();
-        }
-        catch (e) {
-            throw 'unparsable color ' + colorValue;
-        }
-    },
-    font: function (font) {
-        var fontValue;
-        if (typeof font === 'object') {
-            fontValue = font;
-        }
-        else if (utils_1.isJsonLike(font)) {
-            var _a = utils_1.parseJson(font), theme = _a.theme, overrides = __rest(_a, ["theme"]);
-            fontValue = Object.assign({}, values.fonts[theme], overrides);
-        }
-        else if (values.fonts[font]) {
-            fontValue = values.fonts[font];
-        }
-        else {
-            return font;
-        }
-        var fontCssValue = wixStylesFontUtils_1.default.toFontCssValue(fontValue);
-        if (fontCssValue[fontCssValue.length - 1] === ';') {
-            fontCssValue = fontCssValue.split(';')[0];
-        }
-        else {
-            //todo: else never reached
-        }
-        return fontCssValue;
-    },
-    opacity: function (color, opacity) {
-        return (new Color(color)).fade(1 - opacity).rgb().string();
-    },
-    withoutOpacity: function (color) {
-        return (new Color(color)).alpha(1).rgb().string();
-    },
-    string: function (value) {
-        return values.vars[value] || value;
-    },
-    darken: function (colorVal, darkenValue) {
-        return (new Color(colorVal)).darken(darkenValue).rgb().string();
-    },
-    number: function (value) {
-        return +value;
-    }
-};
-function executeFunction(value) {
+function executeFunction(value, plugins, vars) {
     var functionSignature;
-    if (functionSignature = utils_1.getFunctionSignature(value)) {
-        return plugins[functionSignature.funcName].apply(plugins, functionSignature.args.split(paramsRegex).map(executeFunction));
+    if (functionSignature = plugins.getFunctionSignature(value)) {
+        return (_a = plugins.cssFunctions)[functionSignature.funcName].apply(_a, functionSignature.args.split(paramsRegex)
+            .map(function (v) { return executeFunction(v.trim(), plugins, vars); }))(vars.tpaParams);
     }
     else {
-        return getVarOrPrimitiveValue(value);
+        return getVarOrPrimitiveValue(value, plugins, vars);
     }
+    var _a;
 }
-function getVarOrPrimitiveValue(value) {
-    if (utils_1.isCssVar(value)) {
-        if (getVarValueFromSettingsOrDefault(value)) {
-            value = getVarValueFromSettingsOrDefault(value);
+function getVarOrPrimitiveValue(varName, plugins, vars) {
+    if (utils_1.isCssVar(varName)) {
+        varName = vars.getValue(varName);
+        if (plugins.isSupportedFunction(varName)) {
+            varName = executeFunction(varName, plugins, vars);
         }
-        if (utils_1.isSupportedFunction(value)) {
-            value = executeFunction(value);
-        }
     }
-    return value;
+    return varName;
 }
-function getVarValueFromSettingsOrDefault(varName) {
-    var varValue = values.vars[varName];
-    //no var declared, maybe is has value in style params (from settings)
-    var varNameInSettings = varName.substring(2, varName.length);
-    if (values.strings[varNameInSettings] && values.strings[varNameInSettings].value) {
-        return values.strings[varNameInSettings].value;
-    }
-    else if (values.colors[varNameInSettings]) {
-        return values.colors[varNameInSettings];
-    }
-    else if (values.fonts[varNameInSettings]) {
-        return values.fonts[varNameInSettings];
-    }
-    else if (values.numbers[varNameInSettings]) {
-        return values.numbers[varNameInSettings];
-    }
-    //not a var
-    return varValue;
-}
 //# sourceMappingURL=processor.js.map

dist/src/styleUpdater.js

@@ -8,3 +8,3 @@ "use strict";
 var processor_1 = require("./processor");
-var extractVarsPlugin_1 = require("./extractVarsPlugin");
+var varsResolver_1 = require("./varsResolver");
 exports.default = function (wixService, domService, options) { return ({
@@ -14,4 +14,4 @@ update: function () {
             var siteColors = _a[0], siteTextPresets = _a[1], styleParams = _a[2];
-            domService.getAllStyleTags().forEach(function (tagStyle) {
-                var css = (tagStyle.originalTemplate || tagStyle.textContent);
+            domService.getAllStyleTags().forEach(function (fillVars) {
+                var css = (fillVars.originalTemplate || fillVars.textContent);
                 css = css.replace(/}\[/g, '} [');
@@ -27,3 +27,9 @@ var isStringHack = function (fontParam) { return fontParam.fontStyleParam === false; };
                 var stylis = new Stylis({ semicolon: false, compress: false, preserve: true });
-                var vars = getVars(css, stylis);
+                var vars = new varsResolver_1.VarsResolver({
+                    colors: colors,
+                    fonts: fonts,
+                    numbers: numbers,
+                    strings: strings,
+                });
+                extractVars(css, vars.extractVar.bind(vars), stylis);
                 stylis.use(function (context, declaration) {
@@ -33,6 +39,2 @@ if (context === 1) {
                             declaration: declaration,
-                            colors: colors,
-                            fonts: fonts,
-                            numbers: numbers,
-                            strings: strings,
                             vars: vars
@@ -43,3 +45,3 @@ }, options.plugins);
                 var newCss = stylis('', css);
-                domService.overrideStyle(tagStyle, newCss);
+                domService.overrideStyle(fillVars, newCss);
             });
@@ -52,7 +54,6 @@ }).catch(function (err) {
 }); };
-function getVars(css, stylis) {
-    var vars = {};
+function extractVars(css, extractVarsFn, stylis) {
     stylis.use(function (context, decleration) {
         if (context === 1) {
-            extractVarsPlugin_1.extractVarsPlugin(decleration, vars);
+            extractVarsFn(decleration);
         }
@@ -62,4 +63,3 @@ });
     stylis.use(null);
-    return vars;
 }
 //# sourceMappingURL=styleUpdater.js.map

dist/src/utils.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var funcsRegexStr = '(' + ['color', 'opacity', 'darken', 'string', 'join', 'number', 'font', 'withoutOpacity'].join('|') + ')\\((.*)\\)';
-var funcsRegex = new RegExp(funcsRegexStr);
-function isSupportedFunction(value) {
-    return funcsRegex.test(value);
-}
-exports.isSupportedFunction = isSupportedFunction;
-function getFunctionSignature(str) {
-    var groups = funcsRegex.exec(str);
-    if (groups) {
-        return {
-            funcName: groups[1],
-            args: groups[2]
-        };
-    }
-    return null;
-}
-exports.getFunctionSignature = getFunctionSignature;
 function isCssVar(key) {
@@ -24,6 +7,10 @@ return key.indexOf('--') === 0;
 exports.isCssVar = isCssVar;
-function concatKeyValue(keyValue) {
-    return keyValue.key + ':' + keyValue.value;
+function splitDeclaration(decl) {
+    var _a = decl.split(':'), key = _a[0], value = _a.slice(1);
+    return {
+        key: key.trim(),
+        value: value.join(':').trim()
+    };
 }
-exports.concatKeyValue = concatKeyValue;
+exports.splitDeclaration = splitDeclaration;
 function isJsonLike(value) {
@@ -30,0 +17,0 @@ return value[0] === '{' && value.slice(-1) === '}';

package.json

@@ -5,3 +5,3 @@ {
   "description": "An alternative Wix Styles TPA processor",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "author": {
@@ -8,0 +8,0 @@ "name": "Eran Shabi",

README.md

@@ -20,3 +20,3 @@ # wix-style-processor
     font: "font(--my-font)";                                                /* assign a dynamic font value from a custom var */
-    width: "number(--default-width)"px;                                     /* assign a dynamic numeric value from a custom var */
+    width: calc(100% - "number(--default-width)");                          /* assign a dynamic numeric value from a custom var */
     color: "color(color-8)";                                                /* assign a color from the site's palette */
@@ -28,2 +28,3 @@ background-color: "join(opacity(color-1, 0.5), opacity(color-8, 0.5))"; /* blends 2 colors */
     font: "font(--my-font2)";                                               /* will use the overridden default unless it was defined in settings  */
+    border-width: "unit(--var-from-settings, px)";                          /* will produce border-width: 42px */
 }
@@ -50,3 +51,3 @@ ```
 
-### 1. Value transformation plugins
+### 1. CSS Custom functions plugins
 These plugins define functions that transform the value-side of the CSS declaration.
@@ -61,8 +62,10 @@
 
-styleProcessor.valuePlugin(
+styleProcessor.plugins.addCssFunction(
     'increment', //Plugin name
-    (params, siteParams) => parseInt(params[0]) + 1 //Transformation function
+    (param1, param2 ,..., siteParams?) => parseInt(params[0]) + 1 //Transformation function
 );
 
-//"params" is an array of the transformation's evaluated params
+//"param1" is the first param that the custom function got in css
+//"param2" is the second param that the custom function got in css
+...
 //"siteParams" is an object containing the user or template defined colors, fonts and numbers.
@@ -89,4 +92,4 @@ ```
 
-#### Declaration transformation plugins
-These plugins allow you to transform the entire key / value of the CSS declaration.
+#### Declaration Replacer plugins
+These plugins allow you to replace the entire key / value of the CSS declaration.
 Since they're invoked upon each and every declaration, there's no need to name them.
@@ -101,5 +104,5 @@
 
-    styleProcessor.declarationPlugin((key, value, siteParams) => ({
-        key: 'ZzZ' + key + 'ZzZ',
-        value: '#' + value + '#'
+    styleProcessor.plugins.addDeclarationReplacer((key, value, siteParams) => ({
+        key: 'ZzZ-' + key + '-ZzZ',
+        value: '#-' + value + '-#'
     }));
@@ -123,3 +126,3 @@
 .foo {
-    ZzZbarZzZ: #4#;
+    ZzZ-bar-ZzZ: #-4-#;
 }
@@ -129,3 +132,3 @@ ```
 # [RTL/LTR plugin](https://github.com/wix/wsp-plugin-rtl)
-If you need dynamic LTR/RTL replacements in your CSS, you can use this plugin.
+It is a `DeclarationReplacer plugin` that allows you to change dynamically LTR/RTL replacements in your CSS, you can use this plugin.
 
@@ -132,0 +135,0 @@ # Important

No alert changes

Improved metrics

Total package byte prevSize

4451136

increased by0.2%

Number of package files

44

increased by10%

Lines of code

32522

increased by0.19%

Number of lines in readme file

131

increased by2.34%

No dependency changes