less 4.7.0 → 4.8.1

package/lib/less/deprecation.js

@@ -22,6 +22,18 @@ const deprecations = {
     'variable-in-at-rule-prelude': {
         description: 'A bare @variable in an at-rule prelude (e.g. @media @foo) is deprecated. Use @{variable} interpolation instead.'
     },
+    'numeric-variable-name': {
+        description: 'Variable names beginning with a number are deprecated and will be removed in Less 5.x.'
+    },
+    'dash-only-variable-name': {
+        description: 'The dash-only variable names @- and @{-} are deprecated and will be removed in Less 5.x.'
+    },
+    'dash-only-mixin-name': {
+        description: 'The dash-only mixin names .-() and #-() are deprecated and will be removed in Less 5.x.'
+    },
+    'dynamic-charset': {
+        description: 'Dynamic @charset interpolation is deprecated and will be removed in Less 5.x.'
+    },
     'property-in-unknown-value': {
         description: '$property in custom property values is treated as literal text.'
     },

package/lib/less/functions/math-helper.js

@@ -1,7 +1,14 @@
 import Dimension from '../tree/dimension.js';
 
-const MathHelper = (fn, unit, n) => {
+const MathHelper = (fn, unit, cssEvaluable, n) => {
     if (!(n instanceof Dimension)) {
+        // A runtime CSS value such as var()/env() stays an unevaluated call and
+        // cannot be resolved to a number at compile time. Only functions with a
+        // CSS equivalent may be left for the browser; the rest (percentage, ceil,
+        // floor, round) have no CSS form and keep erroring on such input.
+        if (cssEvaluable && n && n.type === 'Call') {
+            return undefined;
+        }
         throw { type: 'Argument', message: 'argument must be a number' };
     }
     if (unit === null) {

package/lib/less/functions/math.js

@@ -1,29 +1,30 @@
 import mathHelper from './math-helper.js';
 
 const mathFunctions = {
-    // name,  unit
-    ceil:  null,
-    floor: null,
-    sqrt:  null,
-    abs:   null,
-    tan:   '',
-    sin:   '',
-    cos:   '',
-    atan:  'rad',
-    asin:  'rad',
-    acos:  'rad'
+    // name:  [unit, has a CSS equivalent that the browser can evaluate]
+    ceil:  [null, false],
+    floor: [null, false],
+    sqrt:  [null, true],
+    abs:   [null, true],
+    tan:   ['', true],
+    sin:   ['', true],
+    cos:   ['', true],
+    atan:  ['rad', true],
+    asin:  ['rad', true],
+    acos:  ['rad', true]
 };
 
 for (const f in mathFunctions) {
     // eslint-disable-next-line no-prototype-builtins
     if (mathFunctions.hasOwnProperty(f)) {
-        mathFunctions[f] = mathHelper.bind(null, Math[f], mathFunctions[f]);
+        const [unit, cssEvaluable] = mathFunctions[f];
+        mathFunctions[f] = mathHelper.bind(null, Math[f], unit, cssEvaluable);
     }
 }
 
 mathFunctions.round = (n, f) => {
     const fraction = typeof f === 'undefined' ? 0 : f.value;
-    return mathHelper(num => num.toFixed(fraction), null, n);
+    return mathHelper(num => num.toFixed(fraction), null, false, n);
 };
 
 export default mathFunctions;

package/lib/less/functions/number.js

@@ -88,7 +88,7 @@ export default {
         return new Dimension(Math.pow(x.value, y.value), x.unit);
     },
     percentage: function (n) {
-        const result = mathHelper(num => num * 100, '%', n);
+        const result = mathHelper(num => num * 100, '%', false, n);
 
         return result;
     }

package/lib/less/parser/parser.js

@@ -106,6 +106,64 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
         warn('A bare @variable in an at-rule prelude is deprecated. Use @{variable} interpolation instead.', index, 'DEPRECATED', 'variable-in-at-rule-prelude');
     }
 
+    /**
+     * Numeric-leading variable names are a Less extension rather than valid CSS
+     * identifier syntax. Keep accepting them through Less 4, but make the Less 5
+     * migration visible at every actual variable reference or definition.
+     *
+     * @param {string} name - either an @-prefixed name or the name inside @{...}
+     * @param {number} index - source position of the variable token
+     */
+    function warnNumericVariableName(name, index) {
+        if (/^(?:@@?)?[0-9]/.test(name)) {
+            warn('Variable names beginning with a number are deprecated and will be removed in Less 5.x. Rename the variable to start with a valid identifier character.', index, 'DEPRECATED', 'numeric-variable-name');
+        }
+    }
+
+    /**
+     * A lone '-' is not a CSS identifier. Less historically accepts it as a
+     * variable name; retain that in Less 4 only and warn on definitions,
+     * ordinary references, and interpolation references.
+     *
+     * @param {string} name - either @-/@@-, or the name inside @{...}
+     * @param {number} index - source position of the variable token
+     */
+    function warnDashOnlyVariableName(name, index) {
+        const bareName = name.replace(/^@@?/, '');
+        if (bareName === '-') {
+            warn('The dash-only variable names @- and @{-} are deprecated and will be removed in Less 5.x. Rename the variable to use a valid identifier.', index, 'DEPRECATED', 'dash-only-variable-name');
+        }
+    }
+
+    /**
+     * A lone '-' is not a CSS identifier. Less historically accepts it as a mixin
+     * name after '.' or '#'; retain that in Less 4 only.
+     *
+     * @param {string} name
+     * @param {number} index
+     */
+    function warnDashOnlyMixinName(name, index) {
+        if (name === '.-' || name === '#-') {
+            warn('The dash-only mixin names .-() and #-() are deprecated and will be removed in Less 5.x. Rename the mixin to use a valid CSS identifier.', index, 'DEPRECATED', 'dash-only-mixin-name');
+        }
+    }
+
+    /**
+     * CSS @charset is a source-header declaration, not a general dynamic at-rule.
+     * Less 4 keeps its historical interpolation behavior for compatibility, but
+     * makes each dynamic spelling visible before Less 5 rejects it.
+     *
+     * @param {import('../tree/node.js').default} value
+     * @param {number} index - source position of the @charset token
+     */
+    function warnDynamicCharset(value, index) {
+        if (value instanceof tree.Variable ||
+            (value instanceof tree.Quoted &&
+                (value.containsVariables() || value.value.match(value.propRegex)))) {
+            warn('Dynamic @charset interpolation is deprecated and will be removed in Less 5.x. Use a static quoted encoding declaration instead.', index, 'DEPRECATED', 'dynamic-charset');
+        }
+    }
+
     function expect(arg, msg) {
         // some older browsers return typeof 'function' for RegExp
         const result = (arg instanceof Function) ? arg.call(parsers) : parserInput.$re(arg);
@@ -559,7 +617,7 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                     }
 
                     function condition() {
-                        return [expect(parsers.condition, 'expected condition')];
+                        return [expect(() => parsers.condition(false, true), 'expected condition')];
                     }
                 },
 
@@ -684,6 +742,8 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
 
                     parserInput.save();
                     if (parserInput.currentChar() === '@' && (name = parserInput.$re(/^@@?[\w-]+/))) {
+                        warnNumericVariableName(name, index);
+                        warnDashOnlyVariableName(name, index);
                         ch = parserInput.currentChar();
                         if ((ch === '(' && !parserInput.prevChar().match(/^\s/))
                             || (ch === '[' && !parserInput.prevChar().match(/^\s/))) {
@@ -706,6 +766,8 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                     const index = parserInput.i;
 
                     if (parserInput.currentChar() === '@' && (curly = parserInput.$re(/^@\{([\w-]+)\}/))) {
+                        warnNumericVariableName(curly[1], index);
+                        warnDashOnlyVariableName(curly[1], index);
                         return new(tree.Variable)(`@${curly[1]}`, index + currentIndex, fileInfo);
                     }
                 },
@@ -828,7 +890,11 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
             variable: function () {
                 let name;
 
-                if (parserInput.currentChar() === '@' && (name = parserInput.$re(/^(@[\w-]+)\s*:/))) { return name[1]; }
+                if (parserInput.currentChar() === '@' && (name = parserInput.$re(/^(@[\w-]+)\s*:/))) {
+                    warnNumericVariableName(name[1], parserInput.i - name[0].length);
+                    warnDashOnlyVariableName(name[1], parserInput.i - name[0].length);
+                    return name[1];
+                }
             },
 
             //
@@ -858,6 +924,8 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                     }
 
                     if (!inValue) {
+                        warnNumericVariableName(name[1], i);
+                        warnDashOnlyVariableName(name[1], i);
                         name = name[1];
                     }
 
@@ -1014,6 +1082,9 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                         if (inValue || parsers.end()) {
                             parserInput.forget();
                             const mixin = new(tree.mixin.Call)(elements, args, index + currentIndex, fileInfo, !lookups && important);
+                            for (const element of elements) {
+                                warnDashOnlyMixinName(element.value, element._index - currentIndex);
+                            }
                             if (lookups) {
                                 return new tree.NamespaceValue(mixin, lookups);
                             }
@@ -1210,6 +1281,7 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                     let ruleset;
                     let cond;
                     let variadic = false;
+                    const index = parserInput.i;
                     if ((parserInput.currentChar() !== '.' && parserInput.currentChar() !== '#') ||
                         parserInput.peek(/^[^{]*\}/)) {
                         return;
@@ -1245,6 +1317,7 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
 
                         if (ruleset) {
                             parserInput.forget();
+                            warnDashOnlyMixinName(name, index);
                             return new(tree.mixin.Definition)(name, params, ruleset, cond, variadic);
                         } else {
                             parserInput.restore();
@@ -2293,6 +2366,9 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                     if (!value) {
                         error(`expected ${name} identifier`);
                     }
+                    if (nonVendorSpecificName === '@charset') {
+                        warnDynamicCharset(value, index);
+                    }
                 } else if (hasExpression) {
                     // `@namespace` may carry an interpolated `@{ns}` prefix (or a
                     // deprecated bare `@ns`). Parse that prefix directly so `@{ns}`
@@ -2497,7 +2573,7 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                     return condition || a;
                 }
             },
-            condition: function (needsParens) {
+            condition: function (needsParens, allowConditionOperands) {
                 let result;
                 let logical;
                 let next;
@@ -2505,13 +2581,13 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                     return parserInput.$str('or');
                 }
 
-                result = this.conditionAnd(needsParens);
+                result = this.conditionAnd(needsParens, allowConditionOperands);
                 if (!result) {
                     return ;
                 }
                 logical = or();
                 if (logical) {
-                    next = this.condition(needsParens);
+                    next = this.condition(needsParens, allowConditionOperands);
                     if (next) {
                         result = new(tree.Condition)(logical, result, next);
                     } else {
@@ -2520,13 +2596,13 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                 }
                 return result;
             },
-            conditionAnd: function (needsParens) {
+            conditionAnd: function (needsParens, allowConditionOperands) {
                 let result;
                 let logical;
                 let next;
                 const self = this;
                 function insideCondition() {
-                    const cond = self.negatedCondition(needsParens) || self.parenthesisCondition(needsParens);
+                    const cond = self.negatedCondition(needsParens, allowConditionOperands) || self.parenthesisCondition(needsParens, allowConditionOperands);
                     if (!cond && !needsParens) {
                         return self.atomicCondition(needsParens);
                     }
@@ -2540,9 +2616,12 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                 if (!result) {
                     return ;
                 }
+                if (allowConditionOperands) {
+                    result = this.atomicCondition(needsParens, result, allowConditionOperands) || result;
+                }
                 logical = and();
                 if (logical) {
-                    next = this.conditionAnd(needsParens);
+                    next = this.conditionAnd(needsParens, allowConditionOperands);
                     if (next) {
                         result = new(tree.Condition)(logical, result, next);
                     } else {
@@ -2551,9 +2630,9 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                 }
                 return result;
             },
-            negatedCondition: function (needsParens) {
+            negatedCondition: function (needsParens, allowConditionOperands) {
                 if (parserInput.$str('not')) {
-                    const result = this.parenthesisCondition(needsParens);
+                    const result = this.parenthesisCondition(needsParens, allowConditionOperands);
                     if (result) {
                         result.negate = !result.negate;
                         return result;
@@ -2570,11 +2649,11 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                     }
                 }
             },
-            parenthesisCondition: function (needsParens) {
+            parenthesisCondition: function (needsParens, allowConditionOperands) {
                 function tryConditionFollowedByParenthesis(me) {
                     let body;
                     parserInput.save();
-                    body = me.condition(needsParens);
+                    body = me.condition(needsParens, allowConditionOperands);
                     if (!body) {
                         parserInput.restore();
                         return ;
@@ -2611,7 +2690,7 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                 parserInput.forget();
                 return body;
             },
-            atomicCondition: function (needsParens, preparsedCond) {
+            atomicCondition: function (needsParens, preparsedCond, allowConditionOperands) {
                 const entities = this.entities;
                 const index = parserInput.i;
                 let a;
@@ -2620,7 +2699,7 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                 let op;
 
                 const cond = (function() {
-                    return this.addition() || entities.keyword() || entities.quoted() || entities.mixinLookup();
+                    return (allowConditionOperands && this.parenthesisCondition(needsParens)) || this.addition() || entities.keyword() || entities.quoted() || entities.mixinLookup();
                 }).bind(this)
 
                 if (preparsedCond) {
@@ -2781,6 +2860,11 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                     }
                     for (k = 0; k < name.length; k++) {
                         s = name[k];
+                        if (s.charAt(0) === '@') {
+                            const variableName = s.slice(2, -1);
+                            warnNumericVariableName(variableName, index[k]);
+                            warnDashOnlyVariableName(variableName, index[k]);
+                        }
                         name[k] = (s.charAt(0) !== '@' && s.charAt(0) !== '$') ?
                             new(tree.Keyword)(s) :
                             (s.charAt(0) === '@' ?

package/lib/less/tree/mixin-call.js

@@ -151,6 +151,10 @@ class MixinCall extends Node {
                 for (m = 0; m < expandedValues.length; m++) {
                     args.push({value: expandedValues[m]});
                 }
+            } else if (argValue.type === 'Expression' && Array.isArray(argValue.value) && argValue.value.length === 0) {
+                // an unset variadic holds no captured args; omit it so the callee
+                // falls through to its own parameter defaults instead of receiving empty
+
             } else {
                 args.push({name: arg.name, value: argValue});
             }

package/lib/less/tree/mixin-definition.js

@@ -267,35 +267,47 @@ class Definition extends Ruleset {
      */
     matchArgs(args, context) {
         const allArgsCnt = (args && args.length) || 0;
-        let len;
-        const optionalParameters = this.optionalParameters;
-        const requiredArgsCnt = !args ? 0 : args.reduce(function (/** @type {number} */ count, /** @type {MixinArg} */ p) {
-            if (optionalParameters.indexOf(p.name) < 0) {
-                return count + 1;
-            } else {
-                return count;
+        const evaldArguments = new Array(this.params.length);
+        const positionalArgs = [];
+        let positionalIndex = 0;
+
+        for (let i = 0; i < allArgsCnt; i++) {
+            const arg = /** @type {MixinArg[]} */ (args)[i];
+            if (!arg.name) {
+                positionalArgs.push(arg);
+                continue;
             }
-        }, 0);
 
-        if (!this.variadic) {
-            if (requiredArgsCnt < this.required) {
+            const paramIndex = this.params.findIndex((param, index) => param.name === arg.name && !evaldArguments[index]);
+            if (paramIndex < 0) {
                 return false;
             }
-            if (allArgsCnt > this.params.length) {
-                return false;
+            evaldArguments[paramIndex] = arg;
+        }
+
+        for (let i = 0; i < this.params.length; i++) {
+            if (evaldArguments[i]) {
+                continue;
+            }
+            if (this.params[i].variadic) {
+                positionalIndex = positionalArgs.length;
+                continue;
             }
-        } else {
-            if (requiredArgsCnt < (this.required - 1)) {
+            if (positionalIndex < positionalArgs.length) {
+                evaldArguments[i] = positionalArgs[positionalIndex++];
+            } else if (!this.params[i].name || !this.params[i].value) {
                 return false;
             }
         }
 
-        // check patterns
-        len = Math.min(requiredArgsCnt, this.arity);
+        if (positionalIndex < positionalArgs.length) {
+            return false;
+        }
 
-        for (let i = 0; i < len; i++) {
+        // check patterns
+        for (let i = 0; i < this.arity; i++) {
             if (!this.params[i].name && !this.params[i].variadic) {
-                if (/** @type {MixinArg[]} */ (args)[i].value.eval(context).toCSS(/** @type {EvalContext} */ ({})) != /** @type {Node} */ (this.params[i].value).eval(context).toCSS(/** @type {EvalContext} */ ({}))) {
+                if (evaldArguments[i].value.eval(context).toCSS(/** @type {EvalContext} */ ({})) != /** @type {Node} */ (this.params[i].value).eval(context).toCSS(/** @type {EvalContext} */ ({}))) {
                     return false;
                 }
             }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "less",
-	"version": "4.7.0",
+	"version": "4.8.1",
 	"description": "Leaner CSS",
 	"homepage": "http://lesscss.org",
 	"author": {