styleproof 1.7.0 → 1.7.2

package/CHANGELOG.md

@@ -7,6 +7,26 @@ this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+## [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
+
+- A colour bullet no longer repeats a role word that matches its token name
+  (`text \`text\` (#bfe9f5)` becomes `` `text` (`#bfe9f5`) ``).
+- When several same-label elements fold but share no change, the line names the
+  most common changes (`e.g. … _(vary)_`) instead of an uninformative
+  `restyled _(details vary)_`.
+
 ## [1.7.0]
 
 Colour changes are named by their theme token, shown as hex with a live swatch,

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"
@@ -198,6 +198,8 @@ const colorRule = (m, mark, ctx) => {
         ['border-color', 'border colour'],
     ];
     const sh = (c) => shift(c.before, c.after, ctx.tokensBefore, ctx.tokensAfter);
+    // Collapse a role word that just repeats the token name: `text \`text\`` → `\`text\``.
+    const deRole = (s) => s.replace(/([\w-]+) (`\1`)/g, '$2');
     const present = fields.map(([p, w]) => [m.get(p), w]).filter(([c]) => c);
     if (!present.length)
         return [];
@@ -205,8 +207,8 @@ const colorRule = (m, mark, ctx) => {
     const same = present.length > 1 && present.every(([c]) => c.before === first[0].before && c.after === first[0].after);
     fields.forEach(([p]) => m.has(p) && mark(p));
     if (same)
-        return [`recoloured ${sh(first[0])}`];
-    return present.map(([c, w]) => `${w} ${sh(c)}`);
+        return [deRole(`recoloured ${sh(first[0])}`)];
+    return present.map(([c, w]) => deRole(`${w} ${sh(c)}`));
 };
 const fillRule = (m, mark) => {
     const bgi = m.get('background-image');
@@ -306,14 +308,28 @@ function domVerbLines(els) {
     return Object.entries(verbs).map(([verb, n]) => `**${n}** element${n === 1 ? '' : 's'} ${verb}`);
 }
 const sig = (phrases) => phrases.join(', ');
-/** One line for a same-label group: the shared phrases (or the single line),
- *  flagged `(details vary)` when members aren't identical. */
+/** One line for a same-label group. Identical members → their line. Otherwise the
+ *  phrases shared by ALL (`details vary`); and if they share none, the most common
+ *  phrases (`e.g. … vary`) so the line still tells you what to look for. */
 function foldedLine(group, ctx) {
     const lists = group.map((el) => phrasesFor(el.props, ctx));
     if (lists.every((l) => sig(l) === sig(lists[0])))
         return sig(lists[0]);
     const common = lists[0].filter((p) => lists.every((l) => l.includes(p)));
-    return common.length ? `${common.join(', ')} _(details vary)_` : 'restyled _(details vary)_';
+    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))
+            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)
+        .map(([p]) => p);
+    return top.length ? `e.g. ${top.join(', ')} _(vary)_` : 'restyled _(vary)_';
 }
 /** Restyle phrases, folded by element label (so two near-identical `span.led`s
  *  become one `×2` line with their shared changes), then deduped across labels (so

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.0",
+  "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",