Build fails (postcss ParserError)

[frans-vectra]

Hi, I'm getting the following error when trying to build the production version of the template.

Steps followed

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 following errors)

Errors

1. ProductCarousel.vue syntax error

ERROR in ./components/ProductsCarousel.vue?vue&type=style&index=0&id=430784f8&lang=scss&scoped=true& (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/sass-resources-loader/lib/loader.js??ref--7-oneOf-1-4!./node_modules/vue-loader/lib??vue-loader-options!./components/ProductsCarousel.vue?vue&type=style&index=0&id=430784f8&lang=scss&scoped=true&)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 25
    at /Users/me/projects/vsf-build-test/components/ProductsCarousel.vue:1:50
    at Parser.error (/Users/me/projects/vsf-build-test/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (/Users/me/projects/vsf-build-test/node_modules/postcss-values-parser/lib/parser.js:162:20)
    at Parser.parseTokens (/Users/me/projects/vsf-build-test/node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (/Users/me/projects/vsf-build-test/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (/Users/me/projects/vsf-build-test/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at parse (/Users/me/projects/vsf-build-test/node_modules/postcss-custom-properties/index.cjs.js:47:30)
    at /Users/me/projects/vsf-build-test/node_modules/postcss-custom-properties/index.cjs.js:333:24
    at /Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:194:18
    at /Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:139:18
    at Rule.each (/Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:105:16)
    at Rule.walk (/Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:135:17)
    at /Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:152:24
    at Root.each (/Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:105:16)
    at Root.walk (/Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:135:17)
    at Root.walkDecls (/Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:192:19)
    at transformProperties (/Users/me/projects/vsf-build-test/node_modules/postcss-custom-properties/index.cjs.js:330:8)
 @ ./components/ProductsCarousel.vue?vue&type=style&index=0&id=430784f8&lang=scss&scoped=true& (./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/sass-resources-loader/lib/loader.js??ref--7-oneOf-1-4!./node_modules/vue-loader/lib??vue-loader-options!./components/ProductsCarousel.vue?vue&type=style&index=0&id=430784f8&lang=scss&scoped=true&) 4:14-472
 @ ./components/ProductsCarousel.vue?vue&type=style&index=0&id=430784f8&lang=scss&scoped=true&
 @ ./components/ProductsCarousel.vue
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/Product.vue?vue&type=script&lang=js&
 @ ./pages/Product.vue?vue&type=script&lang=js&
 @ ./pages/Product.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

2. Home.vue syntax error

ERROR in ./pages/Home.vue?vue&type=style&index=0&id=30a80df0&lang=scss&scoped=true& (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/sass-resources-loader/lib/loader.js??ref--7-oneOf-1-4!./node_modules/vue-loader/lib??vue-loader-options!./pages/Home.vue?vue&type=style&index=0&id=30a80df0&lang=scss&scoped=true&)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 25
    at /Users/me/projects/vsf-build-test/pages/Home.vue:1:1872
    at Parser.error (/Users/me/projects/vsf-build-test/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (/Users/me/projects/vsf-build-test/node_modules/postcss-values-parser/lib/parser.js:162:20)
    at Parser.parseTokens (/Users/me/projects/vsf-build-test/node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (/Users/me/projects/vsf-build-test/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (/Users/me/projects/vsf-build-test/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at parse (/Users/me/projects/vsf-build-test/node_modules/postcss-custom-properties/index.cjs.js:47:30)
    at /Users/me/projects/vsf-build-test/node_modules/postcss-custom-properties/index.cjs.js:333:24
    at /Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:194:18
    at /Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:139:18
    at Rule.each (/Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:105:16)
    at Rule.walk (/Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:135:17)
    at /Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:152:24
    at Root.each (/Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:105:16)
    at Root.walk (/Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:135:17)
    at Root.walkDecls (/Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:192:19)
    at transformProperties (/Users/me/projects/vsf-build-test/node_modules/postcss-custom-properties/index.cjs.js:330:8)
 @ ./pages/Home.vue?vue&type=style&index=0&id=30a80df0&lang=scss&scoped=true& (./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/sass-resources-loader/lib/loader.js??ref--7-oneOf-1-4!./node_modules/vue-loader/lib??vue-loader-options!./pages/Home.vue?vue&type=style&index=0&id=30a80df0&lang=scss&scoped=true&) 4:14-460
 @ ./pages/Home.vue?vue&type=style&index=0&id=30a80df0&lang=scss&scoped=true&
 @ ./pages/Home.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

I cant find any relevant issues anywhere, also I'm not sure if this is the right repo to create this issues?

Dev environement

• nodejs v14.16.1
• macOS v11.6
• yarn v1.22.10
• npm v6.14.12

[frans-vectra]

I've managed to find a workaround for the build error.

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;
}

There is two instances of this issue in the current v1.0.0-rc.3 this project;

1. Home.vue line 365: margin: 0 calc(var(--spacer-sm) * -1) 0 0;
2. ProductsCarousel.vue line 106: margin: 0 calc(var(--spacer-sm) * -1) 0 0;

I've created an issue on the postcss repo: postcss/postcss-calc#142

[bloodf]

I will apply this fix on the main theme :)

[frans-vectra]

P.S. there is one more place where margin: 0 calc(var(--spacer-sm) * -1) 0 0; occurs, in RelatedProducts.vue line 58, but for some reason this isn't causing the same error. I guess it might be because of SSR? I'm not really sure.