Skip to content

test: nothing verifies that a theme's arbitrary Tailwind value compiles to a rule #457

Description

@IgorShevchik

What

Every assertion this repository makes about theme classes is a string assertion. test/utils/*.spec.ts reads the theme .ts sources, and the component snapshots record the rendered class attribute. Nothing compiles CSS.

So for any arbitrary value — max-h-[min(var(--max-height-popup-list),var(--reka-select-content-available-height,100vh))] and its neighbours — the suite proves the class is written, never that Tailwind emits a rule for it, and never that a custom property the class depends on reaches :root.

Why it matters

Both failure modes are silent and total:

  • if Tailwind stops generating a rule for an arbitrary value (a parser change, a @source scope change, a syntax the engine tightens), the class stays in the snapshot and the cap is simply gone — popups grow unbounded in a real browser while CI is green;
  • Tailwind v4 tree-shakes @theme variables, emitting only those a generated utility references. A change that stops the theme file being scanned drops the variable from :root, var(--max-height-popup-list) resolves to nothing, and again nothing here notices.

This is not hypothetical arithmetic: #430 moved the popup height caps from literals into tokens, and during its review the mechanism had to be checked by hand — compiling src/runtime/air-design-tokens/tw-style/index.css through the installed Tailwind engine with the exact class strings from the regenerated snapshots. That confirmed it works today. Nothing keeps it working.

Scope

One spec, not a build-pipeline overhaul:

  • compile the token CSS entry through the tailwindcss package's own API with a small set of candidate class strings taken from the theme files;
  • assert a max-height declaration is emitted for each;
  • assert the referenced custom properties appear in the output.

Worth keeping the candidate list short and pointed at the arbitrary values that carry a real invariant (the popup caps to begin with) rather than sweeping every class in src/theme/, which would turn a guard into a second snapshot suite.

Estimated at half a day, most of it deciding how much of the Tailwind entry to compile.

Context

Raised during the review of #430. Filed rather than folded in: the fix there was a class-string swap plus a guard over the theme sources, and adding CSS compilation to the test harness is a different kind of change that deserves its own review.

Priority: P3.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions