styleproof 1.7.0 → 1.7.1

package/CHANGELOG.md

@@ -7,6 +7,16 @@ this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+## [1.7.1]
+
+### 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.js

@@ -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,25 @@ 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)_`;
+    const freq = new Map();
+    for (const l of lists)
+        for (const p of new Set(l))
+            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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styleproof",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "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",