@jcsoftdev/ui 0.1.7 → 0.2.0

package/src/utils/class-groups.ts

@@ -0,0 +1,851 @@
+import {
+  isAny,
+  isAnyNonArbitrary,
+  isArbitraryFamilyName,
+  isArbitraryImage,
+  isArbitraryLength,
+  isArbitraryNumber,
+  isArbitraryPosition,
+  isArbitraryShadow,
+  isArbitrarySize,
+  isArbitraryValue,
+  isArbitraryVariable,
+  isArbitraryVariableFamilyName,
+  isArbitraryVariableImage,
+  isArbitraryVariableLength,
+  isArbitraryVariablePosition,
+  isArbitraryVariableShadow,
+  isArbitraryVariableSize,
+  isArbitraryVariableWeight,
+  isArbitraryWeight,
+  isFraction,
+  isInteger,
+  isNamedContainerQuery,
+  isNumber,
+  isPercent,
+  isTshirtSize,
+  type Validator,
+} from "./class-validators.js";
+
+/** A class group value: a literal, a validator, a theme scale reference, or a nested `{ part: values }` branch. */
+export type Def = string | Validator | ThemeRef | { [part: string]: Def[] };
+/** `[groupId, prefix, values]`: `prefix-value` joins to `groupId`; an empty prefix means a bare class. */
+export type GroupEntry = [id: string, prefix: string, values: Def[]];
+
+/** Theme namespaces consumers can extend with their own tokens. */
+export type ThemeKey = "text" | "spacing" | "radius" | "shadow" | "color";
+
+/** Placeholder for a theme scale; resolved per merger so each instance sees its own tokens. */
+export interface ThemeRef {
+  $theme: ThemeKey;
+}
+
+export { RADII, SHADOWS, SPACINGS, TEXT_SIZES } from "./class-tokens.generated.js";
+
+const theme = (key: ThemeKey): ThemeRef => ({ $theme: key });
+
+// Theme scales (Tailwind v4 namespaces). Only the namespaces the kit extends take tokens.
+const color: Def[] = [isAny, theme("color")];
+const container: Def[] = [isTshirtSize];
+const breakpoint: Def[] = [isTshirtSize];
+const spacingScale: Def[] = ["px", isNumber, theme("spacing")];
+const textScale: Def[] = [isTshirtSize, theme("text")];
+const radiusScale: Def[] = [isTshirtSize, theme("radius")];
+const shadowScale: Def[] = [isTshirtSize, theme("shadow")];
+
+const unambiguousSpacing: Def[] = [isArbitraryVariable, isArbitraryValue, ...spacingScale];
+const inset: Def[] = [isFraction, "full", "auto", ...unambiguousSpacing];
+const margin: Def[] = ["auto", ...unambiguousSpacing];
+const sizing: Def[] = [
+  isFraction,
+  "auto",
+  "full",
+  "dvw",
+  "dvh",
+  "lvw",
+  "lvh",
+  "svw",
+  "svh",
+  "min",
+  "max",
+  "fit",
+  ...unambiguousSpacing,
+];
+const sizingInline: Def[] = [
+  ...container,
+  isFraction,
+  "screen",
+  "full",
+  "dvw",
+  "lvw",
+  "svw",
+  "min",
+  "max",
+  "fit",
+  ...unambiguousSpacing,
+];
+const sizingBlock: Def[] = [
+  isFraction,
+  "screen",
+  "full",
+  "lh",
+  "dvh",
+  "lvh",
+  "svh",
+  "min",
+  "max",
+  "fit",
+  ...unambiguousSpacing,
+];
+const colorScale: Def[] = [...color, isArbitraryVariable, isArbitraryValue];
+const position = [
+  "center",
+  "top",
+  "bottom",
+  "left",
+  "right",
+  "top-left",
+  "left-top",
+  "top-right",
+  "right-top",
+  "bottom-right",
+  "right-bottom",
+  "bottom-left",
+  "left-bottom",
+];
+const positionWithArbitrary: Def[] = [...position, isArbitraryVariable, isArbitraryValue];
+const bgPosition: Def[] = [
+  ...position,
+  isArbitraryVariablePosition,
+  isArbitraryPosition,
+  { position: [isArbitraryVariable, isArbitraryValue] },
+];
+const bgRepeat: Def[] = ["no-repeat", { repeat: ["", "x", "y", "space", "round"] }];
+const bgSize: Def[] = [
+  "auto",
+  "cover",
+  "contain",
+  isArbitraryVariableSize,
+  isArbitrarySize,
+  { size: [isArbitraryVariable, isArbitraryValue] },
+];
+const gradientStopPosition: Def[] = [isPercent, isArbitraryVariableLength, isArbitraryLength];
+const radius: Def[] = ["", "none", "full", ...radiusScale, isArbitraryVariable, isArbitraryValue];
+const borderWidth: Def[] = ["", isNumber, isArbitraryVariableLength, isArbitraryLength];
+const lineStyle = ["solid", "dashed", "dotted", "double"];
+const blendMode = [
+  "normal",
+  "multiply",
+  "screen",
+  "overlay",
+  "darken",
+  "lighten",
+  "color-dodge",
+  "color-burn",
+  "hard-light",
+  "soft-light",
+  "difference",
+  "exclusion",
+  "hue",
+  "saturation",
+  "color",
+  "luminosity",
+];
+const maskImagePosition: Def[] = [
+  isNumber,
+  isPercent,
+  isArbitraryVariablePosition,
+  isArbitraryPosition,
+];
+const blur: Def[] = ["", "none", isTshirtSize, isArbitraryVariable, isArbitraryValue];
+const rotate: Def[] = ["none", isNumber, isArbitraryVariable, isArbitraryValue];
+const scale: Def[] = ["none", isNumber, isArbitraryVariable, isArbitraryValue];
+const skew: Def[] = [isNumber, isArbitraryVariable, isArbitraryValue];
+const translate: Def[] = [isFraction, "full", ...unambiguousSpacing];
+const alignPrimary = [
+  "start",
+  "end",
+  "center",
+  "between",
+  "around",
+  "evenly",
+  "stretch",
+  "baseline",
+  "center-safe",
+  "end-safe",
+];
+const alignSecondary = ["start", "end", "center", "stretch", "center-safe", "end-safe"];
+const gridTemplate: Def[] = [isInteger, "none", "subgrid", isArbitraryVariable, isArbitraryValue];
+const gridStartAndEnd: Def[] = [
+  "auto",
+  { span: ["full", isInteger, isArbitraryVariable, isArbitraryValue] },
+  isInteger,
+  isArbitraryVariable,
+  isArbitraryValue,
+];
+const gridStartOrEnd: Def[] = [isInteger, "auto", isArbitraryVariable, isArbitraryValue];
+const gridAuto: Def[] = ["auto", "min", "max", "fr", isArbitraryVariable, isArbitraryValue];
+const breakScale = ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"];
+const overflow = ["auto", "hidden", "clip", "visible", "scroll"];
+const overscroll = ["auto", "contain", "none"];
+const num: Def[] = [isNumber, isArbitraryVariable, isArbitraryValue];
+const optNum: Def[] = ["", isNumber, isArbitraryVariable, isArbitraryValue];
+
+const SIDES = ["t", "r", "b", "l"];
+const AXES = ["x", "y", "s", "e", "bs", "be", ...SIDES];
+const ROUNDED_PARTS = [
+  "",
+  "s",
+  "e",
+  "t",
+  "r",
+  "b",
+  "l",
+  "ss",
+  "se",
+  "ee",
+  "es",
+  "tl",
+  "tr",
+  "br",
+  "bl",
+];
+const WITH_ROOT = ["", ...AXES];
+
+/** One group per side/axis: `("p", "p", ["", "x"], v)` gives `p` and `px`; `joiner` sits before the side. */
+function perSide(
+  id: string,
+  prefix: string,
+  sides: string[],
+  values: Def[],
+  joiner = "",
+): GroupEntry[] {
+  return sides.map((s) => [
+    s ? `${id}${joiner}${s}` : id,
+    s ? `${prefix}${joiner}${s}` : prefix,
+    values,
+  ]);
+}
+
+/** `mask-image-*` from/to stops: a position group then a color group per edge. */
+function maskStops(edges: string[]): GroupEntry[] {
+  const out: GroupEntry[] = [];
+  for (const edge of edges) {
+    for (const end of ["from", "to"]) {
+      out.push([`mask-image-${edge}-${end}-pos`, `mask-${edge}-${end}`, maskImagePosition]);
+    }
+    for (const end of ["from", "to"]) {
+      out.push([`mask-image-${edge}-${end}-color`, `mask-${edge}-${end}`, colorScale]);
+    }
+  }
+  return out;
+}
+
+/** Registration order matters: validators on the same prefix are tried in this order. */
+export const GROUPS: GroupEntry[] = [
+  [
+    "aspect",
+    "aspect",
+    ["auto", "square", isFraction, isArbitraryValue, isArbitraryVariable, "video"],
+  ],
+  ["container", "", ["container"]],
+  ["container-type", "@container", ["", "normal", "size", isArbitraryVariable, isArbitraryValue]],
+  ["container-named", "", [isNamedContainerQuery]],
+  ["columns", "columns", [isNumber, "auto", isArbitraryValue, isArbitraryVariable, ...container]],
+  ["break-after", "break-after", breakScale],
+  ["break-before", "break-before", breakScale],
+  ["break-inside", "break-inside", ["auto", "avoid", "avoid-page", "avoid-column"]],
+  ["box-decoration", "box-decoration", ["slice", "clone"]],
+  ["box", "box", ["border", "content"]],
+  [
+    "display",
+    "",
+    [
+      "block",
+      "inline-block",
+      "inline",
+      "flex",
+      "inline-flex",
+      "table",
+      "inline-table",
+      "table-caption",
+      "table-cell",
+      "table-column",
+      "table-column-group",
+      "table-footer-group",
+      "table-header-group",
+      "table-row-group",
+      "table-row",
+      "flow-root",
+      "grid",
+      "inline-grid",
+      "contents",
+      "list-item",
+      "hidden",
+    ],
+  ],
+  ["sr", "", ["sr-only", "not-sr-only"]],
+  ["float", "float", ["right", "left", "none", "start", "end"]],
+  ["clear", "clear", ["left", "right", "both", "none", "start", "end"]],
+  ["isolation", "", ["isolate", "isolation-auto"]],
+  ["object-fit", "object", ["contain", "cover", "fill", "none", "scale-down"]],
+  ["object-position", "object", positionWithArbitrary],
+  ["overflow", "overflow", overflow],
+  ["overflow-x", "overflow-x", overflow],
+  ["overflow-y", "overflow-y", overflow],
+  ["overscroll", "overscroll", overscroll],
+  ["overscroll-x", "overscroll-x", overscroll],
+  ["overscroll-y", "overscroll-y", overscroll],
+  ["position", "", ["static", "fixed", "absolute", "relative", "sticky"]],
+  ["inset", "inset", inset],
+  ["inset-x", "inset-x", inset],
+  ["inset-y", "inset-y", inset],
+  ["start", "inset-s", inset],
+  ["start", "start", inset],
+  ["end", "inset-e", inset],
+  ["end", "end", inset],
+  ["inset-bs", "inset-bs", inset],
+  ["inset-be", "inset-be", inset],
+  ["top", "top", inset],
+  ["right", "right", inset],
+  ["bottom", "bottom", inset],
+  ["left", "left", inset],
+  ["visibility", "", ["visible", "invisible", "collapse"]],
+  ["z", "z", [isInteger, "auto", isArbitraryVariable, isArbitraryValue]],
+
+  ["basis", "basis", [isFraction, "full", "auto", ...container, ...unambiguousSpacing]],
+  ["flex-direction", "flex", ["row", "row-reverse", "col", "col-reverse"]],
+  ["flex-wrap", "flex", ["nowrap", "wrap", "wrap-reverse"]],
+  ["flex", "flex", [isNumber, isFraction, "auto", "initial", "none", isArbitraryValue]],
+  ["grow", "grow", optNum],
+  ["shrink", "shrink", optNum],
+  ["order", "order", [isInteger, "first", "last", "none", isArbitraryVariable, isArbitraryValue]],
+  ["grid-cols", "grid-cols", gridTemplate],
+  ["col-start-end", "col", gridStartAndEnd],
+  ["col-start", "col-start", gridStartOrEnd],
+  ["col-end", "col-end", gridStartOrEnd],
+  ["grid-rows", "grid-rows", gridTemplate],
+  ["row-start-end", "row", gridStartAndEnd],
+  ["row-start", "row-start", gridStartOrEnd],
+  ["row-end", "row-end", gridStartOrEnd],
+  ["grid-flow", "grid-flow", ["row", "col", "dense", "row-dense", "col-dense"]],
+  ["auto-cols", "auto-cols", gridAuto],
+  ["auto-rows", "auto-rows", gridAuto],
+  ["gap", "gap", unambiguousSpacing],
+  ["gap-x", "gap-x", unambiguousSpacing],
+  ["gap-y", "gap-y", unambiguousSpacing],
+  ["justify-content", "justify", [...alignPrimary, "normal"]],
+  ["justify-items", "justify-items", [...alignSecondary, "normal"]],
+  ["justify-self", "justify-self", ["auto", ...alignSecondary]],
+  ["align-content", "content", ["normal", ...alignPrimary]],
+  ["align-items", "items", [...alignSecondary, { baseline: ["", "last"] }]],
+  ["align-self", "self", ["auto", ...alignSecondary, { baseline: ["", "last"] }]],
+  ["place-content", "place-content", alignPrimary],
+  ["place-items", "place-items", [...alignSecondary, "baseline"]],
+  ["place-self", "place-self", ["auto", ...alignSecondary]],
+
+  ...perSide("p", "p", WITH_ROOT, unambiguousSpacing),
+  ...perSide("m", "m", WITH_ROOT, margin),
+  ["space-x", "space-x", unambiguousSpacing],
+  ["space-x-reverse", "", ["space-x-reverse"]],
+  ["space-y", "space-y", unambiguousSpacing],
+  ["space-y-reverse", "", ["space-y-reverse"]],
+
+  ["size", "size", sizing],
+  ["inline-size", "inline", ["auto", ...sizingInline]],
+  ["min-inline-size", "min-inline", ["auto", ...sizingInline]],
+  ["max-inline-size", "max-inline", ["none", ...sizingInline]],
+  ["block-size", "block", ["auto", ...sizingBlock]],
+  ["min-block-size", "min-block", ["auto", ...sizingBlock]],
+  ["max-block-size", "max-block", ["none", ...sizingBlock]],
+  ["w", "w", [...container, "screen", ...sizing]],
+  ["min-w", "min-w", [...container, "screen", "none", ...sizing]],
+  ["max-w", "max-w", [...container, "screen", "none", "prose", { screen: breakpoint }, ...sizing]],
+  ["h", "h", ["screen", "lh", ...sizing]],
+  ["min-h", "min-h", ["screen", "lh", "none", ...sizing]],
+  ["max-h", "max-h", ["screen", "lh", "none", ...sizing]],
+
+  ["font-size", "text", ["base", ...textScale, isArbitraryVariableLength, isArbitraryLength]],
+  ["font-smoothing", "", ["antialiased", "subpixel-antialiased"]],
+  ["font-style", "", ["italic", "not-italic"]],
+  [
+    "font-weight",
+    "font",
+    [
+      "thin",
+      "extralight",
+      "light",
+      "normal",
+      "medium",
+      "semibold",
+      "bold",
+      "extrabold",
+      "black",
+      isArbitraryVariableWeight,
+      isArbitraryWeight,
+    ],
+  ],
+  [
+    "font-stretch",
+    "font-stretch",
+    [
+      "ultra-condensed",
+      "extra-condensed",
+      "condensed",
+      "semi-condensed",
+      "normal",
+      "semi-expanded",
+      "expanded",
+      "extra-expanded",
+      "ultra-expanded",
+      isPercent,
+      isArbitraryValue,
+    ],
+  ],
+  [
+    "font-family",
+    "font",
+    [isArbitraryVariableFamilyName, isArbitraryFamilyName, isAnyNonArbitrary],
+  ],
+  ["font-features", "font-features", [isArbitraryValue]],
+  ["fvn-normal", "", ["normal-nums"]],
+  ["fvn-ordinal", "", ["ordinal"]],
+  ["fvn-slashed-zero", "", ["slashed-zero"]],
+  ["fvn-figure", "", ["lining-nums", "oldstyle-nums"]],
+  ["fvn-spacing", "", ["proportional-nums", "tabular-nums"]],
+  ["fvn-fraction", "", ["diagonal-fractions", "stacked-fractions"]],
+  [
+    "tracking",
+    "tracking",
+    [
+      "tighter",
+      "tight",
+      "normal",
+      "wide",
+      "wider",
+      "widest",
+      isArbitraryVariable,
+      isArbitraryValue,
+    ],
+  ],
+  ["line-clamp", "line-clamp", [isNumber, "none", isArbitraryVariable, isArbitraryNumber]],
+  [
+    "leading",
+    "leading",
+    ["none", "tight", "snug", "normal", "relaxed", "loose", ...unambiguousSpacing],
+  ],
+  ["list-image", "list-image", ["none", isArbitraryVariable, isArbitraryValue]],
+  ["list-style-position", "list", ["inside", "outside"]],
+  ["list-style-type", "list", ["disc", "decimal", "none", isArbitraryVariable, isArbitraryValue]],
+  ["text-alignment", "text", ["left", "center", "right", "justify", "start", "end"]],
+  ["placeholder-color", "placeholder", colorScale],
+  ["text-color", "text", colorScale],
+  ["text-decoration", "", ["underline", "overline", "line-through", "no-underline"]],
+  ["text-decoration-style", "decoration", [...lineStyle, "wavy"]],
+  [
+    "text-decoration-thickness",
+    "decoration",
+    [isNumber, "from-font", "auto", isArbitraryVariable, isArbitraryLength],
+  ],
+  ["text-decoration-color", "decoration", colorScale],
+  [
+    "underline-offset",
+    "underline-offset",
+    [isNumber, "auto", isArbitraryVariable, isArbitraryValue],
+  ],
+  ["text-transform", "", ["uppercase", "lowercase", "capitalize", "normal-case"]],
+  ["text-overflow", "", ["truncate", "text-ellipsis", "text-clip"]],
+  ["text-wrap", "text", ["wrap", "nowrap", "balance", "pretty"]],
+  ["indent", "indent", unambiguousSpacing],
+  ["tab-size", "tab", [isInteger, isArbitraryVariable, isArbitraryValue]],
+  [
+    "vertical-align",
+    "align",
+    [
+      "baseline",
+      "top",
+      "middle",
+      "bottom",
+      "text-top",
+      "text-bottom",
+      "sub",
+      "super",
+      isArbitraryVariable,
+      isArbitraryValue,
+    ],
+  ],
+  ["whitespace", "whitespace", ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces"]],
+  ["break", "break", ["normal", "words", "all", "keep"]],
+  ["wrap", "wrap", ["break-word", "anywhere", "normal"]],
+  ["hyphens", "hyphens", ["none", "manual", "auto"]],
+  ["content", "content", ["none", isArbitraryVariable, isArbitraryValue]],
+
+  ["bg-attachment", "bg", ["fixed", "local", "scroll"]],
+  ["bg-clip", "bg-clip", ["border", "padding", "content", "text"]],
+  ["bg-origin", "bg-origin", ["border", "padding", "content"]],
+  ["bg-position", "bg", bgPosition],
+  ["bg-repeat", "bg", bgRepeat],
+  ["bg-size", "bg", bgSize],
+  [
+    "bg-image",
+    "bg",
+    [
+      "none",
+      {
+        linear: [
+          { to: ["t", "tr", "r", "br", "b", "bl", "l", "tl"] },
+          isInteger,
+          isArbitraryVariable,
+          isArbitraryValue,
+        ],
+        radial: ["", isArbitraryVariable, isArbitraryValue],
+        conic: ["", isInteger, isArbitraryVariable, isArbitraryValue],
+      },
+      isArbitraryVariableImage,
+      isArbitraryImage,
+    ],
+  ],
+  ["bg-color", "bg", colorScale],
+  ["gradient-from-pos", "from", gradientStopPosition],
+  ["gradient-via-pos", "via", gradientStopPosition],
+  ["gradient-to-pos", "to", gradientStopPosition],
+  ["gradient-from", "from", colorScale],
+  ["gradient-via", "via", colorScale],
+  ["gradient-to", "to", colorScale],
+
+  ...perSide("rounded", "rounded", ROUNDED_PARTS, radius, "-"),
+  // The kit's `border-card|control|divider` edges set width, style and color together.
+  ["border-w", "border", [...borderWidth, "card", "control", "divider"]],
+  ...perSide("border-w", "border", AXES, borderWidth, "-"),
+  ["divide-x", "divide-x", borderWidth],
+  ["divide-x-reverse", "", ["divide-x-reverse"]],
+  ["divide-y", "divide-y", borderWidth],
+  ["divide-y-reverse", "", ["divide-y-reverse"]],
+  ["border-style", "border", [...lineStyle, "hidden", "none"]],
+  ["divide-style", "divide", [...lineStyle, "hidden", "none"]],
+  ["border-color", "border", colorScale],
+  ...perSide("border-color", "border", AXES, colorScale, "-"),
+  ["divide-color", "divide", colorScale],
+  ["outline-style", "outline", [...lineStyle, "none", "hidden"]],
+  ["outline-offset", "outline-offset", [isNumber, isArbitraryVariable, isArbitraryValue]],
+  ["outline-w", "outline", ["", isNumber, isArbitraryVariableLength, isArbitraryLength]],
+  ["outline-color", "outline", colorScale],
+
+  [
+    "shadow",
+    "shadow",
+    ["", "inner", "none", ...shadowScale, isArbitraryVariableShadow, isArbitraryShadow],
+  ],
+  ["shadow-color", "shadow", colorScale],
+  [
+    "inset-shadow",
+    "inset-shadow",
+    ["none", isTshirtSize, isArbitraryVariableShadow, isArbitraryShadow],
+  ],
+  ["inset-shadow-color", "inset-shadow", colorScale],
+  ["ring-w", "ring", borderWidth],
+  ["ring-w-inset", "", ["ring-inset"]],
+  ["ring-color", "ring", colorScale],
+  ["ring-offset-w", "ring-offset", [isNumber, isArbitraryLength]],
+  ["ring-offset-color", "ring-offset", colorScale],
+  ["inset-ring-w", "inset-ring", borderWidth],
+  ["inset-ring-color", "inset-ring", colorScale],
+  [
+    "text-shadow",
+    "text-shadow",
+    ["none", isTshirtSize, isArbitraryVariableShadow, isArbitraryShadow],
+  ],
+  ["text-shadow-color", "text-shadow", colorScale],
+  ["opacity", "opacity", num],
+  ["mix-blend", "mix-blend", [...blendMode, "plus-darker", "plus-lighter"]],
+  ["bg-blend", "bg-blend", blendMode],
+
+  ["mask-clip", "mask-clip", ["border", "padding", "content", "fill", "stroke", "view"]],
+  ["mask-clip", "", ["mask-no-clip"]],
+  ["mask-composite", "mask", ["add", "subtract", "intersect", "exclude"]],
+  ["mask-image-linear-pos", "mask-linear", [isNumber]],
+  ...maskStops(["linear", "t", "r", "b", "l", "x", "y"]),
+  ["mask-image-radial", "mask-radial", [isArbitraryVariable, isArbitraryValue]],
+  ...maskStops(["radial"]),
+  ["mask-image-radial-shape", "mask-radial", ["circle", "ellipse"]],
+  [
+    "mask-image-radial-size",
+    "mask-radial",
+    [{ closest: ["side", "corner"], farthest: ["side", "corner"] }],
+  ],
+  ["mask-image-radial-pos", "mask-radial-at", position],
+  ["mask-image-conic-pos", "mask-conic", [isNumber]],
+  ...maskStops(["conic"]),
+  ["mask-mode", "mask", ["alpha", "luminance", "match"]],
+  ["mask-origin", "mask-origin", ["border", "padding", "content", "fill", "stroke", "view"]],
+  ["mask-position", "mask", bgPosition],
+  ["mask-repeat", "mask", bgRepeat],
+  ["mask-size", "mask", bgSize],
+  ["mask-type", "mask-type", ["alpha", "luminance"]],
+  ["mask-image", "mask", ["none", isArbitraryVariable, isArbitraryValue]],
+
+  ["filter", "filter", ["", "none", isArbitraryVariable, isArbitraryValue]],
+  ["blur", "blur", blur],
+  ["brightness", "brightness", num],
+  ["contrast", "contrast", num],
+  [
+    "drop-shadow",
+    "drop-shadow",
+    ["", "none", isTshirtSize, isArbitraryVariableShadow, isArbitraryShadow],
+  ],
+  ["drop-shadow-color", "drop-shadow", colorScale],
+  ["grayscale", "grayscale", optNum],
+  ["hue-rotate", "hue-rotate", num],
+  ["invert", "invert", optNum],
+  ["saturate", "saturate", num],
+  ["sepia", "sepia", optNum],
+  ["backdrop-filter", "backdrop-filter", ["", "none", isArbitraryVariable, isArbitraryValue]],
+  ["backdrop-blur", "backdrop-blur", blur],
+  ["backdrop-brightness", "backdrop-brightness", num],
+  ["backdrop-contrast", "backdrop-contrast", num],
+  ["backdrop-grayscale", "backdrop-grayscale", optNum],
+  ["backdrop-hue-rotate", "backdrop-hue-rotate", num],
+  ["backdrop-invert", "backdrop-invert", optNum],
+  ["backdrop-opacity", "backdrop-opacity", num],
+  ["backdrop-saturate", "backdrop-saturate", num],
+  ["backdrop-sepia", "backdrop-sepia", optNum],
+
+  ["border-collapse", "border", ["collapse", "separate"]],
+  ["border-spacing", "border-spacing", unambiguousSpacing],
+  ["border-spacing-x", "border-spacing-x", unambiguousSpacing],
+  ["border-spacing-y", "border-spacing-y", unambiguousSpacing],
+  ["table-layout", "table", ["auto", "fixed"]],
+  ["caption", "caption", ["top", "bottom"]],
+
+  [
+    "transition",
+    "transition",
+    [
+      "",
+      "all",
+      "colors",
+      "opacity",
+      "shadow",
+      "transform",
+      "none",
+      isArbitraryVariable,
+      isArbitraryValue,
+    ],
+  ],
+  ["transition-behavior", "transition", ["normal", "discrete"]],
+  ["duration", "duration", [isNumber, "initial", isArbitraryVariable, isArbitraryValue]],
+  [
+    "ease",
+    "ease",
+    ["linear", "initial", "in", "out", "in-out", isArbitraryVariable, isArbitraryValue],
+  ],
+  ["delay", "delay", num],
+  [
+    "animate",
+    "animate",
+    ["none", "spin", "ping", "pulse", "bounce", isArbitraryVariable, isArbitraryValue],
+  ],
+
+  ["backface", "backface", ["hidden", "visible"]],
+  [
+    "perspective",
+    "perspective",
+    [
+      "dramatic",
+      "near",
+      "normal",
+      "midrange",
+      "distant",
+      "none",
+      isArbitraryVariable,
+      isArbitraryValue,
+    ],
+  ],
+  ["perspective-origin", "perspective-origin", positionWithArbitrary],
+  ["rotate", "rotate", rotate],
+  ["rotate-x", "rotate-x", rotate],
+  ["rotate-y", "rotate-y", rotate],
+  ["rotate-z", "rotate-z", rotate],
+  ["scale", "scale", scale],
+  ["scale-x", "scale-x", scale],
+  ["scale-y", "scale-y", scale],
+  ["scale-z", "scale-z", scale],
+  ["scale-3d", "", ["scale-3d"]],
+  ["skew", "skew", skew],
+  ["skew-x", "skew-x", skew],
+  ["skew-y", "skew-y", skew],
+  ["transform", "transform", [isArbitraryVariable, isArbitraryValue, "", "none", "gpu", "cpu"]],
+  ["transform-origin", "origin", positionWithArbitrary],
+  ["transform-style", "transform", ["3d", "flat"]],
+  ["translate", "translate", translate],
+  ["translate-x", "translate-x", translate],
+  ["translate-y", "translate-y", translate],
+  ["translate-z", "translate-z", translate],
+  ["translate-none", "", ["translate-none"]],
+  ["zoom", "zoom", [isInteger, isArbitraryVariable, isArbitraryValue]],
+
+  ["accent", "accent", colorScale],
+  ["appearance", "appearance", ["none", "auto"]],
+  ["caret-color", "caret", colorScale],
+  ["color-scheme", "scheme", ["normal", "dark", "light", "light-dark", "only-dark", "only-light"]],
+  [
+    "cursor",
+    "cursor",
+    [
+      "auto",
+      "default",
+      "pointer",
+      "wait",
+      "text",
+      "move",
+      "help",
+      "not-allowed",
+      "none",
+      "context-menu",
+      "progress",
+      "cell",
+      "crosshair",
+      "vertical-text",
+      "alias",
+      "copy",
+      "no-drop",
+      "grab",
+      "grabbing",
+      "all-scroll",
+      "col-resize",
+      "row-resize",
+      "n-resize",
+      "e-resize",
+      "s-resize",
+      "w-resize",
+      "ne-resize",
+      "nw-resize",
+      "se-resize",
+      "sw-resize",
+      "ew-resize",
+      "ns-resize",
+      "nesw-resize",
+      "nwse-resize",
+      "zoom-in",
+      "zoom-out",
+      isArbitraryVariable,
+      isArbitraryValue,
+    ],
+  ],
+  ["field-sizing", "field-sizing", ["fixed", "content"]],
+  ["pointer-events", "pointer-events", ["auto", "none"]],
+  ["resize", "resize", ["none", "", "y", "x"]],
+  ["scroll-behavior", "scroll", ["auto", "smooth"]],
+  ["scrollbar-thumb-color", "scrollbar-thumb", colorScale],
+  ["scrollbar-track-color", "scrollbar-track", colorScale],
+  ["scrollbar-gutter", "scrollbar-gutter", ["auto", "stable", "both"]],
+  ["scrollbar-w", "scrollbar", ["auto", "thin", "none"]],
+  ...perSide("scroll-m", "scroll-m", WITH_ROOT, unambiguousSpacing),
+  ...perSide("scroll-p", "scroll-p", WITH_ROOT, unambiguousSpacing),
+  ["snap-align", "snap", ["start", "end", "center", "align-none"]],
+  ["snap-stop", "snap", ["normal", "always"]],
+  ["snap-type", "snap", ["none", "x", "y", "both"]],
+  ["snap-strictness", "snap", ["mandatory", "proximity"]],
+  ["touch", "touch", ["auto", "none", "manipulation"]],
+  ["touch-x", "touch-pan", ["x", "left", "right"]],
+  ["touch-y", "touch-pan", ["y", "up", "down"]],
+  ["touch-pz", "", ["touch-pinch-zoom"]],
+  ["select", "select", ["none", "text", "all", "auto"]],
+  [
+    "will-change",
+    "will-change",
+    ["auto", "scroll", "contents", "transform", isArbitraryVariable, isArbitraryValue],
+  ],
+  ["fill", "fill", ["none", ...colorScale]],
+  [
+    "stroke-w",
+    "stroke",
+    [isNumber, isArbitraryVariableLength, isArbitraryLength, isArbitraryNumber],
+  ],
+  ["stroke", "stroke", ["none", ...colorScale]],
+  ["forced-color-adjust", "forced-color-adjust", ["auto", "none"]],
+];
+
+const edges = (id: string, joiner: string, ...sides: string[]) =>
+  sides.map((side) => `${id}${joiner}${side}`);
+const ALL_SIDES = ["x", "y", "s", "e", "bs", "be", "t", "r", "b", "l"];
+
+/** A class in the key group also clears every listed group that came earlier. */
+export const CONFLICTS: Record<string, string[]> = {
+  "container-named": ["container-type"],
+  overflow: ["overflow-x", "overflow-y"],
+  overscroll: ["overscroll-x", "overscroll-y"],
+  inset: [
+    "inset-x",
+    "inset-y",
+    "inset-bs",
+    "inset-be",
+    "start",
+    "end",
+    "top",
+    "right",
+    "bottom",
+    "left",
+  ],
+  "inset-x": ["start", "end", "right", "left"],
+  "inset-y": ["inset-bs", "inset-be", "top", "bottom"],
+  flex: ["basis", "grow", "shrink"],
+  gap: ["gap-x", "gap-y"],
+  p: edges("p", "", ...ALL_SIDES),
+  px: ["ps", "pe", "pr", "pl"],
+  py: ["pbs", "pbe", "pt", "pb"],
+  m: edges("m", "", ...ALL_SIDES),
+  mx: ["ms", "me", "mr", "ml"],
+  my: ["mbs", "mbe", "mt", "mb"],
+  size: ["w", "h"],
+  "font-size": ["leading"],
+  "fvn-normal": ["fvn-ordinal", "fvn-slashed-zero", "fvn-figure", "fvn-spacing", "fvn-fraction"],
+  "fvn-ordinal": ["fvn-normal"],
+  "fvn-slashed-zero": ["fvn-normal"],
+  "fvn-figure": ["fvn-normal"],
+  "fvn-spacing": ["fvn-normal"],
+  "fvn-fraction": ["fvn-normal"],
+  "line-clamp": ["display", "overflow"],
+  rounded: edges("rounded", "-", ...ROUNDED_PARTS.slice(1)),
+  "rounded-s": ["rounded-ss", "rounded-es"],
+  "rounded-e": ["rounded-se", "rounded-ee"],
+  "rounded-t": ["rounded-tl", "rounded-tr"],
+  "rounded-r": ["rounded-tr", "rounded-br"],
+  "rounded-b": ["rounded-br", "rounded-bl"],
+  "rounded-l": ["rounded-tl", "rounded-bl"],
+  "border-spacing": ["border-spacing-x", "border-spacing-y"],
+  "border-w": edges("border-w", "-", ...ALL_SIDES),
+  "border-w-x": ["border-w-s", "border-w-e", "border-w-r", "border-w-l"],
+  "border-w-y": ["border-w-bs", "border-w-be", "border-w-t", "border-w-b"],
+  "border-color": edges("border-color", "-", ...ALL_SIDES),
+  "border-color-x": ["border-color-s", "border-color-e", "border-color-r", "border-color-l"],
+  "border-color-y": ["border-color-bs", "border-color-be", "border-color-t", "border-color-b"],
+  translate: ["translate-x", "translate-y", "translate-none"],
+  "translate-none": ["translate", "translate-x", "translate-y", "translate-z"],
+  "scroll-m": edges("scroll-m", "", ...ALL_SIDES),
+  "scroll-mx": ["scroll-ms", "scroll-me", "scroll-mr", "scroll-ml"],
+  "scroll-my": ["scroll-mbs", "scroll-mbe", "scroll-mt", "scroll-mb"],
+  "scroll-p": edges("scroll-p", "", ...ALL_SIDES),
+  "scroll-px": ["scroll-ps", "scroll-pe", "scroll-pr", "scroll-pl"],
+  "scroll-py": ["scroll-pbs", "scroll-pbe", "scroll-pt", "scroll-pb"],
+  touch: ["touch-x", "touch-y", "touch-pz"],
+  "touch-x": ["touch"],
+  "touch-y": ["touch"],
+  "touch-pz": ["touch"],
+};
+
+/** Variants whose relative order changes the generated CSS, so they are never sorted. */
+export const ORDER_SENSITIVE = new Set([
+  "*",
+  "**",
+  "after",
+  "backdrop",
+  "before",
+  "details-content",
+  "file",
+  "first-letter",
+  "first-line",
+  "marker",
+  "placeholder",
+  "selection",
+]);