Add syntax for setting fallback values

[fabb]

Description

As described in #846, it would be helpful if there was a way to define multiple values for the same property.

Example in plain css:

height: calc(100vh - 100px);
height: calc(100dvh - 100px);

Browsers will automatically apply the last declaration they understand. Old browsers that do not understand the dwh unit will ignore that declaration and fall back to the previous one.

In styled-components it's possible to utilize this when using the template literal syntax.

Problem Statement/Justification

Sometimes we need to write backwards-compatible css for older browsers. Ideally with good deleteability. So it would be great to be able to utilize this browser-native way of declaring fallback values.

Proposed Solution or API

Not really sure because array syntax is already used as an alternative syntax for defining responsive styles.

Alternatives

A complicated workaround is shown in #846. Not really great though.

Additional Information

E.g. this is how vanilla-extract does it: https://vanilla-extract.style/documentation/styling/#fallback-styles

[astahmer]

isn't there a postcss plugin for that kind of logic ?

[fabb]

Not sure why this feature request was resolved without comment 🤷

[anubra266]

@fabb #1109 (comment)
Panda only aims to cater as an essential styling solution. Many of the features you might need just need you to hook a postcss plugin into panda.

[punkpeye]

What about something like this #2992 ?