Fix compilation issues with Bootstrap 3

[jimmyphong]

thanks ! 👍

[damienalexandre]

Here is some informations about this issue, tested with Bootstrap 3.0.2 (latest stable).

lessc->zipSetArgs() receive this:

// args
array(2) {
  [0]=>
  array(2) {
    [0]=>
    string(3) "arg"
    [1]=>
    string(6) "@index"
  }
  [1]=>
  array(2) {
    [0]=>
    string(3) "arg"
    [1]=>
    string(5) "@list"
  }
}
// orderedValues
array(1) {
  [0]=>
  array(3) {
    [0]=>
    string(6) "number"
    [1]=>
    string(1) "1"
    [2]=>
    string(0) ""
  }
}
// keywordValues
array(0) {
}

And throw this error: Failed to assign arg @list: line: 57.

This is a case where:

• there is no kerword arg
• no ordered tag
• no default value

Here is the faulty LESS code, from mixins.less:

// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `@grid-columns`.

.make-grid-columns() {
  // Common styles for all sizes of grid columns, widths 1-12
  .col(@index) when (@index = 1) { // initial
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col(@index + 1, @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col(@index + 1, ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner gutter via padding
      padding-left:  (@grid-gutter-width / 2);
      padding-right: (@grid-gutter-width / 2);
    }
  }
  .col(1); // kickstart it
}

.make-grid-columns-float(@class) {
  .col(@index) when (@index = 1) { // initial
    @item: ~".col-@{class}-@{index}";
    .col(@index + 1, @item);
  }
  .col(@index, @list) when (@index < @grid-columns) { // general
    @item: ~".col-@{class}-@{index}";
    .col(@index + 1, ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index = @grid-columns) { // terminal
    @{list} {
      float: left;
    }
  }
  .col(1); // kickstart it
}

Hope it helps;
from my side, if I comment the $this->throwError("Failed to assign arg " . $a[1]); line from zipSetArgs, it works as expected.

I suspect this error is thown to prevent calling a mixing without a mandatory param,
but here, there is a "when", if we call .col with 1 as first param, the @list can be unset, it's not needed.

[dalabarge]

You just need to add .col to the failing mixins:

- .col(1); // kickstart it
+ .col(1, '.col'); // kickstart it

That said, LessPHP isn't compatible with the "Mixings With Multiple Parameters" syntax. Specifically:

It is legal to define multiple mixins with the same name and number of parameters. Less will use properties of all that can apply. For example, if you used the mixin with one parameter e.g. .mixin(green);, then properties of all mixins with exactly one mandatory parameter will be used

Bootstrap is calling the .col mixin which has been defined three times, twice of which include a mandatory parameter. It appears that LessPHP is always passing the @list parameter but without a value as there is none defined in fact using the last definition of the .col mixin (which includes the @list parameter. It appears the bug lies in the guard handling. If the block's $args were filtered by the mixin's required args and the key unset if the @list argument was undefined and also not required, then everything would be just fine. Lack of code commentary means I couldn't figure it out in a reasonable amount of time.

Adding .col selector as the @list value tricks the compiler by providing a default value while also introducing the helpful .col selector that matches the first .col-xs-1, ..., .col-lg-1 selectors.

I doubt Bootstrap will accept this as a patch since it clearly works with Less.js without it; but for those who want to run a patch until LessPHP can catch up then here you go. It's unfortunate that LessPHP is so poorly commented as otherwise many here would have been able to help keep it compatible. It's also very unfortunate that Bootstrap community refuses to support the PHP community by providing assistance and work arounds: Less.js isn't the only compiler out there.

[jonvan]

This compiler appears to work with bootstrap 3: https://github.com/oyejorge/less.php

[maubut]

+1, BS3.0.2

[dalabarge]

@mweimerskirch this a well commented "solution", however, it's not a good practice to remove something from the code unless it's not needed and in this case it is an exception that is there for good reason: when you forget to pass a required parameter to a mixin this throws an exception. The consequences of just removing that line could appear elsewhere so I would not recommend this solution to anyone else finding this same issue. It also has the invalid semantic HTML element selector null at the same CSS rule you have for .col-xs-1 which isn't particularly good either. By removing the exception you break LessPHP and also invalidate your CSS.

[dmathisen]

@bexarcreative-daniel I tried your fix and it worked, but now I get a new error .calc-grid is undefined.
Same thing mentioned here: #491 (comment)
Bootstrap 3.0.2; LessPHP 0.4.0

[dalabarge]

I'm not sure what your configuration is but I too am using 0.4.0 and Bootstrap 3.0.2 (even dev-master works). The only changes to the mixin I made are where it says "kickstart it".

// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `@grid-columns`.

.make-grid-columns() {
  // Common styles for all sizes of grid columns, widths 1-12
  .col(@index) when (@index = 1) { // initial
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col(@index + 1, @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col(@index + 1, ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner gutter via padding
      padding-left:  (@grid-gutter-width / 2);
      padding-right: (@grid-gutter-width / 2);
    }
  }
  .col(1,'.col'); // kickstart it
}

.make-grid-columns-float(@class) {
  .col(@index) when (@index = 1) { // initial
    @item: ~".col-@{class}-@{index}";
    .col(@index + 1, @item);
  }
  .col(@index, @list) when (@index < @grid-columns) { // general
    @item: ~".col-@{class}-@{index}";
    .col(@index + 1, ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index = @grid-columns) { // terminal
    @{list} {
      float: left;
    }
  }
  .col(1,'.col'); // kickstart it
}

The .calc-grid may not be being used by my particular LESS compilation which is why I don't experience the error.

The truth of it all is that in the effort to save the Bootstrap framework developer a bit of time (let's face it programmers are lazy) they've used code that looks nothing like CSS by using the most complex syntax of LESS. If you look at the compiled output, it could just have easily been built using a bit simpler howbeit more verbose LESS syntax and then more compilers wouldn't choke on it.

[yansern]

See my comment here for the temporary .calc-gridfix. Use it along with the .col(1, true) fix and "bootstrap/grid" should compile just fine.
#491 (comment)

[seven-phases-max]

Would it be easy for someone to create a new fork of bootsrap with the recommended fixes?

Isn't that easier to switch to less.php?

[elboletaire]

Isn't that easier to switch to less.php?

I did it when @jonvan suggested it a few comments above 😉

[jnilla]

I was not aware of this project, that is the official php port, what is the difference compared with leafo's work

[Roope]

There is no official. These are just two different php ports.