public static class VariantsTurns a variant prefix into what it does to the selector.
No guide page documents this yet — the page shows what the code says about itself.
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-[480px]: 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.
⚠ And one shape that is not about the selector at all: selection: moves the utility's property — background-color onto --selection-color, which is what the text controls paint their highlight from — through Rewrite. Everything else here only decides where a rule applies; this decides what it says.
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 (4)
public static IReadOnlyCollection<string> RewriteVariantsThe variants that rewrite a utility's property rather than its selector.
public static IReadOnlyCollection<string> MediaVariantsThe variants that are one @media feature on the element's own surface.
public static IReadOnlyCollection<string> StateVariantsThe variants that are a pseudo-class on the element itself.
public static IReadOnlyCollection<string> PartVariantsThe variants that select a part of a control rather than a state of it.
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 (4)
- UtilityFamiliesVixen.Ui.Styling.Utilities
- UtilityGeneratorVixen.Ui.Styling.Utilities
- VariantCoverageTestsVixen.Ui.Styling.Utilities.Tests
- VariantAuditTestsVixen.TailwindParity.Tests