Fallbacks: firstThatWorks

firstThatWorks(wanted, ...fallbacks) is a part of any property: the value you want comes first, then what to use where it fails.

import { const border: Prop<"border">`<line-width> || <line-style> || <color>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/border)border, const color: Prop<"color">`<color>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/color)color, const firstThatWorks: <const V extends readonly [Alt, Alt, ...Alt[]]>(...values: V) => Fallback<V>`minHeight(firstThatWorks("100dvh", "100vh"))`: the value you want, then what to use where it fails. A part of any
property; the build emits one class with all the declarations, the wanted one last. Each value is checked for the property.firstThatWorks, const minHeight: Prop<"min-height">`auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>`. Chrome 1, Edge 12, Firefox 3, Safari 1.3, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/min-height)minHeight, const token: {
    readonly number: TokenFn<"number">;
    readonly color: TokenFn<"color">;
    readonly length: TokenFn<"length">;
    readonly percentage: TokenFn<"percentage">;
    readonly integer: TokenFn<"integer">;
    readonly angle: TokenFn<"angle">;
    readonly time: TokenFn<"time">;
    readonly resolution: TokenFn<"resolution">;
    readonly url: TokenFn<"url">;
    readonly image: TokenFn<"image">;
    readonly shadow: TokenFn<"shadow">;
    readonly lengthPercentage: TokenFn<"lengthPercentage">;
    readonly customIdent: TokenFn<...>;
    readonly transformList: TokenFn<...>;
    readonly easingFunction: TokenFn<...>;
} & {
    ...;
}`token.<type>(initial, name?)`: a Typed OM value of the type, `var(--name)`. With a name it can be set.token } from "cssints" with { type: "cssints" };

const const brand: Token<"color", true, string>brand = const token: {
    readonly number: TokenFn<"number">;
    readonly color: TokenFn<"color">;
    readonly length: TokenFn<"length">;
    readonly percentage: TokenFn<"percentage">;
    readonly integer: TokenFn<"integer">;
    readonly angle: TokenFn<"angle">;
    readonly time: TokenFn<"time">;
    readonly resolution: TokenFn<"resolution">;
    readonly url: TokenFn<"url">;
    readonly image: TokenFn<"image">;
    readonly shadow: TokenFn<"shadow">;
    readonly lengthPercentage: TokenFn<"lengthPercentage">;
    readonly customIdent: TokenFn<...>;
    readonly transformList: TokenFn<...>;
    readonly easingFunction: TokenFn<...>;
} & {
    ...;
}`token.<type>(initial, name?)`: a Typed OM value of the type, `var(--name)`. With a name it can be set.token.color: <"#0057b8", "brand">(initial: "#0057b8", name?: "brand" | undefined) => Token<"color", true, string>color("#0057b8", "brand");

export const const a: Stylea = minHeight<readonly [Fallback<readonly ["100dvh", "100vh"]>]>(parts_0: Fallback<readonly ["100dvh", "100vh"]>): Style`auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>`. Chrome 1, Edge 12, Firefox 3, Safari 1.3, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/min-height)minHeight(firstThatWorks<readonly ["100dvh", "100vh"]>(values_0: "100dvh", values_1: "100vh"): Fallback<readonly ["100dvh", "100vh"]>`minHeight(firstThatWorks("100dvh", "100vh"))`: the value you want, then what to use where it fails. A part of any
property; the build emits one class with all the declarations, the wanted one last. Each value is checked for the property.firstThatWorks("100dvh", "100vh"));
export const const b: Styleb = color<readonly [Fallback<readonly ["oklch(55% 0.18 250)", Token<"color", true, string>]>]>(parts_0: Fallback<readonly ["oklch(55% 0.18 250)", Token<"color", true, string>]>): Style`<color>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/color)color(firstThatWorks<readonly ["oklch(55% 0.18 250)", Token<"color", true, string>]>(values_0: "oklch(55% 0.18 250)", values_1: Token<"color", true, string>): Fallback<readonly ["oklch(55% 0.18 250)", Token<"color", true, string>]>`minHeight(firstThatWorks("100dvh", "100vh"))`: the value you want, then what to use where it fails. A part of any
property; the build emits one class with all the declarations, the wanted one last. Each value is checked for the property.firstThatWorks("oklch(55% 0.18 250)", const brand: Token<"color", true, string>brand));
export const const c: Stylec = border<readonly ["1px", Fallback<readonly ["solid", "dashed"]>, "red"]>(parts_0: "1px", parts_1: Fallback<readonly ["solid", "dashed"]>, parts_2: "red"): Style`<line-width> || <line-style> || <color>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/border)border("1px", firstThatWorks<readonly ["solid", "dashed"]>(values_0: "solid", values_1: "dashed"): Fallback<readonly ["solid", "dashed"]>`minHeight(firstThatWorks("100dvh", "100vh"))`: the value you want, then what to use where it fails. A part of any
property; the build emits one class with all the declarations, the wanted one last. Each value is checked for the property.firstThatWorks("solid", "dashed"), "red");
export const const d: Styled = minHeight<readonly [Fallback<readonly ["100dvh", "100vhh"]>]>(parts_0: "min-height: unexpected \"100vhh\" in \"100vhh\", grammar auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>"): Style`auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>`. Chrome 1, Edge 12, Firefox 3, Safari 1.3, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/min-height)minHeight(firstThatWorks("100dvh", "100vhh")); // error: the fallback is not a min-heightArgument of type 'Fallback<readonly ["100dvh", "100vhh"]>' is not assignable to parameter of type '"min-height: unexpected \"100vhh\" in \"100vhh\", grammar auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>"'.

One class. a is one class, .x { min-height: 100vh; min-height: 100dvh }: the declarations in CSS order, the wanted value last, so cn() and the sheet treat it as one rule. With three values the last is printed first.
Checked per value. Every value is checked for the property, in types and at build time, as the whole declaration with that value in its place. The type error is on the firstThatWorks(...) part and the message names the bad value.
Values are strings and Typed OM values (tokens); var() is fine. A number is not (p(4) has no fallback), nor is a style.
In several parts the whole declaration is repeated with each value (c: border: 1px dashed red; border: 1px solid red). One firstThatWorks per declaration; two are an error.
Support warnings. A target that lacks the wanted value gets no warning if it supports a fallback. The warning stays, for the targets that lack every value, and says so: color: "color-mix()" in "color-mix(in srgb, var(--brand), blue)" is not supported by chrome 100 (css.types.color.color-mix), and no fallback of its firstThatWorks covers them (a literal oklch() would not warn at all: LightningCSS lowers it).
Minify. Vite's CSS minify decides which of the declarations LightningCSS may drop, from build.cssTarget (set it to cssTarget of cssints/vite, see the README), not from css.lightningcss.targets. With the targets it keeps min-height: 100vh; min-height: 100dvh where a target lacks dvh and merges them where none does; with cssTarget: false it always merges.
Limits. It is not a Typed OM value: a typed position (token.length(firstThatWorks(...))) rejects it, and so does style() (an inline style holds one value per property). const f = firstThatWorks(...) is build-time only, like a condition: the client has null. The fallback is for values a browser drops; @supports is for styles that are not one declaration.