Regression in v7.0.2 when combing calc with CSS Custom Properties

[wessberg]

Consider the following CSS:

:host {
    --a: calc(2 * var(--b) - (1 * var(--b)));
}

With postcss-calc v7.0.1, the value of --a will be unchanged which, since var(--b is a dynamic value that may change.

However, in v7.0.2, it will turn into:

:host {
    --a: 1;
}

This is untentional since it discards the var(--b) expressions entirely from the resulting property value. This error can be reproduced here when checking the postcss-calc checkbox in the left-hand menu.

[while0pass]

After transition from v7.0.0 to v7.0.[12], postcss-calc got a regression bug. Now I get the following error, though it has never been raised before:

:root {
  /* ... */
  --main-gap-mobile: calc((100vw - var(--main-width-mobile)) / 2);
}

JisonParserError in plugin "gulp-postcss"
Message:
    Parse error on line 1:
- calc((100v...
--^
Expecting "ADD", "SUB", "LENGTH", "ANGLE", "TIME", "FREQ", "RES", "UNKNOWN_DIMENSION", "EMS", "EXS", "CHS", "REMS", "VHS", "VWS", "VMINS", "VMAXS", "PERCENTAGE", "NUMBER", "dimension", got unexpected "CALC"
Details:
    hash: [object Object]
    fileName: ./src/styles/main.css
    domainEmitter: [object Object]
    domain: [object Object]
    domainThrown: false

Stack:
JisonParserError: Parse error on line 1:
- calc((100v...
--^
Expecting "ADD", "SUB", "LENGTH", "ANGLE", "TIME", "FREQ", "RES", "UNKNOWN_DIMENSION", "EMS", "EXS", "CHS", "REMS", "VHS", "VWS", "VMINS", "VMAXS", "PERCENTAGE", "NUMBER", "dimension", got unexpected "CALC"
    at Parser.parseError (./node_modules/postcss-calc/dist/parser.js:1200:15)
    at Parser.parse (./node_modules/postcss-calc/dist/parser.js:1716:30)
    at ./node_modules/postcss-calc/dist/lib/transform.js:33:30
    at walk (./node_modules/postcss-calc/node_modules/postcss-value-parser/lib/walk.js:7:16)
    at ValueParser.walk (./node_modules/postcss-calc/node_modules/postcss-value-parser/lib/index.js:18:3)
    at transformValue (./node_modules/postcss-calc/dist/lib/transform.js:24:50)
    at _default (./node_modules/postcss-calc/dist/lib/transform.js:66:100)
    at ./node_modules/postcss-calc/dist/index.js:27:32
    at ./node_modules/postcss-import/node_modules/postcss/lib/container.js:144:26
    at Rule.each (./node_modules/postcss-import/node_modules/postcss/lib/container.js:110:22)```

[hanse]

We're using create-react-app and experienced similar regressions with v7.0.2.

Our CSS

.event::before {
  left: calc(
    var(--icon-size) / 2 - var(--border-width) / 2
  );
}

used to compile to (v7.0.1)

.event:before {
  left: 11px;
  left: calc(
    var(--icon-size) / 2 - var(--border-width) / 2
  );
}

but with v7.0.2 it compiles to:

.event:before {
  left: 11px;
  left: calc(
    var(--icon-size) - var(--border-width)
  );
}

(the / 2 division is gone)

[vishaltelangre]

I experienced a similar issue. My postcss-calc version is 7.0.2 as well.

It seems to be completely overlooking the subtraction and division operations.

transform: translateZ(calc(0px - var(--thickness) / 2));
/* compiles to */
transform: translateZ(calc(var(--thickness) / 2));

/* Similarly, */
transform: translateX(calc(var(--width) / 2 - var(--thickness) / 2 - var(--pagesOffset)));
/* compiles to */
transform: translateX(calc(var(--width) - var(--thickness) - var(--pagesOffset)));

As a workaround, I used multiplication which seems to work as intended.

transform: translateZ(calc(0px - var(--thickness) / 2));
/* I rewritten this to */
transform: translateZ(calc((var(--thickness) / 2) * -1));

/* Also, I changed manually */
transform: translateX(calc(var(--width) / 2 - var(--thickness) / 2 - var(--pagesOffset)));
/* to */
transform: translateX(calc((0.5 * var(--width)) - (0.5 * var(--thickness)) - var(--pagesOffset)));

[ludofischer]

All the examples produce the expected output in 8.2. This was probably a duplicate of #107 fixed in 7.0.4