ParserError with plus or minus sign

[andreymal]

:root {
  --foowidth: 50px + 50px;
}

$ postcss input.css -o output.css
{ ParserError: Syntax Error at line: 1, column 6
    at Parser.error (postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (postcss-values-parser/lib/parser.js:183:18)
    at Parser.parseTokens (postcss-values-parser/lib/parser.js:245:14)

If I understand the specification correctly, the plus sign is a delim-token that is allowed in this context (only "!" delim-token is not allowed here), so it should be valid

It works with Firefox and Chrome https://jsfiddle.net/8v54cg2o/

[andreymal]

Hm, is this related with https://github.com/shellscape/postcss-values-parser/issues/58?

[remithomas]

I've got the same error on

• Webpack Version: 4.28.3
• Operating System (or Browser): macOS 10.14.3
• Node Version: v8.15.0
• postcss-values-parser Version: 2.0.1

How Do We Reproduce?

I use flexboxgrid (6.3.2) from react-flexbox-grid. When I run PostCSS task this breaks when parsing this kind of CSS:

calc(var(--gutter-width)*0.5*-1)

Expected Behavior

It expects to keep calc(var(--gutter-width)*0.5*-1)

Actual Behavior

{ ParserError: Syntax Error at line: 1, column 30
    at Parser.error (/Users/remithomas/Documents/my-app/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (/Users/remithomas/Documents/my-app/node_modules/postcss-values-parser/lib/parser.js:165:20)
    at Parser.parseTokens (/Users/remithomas/Documents/my-app/node_modules/postcss-values-parser/lib/parser.js:248:14)
    at Parser.loop (/Users/remithomas/Documents/my-app/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (/Users/remithomas/Documents/my-app/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at rule.nodes.slice.forEach.decl (/Users/remithomas/Documents/my-app/node_modules/postcss-custom-properties/index.cjs.js:109:66)
    at Array.forEach (<anonymous>)
    at root.nodes.slice.forEach.rule (/Users/remithomas/Documents/my-app/node_modules/postcss-custom-properties/index.cjs.js:105:26)
    at Array.forEach (<anonymous>)
    at getCustomPropertiesFromRoot (/Users/remithomas/Documents/my-app/node_modules/postcss-custom-properties/index.cjs.js:101:22) name: 'ParserError' }

This should be fixed in version 3.0.0 of postcss-values-parser

[jonathantneal]

I think it would be a breaking change to switch to PostCSS Values Parser 3, but I’m okay with doing that. Would anyone be interested in taking on the PR?

[jonathantneal]

The hardest bits would be the work-arounds for PostCSS Values Parser limitations in https://github.com/postcss/postcss-custom-properties/blob/master/src/lib/transform-value-ast.js

[remithomas]

@jonathantneal I will do a PR to upgrade to PostCSS Values Parser 3