Bug: Invalid syntax in _list.scss on line 13

[Byloth]

Bug description

I'm currently developing a web application using Nuxt.js 2.

I just updated...

• @fortawesome/fontawesome-free package from ^5.15.4 to ^6.1.2.
• sass package from ~1.32.13 to ^1.54.1.
• sass-loader package from ~10.1.1 to ~10.3.1.

... and tried to build the project.

The version of webpack that I'm forced to use due to Nuxt.js 2 is ~4.46.0.

This is the error I got:

Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 30
    at /home/matteo/projects/byloth/website/assets/scss/main.import.scss:10:1165
    at Parser.error (/home/matteo/projects/byloth/website/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (/home/matteo/projects/byloth/website/node_modules/postcss-values-parser/lib/parser.js:162:20)
    at Parser.parseTokens (/home/matteo/projects/byloth/website/node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (/home/matteo/projects/byloth/website/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (/home/matteo/projects/byloth/website/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at parse (/home/matteo/projects/byloth/website/node_modules/postcss-custom-properties/index.cjs.js:47:30)
    at /home/matteo/projects/byloth/website/node_modules/postcss-custom-properties/index.cjs.js:333:24
    at /home/matteo/projects/byloth/website/node_modules/postcss/lib/container.js:194:18
    at /home/matteo/projects/byloth/website/node_modules/postcss/lib/container.js:139:18
    at Rule.each (/home/matteo/projects/byloth/website/node_modules/postcss/lib/container.js:105:16)
    at Rule.walk (/home/matteo/projects/byloth/website/node_modules/postcss/lib/container.js:135:17)
    at /home/matteo/projects/byloth/website/node_modules/postcss/lib/container.js:152:24
    at Root.each (/home/matteo/projects/byloth/website/node_modules/postcss/lib/container.js:105:16)
    at Root.walk (/home/matteo/projects/byloth/website/node_modules/postcss/lib/container.js:135:17)
    at Root.walkDecls (/home/matteo/projects/byloth/website/node_modules/postcss/lib/container.js:192:19)
    at transformProperties (/home/matteo/projects/byloth/website/node_modules/postcss-custom-properties/index.cjs.js:330:8)
 @ ./assets/scss/main.import.scss 4:14-231
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

---

For some unknown reason, the traceback isn't useful at all...
I struggled a lot trying to find the exact line where the problem is and eventually I found it.

The problem appears to be in @fortawesome/fontawesome-free/scss/_list.scss on line 13:

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

---

Trying to find a solution, I rewrote the related CSS rule as...

.#{$fa-css-prefix}-li {
  $fa-li-width-var: var(--#{$fa-css-prefix}-li-width, #{$fa-li-width});

  left: calc(#{$fa-li-width-var} * -1);
  position: absolute;
  text-align: center;
  width: $fa-li-width-var;
  line-height: inherit;
}

... and this solved the problem.

---

To be honest, I don't know whose responsibility it is...

• Is it a problem with FontAwesome?
• Is it a problem with SASS?
• Is it a problem with SASS loader?

DUNNO!

I'm starting to think it's a simultaneous problem on -at least- 2 different actors.
For this reason, I'm going to open this same issue on each project, linking them all together, and -hopefully- this should help to solve the problem.

Reproducible test case

No response

Screenshots

No response

Font Awesome version

v6.1.2

Serving

Other (as specified in the bug description)

Implementation

Other (as specified in the bug description)

Browser and Operating System

N/A

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

[Byloth]

sass/sass#3371
webpack-contrib/sass-loader#1081

[tagliala]

Hi, is this the same issue as #18899 ?

[Byloth]

Hi, @tagliala!

Oh, yes!
I didn't find it while searching... Sorry! 🥺

I'll close this as a duplicate! 👌

[tagliala]

No problem. This is an issue on a third-side library but we will provide a workaround in 6.2