Constant values not supported

[jaehanley]

iOS Safari 11 introduces constant values to account for the safe zone, which in browser is supported in calc. When a constant value is used in a calc with this plug in, the compiler fails with the following error:

Expecting 'SUB', 'LPAREN', 'NESTED_CALC', 'NUMBER', 'CSS_VAR', 'LENGTH', 'ANGLE', 'TIME', 'FREQ', 'RES', 'EMS', 'EXS', 'CHS', 'REMS', 'VHS', 'VWS', 'VMINS', 'VMAXS', 'PERCENTAGE', got 'PREFIX']
message: 'Parse error on line 1:\nconstant(safe-area-i\n^\nExpecting \'SUB\', \'LPAREN\', \'NESTED_CALC\', \'NUMBER\', \'CSS_VAR\', \'LENGTH\', \'ANGLE\', \'TIME\', \'FREQ\', \'RES\', \'EMS\', \'EXS\', \'CHS\', \'REMS\', \'VHS\', \'VWS\', \'VMINS\', \'VMAXS\', \'PERCENTAGE\', got \'PREFIX\'',
showStack: false,
showProperties: true,
plugin: 'gulp-postcss',

[Semigradsky]

@darrellhanley could you provide your input?

[valpinkman]

Hello there

I have the same issue. Here is what my css files looks like. I hope this will help

/* Vars */
@value size: 20px;

.icons {
  & svg:nth-child(1) {
    left: calc(size * 0);
  }
}

[MoOx]

This function take a css value as an input, so it just cannot work with that atm.

[sbaechler]

@Semigradsky
The original author opened the issue because of the new constant and env keywords of Safari mobile.

The syntax is like this:

header {
    /* ... */

    /* Status bar height on iOS 10 */
    padding-top: 20px;

    /* Status bar height on iOS 11.0 */
    padding-top: constant(safe-area-inset-top);

    /* Status bar height on iOS 11+ */
    padding-top: env(safe-area-inset-top);
}

Those should be passed through as-is.

http://ayogo.com/blog/ios11-viewport/

[MoOx]

So that's probably a postcss issue. cssnext does nothing about this constant (now env) function

[MoOx]

It's clearly a parsing issue. So please reopen over there (if not already opened or fixed).

[Semigradsky]

Looks like constant/env are not yet in the spec https://drafts.csswg.org/css-variables/.

[MoOx]

probably, but since iPhone X is out an everyone is going to adjust their website, it should be supported by postcss anyway, (which support non valid syntax like sass etc)

[Semigradsky]

I see that PostCSS is parsing previous code well. Not problems in postcss-value-parser too.

[Semigradsky]

Oh, I have reproduced this.

[supermoos]

What's the status on getting this into a release?

[grzegorzjudas]

Having the same problem with this:

@value large from './mediaqueries.css';
@value spacing-large from './spacings.css';

.someSpacing {
  @media large {
    margin-bottom: calc(spacing-large * 3)
  }
}

resulting in:

ERROR in ./node_modules/css-loader??ref--6-1!./node_modules/postcss-loader/lib??postcss!../src/Heading/style.css
Module build failed: Error: Parse error on line 1:
i__const_spacing_lar
^
Expecting 'SUB', 'LPAREN', 'NESTED_CALC', 'NUMBER', 'CSS_VAR', 'LENGTH', 'ANGLE', 'TIME', 'FREQ', 'RES', 'EMS', 'EXS', 'CHS', 'REMS', 'VHS', 'VWS', 'VMINS', 'VMAXS', 'PERCENTAGE', got 'PREFIX'
    at Parser.parseError (/project/node_modules/postcss-calc/node_modules/reduce-css-calc/dist/parser.js:160:21)

Using postcss-modules-values and postcss-calc (seems to be a regression, since it used to work in postcss-calc v5, and stops working in v6 (which changes reduce-css-calc dependency version from 1.2.6 to 2.0.0.

[zoosky]

Using Framework7 in Vuejs affected. See framework7io/framework7#2539

To reproduce use https://github.com/zoosky/framework7-template-split-vue-webpack.git

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.

Background, see:

• https://webkit.org/blog/7929/designing-websites-for-iphone-x/
• https://medium.com/@draganeror/iphone-x-layout-features-with-css-environment-variables-d57423433dec

[guylando]

Simple workaround:
In node_modules\reduce-css-calc\dist\index.js file

Change:
// skip anything which isn't a calc() function
if (node.type !== 'function' || !MATCH_CALC.test(node.value)) return;

// stringify calc expression and produce an AST
var contents = _postcssValueParser2.default.stringify(node.nodes);
var ast = _parser.parser.parse(contents);

To:
// skip anything which isn't a calc() function
if (node.type !== 'function' || !MATCH_CALC.test(node.value)) return;

// stringify calc expression and produce an AST
var contents = _postcssValueParser2.default.stringify(node.nodes);
if (contents.indexOf('constant') >= 0 || contents.indexOf('env') >= 0) return;
var ast = _parser.parser.parse(contents);

[stefangrund]

@guylando Thanks, this works! 👍🏻 You should do a pull request with this change. :)

[demosglok]

.video { width: 100%; height: calc(width*56.25); }
this produces same error. seems it doesn't know what to do with width. browser works ok here, but css reducer don't. can we skip "width/height" as well?