styleproof 2.3.0 → 2.3.1

package/CHANGELOG.md

@@ -7,6 +7,20 @@ this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+## [2.3.1] - 2026-06-23
+
+### Fixed
+
+- **Animation freeze is now deterministic for content that mounts during the
+  settle.** Motion longhands (declared `animation`/`transition`) were read _before_
+  the settle, so an element that mounts while the page settles — a status glyph
+  gated on a snapshot fetch — missed that read: its declared `animation-duration`
+  was folded back on a run where it mounted early but left frozen to `0s` on a run
+  where it mounted late, surfacing as a self-check `animation-duration: 0s ↔ 1.6s`
+  non-deterministic failure. Motion is now read on the settled DOM (the freeze is
+  lifted only for that read), so a late-mounted animated element is captured
+  identically every run.
+
 ## [2.3.0] - 2026-06-23
 
 ### Added

package/dist/capture.js

@@ -562,15 +562,26 @@ export async function captureStyleMap(page, options = {}) {
     // can't share a module-scope function) call ONE definition — no duplicated source.
     // It persists on `window` for every evaluate below (no navigation between them).
     await page.evaluate(injectPathOf);
-    // Motion longhands first (FREEZE_CSS would null them), then everything else.
-    // Motion never carries text — it's a settled end state of declared motion.
-    const motion = await page.evaluate(capturePage, { ignore, motionOnly: true, captureText: false });
-    await page.addStyleTag({ content: FREEZE_CSS });
+    // Freeze motion BEFORE settling: animating elements would otherwise read as
+    // perpetual churn during the settle, and any content that mounts during the
+    // settle must be frozen by the time we read it below.
+    const freezeTag = await page.addStyleTag({ content: FREEZE_CSS });
     // Settle: wait for async content to finish painting so base and head capture
     // the same loaded state, and collect any region still changing on its own
     // (a live stream/ticker) to exclude — animations are frozen above, so only
     // real content/layout churn lands here.
     const volatile = await detectVolatile(page, ignore, stabilize, captureText, options.pendingRequests);
+    // Motion longhands (transition/animation) are read separately so declared
+    // motion is verified even though every other value is a frozen end state.
+    // Read them on the SETTLED DOM, not before it: capturing pre-settle missed any
+    // element that mounts DURING the settle (e.g. a late status glyph), so its
+    // declared `animation-duration` was folded back on the run where it happened to
+    // mount early but left frozen (0s) on the run where it mounted late — a
+    // self-check "non-deterministic" flip. Lift the freeze just for this read (it
+    // nulls motion to 0s), then re-apply it before reading everything else.
+    await freezeTag.evaluate((el) => el.remove());
+    const motion = await page.evaluate(capturePage, { ignore, motionOnly: true, captureText: false });
+    await page.addStyleTag({ content: FREEZE_CSS });
     const base = await page.evaluate(capturePage, { ignore, motionOnly: false, captureText, captureComponent });
     dropVolatile(base.elements, volatile);
     warnUntraversed(base.shadowHosts, base.sameOriginFrames);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styleproof",
-  "version": "2.3.0",
+  "version": "2.3.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",