fallback util to support fallback values

[BANOnotIT]

Problem

CSS supports fallback mechanism by order of properties declaration. Quote from #1109:

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 [dvh] unit will ignore that declaration and fall back to the previous one.

While in #1109 it was proposed to use PostCSS plugin, that only addresses general problems, like usage of dvh, but does not address browser specific syntax or preferred behavior as shown in #2992

Proposed solution

Implement fallback() function that generates utility classes employing fallback mechanism. Example:

import { css, fallback } from "styled-system/css"

const className = css({
  height: fallback("calc(100dvh - 100px)", "calc(100vh - 100px)")
})

that'll result in following css:

.height_calc\(100dvh_-_100px\)___calc\(100vh_-_100px\) {
  height: calc(100vh - 100px);
  height: calc(100dvh - 100px);
}

Proposed syntax

type FallbackArray = unknown /* implementation dependent */

function fallback<val = AnyString>(
  preferredValue: val,
  fallback0: val,
  ...fallbacks: val[]
): FallbackArray;

Considered options

• Order of values is preferred-to-fallback to help people hanlding values quickly. fallback-to-preferred order, used in native CSS, was born from technical considirations, not developer usability.
• Array syntax (as in vanilla-extract) is already used in responsive values and responsive values are seem to be used much frequently than fallbacks.

Related discussions:

• Add syntax for setting fallback values #1109
• How do I set webkit fallback value? #2992