Variants

Remarks

Variants are the reason a utility system scales past the trivial. Without them a hover state means a hand-written rule, and the whole argument — that styling a new panel is zero new CSS — falls over at the first button.

Three shapes, and they compose. Most are a suffix on the selector (hover: → :hover). Breakpoints and dark: under the media strategy are an at-rule around it. group-*, peer-* and dark: under the class strategy need something before the element, which is the only reason SelectorPrefix exists.

⚠ A fourth shape is an at-rule that is not a media query: @sm:, @max-lg:, @min-[30rem]: and their /name forms wrap the rule in a @container instead. Nothing about the mechanism had to change for it — AtRule is already a string and UtilityGenerator already nests a chain of them — which is why the blocker was never the wiring: it was that the --container-* scale did not exist, so the only numbers @sm could have been resolved against were the breakpoints, and those are a window's rather than a box's.

The arbitrary form [&>*]: substitutes the selector for the &, which is the escape hatch that stops the variant list from having to be complete. It is also why the class-name parser has to be bracket-aware: that variant contains a > and could contain a :.

Fields and properties (2)

• public static IReadOnlyCollection<string> MediaVariants

  The variants that are one @media feature on the element's own surface.

• public static IReadOnlyCollection<string> StateVariants

  The variants that are a pseudo-class on the element itself.

Methods (2)

• public static bool TryResolve(string variant, ThemeTokens tokens, out VariantEffect effect)

  Works out what a variant does.

• public static bool IsArbitrary(VariantEffect effect)

  Whether a variant's effect goes where & is rather than after the selector.

Used by (2)

• UtilityGeneratorVixen.Ui.Styling.Utilities
• VariantCoverageTestsVixen.Ui.Styling.Utilities.Tests