Bug: Invalid syntax in `_list.scss` on line 13

Byloth commented 2 years ago

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:

```log 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
[X] I have searched for existing issues and to the best of my knowledge this is not a duplicate

Byloth commented 2 years ago

https://github.com/sass/sass/issues/3371 https://github.com/webpack-contrib/sass-loader/issues/1081

tagliala commented 2 years ago

Hi, is this the same issue as #18899 ?

Byloth commented 2 years ago

Hi, @tagliala!

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

I'll close this as a duplicate! 👌

tagliala commented 2 years ago

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

FortAwesome / Font-Awesome