>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3588784. --> Reported by: [ajv009](https://www.drupal.org/user/3653917) >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>The <code>scripts/capture-component-bundle.mjs</code> script dumps all ~300 computed CSS properties for every matched selector at 3 viewports, producing 215 MB of computed-styles JSON for just 5 components &mdash; when only ~25 layout-relevant properties are actually used by any downstream agent.</p> <p>Measured per-component sizes: blog-grid 83 MB, site-header 51 MB, site-footer 47 MB, hero-section 14 MB, cta-section 13 MB. Total: ~208&ndash;215 MB for 5 components. A full migration covering 28 sections would produce approximately 1.2 GB of computed-styles files. Component-builder and visual-verifier agents always use <code>jq</code> for selective access (never <code>cat</code>), so most of the captured data is pure waste &mdash; but the file sizes still create real risks: disk exhaustion on constrained environments, slow <code>jq</code> queries on 80 MB files, and accidental context flooding if any agent reads a file directly.</p> <p><code>getComputedStyle</code> returns 150&ndash;300 properties per element including irrelevant ones like <code>will-change</code>, <code>ruby-align</code>, <code>resize</code>, <code>animation-delay</code>. The script serialises the full object without filtering.</p> <p>Curating the captured properties to ~25 layout-relevant ones (color, background-color, font-family, font-size, font-weight, padding/margin/border family, border-radius, display, flex-direction, gap, grid-template-columns, width/height/max-width/min-height, box-shadow, opacity, text-align, line-height, letter-spacing) reduces total size from ~215 MB &rarr; ~2&ndash;5 MB &mdash; a 40&ndash;100&times; improvement &mdash; with no quality loss for the downstream consumers.</p> <p><strong>Note on prioritisation:</strong> the user explicitly said to ignore this at session time, listing "computed-styles bloat" among "deeper issues to ignore." That was a session-time prioritisation decision, not permanent abandonment. The fix is a single-script change with no API impact, the severity is genuine, and the bloat compounds on every future migration. Re-raised here at P1 &mdash; see Open Questions.</p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <ol> <li>Run <code>scripts/capture-component-bundle.mjs</code> on a 5-component site.</li> <li>Inspect <code>docs/migration/components/&lt;section&gt;/computed-styles.json</code> file sizes: 13&ndash;83 MB per component.</li> <li>Run <code>du -sh docs/migration/components/</code>: observe ~215 MB total for 5 components.</li> <li>Project to a full 28-section migration: ~1.2 GB.</li> <li>Inspect any single computed-styles JSON: confirm it includes irrelevant properties like <code>will-change</code>, <code>ruby-align</code>, <code>animation-delay</code>.</li> </ol> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p><strong>Step 1 &mdash; In <code>scripts/capture-component-bundle.mjs</code></strong>, replace unconditional <code>getComputedStyle</code> serialisation with a curated property set:</p> <pre>// OLD (captures all ~300 properties): const styles = {}; const computed = getComputedStyle(el); for (let i = 0; i &lt; computed.length; i++) { styles[computed[i]] = computed.getPropertyValue(computed[i]); } // NEW (captures only layout-relevant ~25 properties): const LAYOUT_PROPERTIES = [ 'color', 'background-color', 'font-family', 'font-size', 'font-weight', 'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'border', 'border-radius', 'display', 'flex-direction', 'gap', 'grid-template-columns', 'width', 'height', 'max-width', 'min-height', 'box-shadow', 'opacity', 'text-align', 'line-height', 'letter-spacing', 'text-transform', 'position', 'z-index', 'overflow' ]; const computed = getComputedStyle(el); const styles = {}; for (const prop of LAYOUT_PROPERTIES) { styles[prop] = computed.getPropertyValue(prop); }</pre><p><strong>Step 2 &mdash; Add a post-capture sanity check</strong>:</p> <pre>const jsonSize = Buffer.byteLength(JSON.stringify(styles)); if (jsonSize &gt; 1_000_000) { // 1 MB console.warn(`WARNING: computed-styles JSON for ${sectionName} exceeds 1MB (${jsonSize} bytes). Check LAYOUT_PROPERTIES filter.`); }</pre><p><strong>Expected result:</strong> per-component computed-styles JSON drops from 13&ndash;83 MB to ~50&ndash;200 KB. Total for 5 components: 250 KB&ndash;1 MB. Total for 28 sections: ~1.5&ndash;5 MB.</p> <p><strong>No downstream impact:</strong> component-builder and visual-verifier agents use <code>jq</code> to access specific properties. The curated property list covers everything those agents currently query. Verify by grepping <code>.claude/agents/*.md</code> and <code>.claude/skills/*/SKILL.md</code> for <code>jq</code> queries against computed-styles to confirm no queried property is excluded.</p> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <ul> <li>Confirm with project owner that the session-time deferral has cleared (see Open Questions).</li> <li>Replace <code>getComputedStyle</code> serialisation in <code>scripts/capture-component-bundle.mjs</code> with the curated <code>LAYOUT_PROPERTIES</code> loop.</li> <li>Add the post-capture sanity check (1 MB warn threshold).</li> <li>Add note to <code>.claude/skills/bundle-capture/SKILL.md</code> (if it exists) or the bundle-capture agent definition: "computed-styles JSON exceeding 1 MB warrants investigation."</li> <li>Grep all agent definitions for existing <code>jq</code> queries against computed-styles; verify every queried property is in <code>LAYOUT_PROPERTIES</code>.</li> <li>Verify on a 5-component test run: per-file size under 200 KB; total under 5 MB; component-builder agents pass without errors.</li> </ul> <h3 id="summary-ui-changes">User interface changes</h3> <p>None.</p> <h3 id="summary-api-changes">API changes</h3> <p>None to public APIs. The shape of <code>computed-styles.json</code> changes from "all properties present" to "curated 25 properties only." Downstream consumers query specific properties via <code>jq</code>; queries against properties no longer captured will return null. Verify the curated list covers all current queries before landing.</p> <h3 id="summary-data-model-changes">Data model changes</h3> <p><code>docs/migration/components/&lt;section&gt;/computed-styles.json</code> shrinks from ~10&ndash;80 MB to ~50&ndash;200 KB and contains only the curated property set. No schema change &mdash; same JSON shape, fewer keys.</p> <h3 id="summary-internal-references">Internal references</h3> <ul> <li>Source markdown: <code>RESEARCH-2026-04-28/99-final/ISSUES/Sprint-4-Cost-and-Context/04-computed-styles-bloat-215mb-for-5-components.md</code> (id: P1-1)</li> <li>Component size table + verbatim curated list + P1 recommendation #6: <code>RESEARCH-2026-04-28/00-existing-issues/prior-deep-analysis-key-points.md</code></li> <li>Theme context: <code>RESEARCH-2026-04-28/00-existing-issues/issue-themes.md</code> (Theme 4 &mdash; bundle-capture skill)</li> <li>Consolidated root cause + Tension 3 (deferral resolution): <code>RESEARCH-2026-04-28/99-final/consolidated-issues.md</code> (P1-1)</li> <li>Verbatim L630 deferral text: <code>RESEARCH-2026-04-28/06-jamie-demo-old/95q5i-77cf5bb9-half2/user-feedback.md</code></li> <li>Pattern: <code>RESEARCH-2026-04-28/07-cross-cutting/what-actually-works.md</code> &sect; P2 (getComputedStyle Measurement Beats Screenshot Comparison) &mdash; <code>getComputedStyle</code> is both the bloat source and the visual-comparison tool; the fix is to make capture as selectively targeted as comparison already is</li> </ul> <h3 id="summary-open-questions">Open questions</h3> <ul> <li><strong>Deferral status (verbatim, L630 of session 95q5i / 77cf5bb9, 2026-04-22T19:36):</strong> "Deeper issues to <strong>ignore</strong>: site-analyzer agent definition changes, computed-styles bloat, model/effort tuning, menu-builder POST detection changes, parallelism in skill docs." Consolidated research notes (Tension 3) explicitly resolve this as a session-time prioritisation, not permanent abandonment, and recommend implementing. Confirm clearance with the project owner before starting.</li> <li>Does the curated <code>LAYOUT_PROPERTIES</code> list cover all properties any agent currently queries via <code>jq</code>? Grep <code>.claude/agents/*.md</code> and <code>.claude/skills/*/SKILL.md</code> for <code>jq</code> + computed-styles references to build a complete list before truncating.</li> <li>Should the curated list be configurable (e.g., via a config file) so future agents can extend without editing the script?</li> </ul>