Support each() function (Less.js 3.7.0)

[knospe-]

I am having a lot of trouble trying to upgrade FontAwesome to the latest version.

I’ve uploaded all the kit for FontAwesome 6 but running the compiler returns errors because of ParseError: Unexpected input in from the FontAwesome less files even though I believe they are syntatically correct (example below).

ParseError: Unexpected input in _sizing.less on line 15, column 5
13|
14| // step-based scale (with alignment)
15| each(.fa-sizes(), {
16|   .@{fa-css-prefix}-@{key} {
17|     .fa-size(@value);
18|   }

[friendscottn]

Did you find a workaround? Same issue here.

[knospe-]

No yet, unfortunately.

[somegooser]

I know it is not the way but cant you change the "each" function with oldschool way?

@iterations: 100;

// helper class, will never show up in resulting css
// will be called as long the index is above 0
.loopingClass (@index) when (@index > 0) {

    // create the actual css selector, example will result in
    // .myclass_30, .myclass_28, .... , .myclass_1
    (~".span@{index}") {
        // your resulting css
        width: percentage((@index - 1) *0.01);
    }

    // next iteration
    .loopingClass(@index - 1);
}

// "call" the loopingClass the first time with highest value
.loopingClass (@iterations);

[Krinkle]

Minimal test case:

// https://github.com/FortAwesome/Font-Awesome/blob/6.4.2/less/_variables.less
@fa-css-prefix          : fa;
@fa-size-scale-sm       : 14;
@fa-size-scale-lg       : 20;
@fa-size-scale-xl       : 24;
.fa-sizes() {
  sm                    : @fa-size-scale-sm;
  lg                    : @fa-size-scale-lg;
  xl                    : @fa-size-scale-xl;
}

// https://github.com/FortAwesome/Font-Awesome/blob/6.4.2/less/_mixins.less
.fa-size(@font-size) {
  line-height: (1 / @font-size) * 1em;
}

each(.fa-sizes(), {
  .@{fa-css-prefix}-@{key} {
    .fa-size(@value);
  }
});

http://ecomfe.github.io/est/fiddle/#version=3.6.0&autoprefix=false&est=false&autorun=false

On Less.js 3.6.0:

Syntax error: Function 'each' is undefined
Line 17: each(.fa-sizes(), {

On Less.js 3.7.0:

.fa-sm {
  line-height: 0.07142857em;
}
.fa-lg {
  line-height: 0.05em;
}
.fa-xl {
  line-height: 0.04166667em;
}