support constant() and env()

[rodneyrehm]

Hey there,

in my build setup (optimize-css-assets-webpack-plugin using cssnano) I had to disable postcss-calc because it was killing any calc() that use constant() and env() (see Designing Websites for iPhone X). Note how the 100% turned into 1:

Input

body {
  height: 100%;
  /* iPhone X on iOS 11.0 */
  height: calc(100% + constant(safe-area-inset-top) + constant(safe-area-inset-bottom));
  /* iPhone X on iOS 11+ */
  height: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
}

Output

body {
  height: 100%;
  height: calc(1 + constant(safe-area-inset-top) + constant(safe-area-inset-bottom));
  height: calc(1 + env(safe-area-inset-top) + env(safe-area-inset-bottom))
}

I tried producing a minimal test case with only postcss-calc, but all I got was:

➜  node index.js
/…/post-css-calc/node_modules/postcss/lib/lazy-result.js:280
            throw error;
            ^

Error: Parse error on line 1:
100% + 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'
    at Parser.parseError (/…/post-css-calc/node_modules/reduce-css-calc/dist/parser.js:160:21)
    at Parser.parse (/…/post-css-calc/node_modules/reduce-css-calc/dist/parser.js:226:22)
    at /…/post-css-calc/node_modules/reduce-css-calc/dist/index.js:35:30
    at walk (/…/post-css-calc/node_modules/postcss-value-parser/lib/walk.js:15:13)
    at ValueParser.walk (/…/post-css-calc/node_modules/postcss-value-parser/lib/index.js:18:5)
    at exports.default (/…/post-css-calc/node_modules/reduce-css-calc/dist/index.js:29:51)
    at transformValue (/…/post-css-calc/node_modules/postcss-calc/dist/lib/transform.js:24:45)
    at exports.default (/…/post-css-calc/node_modules/postcss-calc/dist/lib/transform.js:54:100)
    at /…/post-css-calc/node_modules/postcss-calc/dist/index.js:28:52
    at /…/post-css-calc/node_modules/postcss/lib/container.js:144:26

[Semigradsky]

Related to MoOx/reduce-css-calc#34

[Aaronphy]

How to deal with ?

[jonathantneal]

Is there a spec for constant yet?

[Semigradsky]

constant will not be in the specification ever - it renamed to env.
But env not in spec yet too
w3c/csswg-drafts#1693
I think that needs one more supported browser.

[zoosky]

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

[zoosky]

See MoOx/reduce-css-calc#34

[MarvinXu]

does disabling postcss-calc work? I am trying to find a fix

[guylando]

FYI: I wrote a simple workaround in a comment in MoOx/reduce-css-calc#34

[natiz]

+1

[pujiaxun]

Please update the dependence of reduce-css-calc~
This has been fixed recently
MoOx/reduce-css-calc#48

[andyjansson]

Should be fixed in latest release.

[demosglok]

.video { width: 100%; height: calc(width*56.25); }

this produces same error. could we probably update post-css-calc to handle "width/height" also?

[andyjansson]

could we probably update post-css-calc to handle "width/height" also?

@demosglok Why would we? I don't see this in any of the specifications, and it doesn't work in any of the browsers I've tested.

[demosglok]

works fine in chrome. and in mobile browsers. i'll retest

[guylando]

where is the reference for this syntax: height: calc(width*56.25)

according to this, its not supported:
https://stackoverflow.com/questions/11243075/css-scale-height-to-match-width-possibly-with-a-formfactor#comment36903688_11243226

also note that you must have spaces around operators inside calc

[demosglok]

ok, i retested everywhere. seems not working, though one laptop with latest chrome worked well for mobile mode (devtools->check mobile icon)

so not relevant for now, seems