Cannot parse calculations without spaces around the * operator about postcss-values-parser HOT 5 CLOSED

I don't quite have a sample available as I'm not great at debugging this type of issue (will try more in a bit), but I'm seeing something similar to @tagliala having recently updated Webpacker in my project -- except in theory for the - character surfacing:

Syntax Error
[ 'operator', '-', 1, 25, 1, 26, 24 ]

when I add some crude logging to postcss-values-parser/lib/parser.js within error (message, token)

at the moment I'm resolving it by locking sass@~1.39.2 in my yarn resolutions -- so it seems like something after 1.40.0 is not playing nicely

from postcss-values-parser.

This package is also transitively used by Webpacker 5, so at the moment it is not possible to compile Bootstrap with NODE_ENV=production out of the box

from postcss-values-parser.

Looking at it, this version is far outdated. But it is the version used (transitively) by postcss-preset-env, which is used in create-react-app

from postcss-values-parser.

PRs are welcome

from postcss-values-parser.

Same issue of mine on [email protected], it is due to the parser logic has strict check on calc() expression when its default option is {loose: false}, it does not allow an operator character to follow another operator character without a space charactor in between, in my case 2*-1 is invalid, but 2* -1 is valid.

ERROR in ./node_modules/@material/layout-grid/mdc-layout-grid.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 52
calc(var(--mdc-layout-grid-gutter-desktop, 24px)/2*-1)

at /Users/liujing/bk/plink/react-space/node_modules/@material/layout-grid/mdc-layout-grid.scss:1:932
    at Parser.error (/Users/liujing/bk/plink/react-space/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (/Users/liujing/bk/plink/react-space/node_modules/postcss-values-parser/lib/parser.js:162:20)
    at Parser.parseTokens (/Users/liujing/bk/plink/react-space/node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (/Users/liujing/bk/plink/react-space/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (/Users/liujing/bk/plink/react-space/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at parse (/Users/liujing/bk/plink/react-space/node_modules/postcss-custom-properties/src/lib/postcss-values-parser.js:4:29)
    at callback (/Users/liujing/bk/plink/react-space/node_modules/postcss-custom-properties/src/lib/transform-properties.js:11:21)

In create-react-app production mode, some Webpack plugin or loader removed all space from source SCSS file which leads to this issue, now it is hard to so say whose fault this is postcss-values-parsers or create-react-app's unknown Webpack plugin (my guess is something related to mini-css-extract-plugin)

from postcss-values-parser.