Skip to content

feat(lint): warn when a class="clip" element partially overrides inset:0#1925

Draft
miguel-heygen wants to merge 1 commit into
mainfrom
fix/lint-clip-partial-inset-stretch
Draft

feat(lint): warn when a class="clip" element partially overrides inset:0#1925
miguel-heygen wants to merge 1 commit into
mainfrom
fix/lint-clip-partial-inset-stretch

Conversation

@miguel-heygen

Copy link
Copy Markdown
Collaborator

Root cause

The canonical .clip rule (see hyperframes-core/minimal-composition.md) is position: absolute; inset: 0, so every class="clip" element is pinned to all four edges by default. A more specific selector (an #id/.class <style> rule, or an inline style) that overrides only some of top/right/bottom/left without also giving width/height leaves the un-overridden sides pinned at the base 0 — so the element silently stretches between the author's sides and the inherited zeros instead of shrink-wrapping to its content.

Reported four independent times (e.g. a user sets bottom: 40px; left: 40px expecting a corner-anchored box and gets a full-screen stretch). inspect catches the symptom (content_overlap / text_occluded) but never names the CSS root cause, so each reporter had to getBoundingClientRect()-probe to diagnose it — and several asked directly for exactly this lint rule.

The rule (clip_partial_inset_stretch, warning)

  • Self-gating: only fires once the file's own .clip rule actually establishes the base (position:absolute|fixed + all-zero inset). Compositions that define .clip differently never trip it.
  • Per class="clip" element, merges its override declarations — matching #id/.class <style> rules by their selector subject (rightmost compound), plus inline style; the bare .clip base rule is excluded since it's the inherited pin, not an override — and flags an axis only when the author pinned exactly one of that axis's two sides with no size for the axis.
  • That "exactly one" gate is what keeps intentional shapes quiet: full-bleed (0 sides set), fully-constrained 4-side boxes, sized boxes (width+height), and position:relative/static/sticky all stay silent; auto on the opposite side (an explicit release of the base pin) also silences it.

High-precision by design. inspect remains the runtime backstop, so the rule deliberately under-reports (exotic/compound selectors, @media-nested overrides) rather than risk false positives on the lint path that runs constantly.

Test plan

  • 9 end-to-end cases via lintHyperframeHtml: bottom+left corner / single-side / inline-override → flag; sized box / full-bleed / all-four-sides / auto-release / position:relative / no-base → quiet.
  • 7 direct unit tests of the pure box-model helpers (collectClipBoxProps / clipStretchAxes) covering the XOR gate, inset shorthand, auto-release, position-detach, and declaration-block ordering (later wins).
  • Full lint package suite passes; applyDecl refactored to a dispatch table so fallow's complexity gate passes cleanly (no suppression).
  • bun run build clean; oxlint/oxfmt clean.

The canonical `.clip` rule is `position: absolute; inset: 0`, so every
class="clip" element is pinned to all four edges by default. A more
specific selector (an #id/.class rule, or an inline style) that
overrides only SOME of top/right/bottom/left without also giving
width/height leaves the un-overridden sides pinned at the base 0 — so
the element silently stretches between the author's sides and the
inherited zeros instead of shrink-wrapping to its content.

Reported four independent times (a user sets e.g. `bottom:40px;
left:40px` expecting a corner-anchored box and gets a full-screen
stretch). inspect catches the symptom (content_overlap /
text_occluded) but never names the CSS root cause, so each reporter
had to getBoundingClientRect()-probe to diagnose it, and multiple asked
directly for this lint rule.

New warning-level rule `clip_partial_inset_stretch`:
- Self-gating: only fires once the file's own `.clip` rule actually
  establishes the base (position:absolute|fixed + all-zero inset), so
  compositions that define .clip differently never trip it.
- Per class="clip" element, merges its override declarations (matching
  #id/.class <style> rules by selector SUBJECT, plus inline style; the
  bare `.clip` base rule is excluded since it's the inherited pin, not
  an override) and flags an axis only when the author pinned EXACTLY
  ONE of its two sides with no size for that axis. That "exactly one"
  gate keeps intentional shapes quiet: full-bleed (0 sides),
  fully-constrained 4-side boxes, sized boxes (width+height), and
  position:relative all stay silent; `auto` on the opposite side (an
  explicit release) also silences it.

High-precision by design — inspect remains the runtime backstop, so
the rule under-reports (exotic selectors, @media-nested overrides)
rather than risk false positives on the lint path that runs constantly.

Test: 9 end-to-end cases + 7 direct unit tests of the pure box-model
helpers (collectClipBoxProps / clipStretchAxes) covering the XOR gate,
inset shorthand, auto-release, position-detach, and block ordering.
Full lint package suite passes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant