shellscape/postcss-values-parser

Cannot parse calculations without spaces around the * operator

stof opened this issue · 5 comments

stof commented
  • 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 commented

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 commented

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

  • 👍1
shellscape commented

PRs are welcome

liujingbreak commented

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)

Screen Shot 2021-11-19 at 2 43 24 PM

jeffbax commented

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

  • 👍2