Tasty compiles declarative state-priority maps into mutually exclusive CSS selectors, eliminating cascade ambiguity across pseudo-classes, media queries, container queries, and modifiers.
Key Takeaways
CSS state overlap is a structural problem: two rules with equal specificity (0,1,1) let source order silently decide which wins on hovered-disabled buttons.
Tasty’s state map syntax expresses priority explicitly; the compiler emits :not() chains so no two branches can match simultaneously.
The payoff compounds at scale: Cube UI Kit ships 100+ components and powers Cube Cloud enterprise using this model under real production pressure.
Extending a component no longer requires mentally re-deriving the full selector matrix; new states are added to the map, not spliced into existing selectors.
Zero-runtime extraction, SSR integration, typed component APIs, and editor tooling are built on top of the core non-overlapping selector guarantee.
Hacker News Comment Review
Skeptics pushed back hard on the motivating example: :enabled:hover already solves the hovered-disabled button without a compiler, suggesting the real value only appears at larger state-intersection scale.
The JS-in-CSS trade-off drew the usual friction; commenters noted readability costs and the cultural discomfort of collocating styles with component logic, even if the output is predictable.
A counter-position emerged that plain scoped CSS per page sidesteps the problem entirely, implying Tasty’s complexity is only justified inside large, multi-author design systems with heavy variant growth.
Notable Comments
@chrismorgan: proposes embracing last-declaration-wins via :where() as an alternative axis entirely, lowering specificity to zero to make override order explicit without a compiler.
@wewewedxfgdf: “STOP every single type of abstraction/library/programming layer for CSS” – argues direct CSS authorship beats every tool layer, including this one.
