How to work with fallbacks?

[danielberndt]

Hello there:

I've got the following use case:

.screenHeight {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

how do I do this using treat?

I was hoping this syntax I've seen for other css-in-js libs would work, but it seems like it didn't:

const screenHeight = style({minHeight: ["100vh", "-webkit-fill-available"]});

[maraisr]

Yeah would be nice to have this support. We'd need it to handle this "safe-area" things for iOS.

https://webkit.org/blog/7929/designing-websites-for-iphone-x/

[danielberndt]

Good news! Seems like treat's successor vanilla-extract seems to have support for this syntax:

style({
  height: ["100vh", "-webkit-fill-available"]
});