search

webpack-contrib / sass-loader

Compiles Sass to CSS
MIT License
3.91k stars 428 forks source link

Nuxt.js 2 + FontAwesome 6 = `ParserError: Syntax Error` #1081

Closed Byloth closed 2 years ago

Byloth commented 2 years ago

Bug report

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

I just updated...

... 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...

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.

Actual Behavior

Expected Behavior

How Do We Reproduce?

Please paste the results of npx webpack-cli info here, and mention other relevant information

Byloth commented 2 years ago

https://github.com/FortAwesome/Font-Awesome/issues/18899

alexander-akait commented 2 years ago

Oh, I am afraid we can't fix it here... In theory you can create a small loader and replace weird lines using regexp

Byloth commented 2 years ago

Hi, @alexander-akait!
Of course, no problem! 😉

As pointed out in this comment https://github.com/sass/sass/issues/3371#issuecomment-1208581735, it is a problem related to postcss-values-parser.

Unfortunately, Nuxt.js 2 requires the version 2.0.1 from 4 years ago...
However, the team has already released version 6.0.2 and this problem seems to be solved already!

So... Forgive me if I opened this issue and wasted your time... I'm going to close it.