"ParserError: Syntax Error" with negative multiplication and vars

[frans-vectra]

Hi, I've been getting a parse syntax error while trying to make a production build of Vue Storefront 2 Magento theme project.

The error specifically occurs when trying to parse something like calc(var(--my-var) * -1);

e.g.

:root {
  --my-var: 12px;
}

.my-class {
  margin: 0 calc(var(--my-var) * -1) 0 0;
}

By just changing the order of the terms in the calc statement it works correctly;

e.g.

:root {
  --my-var: 12px;
}

.my-class {
  margin: 0 calc(-1 * var(--my-var)) 0 0;
}

Environment

• macos v11.6
• node v14.16.1
• npm v6.14.12
• yarn v1.22.10
• vuestorefront/template-magento v1.0.0-rc.3
• postcss v7.0.32

Reproduction steps

1. $ npx @vue-storefront/cli init
2. Select the Magento 2 (beta) integration option
3. Copy the .env.example as .env and update the Magento integration URLs (MAGENTO_GRAPHQL, MAGENTO_EXTERNAL_CHECKOUT_URL)
4. $ yarn install
5. $ yarn dev (everything works in dev mode)
6. $ yarn build (build fails with the postcss errors)

[ahmadalfy]

It doesn't work on my side. Switching it to the beginning has not effect.

[1/4] 🤔  Why do we have the module "postcss-calc"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "nuxt#@nuxt#webpack#cssnano#cssnano-preset-default" depends on it
   - Hoisted from "nuxt#@nuxt#webpack#cssnano#cssnano-preset-default#postcss-calc"
info Disk size without dependencies: "232KB"
info Disk size with unique dependencies: "1.34MB"
info Disk size with transitive dependencies: "2.24MB"
info Number of shared dependencies: 7

[ahmadalfy]

I found a temporary fix, I just assign the negative value to a new property and it works.

/* This will throw an error */
property: calc(var(--some-value) * -1);

/* This will work */
--minus-one: var(-1);
property: calc(var(--some-value) * var(--minus-one));

[ludofischer]

Strangely I cannot reproduce this using only postcss-cli.

[toptalo]

I have resolve this with moving zero to the start
left: calc(0px - (var(--full-width) - 100%) / 2);
¯\_(ツ)_/¯

I have got an build error in Nuxt with yarn build