FontAwesome 6 LESS files missing 'fa-spin-pulse'

[HereThereBDragons]

in the _animated.less file for version 6 (including 6.1.1) the 'spin-pulse' CSS directives are missing. They are in the CSS file, just missing in the LESS version.

Also, the syntax for the preceding directive '-spin-reverse' seems to be incorrect in the less and css file:

.@{fa-css-prefix}-spin-reverse {
  --@{fa-css-prefix}-animation-direction: reverse;
}

[HereThereBDragons]

This might be the missing LESS directive, based on the CSS:

.@{fa-css-prefix}-pulse,
.@{fa-css-prefix}-spin-pulse {
    animation-name: ~'@{fa-css-prefix}-spin';
    animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0)';
    animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)';
    animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 1s)';
    animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)';
    animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, steps(8))';
}

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community and thanks for reporting this issue.

I've assigned @alexpoiry as per #18835, another bug affecting less implementation

[talbs]

Thanks for bringing this to our attention and apologies for the less than awesome Less compilation.

I've taken this off of @alexpoiry's hands and have a fix up for review. This should be fixed in our next release shortly. I'll keep you folks posted once that's on its way out the door.

[talbs]

Hey, @HereThereBDragons (cool username, BTW)!

Also, the syntax for the preceding directive '-spin-reverse' seems to be incorrect in the less and css file:

I've checked the spin-reverse CSS rule you raised earlier and all seems to be working as intended. The CSS rule targeting -spin-reverse correctly sets the --fa-animation-direction to reverse which controls the animation direction property.

FYI - You'll need both the -spinand -spin-reverse classes to make an icon spin in the reverse direction. Chaining these 2 classes may be something we consider simplifying going forward to avoid confusion - I'll bring this back to the team to check out.

Let me know if you're still smelling something fa-fishy around -spin-reverse.

[HereThereBDragons]

Regarding the 'spin-reverse' - the syntax in the LESS file is:

.@{fa-css-prefix}-spin-reverse {
  --@{fa-css-prefix}-animation-direction: reverse;
}

but the --@(fa-css-prefix) portion is normally within an ~'var()', which the above is missing. It also is assuming the CSS instruction will have a fa-css-prefix, which doens't make sense.. It also does not compile this way.

it should probably be:

.@{fa-css-prefix}-spin-reverse {
  animation-direction: reverse;
}

or

.@{fa-css-prefix}-spin-reverse {
  animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, reverse)';
}