Support or document CSS fallback property usage

[mntnoe]

Is your feature request related to a problem? Please describe.

We still need to use CSS fallback properties from time to time, even on modern browsers, for instance:

min-height: 100vh;
min-height: -webkit-fill-available;

It doesn't look like this is currently supported in Stitches, at least I couldn't find any documentation on it.

Describe the solution you'd like

Emotion and free-style use arrays to express this:

minHeight: [
  '100vh',
  '-webkit-fill-available'
]

[peduarte]

You can rely on utils for this. Example: https://codesandbox.io/s/gifted-brown-9wfqb?file=/src/stitches.config.ts:94-295

[mntnoe]

Thanks for the workaround! I will use this for now, and understand that adding support may complicate typings even more. I hope to see support for this added at some point, though.

[jonathantneal]

This is now an RFC, because it would change how Stitches works.

[peduarte]

Sorry, just changing this back to an idea. It's not spec'ed enough to be an RFC.

[peduarte]

Im hesitant to allow arrays for values. It makes typing more complex and makes the code less concise.

There are two ways to do this, via utils, or via multiple arguments.

I'd recommend using multiple arguments, because Stitches is able to correctly merge them.

styled('div', { minHeight: '100vh' }, { minHeight: '-webkit-fill-available' })

Demo here: https://codesandbox.io/s/weathered-forest-p73jn?file=/src/App.tsx

[mntnoe]

Using multiple arguments should be fine for the few cases where fallback properties are still necessary. No need to complicate typings and implementation even more because of this. It might be a good idea to document this solution, though.

[lukerohanbailey]

Using multiple arguments doesn't actually work here as Stitches will output each argument as its own class. For fallback CSS to work both properties need to be set on the same class.

In addition, I'm finding that minHeight: "100vh; min-height: -webkit-fill-available;" style declarations are not resulting in both properties being added, it chooses the last one.

As far as I can see the latest Stitches versions don't provide a way to add fallback CSS?

[mntnoe]

Good point. Didn't notice this, as I've used globalCss for this particular case to style the toplevel elements. I guess globalCss can be used as a workaround in other places as well? It's not optimal though, as it won't work in every case.

[LexSwed]

I think you can you @supports in this case:

{
  minHeight: "100vh",
  "@supports (height: -webkit-fill-available)": {
    minHeight: "-webkit-fill-available"
  }
}

https://codesandbox.io/s/stitches-fallback-values-rxddyn?file=/src/App.tsx