Framework7: [v3] CSS minification error on framework7.css 3.1.0 with vue-cli 3

[zoosky]

• Framework7 version: [e.g. 3.1.0]
• Platform and Target: [Web]
• Reproduction: See this repo. yarn run build

Describe the bug

Production build fails.

To Reproduce

Steps to reproduce the behavior:

framework7-template-split-vue-webpack git:(master) ✗ yarn build
yarn run v1.7.0
$ vue-cli-service build

 ERROR  Error: CSS minification error: Parse error on line 1:
8px + constant(safe-area-i
        ------^
Expecting 'SUB', 'LPAREN', 'NESTED_CALC', 'NUMBER', 'CSS_VAR', 'LENGTH', 'ANGLE', 'TIME', 'FREQ', 'RES', 'EMS', 'EXS', 'CHS', 'REMS', 'VHS', 'VWS', 'VMINS', 'VMAXS', 'PERCENTAGE', got 'PREFIX'. File: css/chunk-vendors.cd97c7e3.css
Error: CSS minification error: Parse error on line 1:
8px + constant(safe-area-i
------^
Expecting 'SUB', 'LPAREN', 'NESTED_CALC', 'NUMBER', 'CSS_VAR', 'LENGTH', 'ANGLE', 'TIME', 'FREQ', 'RES', 'EMS', 'EXS', 'CHS', 'REMS', 'VHS', 'VWS', 'VMINS', 'VMAXS', 'PERCENTAGE', got 'PREFIX'. File: css/chunk-vendors.cd97c7e3.css
    at /Users/andreas/dev/examples/framework7/framework7-template-split-vue-webpack/node_modules/@intervolga/optimize-cssnano-plugin/index.js:106:21
error Command failed with exit code 1.

Expected behavior

Build should succeed.

If you remove framework7.cc in main.js, the build will be successful:

Uncomment framework7.css:

// Import F7 Styles
// eslint-disable-next-line
// import Framework7Styles from "framework7/css/framework7.css";

[nolimits4web]

Issue here is not in Framework7, but in the optimize-css-nano plugin which doesn’t understand such CSS rules

[zoosky]

@nolimits4web As I understand it these are non standardized css rules. My project uses the Vue cli 3 toolchain.

Closing this issue ist not helpful, cause it cuts off Vue.

[nolimits4web]

This css rules are used in iOS and must be used there, issue is closed because it is not related to Framework7

https://medium.com/@draganeror/iphone-x-layout-features-with-css-environment-variables-d57423433dec

[nolimits4web]

More relevant and profitable will be opening issue on vue compiler or that css processor

[zoosky]

Thanks for explaining.

[zoosky]

Causing issue is here https://github.com/postcss/postcss-calc/issues/48

[rvanzon]

@zoosky can you tell me how you fixed it? Facing the same problem. Thanks!