Skip to content

"ParserError: Syntax Error" with negative multiplication and vars #142

@frans-vectra

Description

@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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions