styleproof 1.7.1 → 1.7.2

package/CHANGELOG.md

@@ -7,7 +7,17 @@ this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
-## [1.7.1]
+## [1.7.2]
+
+### Fixed
+
+- **Responsive variants of one change no longer show as duplicate sections.** A
+  grid whose `grid-template-columns/rows` computes to different pixels per width
+  (`282px ×2` vs `282px 228px`) was given a different signature per width, so the
+  same change rendered once per breakpoint. The signature now keys grid tracks by
+  their COUNT, so responsive widths collapse into one grouped section.
+- The `e.g. …` fold line no longer names the `+N more` overflow marker as if it
+  were a change.
 
 ### Fixed
 

package/dist/describe.d.ts

@@ -25,6 +25,8 @@ export declare function toHex(v: string): string;
 /** Reverse-index a token map (`--red-200` → `rgb(...)`) to value → token name,
  *  preferring a scale step (`red-200`) over an alias, then the shorter name. */
 export declare function tokenIndex(tokens?: Record<string, string>): Map<string, string>;
+/** Count grid tracks in a `grid-template-*` value, honouring the `Npx ×K` form. */
+export declare function trackCount(v: string): number;
 /** Token reverse-indexes for each side, so colour rules can name `red-200`. */
 export type DescribeCtx = {
     tokensBefore?: Map<string, string>;

package/dist/describe.js

@@ -117,7 +117,7 @@ const shift = (before, after, idxB, idxA) => {
 };
 // --- track counting for grid columns/rows ------------------------------------
 /** Count grid tracks in a `grid-template-*` value, honouring the `Npx ×K` form. */
-function trackCount(v) {
+export function trackCount(v) {
     if (v === 'none' || !v)
         return 0;
     const rep = v.match(/×(\d+)/); // summarizeProps collapses "8px 8px 8px" → "8px ×3"
@@ -318,10 +318,13 @@ function foldedLine(group, ctx) {
     const common = lists[0].filter((p) => lists.every((l) => l.includes(p)));
     if (common.length)
         return `${common.join(', ')} _(details vary)_`;
+    // Rank the most common REAL changes — the `+N more` overflow marker isn't a
+    // change and shouldn't be named.
     const freq = new Map();
     for (const l of lists)
         for (const p of new Set(l))
-            freq.set(p, (freq.get(p) ?? 0) + 1);
+            if (!/^\+\d+ more$/.test(p))
+                freq.set(p, (freq.get(p) ?? 0) + 1);
     const top = [...freq.entries()]
         .sort((a, b) => b[1] - a[1])
         .slice(0, 3)

package/dist/report.js

@@ -3,7 +3,7 @@ import path from 'node:path';
 import { PNG } from 'pngjs';
 import { loadStyleMap } from './capture.js';
 import { diffStyleMapDirs } from './diff.js';
-import { describeChange, tokenIndex, toHex } from './describe.js';
+import { describeChange, tokenIndex, toHex, trackCount } from './describe.js';
 // Re-export the plain-English summariser so consumers (and tests) reach it
 // through the package's report module rather than a deep path.
 export { describeChange, colorName, tokenIndex, toHex } from './describe.js';
@@ -339,6 +339,16 @@ function formatSurfaceList(surfaces) {
     })
         .join(' · ');
 }
+// Grid-track longhands compute to width-dependent pixels (`282px ×2` at one width,
+// `282px 228px` at another), so the SAME responsive change would otherwise get a
+// different signature per width. Key them by track COUNT — what actually
+// identifies the change — so responsive variants group into one section.
+function sigValue(c) {
+    if (c.prop === 'grid-template-columns' || c.prop === 'grid-template-rows') {
+        return `${c.prop}=${trackCount(c.before)}t>${trackCount(c.after)}t`;
+    }
+    return `${c.prop}=${c.before}>${c.after}`;
+}
 /** Canonical signature of a surface's findings: surfaces that changed in the
  *  same way collapse into one section + one image (the rects differ per width;
  *  the change itself does not). */
@@ -348,11 +358,7 @@ function signatureOf(findings) {
         p: f.path,
         k: f.kind,
         t: f.kind === 'dom' ? f.change : f.kind === 'state' ? f.state : (f.pseudo ?? ''),
-        v: f.kind === 'dom'
-            ? ''
-            : summarizeProps(f.props)
-                .map((c) => `${c.prop}=${c.before}>${c.after}`)
-                .join('|'),
+        v: f.kind === 'dom' ? '' : summarizeProps(f.props).map(sigValue).join('|'),
     }))
         .sort((a, b) => `${a.p}|${a.k}|${a.t}`.localeCompare(`${b.p}|${b.k}|${b.t}`)));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styleproof",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "Catch every CSS change before it ships — review PRs and certify refactors by the browser's computed styles, not pixels. Works with any styling system.",
   "keywords": [
     "playwright",