chore(client): scrub style={[...]} on DOM-leaf primitives + ESLint guardrail (#239) #384

Merged

james merged 1 commit from 239-style-array-scrub into main 2026-06-29 18:25:46 +00:00

Conversation 1 Commits 1 Files changed 18 +761 -1392

james commented 2026-06-29 17:55:36 +00:00

Owner

Copy link

Closes #239

React DOM's setValueForStyles for-in-iterates the style prop and writes node.style[key]; a style array (or RNW passing a nested array through certain Link/Pressable merges) iterates numeric indices and throws CSSStyleProperties doesn't have an indexed property setter for '0' — the real crash from PR #209. Most array sites flatten fine, but the failures are subtle and context-dependent, so the arrays are land mines.

What changed

• 613 style / contentContainerStyle array sites on DOM-leaf primitives (View/Text/Pressable/TextInput/Image/ScrollView) migrated to merged objects: [E1, E2] → { ...(E1), ...(E2) }. Order-preserving (later spreads win); spreading a falsy conditional is a no-op. Style-shape only — no visual change. Done with a one-shot TS-compiler-API codemod (run, then removed — not committed).
• eslint.config.mjs: a no-restricted-syntax rule (error) flags style={[...]} on the leaf primitives, with a message explaining the crash, pointing at #239 / PR #209, and the merged-object pattern. Opt-out via eslint-disable for a genuine animated/Reanimated style array.
• CONTRIBUTING.md: a Conventions note on the rule + pattern.
• Left alone: KeyboardAwareScrollView / FlatList arrays (non-leaf, flatten reliably); there are no animated-style arrays in the repo.

Verification

• typecheck / lint (0 errors) / 172 tests / export:web (Exported: dist) / semgrep 0 — all pass.
• Spot-check note: a handful of sites spread a variable (e.g. { ...(textStyle), ... }). All current callers pass a single style object, so this is correct today; if a caller ever passed an array as that prop the merge would misbehave — worth an eye in review, but no such caller exists.
• Not verifiable headlessly: visual spot-check of the heaviest screens (account, experience) recommended (client vitest is node-env).

Merge note

Overlaps #236 (PR #382) on apps/client/app/server-setup.tsx. Merge #382 first, then rebase this branch — the only conflict is the 8 style sites in server-setup.tsx.

🤖 Generated with Claude Code

Closes #239 React DOM's `setValueForStyles` for-in-iterates the `style` prop and writes `node.style[key]`; a style **array** (or RNW passing a nested array through certain Link/Pressable merges) iterates numeric indices and throws `CSSStyleProperties doesn't have an indexed property setter for '0'` — the real crash from PR #209. Most array sites flatten fine, but the failures are subtle and context-dependent, so the arrays are land mines. ## What changed - **613 `style` / `contentContainerStyle` array sites** on DOM-leaf primitives (`View`/`Text`/`Pressable`/`TextInput`/`Image`/`ScrollView`) migrated to merged objects: `[E1, E2]` → `{ ...(E1), ...(E2) }`. Order-preserving (later spreads win); spreading a falsy conditional is a no-op. **Style-shape only — no visual change.** Done with a one-shot TS-compiler-API codemod (run, then removed — not committed). - **`eslint.config.mjs`**: a `no-restricted-syntax` rule (error) flags `style={[...]}` on the leaf primitives, with a message explaining the crash, pointing at #239 / PR #209, and the merged-object pattern. Opt-out via `eslint-disable` for a genuine animated/Reanimated style array. - **`CONTRIBUTING.md`**: a Conventions note on the rule + pattern. - Left alone: `KeyboardAwareScrollView` / `FlatList` arrays (non-leaf, flatten reliably); there are no animated-style arrays in the repo. ## Verification - typecheck / lint (0 errors) / 172 tests / `export:web` (Exported: dist) / semgrep 0 — all pass. - **Spot-check note**: a handful of sites spread a *variable* (e.g. `{ ...(textStyle), ... }`). All current callers pass a single style object, so this is correct today; if a caller ever passed an array as that prop the merge would misbehave — worth an eye in review, but no such caller exists. - **Not verifiable headlessly**: visual spot-check of the heaviest screens (account, experience) recommended (client vitest is node-env). ## Merge note Overlaps **#236** (PR #382) on `apps/client/app/server-setup.tsx`. **Merge #382 first**, then rebase this branch — the only conflict is the 8 style sites in `server-setup.tsx`. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

james added 1 commit 2026-06-29 17:55:36 +00:00

chore(client): scrub style={[...]} on DOM-leaf primitives + ESLint guardrail (#239) ... 26ba0c323d

React DOM's setValueForStyles for-in-iterates the style prop and writes
node.style[key]; a style array (or RNW passing a nested array through
certain Link/Pressable merges) iterates numeric indices and throws
"CSSStyleProperties doesn't have an indexed property setter for '0'" — a
real crash seen in PR #209. Most array sites flatten fine but the failures
are subtle, so the arrays are land mines.

- Migrate 613 style/contentContainerStyle array sites on DOM-leaf
  primitives (View/Text/Pressable/TextInput/Image/ScrollView) to merged
  objects: [E1, E2] → { ...(E1), ...(E2) }. Order-preserving (later spreads
  win); spreading a falsy conditional is a no-op. Style-shape only — no
  visual change. KeyboardAwareScrollView/FlatList arrays (non-leaf, flatten
  reliably) left alone; no animated-style arrays exist in the repo.
- eslint.config.mjs: a no-restricted-syntax rule flags style={[...]} on the
  leaf primitives, with a message explaining the crash + pointing at #239
  and the merged-object pattern (eslint-disable for genuine animated arrays).
- CONTRIBUTING.md: a Conventions note on the rule + pattern.

Closes #239

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

forgejo-actions commented 2026-06-29 18:10:22 +00:00

Copy link

📊 Test coverage

Patch coverage: no testable lines changed.

Overall (app/, lib/, db/, excluding UI per ADR-0019):

Metric	Value	Soft target
Lines	79.6% ✅	≥ 50%
Branches	71.6% ⚠️	≥ 75%
Functions	81.2%	informational

Soft thresholds per ADR-0019. Coverage is informational and does not block merge.

<!-- coverage-comment --> ## 📊 Test coverage **Patch coverage:** no testable lines changed. **Overall** (`app/`, `lib/`, `db/`, excluding UI per ADR-0019): | Metric | Value | Soft target | |---|---|---| | Lines | 79.6% ✅ | ≥ 50% | | Branches | 71.6% ⚠️ | ≥ 75% | | Functions | 81.2% | informational | Soft thresholds per [ADR-0019](docs/adr/0019-coverage-soft-targets.md). Coverage is informational and does not block merge.

james force-pushed 239-style-array-scrub from 26ba0c323d to 1c35e77bfd 2026-06-29 18:14:21 +00:00 Compare

james merged commit e72419d85e into main 2026-06-29 18:25:46 +00:00

james deleted branch 239-style-array-scrub 2026-06-29 18:25:47 +00:00

james referenced this pull request from a commit 2026-06-29 18:25:48 +00:00

Merge pull request 'chore(client): scrub style={[...]} on DOM-leaf primitives + ESLint guardrail (#239)' (#384) from 239-style-array-scrub into main

james referenced this pull request 2026-06-30 12:04:54 +00:00

Visual spot-check: server-setup probe flow + style-array scrub (#236/#239 follow-up) #389

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

area:auth

Authentication and authorization

  

area:ci

Forgejo Actions, build, test, security, release

  

area:db

Database abstraction, migrations, persistence

  

area:infra

Containerization, deployment, foundational tooling

  

area:native

React Native app (Android + Linux Flatpak)

  

area:pwa

PWA / web frontend

  

area:service

Backend service, API routes, persistence

  

epic

High-level tracker; links several feature tickets

  

feature

A user-facing feature

  

foundation

Foundational work that other tickets build on

No labels

area:auth

area:ci

area:db

area:infra

area:native

area:pwa

area:service

epic

feature

foundation

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

2 participants

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

james/carol!384

No description provided.