Cannot parse calculations without spaces around the * operator

[stof]

• Operating System (or Browser): Ubuntu
• Node Version: 14.17.6
• postcss-values-parser Version: 2.0.1

How Do We Reproduce?

Parse the value calc(var(--bs-gutter-y)*-1)

Expected Behavior

Parsing is successful

Actual Behavior

A ParserError is reported.

Note that this comes from the issue reported at sass/dart-sass#1496. Newer versions of sass produce this value in compressed mode when compiling the sass code of Bootstrap 5. Older versions were putting spaces around the * operator, but they are optional in CSS for the * and / operators.

[stof]

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

[tagliala]

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

[shellscape]

PRs are welcome

[liujingbreak]

Same issue of mine on postcss-values-parser@2.0.1, 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)

[jeffbax]

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