feat(lint): warn when a class="clip" element partially overrides inset:0#1925
Draft
miguel-heygen wants to merge 1 commit into
Draft
feat(lint): warn when a class="clip" element partially overrides inset:0#1925miguel-heygen wants to merge 1 commit into
miguel-heygen wants to merge 1 commit into
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Root cause
The canonical
.cliprule (seehyperframes-core/minimal-composition.md) isposition: absolute; inset: 0, so everyclass="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 base0— 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: 40pxexpecting a corner-anchored box and gets a full-screen stretch).inspectcatches the symptom (content_overlap/text_occluded) but never names the CSS root cause, so each reporter had togetBoundingClientRect()-probe to diagnose it — and several asked directly for exactly this lint rule.The rule (
clip_partial_inset_stretch, warning).cliprule actually establishes the base (position:absolute|fixed+ all-zero inset). Compositions that define.clipdifferently never trip it.class="clip"element, merges its override declarations — matching#id/.class<style>rules by their selector subject (rightmost compound), plus inlinestyle; the bare.clipbase 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.width+height), andposition:relative/static/stickyall stay silent;autoon the opposite side (an explicit release of the base pin) also silences it.High-precision by design.
inspectremains 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
lintHyperframeHtml: bottom+left corner / single-side / inline-override → flag; sized box / full-bleed / all-four-sides /auto-release /position:relative/ no-base → quiet.collectClipBoxProps/clipStretchAxes) covering the XOR gate,insetshorthand,auto-release, position-detach, and declaration-block ordering (later wins).applyDeclrefactored to a dispatch table so fallow's complexity gate passes cleanly (no suppression).bun run buildclean;oxlint/oxfmtclean.