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.