Skip to content

fix(eslint): stop layout-sensitive-apis rule flagging object literals - #1932

Draft
hoebbelsB wants to merge 1 commit into
mainfrom
fix/1603-eslint-layout-apis-object-literal
Draft

fix(eslint): stop layout-sensitive-apis rule flagging object literals#1932
hoebbelsB wants to merge 1 commit into
mainfrom
fix/1603-eslint-layout-apis-object-literal

Conversation

@hoebbelsB

Copy link
Copy Markdown
Member

Problem

The prefer-no-layout-sensitive-apis rule flags any object property whose name matches a layout-sensitive DOM API (offsetX, offsetY, scrollTop, clientWidth, etc.), even when the object is a plain object literal that never touches the DOM. Reported in #1603: adding Angular CDK's ConnectionPositionPair literal (which legitimately has offsetX/offsetY fields) triggers a hard lint error under both shipped presets, where the rule is 'error', not 'warn'.

Root cause

The rule used the selector MemberExpression[property.name=apisRegex], Property[key.name=apisRegex]. The Property half matches any Property AST node with a matching key name, regardless of whether it's inside an ObjectPattern (a destructuring read) or an ObjectExpression (an object literal being created). Only the former is an actual DOM-layout read.

Fix

Narrowed the selector to only match Property nodes that are direct children of an ObjectPattern. The MemberExpression branch and handler body are unchanged. Pure selector narrowing - no switch to AssignmentExpression (would regress existing destructuring true positives) and no type-aware linting (rejected in the issue thread for lint-performance and API-surface reasons).

Accepted trade-off: the rule can no longer catch element writes funneled through an object literal, e.g. Object.assign(el, { scrollTop: 0 }). Deliberate cost of staying syntactic.

Changes

  • prefer-no-layout-sensitive-apis.ts: narrow the selector (one line).
  • prefer-no-layout-sensitive-apis.spec.ts: added valid cases (verbatim CDK snippet from the issue, bare object literal, object literal as function argument, interface/type/class member declarations) and invalid cases (defaulted destructuring, assignment-expression destructuring, shorthand param destructuring, plain element write) proving the narrowing is surgical. All 9 pre-existing invalid cases untouched and still pass.
  • Doc page: added the CDK example to the Correct section.

Verification

npx nx test eslint-plugin (twice, once with --skip-nx-cache): 12 suites / 68 tests passing (baseline on main was 12/58 - 10 new tests, no regressions). Targeted run: 1 suite / 21 tests passing. This worktree had no node_modules installed at all initially, causing a spurious all-suite failure unrelated to the change; confirmed via git stash that main fails identically without the fix, then ran yarn install --immutable to get a real signal.

Open questions

  • Confirm the doc file path used is the correct/only doc page for this rule.
  • Whether the Object.assign(el, {...}) gap should be tracked as a follow-up issue.

Closes #1603

Open questions

  • Confirm apps/docs/docs/packages/eslint-plugin/reference/prefer-no-layout-sensitive-apis.md is the correct/only doc page for this rule.
  • Whether the Object.assign(el, {...}) gap should be tracked as a follow-up issue.

The rule's Property selector matched any object property named after a
layout-sensitive DOM API, including plain object literals (e.g. Angular
CDK's ConnectionPositionPair with offsetX/offsetY) that never touch the
DOM. Narrow the selector to `ObjectPattern > Property` so only
destructuring reads are flagged, matching the MemberExpression branch's
intent of catching actual element reads/writes. Object creation
(ObjectExpression) is now exempt.

Closes #1603
@github-actions github-actions Bot added 📐 ESLint plugin 📚 Docs Web Documentation hosted on github pages labels Aug 3, 2026
@nx-cloud

nx-cloud Bot commented Aug 3, 2026

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit 4add4cc

Command Status Duration Result
nx affected -t lint build test component-test e... ✅ Succeeded 2m 13s View ↗
nx build docs ✅ Succeeded 1m 12s View ↗
nx-cloud record -- npx nx format:check ✅ Succeeded 2s View ↗
nx build demos --configuration=production ✅ Succeeded <1s View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗


☁️ Nx Cloud last updated this comment at 2026-08-03 23:13:49 UTC

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

📚 Docs Web Documentation hosted on github pages 📐 ESLint plugin

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ESLint Plugin reporting offsetX and offsetY of Material CDK Overlay as sensitive API

1 participant