styleproof 1.9.1 → 1.9.4

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 +34 -12
  2. package/README.md +33 -8
  3. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -7,6 +7,28 @@ this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
7
7
 
8
8
  ## [Unreleased]
9
9
 
10
+ ## [1.9.4]
11
+
12
+ ### Changed
13
+
14
+ - Repository URLs now use the canonical `BenSheridanEdwards/StyleProof` casing
15
+ everywhere — README badges, Action references, and doc links, plus the CHANGELOG
16
+ compare links, CONTRIBUTING, SECURITY, `action.yml`, and the release workflow.
17
+ (npm package-name URLs stay lowercase, as npm requires.)
18
+
19
+ ## [1.9.3]
20
+
21
+ ### Changed
22
+
23
+ - Canonical `StyleProof`-cased GitHub URLs in `package.json` (`homepage`,
24
+ `repository`, `bugs`).
25
+
26
+ ### Fixed
27
+
28
+ - The README demo image now uses an absolute `raw.githubusercontent.com` URL so it
29
+ renders on the npm package page — relative paths don't resolve there, so the image
30
+ showed broken on npmjs.com.
31
+
10
32
  ## [1.9.1]
11
33
 
12
34
  ### Fixed
@@ -486,15 +508,15 @@ number)`), so each viewport band can capture at its own height. Default remains
486
508
  - `styleproof-diff` CLI: certifies a refactor (exit 0) or names the exact element,
487
509
  property, and state that drifted (exit 1).
488
510
 
489
- [Unreleased]: https://github.com/BenSheridanEdwards/styleproof/compare/v1.2.0...HEAD
490
- [1.2.0]: https://github.com/BenSheridanEdwards/styleproof/compare/v1.1.0...v1.2.0
491
- [1.1.0]: https://github.com/BenSheridanEdwards/styleproof/compare/v1.0.0...v1.1.0
492
- [1.0.0]: https://github.com/BenSheridanEdwards/styleproof/compare/v0.7.0...v1.0.0
493
- [0.7.0]: https://github.com/BenSheridanEdwards/styleproof/compare/v0.6.0...v0.7.0
494
- [0.6.0]: https://github.com/BenSheridanEdwards/styleproof/compare/v0.5.0...v0.6.0
495
- [0.5.0]: https://github.com/BenSheridanEdwards/styleproof/compare/v0.4.0...v0.5.0
496
- [0.4.0]: https://github.com/BenSheridanEdwards/styleproof/compare/v0.3.0...v0.4.0
497
- [0.3.0]: https://github.com/BenSheridanEdwards/styleproof/compare/v0.2.1...v0.3.0
498
- [0.2.1]: https://github.com/BenSheridanEdwards/styleproof/compare/v0.2.0...v0.2.1
499
- [0.2.0]: https://github.com/BenSheridanEdwards/styleproof/compare/v0.1.0...v0.2.0
500
- [0.1.0]: https://github.com/BenSheridanEdwards/styleproof/releases/tag/v0.1.0
511
+ [Unreleased]: https://github.com/BenSheridanEdwards/StyleProof/compare/v1.2.0...HEAD
512
+ [1.2.0]: https://github.com/BenSheridanEdwards/StyleProof/compare/v1.1.0...v1.2.0
513
+ [1.1.0]: https://github.com/BenSheridanEdwards/StyleProof/compare/v1.0.0...v1.1.0
514
+ [1.0.0]: https://github.com/BenSheridanEdwards/StyleProof/compare/v0.7.0...v1.0.0
515
+ [0.7.0]: https://github.com/BenSheridanEdwards/StyleProof/compare/v0.6.0...v0.7.0
516
+ [0.6.0]: https://github.com/BenSheridanEdwards/StyleProof/compare/v0.5.0...v0.6.0
517
+ [0.5.0]: https://github.com/BenSheridanEdwards/StyleProof/compare/v0.4.0...v0.5.0
518
+ [0.4.0]: https://github.com/BenSheridanEdwards/StyleProof/compare/v0.3.0...v0.4.0
519
+ [0.3.0]: https://github.com/BenSheridanEdwards/StyleProof/compare/v0.2.1...v0.3.0
520
+ [0.2.1]: https://github.com/BenSheridanEdwards/StyleProof/compare/v0.2.0...v0.2.1
521
+ [0.2.0]: https://github.com/BenSheridanEdwards/StyleProof/compare/v0.1.0...v0.2.0
522
+ [0.1.0]: https://github.com/BenSheridanEdwards/StyleProof/releases/tag/v0.1.0
package/README.md CHANGED
@@ -3,8 +3,8 @@
3
3
  **Know exactly what every PR changes visually, and sign it off.** StyleProof captures the browser's _computed_ styles (not pixels), diffs your PR's HEAD against its base branch, and posts a per-change report on the PR, so a styling change never ships without someone confirming it was intended.
4
4
 
5
5
  [![npm version](https://img.shields.io/npm/v/styleproof.svg)](https://www.npmjs.com/package/styleproof)
6
- [![CI](https://github.com/BenSheridanEdwards/styleproof/actions/workflows/ci.yml/badge.svg)](https://github.com/BenSheridanEdwards/styleproof/actions)
7
- [![license](https://img.shields.io/npm/l/styleproof.svg)](https://github.com/BenSheridanEdwards/styleproof/blob/main/LICENSE)
6
+ [![CI](https://github.com/BenSheridanEdwards/StyleProof/actions/workflows/ci.yml/badge.svg)](https://github.com/BenSheridanEdwards/StyleProof/actions)
7
+ [![license](https://img.shields.io/npm/l/styleproof.svg)](https://github.com/BenSheridanEdwards/StyleProof/blob/main/LICENSE)
8
8
 
9
9
  ## Why
10
10
 
@@ -23,7 +23,7 @@ On every PR, StyleProof captures a `StyleMap` from the HEAD and from the base br
23
23
 
24
24
  One change — the hero CTA recoloured cyan → amber — posts as a single section: a side-by-side before/after cropped screenshot, a one-line summary, then the exact property change folded under a toggle.
25
25
 
26
- ![A StyleProof report: the CTA button before (cyan) and after (amber), side by side](docs/demo-composite.png)
26
+ ![A StyleProof report: the CTA button before (cyan) and after (amber), side by side](https://raw.githubusercontent.com/BenSheridanEdwards/StyleProof/main/docs/demo-composite.png)
27
27
 
28
28
  As it renders in the PR comment (a plain-English bullet first — naming the theme token and showing the hex with a live colour swatch — then the exact table inside the toggle):
29
29
 
@@ -111,14 +111,14 @@ 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@v1
115
115
  with:
116
116
  baseline-dir: base
117
117
  fresh-dir: head
118
118
  require-approval: true # review-gate mode (omit / use fail-on-diff: true to certify)
119
119
  ```
120
120
 
121
- **3. Copy [`example/styleproof-approve.yml`](https://github.com/BenSheridanEdwards/styleproof/blob/main/example/styleproof-approve.yml) to `.github/workflows/` on your default branch** — GitHub only runs `issue_comment` workflows from there, so the checkboxes do nothing until it's merged.
121
+ **3. Copy [`example/styleproof-approve.yml`](https://github.com/BenSheridanEdwards/StyleProof/blob/main/example/styleproof-approve.yml) to `.github/workflows/` on your default branch** — GitHub only runs `issue_comment` workflows from there, so the checkboxes do nothing until it's merged.
122
122
 
123
123
  **4. Require the `StyleProof` status** in branch protection. Now an unsigned visual change can't merge.
124
124
 
@@ -135,7 +135,7 @@ jobs:
135
135
 
136
136
  ## Reference
137
137
 
138
- **Action `BenSheridanEdwards/styleproof@v1`** — key inputs:
138
+ **Action `BenSheridanEdwards/StyleProof@v1`** — key inputs:
139
139
 
140
140
  | Input | Default | Purpose |
141
141
  | ------------------ | ------------ | -------------------------------------------------------------------------- |
@@ -145,7 +145,32 @@ jobs:
145
145
  | `fail-on-diff` | `true` | Certify mode: fail on any diff. Ignored when `require-approval` is true. |
146
146
  | `status-context` | `StyleProof` | Commit-status name. Must match the approve workflow and branch protection. |
147
147
 
148
- 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).
148
+ 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).
149
+
150
+ **Capture spec `defineStyleMapCapture({ surfaces, … })`** — determinism is on by default; you rarely set more than `surfaces` and `dir`:
151
+
152
+ | Option | Default | Purpose |
153
+ | ------------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------- |
154
+ | `surfaces` | _required_ | Page states to certify — each `{ key, go, widths, ignore?, height? }`. `go(page)` drives to a settled state. |
155
+ | `dir` | `STYLEMAP_DIR` | Output label (`base`/`head`); the spec is **inert until set**, so it sits safely beside your other specs. |
156
+ | `replayFrom` | `STYLEPROOF_REPLAY_FROM` | Baseline dir whose recorded responses to replay. Unset → this run **records** its HAR for the comparison to use. |
157
+ | `replayUrl` | `**/api/**` (`…REPLAY_URL`) | URL glob for the data boundary to record/replay; everything else (JS/CSS/fonts) loads live so the code runs. |
158
+ | `freezeClock` | `true` | Pin `Date.now()`/`new Date()` so time-derived styling can't drift; timers keep running so settling still works. |
159
+ | `clockTime` | `2025-01-01T00:00:00Z` | The frozen instant. |
160
+ | `selfCheck` | `STYLEPROOF_SELFCHECK=1` | Capture each surface twice and fail on any difference — proves the capture is deterministic. |
161
+ | `screenshots` | `true` | Save full-page screenshots for the report's before/after crops. |
162
+ | `baseDir` | `__stylemaps__` | Output root directory. |
163
+
164
+ Non-visual and framework-injected elements (`<meta>`/`<title>`/`<script>`/`<style>`/… and `next-route-announcer`) are skipped automatically; a surface's `ignore` adds to that default, it doesn't replace it.
165
+
166
+ **Capture env vars** (wire CI without editing the spec):
167
+
168
+ | Env | Purpose |
169
+ | ------------------------ | ----------------------------------------------------------------------------- |
170
+ | `STYLEMAP_DIR` | Output label; the capture is skipped entirely when unset. |
171
+ | `STYLEPROOF_REPLAY_FROM` | Baseline dir to replay recorded data from — set this on the **head** capture. |
172
+ | `STYLEPROOF_REPLAY_URL` | Override the `**/api/**` data-boundary glob. |
173
+ | `STYLEPROOF_SELFCHECK` | `1` to capture each surface twice and fail if the two differ. |
149
174
 
150
175
  **CLIs** (every flag accepts `--flag value` and `--flag=value`; `--help` lists all):
151
176
 
@@ -153,7 +178,7 @@ Outputs: `changed` (`"true"` when anything changed), `report-url`. Other inputs
153
178
  - `styleproof-diff <beforeDir> <afterDir>` — the certify gate; exits `1` on any difference.
154
179
  - `styleproof-report <beforeDir> <afterDir> --out <dir>` — render the diff to a Markdown report with before/after crops.
155
180
 
156
- A programmatic API (`captureStyleMap`, `diffStyleMaps`, `generateStyleMapReport`, …) is also exported. For the capture internals, the approve-workflow trust model, and how to contribute, see [CONTRIBUTING](https://github.com/BenSheridanEdwards/styleproof/blob/main/CONTRIBUTING.md) and the [`example/`](https://github.com/BenSheridanEdwards/styleproof/tree/main/example) workflows.
181
+ A programmatic API (`captureStyleMap`, `diffStyleMaps`, `generateStyleMapReport`, …) is also exported. For the capture internals, the approve-workflow trust model, and how to contribute, see [CONTRIBUTING](https://github.com/BenSheridanEdwards/StyleProof/blob/main/CONTRIBUTING.md) and the [`example/`](https://github.com/BenSheridanEdwards/StyleProof/tree/main/example) workflows.
157
182
 
158
183
  ## License
159
184
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "styleproof",
3
- "version": "1.9.1",
3
+ "version": "1.9.4",
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",
@@ -16,14 +16,14 @@
16
16
  "ci"
17
17
  ],
18
18
  "license": "MIT",
19
- "author": "Ben Sheridan-Edwards <ben@codewalnut.com>",
20
- "homepage": "https://github.com/BenSheridanEdwards/styleproof#readme",
19
+ "author": "Ben Sheridan-Edwards",
20
+ "homepage": "https://github.com/BenSheridanEdwards/StyleProof#readme",
21
21
  "repository": {
22
22
  "type": "git",
23
- "url": "git+https://github.com/BenSheridanEdwards/styleproof.git"
23
+ "url": "git+https://github.com/BenSheridanEdwards/StyleProof.git"
24
24
  },
25
25
  "bugs": {
26
- "url": "https://github.com/BenSheridanEdwards/styleproof/issues"
26
+ "url": "https://github.com/BenSheridanEdwards/StyleProof/issues"
27
27
  },
28
28
  "type": "module",
29
29
  "main": "./dist/index.js",