Merge pull request #2646 from SomMeri/mixin-matching-with-default-par…

…ameters-2645

Parametric mixins: parameters don't match error

lib/less/tree/mixin-definition.js

@@ -14,14 +14,17 @@ var Definition = function (name, params, rules, condition, variadic, frames) {
  this.arity = params.length;
  this.rules = rules;
  this._lookups = {};
+ var optionalParameters = [];
  this.required = params.reduce(function (count, p) {
  if (!p.name || (p.name && !p.value)) {
  return count + 1;
  }
  else {
+ optionalParameters.push(p.name);
  return count;
  }
  }, 0);
+ this.optionalParameters = optionalParameters;
  this.frames = frames;
 };
 Definition.prototype = new Ruleset();
@@ -159,22 +162,30 @@ Definition.prototype.matchCondition = function (args, context) {
  return true;
 };
 Definition.prototype.matchArgs = function (args, context) {
- var argsLength = (args && args.length) || 0, len;
+ var allArgsCnt = (args && args.length) || 0, len, optionalParameters = this.optionalParameters;
+ var requiredArgsCnt = !args ? 0 : args.reduce(function (count, p) {
+ if (optionalParameters.indexOf(p.name) < 0) {
+ return count + 1;
+ } else {
+ return count;
+ }
+ }, 0);
 
  if (! this.variadic) {
- if (argsLength < this.required) {
+ if (requiredArgsCnt < this.required) {
  return false;
  }
- if (argsLength > this.params.length) {
+ if (allArgsCnt > this.params.length) {
  return false;
  }
  } else {
- if (argsLength < (this.required - 1)) {
+ if (requiredArgsCnt < (this.required - 1)) {
  return false;
  }
  }
 
- len = Math.min(argsLength, this.arity);
+ // check patterns
+ len = Math.min(requiredArgsCnt, this.arity);
 
  for (var i = 0; i < len; i++) {
  if (!this.params[i].name && !this.params[i].variadic) {

test/css/mixins-args.css

@@ -158,3 +158,6 @@ mixins-args-expand-op-9 {
  a4: and;
  a8: 5;
 }
+#test-mixin-matching-when-default-2645 {
+ height: 20px;
+}

test/less/mixins-args.less

@@ -248,3 +248,16 @@ mixins-args-expand-op- {
  a8: extract(@a, 8);
  }
 }
+#test-mixin-matching-when-default-2645 {
+ .mixin(@height) {
+ height: @height;
+ }
+
+ .mixin(@width, @height: 10px) {
+ width: @width;
+
+ .mixin(@height: @height);
+ }
+
+ .mixin(@height: 20px);
+}