parse error: multiplication of custom properties and minus in calc

[jishidaaaaa]

The following code was a parse error in an environment using react-scripts@4.0.3 and dart-sass@1.50.0.

Font-Awesome/scss/_list.scss

Line 13 in 28e297f

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

I don't know why, but if I rewrite it as follows, the error does not occur.
left: calc(-1 * var(--#{$fa-css-prefix}-li-width, #{$fa-li-width}));

Perhaps it has something to do with the order of operations on custom properties, but I have no knowledge of this and would appreciate a fix if this fix is correct.

[tagliala]

Reminds me of this problem in bootstrap: react-bootstrap/react-bootstrap#6039 twbs/bootstrap#35033, but yes, we should provide a workaround

[jishidaaaaa]

Thanks for the info.
I understand that this is not a dart-sass issue, but a post-css issue that the create react app is using.

cf shellscape/postcss-values-parser#138

[tagliala]

Welcome!

Yes, it should be that issue, but we should provide a workaround. Thanks for spotting this