@stylable/core - npm Package Compare versions

Comparing version 2.0.7 to 2.0.8

cjs/functions.d.ts

@@ -19,3 +19,7 @@ import postcss from 'postcss';
 export declare function resolveArgumentsValue(options: Record<string, string>, transformer: StylableTransformer, meta: StylableMeta, diagnostics: Diagnostics, node: postcss.Node, variableOverride?: Record<string, string>, path?: string[], cssVarsMapping?: Record<string, string>): Record<string, string>;
-export declare function evalDeclarationValue(resolver: StylableResolver, value: string, meta: StylableMeta, node: postcss.Node, variableOverride?: Record<string, string> | null, valueHook?: replaceValueHook, diagnostics?: Diagnostics, passedThrough?: string[], cssVarsMapping?: Record<string, string>): string;
+export declare function processDeclarationValue(resolver: StylableResolver, value: string, meta: StylableMeta, node: postcss.Node, variableOverride?: Record<string, string> | null, valueHook?: replaceValueHook, diagnostics?: Diagnostics, passedThrough?: string[], cssVarsMapping?: Record<string, string>, args?: string[]): {
+    topLevelType: any;
+    outputValue: string;
+};
+export declare function evalDeclarationValue(resolver: StylableResolver, value: string, meta: StylableMeta, node: postcss.Node, variableOverride?: Record<string, string> | null, valueHook?: replaceValueHook, diagnostics?: Diagnostics, passedThrough?: string[], cssVarsMapping?: Record<string, string>, args?: string[]): string;
 //# sourceMappingURL=functions.d.ts.map

cjs/functions.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var custom_values_1 = require("./custom-values");
 var native_reserved_lists_1 = require("./native-reserved-lists");
@@ -8,3 +9,2 @@ var stylable_utils_1 = require("./stylable-utils");
 var valueParser = require('postcss-value-parser');
-/* tslint:disable:max-line-length */
 exports.functionWarnings = {
@@ -34,3 +34,2 @@ FAIL_TO_EXECUTE_FORMATTER: function (resolvedValue, message) {
 };
-/* tslint:enable:max-line-length */
 function resolveArgumentsValue(options, transformer, meta, diagnostics, node, variableOverride, path, cssVarsMapping) {
@@ -44,4 +43,6 @@ var resolvedArgs = {};
 exports.resolveArgumentsValue = resolveArgumentsValue;
-function evalDeclarationValue(resolver, value, meta, node, variableOverride, valueHook, diagnostics, passedThrough, cssVarsMapping) {
+function processDeclarationValue(resolver, value, meta, node, variableOverride, valueHook, diagnostics, passedThrough, cssVarsMapping, args) {
     if (passedThrough === void 0) { passedThrough = []; }
+    if (args === void 0) { args = []; }
+    var customValues = custom_values_1.resolveCustomValues(meta, resolver);
     var parsedValue = valueParser(value);
@@ -53,25 +54,23 @@ parsedValue.walk(function (parsedNode) {
                 if (value === 'value') {
-                    var args = parsedNode.nodes.map(function (n) { return valueParser.stringify(n); });
-                    if (args.length === 1) {
-                        var varName = args[0];
-                        if (variableOverride && variableOverride[varName]) {
-                            return (parsedNode.resolvedValue = variableOverride[varName]);
+                    var parsedArgs = stylable_value_parsers_1.strategies.args(parsedNode).map(function (x) { return x.value; });
+                    if (parsedArgs.length >= 1) {
+                        var varName_1 = parsedArgs[0];
+                        var getArgs = parsedArgs
+                            .slice(1)
+                            .map(function (arg) {
+                            return evalDeclarationValue(resolver, arg, meta, node, variableOverride, valueHook, diagnostics, passedThrough.concat(createUniqID(meta.source, varName_1)), cssVarsMapping);
+                        });
+                        if (variableOverride && variableOverride[varName_1]) {
+                            return (parsedNode.resolvedValue = variableOverride[varName_1]);
                         }
-                        var refUniqID = createUniqID(meta.source, varName);
+                        var refUniqID = createUniqID(meta.source, varName_1);
                         if (passedThrough.indexOf(refUniqID) !== -1) {
                             // TODO: move diagnostic to original value usage instead of the end of the cyclic chain
-                            var cyclicChain = passedThrough.map(function (variable) { return variable || ''; });
-                            cyclicChain.push(refUniqID);
-                            if (diagnostics) {
-                                diagnostics.warn(node, exports.functionWarnings.CYCLIC_VALUE(cyclicChain), {
-                                    word: refUniqID
-                                });
-                            }
-                            return stringifyFunction(value, parsedNode);
+                            return handleCyclicValues(passedThrough, refUniqID, diagnostics, node, value, parsedNode);
                         }
-                        var varSymbol = meta.mappedSymbols[varName];
+                        var varSymbol = meta.mappedSymbols[varName_1];
                         if (varSymbol && varSymbol._kind === 'var') {
-                            var resolvedValue = evalDeclarationValue(resolver, utils_1.stripQuotation(varSymbol.text), meta, varSymbol.node, variableOverride, valueHook, diagnostics, passedThrough.concat(createUniqID(meta.source, varName)), cssVarsMapping);
+                            var resolvedValue = evalDeclarationValue(resolver, utils_1.stripQuotation(varSymbol.text), meta, varSymbol.node, variableOverride, valueHook, diagnostics, passedThrough.concat(createUniqID(meta.source, varName_1)), cssVarsMapping, getArgs);
                             parsedNode.resolvedValue = valueHook
-                                ? valueHook(resolvedValue, varName, true, passedThrough)
+                                ? valueHook(resolvedValue, varName_1, true, passedThrough)
                                 : resolvedValue;
@@ -85,5 +84,5 @@ }
                                     if (resolvedVarSymbol._kind === 'var') {
-                                        var resolvedValue = evalDeclarationValue(resolver, utils_1.stripQuotation(resolvedVarSymbol.text), resolvedVar.meta, resolvedVarSymbol.node, variableOverride, valueHook, diagnostics, passedThrough.concat(createUniqID(meta.source, varName)), cssVarsMapping);
+                                        var resolvedValue = evalDeclarationValue(resolver, utils_1.stripQuotation(resolvedVarSymbol.text), resolvedVar.meta, resolvedVarSymbol.node, variableOverride, valueHook, diagnostics, passedThrough.concat(createUniqID(meta.source, varName_1)), cssVarsMapping, getArgs);
                                         parsedNode.resolvedValue = valueHook
-                                            ? valueHook(resolvedValue, varName, false, passedThrough)
+                                            ? valueHook(resolvedValue, varName_1, false, passedThrough)
                                             : resolvedValue;
@@ -97,3 +96,3 @@ }
                                         if (diagnostics) {
-                                            diagnostics.warn(node, exports.functionWarnings.CANNOT_USE_AS_VALUE(errorKind, varName), { word: varName });
+                                            diagnostics.warn(node, exports.functionWarnings.CANNOT_USE_AS_VALUE(errorKind, varName_1), { word: varName_1 });
                                         }
@@ -104,4 +103,4 @@ }
                                     // ToDo: provide actual exported id (default/named as x)
-                                    diagnostics.warn(node, exports.functionWarnings.CANNOT_USE_JS_AS_VALUE(varName), {
-                                        word: varName
+                                    diagnostics.warn(node, exports.functionWarnings.CANNOT_USE_JS_AS_VALUE(varName_1), {
+                                        word: varName_1
                                     });
@@ -111,3 +110,2 @@ }
                             else {
-                                // TODO: move this to a seperate mechanism to check imports unrelated to usage
                                 var namedDecl = varSymbol.import.rule.nodes.find(function (node) {
@@ -118,3 +116,3 @@ return node.type === 'decl' && node.prop === stylable_value_parsers_1.valueMapping.named;
                                     // ToDo: provide actual exported id (default/named as x)
-                                    diagnostics.error(node, exports.functionWarnings.CANNOT_FIND_IMPORTED_VAR(varName), { word: varName });
+                                    diagnostics.error(node, exports.functionWarnings.CANNOT_FIND_IMPORTED_VAR(varName_1), { word: varName_1 });
                                 }
@@ -124,18 +122,8 @@ }
                         else if (diagnostics) {
-                            diagnostics.warn(node, exports.functionWarnings.UNKNOWN_VAR(varName), {
-                                word: varName
+                            diagnostics.warn(node, exports.functionWarnings.UNKNOWN_VAR(varName_1), {
+                                word: varName_1
                             });
                         }
                     }
-                    else if (diagnostics) {
-                        var argsAsString = args.filter(function (arg) { return arg !== ', '; }).join(', ');
-                        diagnostics.warn(node, exports.functionWarnings.MULTI_ARGS_IN_VALUE(argsAsString), {
-                            word: argsAsString
-                        });
-                    }
                 }
-                else if (value === 'url') {
-                    // postcss-value-parser treats url differently:
-                    // https://github.com/TrySound/postcss-value-parser/issues/34
-                }
                 else if (value === '') {
@@ -145,41 +133,48 @@ parsedNode.resolvedValue = stringifyFunction(value, parsedNode);
                 else {
-                    var formatterRef = meta.mappedSymbols[value];
-                    var formatter = resolver.deepResolve(formatterRef);
-                    var args = getFormatterArgs(parsedNode);
-                    if (formatter && formatter._kind === 'js') {
-                        // TODO: Add try/catch, pipe error
-                        try {
-                            parsedNode.resolvedValue = formatter.symbol.apply(null, args);
-                            if (valueHook) {
-                                parsedNode.resolvedValue = valueHook(parsedNode.resolvedValue, { name: parsedNode.value, args: args }, true, passedThrough);
+                    if (customValues[value]) {
+                        // no op resolved at the bottom
+                    }
+                    else if (value === 'url') {
+                        // postcss-value-parser treats url differently:
+                        // https://github.com/TrySound/postcss-value-parser/issues/34
+                    }
+                    else {
+                        var formatterRef = meta.mappedSymbols[value];
+                        var formatter = resolver.deepResolve(formatterRef);
+                        var formatterArgs = stylable_value_parsers_1.getFormatterArgs(parsedNode);
+                        if (formatter && formatter._kind === 'js') {
+                            try {
+                                parsedNode.resolvedValue = formatter.symbol.apply(null, formatterArgs);
+                                if (valueHook && typeof parsedNode.resolvedValue === 'string') {
+                                    parsedNode.resolvedValue = valueHook(parsedNode.resolvedValue, { name: parsedNode.value, args: formatterArgs }, true, passedThrough);
+                                }
                             }
-                        }
-                        catch (error) {
-                            // todo: issue diagnostic
-                            parsedNode.resolvedValue = stringifyFunction(value, parsedNode);
-                            if (diagnostics) {
-                                diagnostics.warn(node, exports.functionWarnings.FAIL_TO_EXECUTE_FORMATTER(parsedNode.resolvedValue, error.message), { word: node.value });
+                            catch (error) {
+                                parsedNode.resolvedValue = stringifyFunction(value, parsedNode);
+                                if (diagnostics) {
+                                    diagnostics.warn(node, exports.functionWarnings.FAIL_TO_EXECUTE_FORMATTER(parsedNode.resolvedValue, error.message), { word: node.value });
+                                }
                             }
                         }
-                    }
-                    else if (value === 'var') {
-                        var varWithPrefix = parsedNode.nodes[0].value;
-                        if (stylable_utils_1.isCSSVarProp(varWithPrefix)) {
-                            if (cssVarsMapping && cssVarsMapping[varWithPrefix]) {
-                                parsedNode.nodes[0].value = cssVarsMapping[varWithPrefix];
+                        else if (value === 'var') {
+                            var varWithPrefix = parsedNode.nodes[0].value;
+                            if (stylable_utils_1.isCSSVarProp(varWithPrefix)) {
+                                if (cssVarsMapping && cssVarsMapping[varWithPrefix]) {
+                                    parsedNode.nodes[0].value = cssVarsMapping[varWithPrefix];
+                                }
                             }
+                            // handle default values
+                            if (parsedNode.nodes.length > 2) {
+                                parsedNode.resolvedValue = stringifyFunction(value, parsedNode);
+                            }
                         }
-                        // handle default values
-                        if (parsedNode.nodes.length > 2) {
+                        else if (native_reserved_lists_1.isCssNativeFunction(value)) {
                             parsedNode.resolvedValue = stringifyFunction(value, parsedNode);
                         }
+                        else if (diagnostics) {
+                            diagnostics.warn(node, exports.functionWarnings.UNKNOWN_FORMATTER(value), {
+                                word: value
+                            });
+                        }
                     }
-                    else if (native_reserved_lists_1.isCssNativeFunction(value)) {
-                        parsedNode.resolvedValue = stringifyFunction(value, parsedNode);
-                    }
-                    else if (diagnostics) {
-                        diagnostics.warn(node, exports.functionWarnings.UNKNOWN_FORMATTER(value), {
-                            word: value
-                        });
-                    }
                 }
@@ -192,37 +187,52 @@ break;
     }, true);
+    var outputValue = '';
+    var topLevelType = null;
+    for (var _i = 0, _a = parsedValue.nodes; _i < _a.length; _i++) {
+        var n = _a[_i];
+        if (n.type === 'function') {
+            var matchingType = customValues[n.value];
+            if (matchingType) {
+                topLevelType = matchingType.evalVarAst(n, customValues);
+                outputValue += matchingType.getValue(args, topLevelType, n, customValues);
+            }
+            else {
+                outputValue += stylable_value_parsers_1.getStringValue([n]);
+                var parsedArgs = stylable_value_parsers_1.getFormatterArgs(n);
+                if (diagnostics && parsedArgs.length > 1 && n.value === 'value') {
+                    var argsAsString = parsedArgs.join(', ');
+                    diagnostics.warn(node, exports.functionWarnings.MULTI_ARGS_IN_VALUE(argsAsString), {
+                        word: argsAsString
+                    });
+                }
+            }
+        }
+        else {
+            outputValue += stylable_value_parsers_1.getStringValue([n]);
+        }
+    }
+    return { outputValue: outputValue, topLevelType: topLevelType };
+    // }
     // TODO: handle calc (parse internals but maintain expression)
     // TODO: check this thing. native function that accent our function dose not work
     // e.g: calc(getVarName())
-    return valueParser.stringify(parsedValue.nodes, function (node) {
-        if (node.resolvedValue !== undefined) {
-            return node.resolvedValue;
-        }
-        else {
-            // TODO: warn
-            return undefined;
-        }
-    });
 }
+exports.processDeclarationValue = processDeclarationValue;
+function evalDeclarationValue(resolver, value, meta, node, variableOverride, valueHook, diagnostics, passedThrough, cssVarsMapping, args) {
+    if (passedThrough === void 0) { passedThrough = []; }
+    if (args === void 0) { args = []; }
+    return processDeclarationValue(resolver, value, meta, node, variableOverride, valueHook, diagnostics, passedThrough, cssVarsMapping, args).outputValue;
+}
 exports.evalDeclarationValue = evalDeclarationValue;
-function getFormatterArgs(node) {
-    // TODO: revisit arguments split!!! e.g: , ro SPACE
-    var argsResult = [];
-    var currentArg = '';
-    for (var _i = 0, _a = node.nodes; _i < _a.length; _i++) {
-        var currentNode = _a[_i];
-        if (currentNode.type === 'div' && currentNode.value === ',') {
-            argsResult.push(currentArg.trim());
-            currentArg = '';
-        }
-        else if (currentNode.type !== 'comment') {
-            currentArg += currentNode.resolvedValue || valueParser.stringify(currentNode);
-        }
+function handleCyclicValues(passedThrough, refUniqID, diagnostics, node, value, parsedNode) {
+    var cyclicChain = passedThrough.map(function (variable) { return variable || ''; });
+    cyclicChain.push(refUniqID);
+    if (diagnostics) {
+        diagnostics.warn(node, exports.functionWarnings.CYCLIC_VALUE(cyclicChain), {
+            word: refUniqID
+        });
     }
-    if (currentArg) {
-        argsResult.push(currentArg.trim());
-    }
-    return argsResult;
+    return stringifyFunction(value, parsedNode);
 }
 function stringifyFunction(name, parsedNode) {
-    return name + "(" + getFormatterArgs(parsedNode).join(', ') + ")";
+    return name + "(" + stylable_value_parsers_1.getFormatterArgs(parsedNode).join(', ') + ")";
 }
@@ -229,0 +239,0 @@ function createUniqID(source, varName) {

cjs/index.d.ts

@@ -16,2 +16,3 @@ export { safeParse } from './parser';
 export * from './functions';
+export * from './custom-values';
 export * from './state-validators';
@@ -18,0 +19,0 @@ export * from './selector-utils';

cjs/index.js

@@ -38,2 +38,3 @@ "use strict";
 __export(require("./functions"));
+__export(require("./custom-values"));
 __export(require("./state-validators"));
@@ -40,0 +41,0 @@ __export(require("./selector-utils"));

cjs/pseudo-states.js

@@ -98,4 +98,4 @@ "use strict";
 function resolveArguments(paramType, stateType, name, diagnostics, decl) {
-    var seperetedByComma = stylable_value_parsers_1.groupValues(paramType.nodes);
-    seperetedByComma.forEach(function (group) {
+    var separatedByComma = stylable_value_parsers_1.groupValues(paramType.nodes);
+    separatedByComma.forEach(function (group) {
         var validator = group[0];
@@ -102,0 +102,0 @@ if (validator.type === 'function') {

cjs/stylable-meta.d.ts

@@ -22,6 +22,6 @@ import postcss from 'postcss';
     urls: string[];
-    outputAst?: postcss.Root;
     parent?: StylableMeta;
     transformDiagnostics: Diagnostics | null;
     scopes: postcss.AtRule[];
+    outputAst?: postcss.Root;
     globals: Record<string, boolean>;
@@ -28,0 +28,0 @@ constructor(ast: postcss.Root, diagnostics: Diagnostics);

cjs/stylable-processor.d.ts

@@ -34,2 +34,3 @@ import postcss from 'postcss';
     ILLEGAL_CSS_VAR_USE(name: string): string;
+    ILLEGAL_CSS_VAR_ARGS(name: string): string;
 };
@@ -36,0 +37,0 @@ export declare class StylableProcessor {

cjs/stylable-processor.js

@@ -33,3 +33,2 @@ "use strict";
 var parseExtends = stylable_value_parsers_1.SBTypesParsers[stylable_value_parsers_1.valueMapping.extends];
-/* tslint:disable:max-line-length */
 exports.processorWarnings = {
@@ -116,5 +115,7 @@ UNSCOPED_CLASS: function (name) {
         return "a custom css property must begin with \"--\" (double-dash), but received \"" + name + "\"";
+    },
+    ILLEGAL_CSS_VAR_ARGS: function (name) {
+        return "css variable \"" + name + "\" usage (var()) must receive comma separated values";
     }
 };
-/* tslint:enable:max-line-length */
 var StylableProcessor = /** @class */ (function () {
@@ -426,3 +427,9 @@ function StylableProcessor(diagnostics, resolveNamespace) {
             if (node.type === 'function' && node.value === 'var' && node.nodes) {
-                var varName = stylable_value_parsers_1.groupValues(node.nodes)[0];
+                var varName = node.nodes[0];
+                if (!stylable_value_parsers_1.validateAllowedNodesUntil(node, 1)) {
+                    var args = valueParser.stringify(node.nodes);
+                    _this.diagnostics.warn(decl, exports.processorWarnings.ILLEGAL_CSS_VAR_ARGS(args), {
+                        word: args
+                    });
+                }
                 _this.addCSSVar(valueParser.stringify(varName).trim(), decl);
@@ -429,0 +436,0 @@ }

cjs/stylable-resolver.d.ts

@@ -24,4 +24,4 @@ import { FileProcessor } from './cached-process-file';
     constructor(fileProcessor: FileProcessor<StylableMeta>, requireModule: (modulePath: string) => any);
-    resolveImported(imported: Imported, name: string): JSResolve | CSSResolve | null;
-    resolveImport(importSymbol: ImportSymbol): JSResolve | CSSResolve | null;
+    resolveImported(imported: Imported, name: string): CSSResolve | JSResolve | null;
+    resolveImport(importSymbol: ImportSymbol): CSSResolve | JSResolve | null;
     resolve(maybeImport: StylableSymbol | undefined): CSSResolve | JSResolve | null;
@@ -28,0 +28,0 @@ deepResolve(maybeImport: StylableSymbol | undefined, path?: StylableSymbol[]): CSSResolve | JSResolve | null;

cjs/stylable-transformer.js

@@ -7,2 +7,3 @@ "use strict";
 var lodash_clonedeep_1 = __importDefault(require("lodash.clonedeep"));
+var custom_values_1 = require("./custom-values");
 var functions_1 = require("./functions");
@@ -119,3 +120,4 @@ var native_reserved_lists_1 = require("./native-reserved-lists");
             var varSymbol = _a[_i];
-            stVarsExport[varSymbol.name] = functions_1.evalDeclarationValue(this.resolver, varSymbol.text, meta, varSymbol.node, variableOverride);
+            var _b = functions_1.processDeclarationValue(this.resolver, varSymbol.text, meta, varSymbol.node, variableOverride), outputValue = _b.outputValue, topLevelType = _b.topLevelType;
+            stVarsExport[varSymbol.name] = topLevelType ? custom_values_1.unbox(topLevelType) : outputValue;
         }
@@ -122,0 +124,0 @@ };

cjs/stylable-value-parsers.d.ts

 import postcss from 'postcss';
 import { Diagnostics } from './diagnostics';
-import { StateParsedValue } from './types';
+import { ParsedValue, StateParsedValue } from './types';
 export declare const valueParserWarnings: {
@@ -30,2 +30,5 @@ VALUE_CANNOT_BE_STRING(): string;
 }
+declare type ReportWarning = (message: string, options?: {
+    word: string;
+}) => void;
 export declare const rootValueMapping: {
@@ -70,4 +73,15 @@ vars: ":vars";
 };
+export declare function getNamedArgs(node: ParsedValue): ParsedValue[][];
+export declare function getFormatterArgs(node: ParsedValue, allowComments?: boolean, _reportWarning?: ReportWarning): string[];
+export declare function getStringValue(nodes: ParsedValue | ParsedValue[]): string;
 export declare function groupValues(nodes: any[], divType?: string): any[];
+export declare const strategies: {
+    named: (node: any, reportWarning?: ReportWarning | undefined) => Record<string, string>;
+    args: (node: any, reportWarning?: ReportWarning | undefined) => {
+        value: string;
+    }[];
+};
 export declare function listOptions(node: any): any[];
+export declare function validateAllowedNodesUntil(node: ParsedValue, i: number, untilType?: string, allowed?: string[]): boolean;
+export {};
 //# sourceMappingURL=stylable-value-parsers.d.ts.map

cjs/stylable-value-parsers.js

@@ -115,3 +115,3 @@ "use strict";
                     type: node.value,
-                    options: strategies[strat](node, reportWarning)
+                    options: exports.strategies[strat](node, reportWarning)
                 });
@@ -150,2 +150,59 @@ }
 }
+exports.getNamedArgs = getNamedArgs;
+function getFormatterArgs(node, allowComments, _reportWarning) {
+    if (allowComments === void 0) { allowComments = false; }
+    var argsResult = [];
+    var currentArg = '';
+    var argIndex = 0;
+    for (var _i = 0, _a = node.nodes; _i < _a.length; _i++) {
+        var currentNode = _a[_i];
+        if (currentNode.type === 'div' && currentNode.value === ',') {
+            checkEmptyArg();
+            argIndex++;
+            argsResult.push(currentArg.trim());
+            currentArg = '';
+        }
+        else if (currentNode.type === 'comment') {
+            if (allowComments) {
+                currentArg += currentNode.resolvedValue || valueParser.stringify(currentNode);
+            }
+        }
+        else if (currentNode.type === 'string') {
+            currentArg += currentNode.value;
+        }
+        else {
+            currentArg += currentNode.resolvedValue || valueParser.stringify(currentNode);
+        }
+    }
+    checkEmptyArg();
+    argsResult.push(currentArg.trim());
+    var i = argsResult.length;
+    while (i--) {
+        if (argsResult[i] === '') {
+            argsResult.pop();
+        }
+        else {
+            return argsResult;
+        }
+    }
+    return argsResult;
+    function checkEmptyArg() {
+        if (currentArg.trim() === '' && _reportWarning) {
+            _reportWarning(valueParser.stringify(node) + ": argument at index " + argIndex + " is empty");
+        }
+    }
+}
+exports.getFormatterArgs = getFormatterArgs;
+function getStringValue(nodes) {
+    return valueParser.stringify(nodes, function (node) {
+        if (node.resolvedValue !== undefined) {
+            return node.resolvedValue;
+        }
+        else {
+            // TODO: warn
+            return undefined;
+        }
+    });
+}
+exports.getStringValue = getStringValue;
 function groupValues(nodes, divType) {
@@ -171,3 +228,3 @@ if (divType === void 0) { divType = 'div'; }
 exports.groupValues = groupValues;
-var strategies = {
+exports.strategies = {
     named: function (node, reportWarning) {
@@ -190,19 +247,4 @@ var named = {};
     },
-    args: function (node, _reportWarning) {
-        return groupValues(node.nodes, 'div')
-            .map(function (nodes) {
-            return valueParser.stringify(nodes, function (n) {
-                if (n.type === 'div') {
-                    return null;
-                }
-                else if (n.type === 'string') {
-                    return n.value;
-                }
-                else {
-                    return undefined;
-                }
-            });
-        })
-            .filter(function (x) { return typeof x === 'string'; })
-            .map(function (value) { return ({ value: value }); });
+    args: function (node, reportWarning) {
+        return getFormatterArgs(node, true, reportWarning).map(function (value) { return ({ value: value }); });
     }
@@ -241,2 +283,17 @@ };
 exports.listOptions = listOptions;
+function validateAllowedNodesUntil(node, i, untilType, allowed) {
+    if (untilType === void 0) { untilType = 'div'; }
+    if (allowed === void 0) { allowed = ['comment']; }
+    i = 1;
+    var current = node.nodes[i];
+    while (current && current.type !== untilType) {
+        if (allowed.indexOf(current.type) === -1) {
+            return false;
+        }
+        i++;
+        current = node.nodes[i];
+    }
+    return true;
+}
+exports.validateAllowedNodesUntil = validateAllowedNodesUntil;
 //# sourceMappingURL=stylable-value-parsers.js.map

cjs/types.d.ts

 import postcss from 'postcss';
+import { Box } from './custom-values';
 import { StylableMeta } from './stylable-meta';
@@ -10,3 +11,3 @@ import { StylableResults } from './stylable-transformer';
     nodes?: any;
-    resolvedValue?: string;
+    resolvedValue?: string | Box<string, unknown>;
     url?: string;
@@ -13,0 +14,0 @@ }

package.json

 {
   "name": "@stylable/core",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "CSS for Components",
@@ -10,3 +10,3 @@ "main": "./cjs/index.js",
     "build": "ts-build ./src --cjs",
-    "test": "mocha -r @ts-tools/node/r \"./tests/**/*.spec.ts\" --watch-extensions ts",
+    "test": "mocha -r @ts-tools/node/r \"./test/**/*.spec.ts\" --watch-extensions ts",
     "start": "webpack-dev-server --hot --inline",
@@ -22,2 +22,3 @@ "prepack": "yarn build"
     "lodash.clonedeep": "^4.5.0",
+    "lodash.clonedeepwith": "^4.5.0",
     "murmurhash": "^0.0.2",
@@ -49,3 +50,3 @@ "postcss": "^7.0.16",
   "license": "BSD-3-Clause",
-  "gitHead": "73c0150fd5ea27ad86426821b0c30a16f78ae162"
+  "gitHead": "410703370ef3662f36ced7d725e277d3adb4b523"
 }

src/functions.ts

 import postcss from 'postcss';
+import { resolveCustomValues, stTypes } from './custom-values';
 import { Diagnostics } from './diagnostics';
@@ -8,5 +9,11 @@ import { isCssNativeFunction } from './native-reserved-lists';
 import { isCSSVarProp } from './stylable-utils';
-import { valueMapping } from './stylable-value-parsers';
+import {
+    getFormatterArgs,
+    getStringValue,
+    strategies,
+    valueMapping
+} from './stylable-value-parsers';
 import { ParsedValue } from './types';
 import { stripQuotation } from './utils';
+
 const valueParser = require('postcss-value-parser');
@@ -17,3 +24,2 @@
 
-/* tslint:disable:max-line-length */
 export const functionWarnings = {
@@ -37,3 +43,2 @@ FAIL_TO_EXECUTE_FORMATTER: (resolvedValue: string, message: string) =>
 };
-/* tslint:enable:max-line-length */
 
@@ -67,3 +72,3 @@ export function resolveArgumentsValue(
 
-export function evalDeclarationValue(
+export function processDeclarationValue(
     resolver: StylableResolver,
@@ -77,4 +82,6 @@ value: string,
     passedThrough: string[] = [],
-    cssVarsMapping?: Record<string, string>
-): string {
+    cssVarsMapping?: Record<string, string>,
+    args: string[] = []
+): { topLevelType: any; outputValue: string } {
+    const customValues = resolveCustomValues(meta, resolver);
     const parsedValue = valueParser(value);
@@ -86,5 +93,20 @@ parsedValue.walk((parsedNode: ParsedValue) => {
                 if (value === 'value') {
-                    const args = parsedNode.nodes.map((n: ParsedValue) => valueParser.stringify(n));
-                    if (args.length === 1) {
-                        const varName = args[0];
+                    const parsedArgs = strategies.args(parsedNode).map(x => x.value);
+                    if (parsedArgs.length >= 1) {
+                        const varName = parsedArgs[0];
+                        const getArgs = parsedArgs
+                            .slice(1)
+                            .map(arg =>
+                                evalDeclarationValue(
+                                    resolver,
+                                    arg,
+                                    meta,
+                                    node,
+                                    variableOverride,
+                                    valueHook,
+                                    diagnostics,
+                                    passedThrough.concat(createUniqID(meta.source, varName)),
+                                    cssVarsMapping
+                                )
+                            );
                         if (variableOverride && variableOverride[varName]) {
@@ -96,13 +118,12 @@ return (parsedNode.resolvedValue = variableOverride[varName]);
                             // TODO: move diagnostic to original value usage instead of the end of the cyclic chain
-                            const cyclicChain = passedThrough.map(variable => variable || '');
-                            cyclicChain.push(refUniqID);
-                            if (diagnostics) {
-                                diagnostics.warn(node, functionWarnings.CYCLIC_VALUE(cyclicChain), {
-                                    word: refUniqID
-                                });
-                            }
-                            return stringifyFunction(value, parsedNode);
+                            return handleCyclicValues(
+                                passedThrough,
+                                refUniqID,
+                                diagnostics,
+                                node,
+                                value,
+                                parsedNode
+                            );
                         }
                         const varSymbol = meta.mappedSymbols[varName];
-
                         if (varSymbol && varSymbol._kind === 'var') {
@@ -118,5 +139,5 @@ const resolvedValue = evalDeclarationValue(
                                 passedThrough.concat(createUniqID(meta.source, varName)),
-                                cssVarsMapping
+                                cssVarsMapping,
+                                getArgs
                             );
-
                             parsedNode.resolvedValue = valueHook
@@ -129,3 +150,2 @@ ? valueHook(resolvedValue, varName, true, passedThrough)
                                 const resolvedVarSymbol = resolvedVar.symbol;
-
                                 if (resolvedVar._kind === 'css') {
@@ -144,3 +164,4 @@ if (resolvedVarSymbol._kind === 'var') {
                                             ),
-                                            cssVarsMapping
+                                            cssVarsMapping,
+                                            getArgs
                                         );
@@ -161,3 +182,2 @@ parsedNode.resolvedValue = valueHook
                                                 : resolvedVarSymbol._kind;
-
                                         if (diagnostics) {
@@ -185,3 +205,2 @@ diagnostics.warn(
                             } else {
-                                // TODO: move this to a seperate mechanism to check imports unrelated to usage
                                 const namedDecl = varSymbol.import.rule.nodes!.find(node => {
@@ -204,63 +223,60 @@ return node.type === 'decl' && node.prop === valueMapping.named;
                         }
-                    } else if (diagnostics) {
-                        const argsAsString = args.filter((arg: string) => arg !== ', ').join(', ');
-                        diagnostics.warn(node, functionWarnings.MULTI_ARGS_IN_VALUE(argsAsString), {
-                            word: argsAsString
-                        });
                     }
-                } else if (value === 'url') {
-                    // postcss-value-parser treats url differently:
-                    // https://github.com/TrySound/postcss-value-parser/issues/34
                 } else if (value === '') {
                     parsedNode.resolvedValue = stringifyFunction(value, parsedNode);
                 } else {
-                    const formatterRef = meta.mappedSymbols[value];
-                    const formatter = resolver.deepResolve(formatterRef);
-                    const args = getFormatterArgs(parsedNode);
-
-                    if (formatter && formatter._kind === 'js') {
-                        // TODO: Add try/catch, pipe error
-                        try {
-                            parsedNode.resolvedValue = formatter.symbol.apply(null, args);
-                            if (valueHook) {
-                                parsedNode.resolvedValue = valueHook(
-                                    parsedNode.resolvedValue!,
-                                    { name: parsedNode.value, args },
-                                    true,
-                                    passedThrough
+                    if (customValues[value as keyof typeof stTypes]) {
+                        // no op resolved at the bottom
+                    } else if (value === 'url') {
+                        // postcss-value-parser treats url differently:
+                        // https://github.com/TrySound/postcss-value-parser/issues/34
+                    } else {
+                        const formatterRef = meta.mappedSymbols[value];
+                        const formatter = resolver.deepResolve(formatterRef);
+                        const formatterArgs = getFormatterArgs(parsedNode);
+                        if (formatter && formatter._kind === 'js') {
+                            try {
+                                parsedNode.resolvedValue = formatter.symbol.apply(
+                                    null,
+                                    formatterArgs
                                 );
-                            }
-                        } catch (error) {
-                            // todo: issue diagnostic
-                            parsedNode.resolvedValue = stringifyFunction(value, parsedNode);
-                            if (diagnostics) {
-                                diagnostics.warn(
-                                    node,
-                                    functionWarnings.FAIL_TO_EXECUTE_FORMATTER(
+                                if (valueHook && typeof parsedNode.resolvedValue === 'string') {
+                                    parsedNode.resolvedValue = valueHook(
                                         parsedNode.resolvedValue,
-                                        error.message
-                                    ),
-                                    { word: (node as postcss.Declaration).value }
-                                );
+                                        { name: parsedNode.value, args: formatterArgs },
+                                        true,
+                                        passedThrough
+                                    );
+                                }
+                            } catch (error) {
+                                parsedNode.resolvedValue = stringifyFunction(value, parsedNode);
+                                if (diagnostics) {
+                                    diagnostics.warn(
+                                        node,
+                                        functionWarnings.FAIL_TO_EXECUTE_FORMATTER(
+                                            parsedNode.resolvedValue,
+                                            error.message
+                                        ),
+                                        { word: (node as postcss.Declaration).value }
+                                    );
+                                }
                             }
-                        }
-                    } else if (value === 'var') {
-                        const varWithPrefix = parsedNode.nodes[0].value;
-
-                        if (isCSSVarProp(varWithPrefix)) {
-                            if (cssVarsMapping && cssVarsMapping[varWithPrefix]) {
-                                parsedNode.nodes[0].value = cssVarsMapping[varWithPrefix];
+                        } else if (value === 'var') {
+                            const varWithPrefix = parsedNode.nodes[0].value;
+                            if (isCSSVarProp(varWithPrefix)) {
+                                if (cssVarsMapping && cssVarsMapping[varWithPrefix]) {
+                                    parsedNode.nodes[0].value = cssVarsMapping[varWithPrefix];
+                                }
                             }
-                        }
-
-                        // handle default values
-                        if (parsedNode.nodes.length > 2) {
+                            // handle default values
+                            if (parsedNode.nodes.length > 2) {
+                                parsedNode.resolvedValue = stringifyFunction(value, parsedNode);
+                            }
+                        } else if (isCssNativeFunction(value)) {
                             parsedNode.resolvedValue = stringifyFunction(value, parsedNode);
+                        } else if (diagnostics) {
+                            diagnostics.warn(node, functionWarnings.UNKNOWN_FORMATTER(value), {
+                                word: value
+                            });
                         }
-                    } else if (isCssNativeFunction(value)) {
-                        parsedNode.resolvedValue = stringifyFunction(value, parsedNode);
-                    } else if (diagnostics) {
-                        diagnostics.warn(node, functionWarnings.UNKNOWN_FORMATTER(value), {
-                            word: value
-                        });
                     }
@@ -275,32 +291,75 @@ }
 
+    let outputValue = '';
+    let topLevelType = null;
+    for (const n of parsedValue.nodes) {
+        if (n.type === 'function') {
+            const matchingType = customValues[n.value as keyof typeof stTypes];
+
+            if (matchingType) {
+                topLevelType = matchingType.evalVarAst(n, customValues);
+                outputValue += matchingType.getValue(args, topLevelType, n, customValues);
+            } else {
+                outputValue += getStringValue([n]);
+
+                const parsedArgs = getFormatterArgs(n);
+                if (diagnostics && parsedArgs.length > 1 && n.value === 'value') {
+                    const argsAsString = parsedArgs.join(', ');
+                    diagnostics.warn(node, functionWarnings.MULTI_ARGS_IN_VALUE(argsAsString), {
+                        word: argsAsString
+                    });
+                }
+            }
+        } else {
+            outputValue += getStringValue([n]);
+        }
+    }
+    return { outputValue, topLevelType };
+    // }
     // TODO: handle calc (parse internals but maintain expression)
     // TODO: check this thing. native function that accent our function dose not work
     // e.g: calc(getVarName())
-    return valueParser.stringify(parsedValue.nodes, (node: ParsedValue) => {
-        if (node.resolvedValue !== undefined) {
-            return node.resolvedValue;
-        } else {
-            // TODO: warn
-            return undefined;
-        }
-    });
 }
 
-function getFormatterArgs(node: ParsedValue) {
-    // TODO: revisit arguments split!!! e.g: , ro SPACE
-    const argsResult = [];
-    let currentArg = '';
-    for (const currentNode of node.nodes) {
-        if (currentNode.type === 'div' && currentNode.value === ',') {
-            argsResult.push(currentArg.trim());
-            currentArg = '';
-        } else if (currentNode.type !== 'comment') {
-            currentArg += currentNode.resolvedValue || valueParser.stringify(currentNode);
-        }
-    }
+export function evalDeclarationValue(
+    resolver: StylableResolver,
+    value: string,
+    meta: StylableMeta,
+    node: postcss.Node,
+    variableOverride?: Record<string, string> | null,
+    valueHook?: replaceValueHook,
+    diagnostics?: Diagnostics,
+    passedThrough: string[] = [],
+    cssVarsMapping?: Record<string, string>,
+    args: string[] = []
+): string {
+    return processDeclarationValue(
+        resolver,
+        value,
+        meta,
+        node,
+        variableOverride,
+        valueHook,
+        diagnostics,
+        passedThrough,
+        cssVarsMapping,
+        args
+    ).outputValue;
+}
 
-    if (currentArg) {
-        argsResult.push(currentArg.trim());
+function handleCyclicValues(
+    passedThrough: string[],
+    refUniqID: string,
+    diagnostics: Diagnostics | undefined,
+    node: postcss.Node,
+    value: string,
+    parsedNode: ParsedValue
+) {
+    const cyclicChain = passedThrough.map(variable => variable || '');
+    cyclicChain.push(refUniqID);
+    if (diagnostics) {
+        diagnostics.warn(node, functionWarnings.CYCLIC_VALUE(cyclicChain), {
+            word: refUniqID
+        });
     }
-    return argsResult;
+    return stringifyFunction(value, parsedNode);
 }
@@ -307,0 +366,0 @@

src/index.ts

@@ -26,2 +26,3 @@ export { safeParse } from './parser';
 export * from './functions';
+export * from './custom-values';
 export * from './state-validators';
@@ -28,0 +29,0 @@ export * from './selector-utils';

src/pseudo-states.ts

@@ -138,5 +138,5 @@ import postcss from 'postcss';
 ) {
-    const seperetedByComma = groupValues(paramType.nodes);
+    const separatedByComma = groupValues(paramType.nodes);
 
-    seperetedByComma.forEach(group => {
+    separatedByComma.forEach(group => {
         const validator = group[0];
@@ -143,0 +143,0 @@ if (validator.type === 'function') {

src/stylable-meta.ts

@@ -22,6 +22,7 @@ import postcss from 'postcss';
     public urls: string[];
-    public outputAst?: postcss.Root;
     public parent?: StylableMeta;
     public transformDiagnostics: Diagnostics | null;
     public scopes: postcss.AtRule[];
+    // Generated during transform
+    public outputAst?: postcss.Root;
     public globals: Record<string, boolean> = {};
@@ -28,0 +29,0 @@ constructor(public ast: postcss.Root, public diagnostics: Diagnostics) {

src/stylable-processor.ts

@@ -33,6 +33,6 @@ import hash from 'murmurhash';
 import {
-    groupValues,
     rootValueMapping,
     SBTypesParsers,
     stValuesMap,
+    validateAllowedNodesUntil,
     valueMapping
@@ -51,3 +51,2 @@ } from './stylable-value-parsers';
 
-/* tslint:disable:max-line-length */
 export const processorWarnings = {
@@ -134,5 +133,7 @@ UNSCOPED_CLASS(name: string) {
         return `a custom css property must begin with "--" (double-dash), but received "${name}"`;
+    },
+    ILLEGAL_CSS_VAR_ARGS(name: string) {
+        return `css variable "${name}" usage (var()) must receive comma separated values`;
     }
 };
-/* tslint:enable:max-line-length */
 
@@ -481,3 +482,10 @@ export class StylableProcessor {
             if (node.type === 'function' && node.value === 'var' && node.nodes) {
-                const varName = groupValues(node.nodes)[0];
+                const varName = node.nodes[0];
+                if (!validateAllowedNodesUntil(node, 1)) {
+                    const args = valueParser.stringify(node.nodes);
+                    this.diagnostics.warn(decl, processorWarnings.ILLEGAL_CSS_VAR_ARGS(args), {
+                        word: args
+                    });
+                }
+
                 this.addCSSVar(valueParser.stringify(varName).trim(), decl);
@@ -484,0 +492,0 @@ }

src/stylable-transformer.ts

 import cloneDeep from 'lodash.clonedeep';
 import postcss from 'postcss';
 import { FileProcessor } from './cached-process-file';
+import { unbox } from './custom-values';
 import { Diagnostics } from './diagnostics';
-import { evalDeclarationValue } from './functions';
+import { evalDeclarationValue, processDeclarationValue } from './functions';
 import { nativePseudoElements, reservedKeyFrames } from './native-reserved-lists';
@@ -243,3 +244,3 @@ import { basename } from './path';
         for (const varSymbol of meta.vars) {
-            stVarsExport[varSymbol.name] = evalDeclarationValue(
+            const { outputValue, topLevelType } = processDeclarationValue(
                 this.resolver,
@@ -251,2 +252,4 @@ varSymbol.text,
             );
+
+            stVarsExport[varSymbol.name] = topLevelType ? unbox(topLevelType) : outputValue;
         }
@@ -253,0 +256,0 @@ }

src/stylable-value-parsers.ts

@@ -5,3 +5,3 @@ import postcss from 'postcss';
 import { parseSelector } from './selector-utils';
-import { StateParsedValue } from './types';
+import { ParsedValue, StateParsedValue } from './types';
 
@@ -179,4 +179,4 @@ const valueParser = require('postcss-value-parser');
 
-function getNamedArgs(node: any) {
-    const args: ArgValue[][] = [];
+export function getNamedArgs(node: ParsedValue) {
+    const args: ParsedValue[][] = [];
     if (node.nodes.length) {
@@ -196,2 +196,59 @@ args.push([]);
 
+export function getFormatterArgs(
+    node: ParsedValue,
+    allowComments = false,
+    _reportWarning?: ReportWarning
+) {
+    const argsResult = [];
+    let currentArg = '';
+    let argIndex = 0;
+    for (const currentNode of node.nodes) {
+        if (currentNode.type === 'div' && currentNode.value === ',') {
+            checkEmptyArg();
+            argIndex++;
+            argsResult.push(currentArg.trim());
+            currentArg = '';
+        } else if (currentNode.type === 'comment') {
+            if (allowComments) {
+                currentArg += currentNode.resolvedValue || valueParser.stringify(currentNode);
+            }
+        } else if (currentNode.type === 'string') {
+            currentArg += currentNode.value;
+        } else {
+            currentArg += currentNode.resolvedValue || valueParser.stringify(currentNode);
+        }
+    }
+    checkEmptyArg();
+    argsResult.push(currentArg.trim());
+
+    let i = argsResult.length;
+    while (i--) {
+        if (argsResult[i] === '') {
+            argsResult.pop();
+        } else {
+            return argsResult;
+        }
+    }
+    return argsResult;
+
+    function checkEmptyArg() {
+        if (currentArg.trim() === '' && _reportWarning) {
+            _reportWarning(
+                `${valueParser.stringify(node)}: argument at index ${argIndex} is empty`
+            );
+        }
+    }
+}
+
+export function getStringValue(nodes: ParsedValue | ParsedValue[]): string {
+    return valueParser.stringify(nodes, (node: ParsedValue) => {
+        if (node.resolvedValue !== undefined) {
+            return node.resolvedValue;
+        } else {
+            // TODO: warn
+            return undefined;
+        }
+    });
+}
+
 export function groupValues(nodes: any[], divType = 'div') {
@@ -218,3 +275,3 @@ const grouped: any[] = [];
 
-const strategies = {
+export const strategies = {
     named: (node: any, reportWarning?: ReportWarning) => {
@@ -237,17 +294,4 @@ const named: Record<string, string> = {};
     },
-    args: (node: any, _reportWarning?: ReportWarning) => {
-        return groupValues(node.nodes, 'div')
-            .map((nodes: any) =>
-                valueParser.stringify(nodes, (n: any) => {
-                    if (n.type === 'div') {
-                        return null;
-                    } else if (n.type === 'string') {
-                        return n.value;
-                    } else {
-                        return undefined;
-                    }
-                })
-            )
-            .filter((x: string) => typeof x === 'string')
-            .map(value => ({ value }));
+    args: (node: any, reportWarning?: ReportWarning) => {
+        return getFormatterArgs(node, true, reportWarning).map(value => ({ value }));
     }
@@ -283,1 +327,20 @@ };
 }
+
+export function validateAllowedNodesUntil(
+    node: ParsedValue,
+    i: number,
+    untilType: string = 'div',
+    allowed = ['comment']
+) {
+    i = 1;
+    let current = node.nodes[i];
+    while (current && current.type !== untilType) {
+        if (allowed.indexOf(current.type) === -1) {
+            return false;
+        }
+        i++;
+        current = node.nodes[i];
+    }
+
+    return true;
+}

src/types.ts

 import postcss from 'postcss';
+import { Box } from './custom-values';
 import { StylableMeta } from './stylable-meta';
@@ -12,3 +13,3 @@ import { StylableResults } from './stylable-transformer';
     nodes?: any;
-    resolvedValue?: string;
+    resolvedValue?: string | Box<string, unknown>;
     url?: string;
@@ -15,0 +16,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

591013

increased by6.62%

Number of package files

123

increased by4.24%

Lines of code

10206

increased by6.84%

Worsened metrics

Dependency count

15

increased by7.14%

Dependency changes

• + Addedlodash.clonedeepwith@^4.5.0

• + Addedlodash.clonedeepwith@4.5.0(transitive)