Bug: scss/_list.scss throws error on compilation

[anthonypwinning]

Bug description

When I attempt to compile FontAwsome as a yarn package with Sass, _scss/list.scss appears to be the source of an error that prevents compilation.

I believe:

left: calc(var(--#{$fa-css-prefix}-li-width, #{$fa-li-width}) * -1);

Should be:

left: var(--#{$fa-css-prefix}-li-width, calc(#{$fa-li-width} * -1));

Everything works fine after changing that one line. I'll add a pull request with this code change.

Reproducible test case

No response

Screenshots

No response

Font Awesome version

v6.1.1

Serving

Self-hosted

Implementation

Other (as specified in the bug description)

Browser and Operating System

Chrome Version 101.0.4951.64 (Official Build) (x86_64) on MacOS

Web bug report checklist

• I have included a test case because my odds go way up that the team can fix this when I do
• I have searched for existing issues and to the best of my knowledge this is not a duplicate

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

I believe:

left: calc(var(--#{$fa-css-prefix}-li-width, #{$fa-li-width}) * -1);

Should be:

left: var(--#{$fa-css-prefix}-li-width, calc(#{$fa-li-width} * -1));

As far as I can see, they are not the same thing

$fa-css-prefix: "fa";
$fa-li-width: 2em;

:root {
    --#{$fa-css-prefix}-li-width: #{$fa-li-width};
}

.before {
    left: calc(var(--#{$fa-css-prefix}-li-width, #{$fa-li-width}) * -1);
}

.after {
    left: var(--#{$fa-css-prefix}-li-width, calc(#{$fa-li-width} * -1));
}

compiles to

:root {
  --fa-li-width: 2em;
}

.before {
  left: calc(var(--fa-li-width, 2em) * -1);
}

.after {
  left: var(--fa-li-width, calc(2em * -1));
}

Demo: https://jsfiddle.net/tagliala/uz7b1wha/3/

Are you using a custom value for $fa-li-width? Could you please provide more details about the error you are getting?

[anthonypwinning]

Apologies, I think this was a false alarm. I uninstalled and reinstalled the packages via yarn, and everything worked. Thank you for your assistance.

[knoxjeffrey]

Hello @tagliala , I just wanted to raise this issue again as I came across when upgrading to v6.1.2. The source of the issue is the same for me:

left: calc(var(--#{$fa-css-prefix}-li-width, #{$fa-li-width}) * -1);

I've done some digging into this and turns out the issue eventually lies with postcss-values-parser. See this issue shellscape/postcss-values-parser#138. I can confirm that the fix is to swap the order:

left: calc(-1 * var(--#{$fa-css-prefix}-li-width, #{$fa-li-width}));

I'm stuck with an older version of postcss-values-parser because of Webpacker as used with Rails but this change should fix the issue and produce the same intended outcome.

[tagliala]

Hi @knoxjeffrey , that issue is tracked at #18899 and it's planned for 6.2.0 release

[knoxjeffrey]

Amazing @tagliala , thank you so much for proving this workaround! Sorry I didn't spot the issue being tracked.