Using env (previously constant) in a calc

[gpmcadam]

Using env (previously constant) within a calc throws a syntax error e.g.

padding-left: calc(10px + env(safe-area-inset-left));

This should be valid CSS, but postcss-cssnext flags it as a syntax error:

Error: Parse error on line 1: 10px + env(safe-area-inset- -------^ Expecting 'SUB', 'LPAREN', 'NESTED_CALC', 'NUMBER', 'CSS_VAR', 'LENGTH', 'ANGLE', 'TIME', 'FREQ', 'RES', 'EMS', 'EXS', 'CHS', 'REMS', 'VHS', 'VWS', 'VMINS', 'VMAXS', 'PERCENTAGE', got 'PREFIX'

See:

• https://www.quirksmode.org/blog/archives/2017/10/safeareainset_v.html
• https://css-tricks.com/the-notch-and-css/
• https://webkit.org/blog/7929/designing-websites-for-iphone-x/

[vadikom]

I ran into the same issue. For now, the only solution I've figured is disabling reduce-css-calc - e.g.:

require('postcss-cssnext')({
  features: {
    calc: false
  }
  ...

Of course, this has its own implications.

[gpmcadam]

@vadikom Thanks for the response.

Is this something that should be raised as an issue with reduce-css-calc do you think?

[vadikom]

I believe it's actually a known issue:

MoOx/reduce-css-calc#34

[jonathantneal]

Possibly resolved by #445 as a side effect of dropping calc minification.

[MoOx]

postcss-cssnext has been deprecated in favor of postcss-preset-env. Read more at https://moox.io/blog/deprecating-cssnext/