styleproof 1.10.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/README.md +29 -14
  3. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -7,6 +7,38 @@ this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
7
7
 
8
8
  ## [Unreleased]
9
9
 
10
+ ## [2.0.0] - 2026-06-22
11
+
12
+ ### Changed
13
+
14
+ - **Single approval box is the only review-gate UI.** The report comment carries
15
+ one **Approve all changes** checkbox — one tick signs off every change. The
16
+ per-change boxes (and the `approve-all` input that opted into the single box) are
17
+ gone. **Breaking:** a review-gate consumer on the old per-change
18
+ `styleproof-approve` workflow must replace it with the updated
19
+ `example/styleproof-approve.yml` — the old one counts `Approve this change` boxes
20
+ that no longer exist, so it would never turn the status green.
21
+ - **Lean PR comment; the committed report is the complete source of truth.** The
22
+ comment is now a summary + the approval box + a link to the side-by-side report.
23
+ Before/after crops and per-element property tables live only in the report, so
24
+ the comment and report can't drift and the comment renders identically on public
25
+ and private repos. **Breaking:** the `inline-images` input is removed (the comment
26
+ no longer embeds images).
27
+
28
+ ### Added
29
+
30
+ - **Approver attribution.** When a reviewer ticks **Approve all changes**, the
31
+ comment shows _approved by @them_ inline and the commit-status description reads
32
+ `Approved by @them`. The status is the source of truth, so a later report re-run
33
+ (e.g. to clear a blocking check) reconstructs the attribution instead of losing it.
34
+ - **`styleproof.config.json` policy file + `blocking`.** An optional repo-root file
35
+ for gate _policy_, separate from the Action's workflow-_plumbing_ inputs.
36
+ `"blocking": true` makes review-gate mode also **fail the job** on unapproved
37
+ visual changes, so the check is red even without a branch-protection rule
38
+ requiring the status — the blocking option for free private repos. Asynchronous by
39
+ design: tick **Approve all changes**, then re-run the job; the re-run reads the
40
+ sign-off from the commit status and passes instead of clobbering it.
41
+
10
42
  ## [1.10.0] - 2026-06-22
11
43
 
12
44
  ### Added
package/README.md CHANGED
@@ -14,9 +14,9 @@ Pixel-snapshot tools miss most CSS regressions: they can't force `:hover` / `:fo
14
14
 
15
15
  On every PR, StyleProof captures a `StyleMap` from the HEAD and from the base branch, diffs them, and posts a Markdown comment:
16
16
 
17
- - A summary line, then **one section per distinct change**, with a side-by-side before/after cropped screenshot (both sides cropped from the same rectangle, so they line up exactly) and **plain-English bullets that tell you what to look for** (`columns: 2 → 3`, `recoloured cyan → amber`) above the exact property changes, folded under a toggle.
18
- - An **approval checkbox per change** — or, with `approve-all: true`, a single **Approve all changes** box at the top that signs off everything in one tick — driving a `StyleProof` commit status: red until signed off, green when there are none.
19
- - **New surfaces don't block.** A surface that exists only on the PR head (no baseline to diff — e.g. the bootstrap PR that first adds the capture spec, or a brand-new page) is shown with its screenshot under a `🆕 new surface` heading and an _optional_ approval box, but it never holds the status red. It becomes part of the baseline once merged.
17
+ - A **lean summary comment** linking to a committed side-by-side report — the report is the complete source of truth (**one section per distinct change**, with a before/after cropped screenshot cropped from the same rectangle so the two sides line up exactly, **plain-English bullets that tell you what to look for** `columns: 2 → 3`, `recoloured cyan → amber` and the exact property changes). The comment never duplicates the report, so the two can't drift, and it renders identically on public and private repos.
18
+ - A single **Approve all changes** checkbox in the comment, driving a `StyleProof` commit status: red until one tick signs off every change, green when there are none. The reviewer who ticks it is recorded inline (_approved by @them_), sourced from the commit status so it survives a report re-run.
19
+ - **New surfaces don't block.** A surface that exists only on the PR head (no baseline to diff — e.g. the bootstrap PR that first adds the capture spec, or a brand-new page) is shown in the report under a `🆕 new surface` heading but never holds the status red and needs no sign-off. It becomes part of the baseline once merged.
20
20
  - No committed baseline to maintain — the diff is HEAD-vs-base, so the report is _exactly what this PR changes_.
21
21
 
22
22
  ## What a report looks like
@@ -111,7 +111,7 @@ jobs:
111
111
  - run: STYLEMAP_DIR=head STYLEPROOF_REPLAY_FROM=__stylemaps__/base npx playwright test e2e/styleproof.spec.ts
112
112
 
113
113
  # report + gate
114
- - uses: BenSheridanEdwards/StyleProof@v1
114
+ - uses: BenSheridanEdwards/StyleProof@v2
115
115
  with:
116
116
  baseline-dir: __stylemaps__/base # captures land under baseDir (default __stylemaps__)
117
117
  fresh-dir: __stylemaps__/head
@@ -170,18 +170,33 @@ Notes: only an element's _own_ text is recorded (so a parent and child never dou
170
170
 
171
171
  ## Reference
172
172
 
173
- **Action `BenSheridanEdwards/StyleProof@v1`** — key inputs:
173
+ **Action `BenSheridanEdwards/StyleProof@v2`** — key inputs:
174
174
 
175
- | Input | Default | Purpose |
176
- | ------------------ | ------------ | --------------------------------------------------------------------------------------- |
177
- | `baseline-dir` | _required_ | Base-branch captures. |
178
- | `fresh-dir` | _required_ | PR-head captures to compare. |
179
- | `require-approval` | `false` | Review-gate mode: set the `StyleProof` status instead of failing. |
180
- | `fail-on-diff` | `true` | Certify mode: fail on any diff. Ignored when `require-approval` is true. |
181
- | `status-context` | `StyleProof` | Commit-status name. Must match the approve workflow and branch protection. |
182
- | `approve-all` | `false` | Review-gate UI: one **Approve all changes** box at the top instead of per-change boxes. |
175
+ | Input | Default | Purpose |
176
+ | ------------------ | ------------ | -------------------------------------------------------------------------- |
177
+ | `baseline-dir` | _required_ | Base-branch captures. |
178
+ | `fresh-dir` | _required_ | PR-head captures to compare. |
179
+ | `require-approval` | `false` | Review-gate mode: set the `StyleProof` status instead of failing. |
180
+ | `fail-on-diff` | `true` | Certify mode: fail on any diff. Ignored when `require-approval` is true. |
181
+ | `status-context` | `StyleProof` | Commit-status name. Must match the approve workflow and branch protection. |
183
182
 
184
- Outputs: `changed` (`"true"` when anything changed), `report-url`. Other inputs (`report-branch`, `inline-images`, `github-token`) have sensible defaults — see [`action.yml`](https://github.com/BenSheridanEdwards/StyleProof/blob/main/action.yml).
183
+ Outputs: `changed` (`"true"` when anything changed), `report-url`. Other inputs (`report-branch`, `github-token`) have sensible defaults — see [`action.yml`](https://github.com/BenSheridanEdwards/StyleProof/blob/main/action.yml).
184
+
185
+ **Policy file `styleproof.config.json`** (optional, at the repo root) — gate policy that isn't workflow plumbing:
186
+
187
+ | Key | Default | Purpose |
188
+ | ---------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
189
+ | `blocking` | `false` | Review-gate mode only: on **unapproved** visual changes, also **fail the job** (red ✗), so the check blocks even without a branch-protection rule requiring the status. See below. |
190
+
191
+ ### Blocking without branch protection
192
+
193
+ A commit status only _blocks a merge_ where a branch-protection rule requires it — which needs GitHub Pro or a public repo. On a free private repo the `StyleProof` status is advisory. Set `"blocking": true` in `styleproof.config.json` to also fail the report job on unapproved changes, so the PR shows a red check regardless:
194
+
195
+ ```json
196
+ { "blocking": true }
197
+ ```
198
+
199
+ It's **asynchronous by design**: approval is a checkbox tick handled by a separate workflow, so to clear the red you tick **Approve all changes**, then **re-run the StyleProof job** — the re-run sees the sign-off on the commit status and passes. (A new push that changes styles re-opens it.)
185
200
 
186
201
  **Capture spec `defineStyleMapCapture({ surfaces, … })`** — determinism is on by default; you rarely set more than `surfaces` and `dir`:
187
202
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "styleproof",
3
- "version": "1.10.0",
3
+ "version": "2.0.0",
4
4
  "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.",
5
5
  "keywords": [
6
6
  "playwright",