stylelint-plugin-rhythmguard 3.8.0 → 3.9.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.
- package/CHANGELOG.md +30 -0
- package/CONTRIBUTING.md +11 -6
- package/README.md +16 -9
- package/package.json +7 -7
- package/src/audit/config.js +1 -1
- package/src/audit/contract.js +3 -1
- package/src/audit/render-markdown.js +1 -0
- package/src/audit/render-text.js +1 -0
- package/src/audit/report.js +1 -0
- package/src/audit/scan/files.js +2 -2
- package/src/audit/scan/stylesheets.js +8 -0
- package/src/audit/scan/templates.js +45 -11
- package/src/configs/embed.js +2 -2
- package/src/core/scale-inference.js +8 -4
- package/src/core/token-index.js +66 -12
- package/src/core/token-packages.json +7 -0
- package/src/core/token-sources.js +2 -2
- package/src/rules/no-offscale-transform/index.js +9 -3
- package/src/rules/prefer-token/index.js +77 -8
- package/src/rules/use-scale/index.js +9 -3
- package/types/audit.d.ts +2 -0
package/CHANGELOG.md
CHANGED
|
@@ -6,6 +6,36 @@ The format follows Keep a Changelog principles and semantic versioning.
|
|
|
6
6
|
|
|
7
7
|
## [Unreleased]
|
|
8
8
|
|
|
9
|
+
## [3.9.0] - 2026-10-15
|
|
10
|
+
|
|
11
|
+
### Added
|
|
12
|
+
|
|
13
|
+
- `scale: "auto"` reads `@mozilla-protocol/tokens` when it is installed: `--spacing-xs` to `--spacing-2xl` (4 to 48px) from `dist/units/units.custom-properties.css`. Mozilla Protocol's benchmark row is measured against that package at 7.0.0, as a Protocol contributor pointed out in mozilla/protocol#1132: 19 off-scale values, against 18 on the `rhythmic-4` fallback, because 12px is not a Protocol step and 48px is.
|
|
14
|
+
|
|
15
|
+
### Fixed
|
|
16
|
+
|
|
17
|
+
- `prefer-token` reads the token sources `use-scale` reads for `fixWith: "token"`: the linted stylesheet, `scaleSources`, the `audit.tokenSources` files in `.rhythmguardrc.json` and installed token packages ([#202](https://github.com/PetriLahdelma/stylelint-plugin-rhythmguard/issues/202)). Before, a token declared in a config token source was invisible to `prefer-token`, which then said no token held a value that one did; on one consumer, 478 of 611 baselined warnings were values an existing token holds. Both rules now resolve tokens through one function, so a token is known to both or to neither, and a contract test holds them to it. The fix writes such a token only when exactly one holds the value in the literal's unit, the same rule `fixWith: "token"` follows.
|
|
18
|
+
- Tokens are matched to the property's kind. A `tokenPattern` such as `^--space-|^--radius-` no longer lets `padding: 1rem` be pointed at, or fixed to, `--radius-xl` because it also holds 16px. Radius, typography and motion tokens serve their own properties; spacing and size tokens serve each other's. Applies to `prefer-token` and to `fixWith: "token"` in `use-scale` and `no-offscale-transform`.
|
|
19
|
+
- A rule's own `tokenPattern` applies to the token source files it reads as well as to the stylesheet, so `--radius-*` tokens in a config token source are found when the pattern asks for them.
|
|
20
|
+
- The audit no longer hangs on template files that contain an unclosed quote followed by escape-dense source. The Tailwind class-string scanner found string literals with a regex whose alternation was ambiguous on every backslash, so from an apostrophe in a comment or a quote inside a regex literal it backtracked exponentially over the `\{ \[ \(` of the next regex literal; on the Ace editor's `mode-alda.js` (10 KB, vendored by a MediaWiki skin) one `rhythmguard audit` ran for eleven hours before it was killed, and Bootswatch's audit took longer than three minutes. The finder is now a single linear pass: an escape never closes a literal, a `'` or `"` literal that reaches a line break is not a literal, a backtick literal may span lines. Both repositories audit in seconds. The benchmark gained five findings that an unclosed quote had been hiding (four in Ghost's `input-group.tsx`, one in Cal.com's `Button.tsx`).
|
|
21
|
+
- The audit no longer throws `All input files were ignored because of the ignore pattern` when a project's own `.stylelintignore` excludes every stylesheet the walk found. The files are counted as `scanned.stylelintIgnored` in the JSON contract and shown in text and Markdown output, so a clean report cannot hide that nothing was audited.
|
|
22
|
+
|
|
23
|
+
### Messages
|
|
24
|
+
|
|
25
|
+
Message text changes are listed here, so teams that key a warning baseline on message text know which warnings will reappear as resolved-plus-new pairs (see [#172](https://github.com/PetriLahdelma/stylelint-plugin-rhythmguard/issues/172)).
|
|
26
|
+
|
|
27
|
+
- `prefer-token`, when a token in a config token source, `scaleSources` or an installed token package holds the value: was `No known token holds this value; use the nearest token or add one.`, now `Use var(--token) (path/to/tokens.css).` When a token in another unit holds it, the message names that token and the fix leaves the literal.
|
|
28
|
+
- `prefer-token`, when several tokens hold the value: was `No known token holds this value; ...`, now `Use one of the tokens that hold it: var(--a) or var(--b).`
|
|
29
|
+
- Unchanged: the message for a value no token holds, and every `use-scale` message.
|
|
30
|
+
|
|
31
|
+
### Changed
|
|
32
|
+
|
|
33
|
+
- The post-publish smoke waits for the version through `npm view --prefer-online`, the client that will install it, instead of the raw packument; for 3.8.0 the packument listed the version a minute before `npm install` could resolve it and the smoke failed.
|
|
34
|
+
- The quiet benchmark installs the token packages maintainers named as the home of their scale. A manifest row lists them under `tokenPackages` with a pinned version; `npm run bench:quiet` installs them once under `benchmarks/quiet/packages/` with install scripts disabled and passes the allowlisted token files to the audit as explicit sources, so the row is measured against the ladder the maintainers pointed at instead of the `rhythmic-4` fallback or a set of consumer tokens. Carbon (`@carbon/layout`), Primer CSS and Primer React (`@primer/primitives`), mittwald Flow (`@mittwald/flow-design-tokens`) and AdminLTE (`bootstrap`) are measured this way; the SAP rows stay unmeasured because their theming package carries no ladder. The State of Spacing edition marks these rows `installed` and counts them.
|
|
35
|
+
- PatternFly's fourteen benchmark findings are labelled by review: four in a vendored Font Awesome partial and ten in documentation example CSS, none in component SCSS, as the reply in patternfly/patternfly#8579 said. Per-repo labels live in `benchmarks/quiet/labels/`.
|
|
36
|
+
- New README banner for 3.8.0. GitHub shows the transparent SVG; npmjs.com, which renders the README on a white page, gets the non-transparent PNG (`assets/rhythmguard-banner.png`): the release job swaps the banner line with `scripts/ci/npm-readme.mjs` just before `npm publish`, and a contract test fails if the banner line is not found exactly once. The npm page changes with the next published version.
|
|
37
|
+
- `rhythmguard` and `eslint-plugin-rhythmguard` are on npm (3.8.0, first published by hand on 2026-09-27). `npx rhythmguard` now works in a project that has installed nothing, and the README's first command and ESLint setup use the two packages. Later releases publish them from `release.yml` once each has a trusted publisher and `PUBLISH_COMPANIONS` is set.
|
|
38
|
+
|
|
9
39
|
## [3.8.0] - 2026-09-18
|
|
10
40
|
|
|
11
41
|
### Added
|
package/CONTRIBUTING.md
CHANGED
|
@@ -6,7 +6,7 @@ Thank you for being here. Rhythmguard is a small, opinionated tool with one job:
|
|
|
6
6
|
|
|
7
7
|
**Report a false positive.** A finding your team considers wrong is the most valuable report we get. It is how percentages and hairlines stopped being findings. Open a [false-positive report](https://github.com/PetriLahdelma/stylelint-plugin-rhythmguard/issues/new?template=false-positive.yml) with the CSS or class string and your config. No fix required.
|
|
8
8
|
|
|
9
|
-
**Add a repository to the quiet benchmark.** The benchmark audits public design systems and fails CI when the findings change. Adding a repo is one JSON entry in `benchmarks/quiet/repos.json` plus `npm run bench:quiet -- --only <name>` to create its snapshot. Systems with tokens in unusual places are the most useful additions. The same results feed the dated [State of Spacing](./docs/STATE_OF_SPACING.md) editions, so every repository you add widens that report.
|
|
9
|
+
**Add a repository to the quiet benchmark.** The benchmark audits public design systems and fails CI when the findings change. Adding a repo is one JSON entry in `benchmarks/quiet/repos.json` plus `npm run bench:quiet -- --only <name>` to create its snapshot. Systems with tokens in unusual places are the most useful additions. When the scale ships in an npm package rather than in the repository, list it under `tokenPackages` with a pinned version (the package must be in `src/core/token-packages.json`); the bench installs it and measures the row against that ladder. The same results feed the dated [State of Spacing](./docs/STATE_OF_SPACING.md) editions, so every repository you add widens that report.
|
|
10
10
|
|
|
11
11
|
**Review a drift list.** Each benchmark repo has a list of findings that heuristics call real drift. Labelling them as real or as an allowance in `benchmarks/quiet/labels/<repo>.json` with a one-line reason turns a heuristic number into a reviewed one, and any systematic pattern you find becomes a candidate default.
|
|
12
12
|
|
|
@@ -16,6 +16,8 @@ Thank you for being here. Rhythmguard is a small, opinionated tool with one job:
|
|
|
16
16
|
|
|
17
17
|
**Contribute a community scale.** JSON files in `scales/community/`, scaffolded with `npm run scales:add -- --name my-team-scale --base 8 --steps 0,4,8,12,16,24,32` and checked with `npm run scales:validate`. Spec and policy in [`docs/COMMUNITY_SCALES.md`](./docs/COMMUNITY_SCALES.md).
|
|
18
18
|
|
|
19
|
+
The plan for the next nine months is in [`ROADMAP.md`](./ROADMAP.md), and every item there is an issue labelled [`roadmap`](https://github.com/PetriLahdelma/stylelint-plugin-rhythmguard/labels/roadmap) with a milestone. Items labelled `decision` are open questions with the evidence that will settle them; a comment with evidence is a contribution.
|
|
20
|
+
|
|
19
21
|
Issues labelled [`good first issue`](https://github.com/PetriLahdelma/stylelint-plugin-rhythmguard/labels/good%20first%20issue) are scoped for a first PR. [`help wanted`](https://github.com/PetriLahdelma/stylelint-plugin-rhythmguard/labels/help%20wanted) marks work the maintainer would like a second pair of hands on. If you want to work on something larger, open an issue first so we can agree the shape before you write code.
|
|
20
22
|
|
|
21
23
|
## Getting set up
|
|
@@ -27,7 +29,7 @@ npm ci
|
|
|
27
29
|
npm test
|
|
28
30
|
```
|
|
29
31
|
|
|
30
|
-
Node 20.19 or newer. No build step; the source runs as is. Tests use `node --test` through `scripts/test.mjs` and take about
|
|
32
|
+
Node 20.19 or newer. No build step; the source runs as is. Tests use `node --test` through `scripts/test.mjs` and take about fifteen seconds. They are grouped by what they prove:
|
|
31
33
|
|
|
32
34
|
| Folder | Proves | Run one |
|
|
33
35
|
| --- | --- | --- |
|
|
@@ -48,7 +50,7 @@ Run these before you push. They are what CI runs, so a green local run means a g
|
|
|
48
50
|
```bash
|
|
49
51
|
npm run lint # eslint
|
|
50
52
|
npm run typecheck # the published TypeScript declarations against a consumer file and the examples
|
|
51
|
-
npm test #
|
|
53
|
+
npm test # 300+ tests, on the Stylelint in the lockfile (17)
|
|
52
54
|
```
|
|
53
55
|
|
|
54
56
|
Optional, depending on what you touched:
|
|
@@ -59,6 +61,8 @@ npm run test:pack-smoke # pack the tarball and install it in a temp proje
|
|
|
59
61
|
npm run scales:validate # community scale JSON
|
|
60
62
|
npm run bench:quiet -- --check # findings on the benchmark repos must match snapshots
|
|
61
63
|
npm run build:agents # after editing the block in docs/FOR_AGENTS.md
|
|
64
|
+
npm run build:playground # after changing anything under src/ the rules use
|
|
65
|
+
npm run bench:agents -- --dry-run --limit 4 # the agent eval pipeline, no API key needed
|
|
62
66
|
```
|
|
63
67
|
|
|
64
68
|
The local gate runs on whatever Node you have installed; CI runs Node 20 and 22. Node 20.19 is the floor, so avoid features that arrived in Node 21 or later. Glob patterns for `node --test` were one such feature, and they took a release run down.
|
|
@@ -67,7 +71,7 @@ If your shell's npm registry is overridden by a corporate `.npmrc`, add `--regis
|
|
|
67
71
|
|
|
68
72
|
### Pull requests from forks
|
|
69
73
|
|
|
70
|
-
CI for this repository runs on self-hosted runners for pushes and same-repo branches. For pull requests from forks a separate job runs on GitHub-hosted runners with Node 22 and
|
|
74
|
+
CI for this repository runs on self-hosted runners for pushes and same-repo branches. For pull requests from forks a separate job runs on GitHub-hosted runners with Node 22 and the Stylelint in the lockfile (17), covering lint, typecheck and the test suite. You will see its result on your PR. The full matrix and the benchmark run after merge.
|
|
71
75
|
|
|
72
76
|
## Where things live
|
|
73
77
|
|
|
@@ -96,7 +100,8 @@ CI for this repository runs on self-hosted runners for pushes and same-repo bran
|
|
|
96
100
|
## Compatibility
|
|
97
101
|
|
|
98
102
|
- Stylelint `^16.0.0 || ^17.0.0`. The 16.0.0 floor has known autofix differences; CI runs the floor suite against it.
|
|
99
|
-
- Node `>=20.19.0
|
|
103
|
+
- Node `>=20.19.0` until 4.0, which raises it to 22.22 ([#172](https://github.com/PetriLahdelma/stylelint-plugin-rhythmguard/issues/172)).
|
|
104
|
+
- ESLint `>=8.0.0` for the companion rules; tested on 9.
|
|
100
105
|
- CommonJS and ESM entry points; every export has a declaration under `types/`.
|
|
101
106
|
- Three runtime dependencies: `known-css-properties`, `postcss` and `postcss-value-parser`. `postcss-scss`, `stylelint-config-tailwindcss` and `stylelint-plugin-logical-css` are optional peers and dev dependencies here. `test/contracts/architecture.test.js` fails if a runtime import is not declared.
|
|
102
107
|
|
|
@@ -106,7 +111,7 @@ The maintainer aims to respond to issues and PRs within a week. Small PRs merge
|
|
|
106
111
|
|
|
107
112
|
## Releases
|
|
108
113
|
|
|
109
|
-
Maintainer-run. Bump `package.json` and `CHANGELOG.md
|
|
114
|
+
Maintainer-run. Bump `package.json`, the two companion packages under `packages/` and `CHANGELOG.md` to the same version, create a GitHub release, and `release.yml` verifies on the self-hosted matrix and publishes through npm trusted publishing (OIDC) from a GitHub-hosted job. The checklist covers cutting a release while the farm is down. Provenance is automatic. The checklist is in [`docs/RELEASE_CHECKLIST.md`](./docs/RELEASE_CHECKLIST.md).
|
|
110
115
|
|
|
111
116
|
## Benchmarking performance
|
|
112
117
|
|
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<img src="https://raw.githubusercontent.com/petrilahdelma/stylelint-plugin-rhythmguard/main/assets/rhythmguard-banner.
|
|
2
|
+
<img src="https://raw.githubusercontent.com/petrilahdelma/stylelint-plugin-rhythmguard/main/assets/rhythmguard-banner.png?v=13" width="100%" alt="Rhythmguard: stable local evidence for design system drift" />
|
|
3
3
|
</p>
|
|
4
4
|
|
|
5
5
|
# stylelint-plugin-rhythmguard
|
|
@@ -7,18 +7,18 @@
|
|
|
7
7
|
Nobody chose 13px. Rhythmguard catches off-scale spacing in CSS and Tailwind class strings, tells you the nearest steps on your scale, and snaps to them or to your tokens when you ask.
|
|
8
8
|
|
|
9
9
|
[](https://github.com/petrilahdelma/stylelint-plugin-rhythmguard/actions/workflows/ci.yml)
|
|
10
|
-
[](https://www.npmjs.com/package/stylelint-plugin-rhythmguard)
|
|
11
11
|
[](https://www.npmjs.com/package/stylelint-plugin-rhythmguard)
|
|
12
12
|
[](./LICENSE)
|
|
13
13
|
|
|
14
14
|
Rhythmguard is scale-aware rather than a blanket ban: values on your scale pass, values off it are reported with the two nearest steps, and tokens are only ever suggested from a map you control. It works on CSS and SCSS declarations through Stylelint and on Tailwind class strings through an ESLint companion, and it ships an audit CLI so you can measure drift and ratchet it down before enforcing anything.
|
|
15
15
|
|
|
16
|
-
What it is not: it does not check colors or hex values, and the Stylelint rules do not see Tailwind class strings (that is the separate ESLint companion below). Pair it with a color linter if you need one; do not expect one tool to do both.
|
|
16
|
+
What it is not: it does not check colors or hex values, and the Stylelint rules do not see Tailwind class strings (that is the separate ESLint companion below). It reads CSS and SCSS; Less and CSS-in-JS are not read. Pair it with a color linter if you need one; do not expect one tool to do both.
|
|
17
17
|
|
|
18
18
|
## Start here
|
|
19
19
|
|
|
20
20
|
```bash
|
|
21
|
-
npx
|
|
21
|
+
npx rhythmguard
|
|
22
22
|
```
|
|
23
23
|
|
|
24
24
|
No install, no config. It detects your stack and token files, infers your spacing scale from your own tokens, audits the current directory, and prints the exact `.stylelintrc.json` (and ESLint snippet for Tailwind) to paste. This is the whole run on Bootstrap's `v6-dev` branch, unedited:
|
|
@@ -47,11 +47,15 @@ That enables `rhythmguard/use-scale` on spacing properties with the default 4px
|
|
|
47
47
|
}
|
|
48
48
|
```
|
|
49
49
|
|
|
50
|
-
For class strings in JSX, TSX, Vue, Svelte or Astro, add the ESLint companion. It is the same rules
|
|
50
|
+
For class strings in JSX, TSX, Vue, Svelte or Astro, add the ESLint companion, [`eslint-plugin-rhythmguard`](packages/eslint-plugin-rhythmguard#readme). It is the same rules as `stylelint-plugin-rhythmguard/eslint`, so either import works. The rules also run under Oxlint's JS plugins.
|
|
51
|
+
|
|
52
|
+
```bash
|
|
53
|
+
npm install --save-dev eslint eslint-plugin-rhythmguard
|
|
54
|
+
```
|
|
51
55
|
|
|
52
56
|
```js
|
|
53
57
|
// eslint.config.js
|
|
54
|
-
import rhythmguard from '
|
|
58
|
+
import rhythmguard from 'eslint-plugin-rhythmguard';
|
|
55
59
|
|
|
56
60
|
export default [
|
|
57
61
|
{
|
|
@@ -80,6 +84,8 @@ Every rule validates its options up front. Unknown option names and wrong shapes
|
|
|
80
84
|
|
|
81
85
|
## Audit before you enforce
|
|
82
86
|
|
|
87
|
+
With the package installed, the `rhythmguard` command is available to `npx`:
|
|
88
|
+
|
|
83
89
|
```bash
|
|
84
90
|
npx rhythmguard audit ./src --format markdown
|
|
85
91
|
npx rhythmguard audit ./src --write-baseline
|
|
@@ -101,14 +107,15 @@ The audit scans CSS declarations, Tailwind class strings and your token contract
|
|
|
101
107
|
- [For coding agents](docs/FOR_AGENTS.md): a paste-ready `AGENTS.md` block, installable with `npx rhythmguard init --agents all` for Claude Code, Cursor and Copilot
|
|
102
108
|
- [Quiet benchmark](docs/QUIET_BENCHMARK.md): findings on public design systems, checked on every change
|
|
103
109
|
- [State of Spacing](docs/STATE_OF_SPACING.md): dated editions of the same data, ranked by drift density, with the values and properties that drifted
|
|
104
|
-
- [Agent evals](docs/AGENT_EVALS.md): does a finding get a coding agent to zero drift, in how many rounds, at what cost, against a rules-only control
|
|
110
|
+
- [Agent evals](docs/AGENT_EVALS.md): does a finding get a coding agent to zero drift, in how many rounds, at what cost, against a rules-only control. First edition (2026-10-10): every model fixed every finding in one round with or without the findings; fixing from findings cost Sonnet 5 less than half as much
|
|
105
111
|
- [Architecture](docs/ARCHITECTURE.md): the layers, the rule kit, the invariants and where each is enforced
|
|
106
|
-
- [
|
|
112
|
+
- [Roadmap](ROADMAP.md): what is planned from October 2026 to June 2027, and the checkpoint that decides the pace
|
|
113
|
+
- [Product analysis, September 2026](docs/STRATEGY_2026-09.md): the market data behind the roadmap
|
|
107
114
|
- Browser playground: [petrilahdelma.github.io/stylelint-plugin-rhythmguard](https://petrilahdelma.github.io/stylelint-plugin-rhythmguard/) runs the real rules, bundled for the browser, on CSS or SCSS you paste; `scale: "auto"`, tokens and fixes included, and a test proves it reports what Stylelint reports
|
|
108
115
|
|
|
109
116
|
## Compatibility
|
|
110
117
|
|
|
111
|
-
Stylelint 16 and 17. Node 20.19 or newer. Three runtime dependencies (`known-css-properties`, `postcss`, `postcss-value-parser`); `postcss-scss`, `stylelint-config-tailwindcss` and `stylelint-plugin-logical-css` are optional peers. CommonJS and ESM entry points, TypeScript declarations for every export. The CI matrix runs Node 20 and 22 against Stylelint 16.0.0, 16.x and 17.x. Upgrading from 2.x: [docs/MIGRATING_TO_3.md](docs/MIGRATING_TO_3.md).
|
|
118
|
+
Stylelint 16 and 17. Node 20.19 or newer; Node 20 itself is end of life, and 4.0 raises the floor to 22.22 ([#172](https://github.com/PetriLahdelma/stylelint-plugin-rhythmguard/issues/172)). The ESLint companion needs ESLint 8 or newer, is tested on ESLint 9, and has been checked by hand on ESLint 10 and Oxlint 1.85. Three runtime dependencies (`known-css-properties`, `postcss`, `postcss-value-parser`); `postcss-scss`, `stylelint-config-tailwindcss` and `stylelint-plugin-logical-css` are optional peers. CommonJS and ESM entry points, TypeScript declarations for every export. The CI matrix runs Node 20 and 22 against Stylelint 16.0.0, 16.x and 17.x. Upgrading from 2.x: [docs/MIGRATING_TO_3.md](docs/MIGRATING_TO_3.md).
|
|
112
119
|
|
|
113
120
|
## Contributing and support
|
|
114
121
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "stylelint-plugin-rhythmguard",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.9.0",
|
|
4
4
|
"description": "Nobody chose 13px. Catches off-scale spacing in CSS and Tailwind class strings and snaps it to your scale or tokens. Stylelint rules, an ESLint companion, and an audit CLI.",
|
|
5
5
|
"bin": {
|
|
6
6
|
"rhythmguard": "src/cli/index.js"
|
|
@@ -158,18 +158,18 @@
|
|
|
158
158
|
"postcss-value-parser": "^4.2.0"
|
|
159
159
|
},
|
|
160
160
|
"devDependencies": {
|
|
161
|
-
"@anthropic-ai/sdk": "^0.
|
|
162
|
-
"@eslint/js": "^
|
|
161
|
+
"@anthropic-ai/sdk": "^0.133.0",
|
|
162
|
+
"@eslint/js": "^10.0.0",
|
|
163
163
|
"@types/node": "^22.20.1",
|
|
164
164
|
"c8": "^12.0.0",
|
|
165
|
-
"esbuild": "^0.
|
|
166
|
-
"eslint": "^
|
|
165
|
+
"esbuild": "^0.28.0",
|
|
166
|
+
"eslint": "^10.0.0",
|
|
167
167
|
"postcss-scss": "^4.0.9",
|
|
168
|
-
"stylelint": "^
|
|
168
|
+
"stylelint": "^17.0.0",
|
|
169
169
|
"stylelint-config-tailwindcss": "^1.0.1",
|
|
170
170
|
"stylelint-plugin-logical-css": "^2.0.2",
|
|
171
171
|
"stylelint-scales": "^5.0.0",
|
|
172
|
-
"typescript": "^
|
|
172
|
+
"typescript": "^7.0.0"
|
|
173
173
|
},
|
|
174
174
|
"engines": {
|
|
175
175
|
"node": ">=20.19.0"
|
package/src/audit/config.js
CHANGED
|
@@ -45,7 +45,7 @@ function loadAuditConfig(parsed) {
|
|
|
45
45
|
try {
|
|
46
46
|
config = JSON.parse(fs.readFileSync(resolvedPath, 'utf8'));
|
|
47
47
|
} catch (err) {
|
|
48
|
-
throw new Error(`Invalid Rhythmguard config ${parsed.configPath}: ${err.message}
|
|
48
|
+
throw new Error(`Invalid Rhythmguard config ${parsed.configPath}: ${err.message}`, { cause: err });
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
if (!config || typeof config !== 'object' || Array.isArray(config)) {
|
package/src/audit/contract.js
CHANGED
|
@@ -26,7 +26,7 @@ function collectTokenContract({
|
|
|
26
26
|
const matchesKind = createTokenKindMatcher(tokenKind);
|
|
27
27
|
|
|
28
28
|
for (const filePath of cssFiles) {
|
|
29
|
-
let source
|
|
29
|
+
let source;
|
|
30
30
|
try {
|
|
31
31
|
source = fs.readFileSync(filePath, 'utf8');
|
|
32
32
|
} catch {
|
|
@@ -235,6 +235,7 @@ function buildReport({
|
|
|
235
235
|
scanScope,
|
|
236
236
|
scssFiles = 0,
|
|
237
237
|
scssSkipped = 0,
|
|
238
|
+
stylelintIgnored = 0,
|
|
238
239
|
templateFiles,
|
|
239
240
|
tailwindFindings,
|
|
240
241
|
tokenCandidateMinCount,
|
|
@@ -308,6 +309,7 @@ function buildReport({
|
|
|
308
309
|
cssFiles: cssFiles.length,
|
|
309
310
|
scssFiles,
|
|
310
311
|
scssSkipped,
|
|
312
|
+
stylelintIgnored,
|
|
311
313
|
templateFiles: templateFiles.length,
|
|
312
314
|
totalFiles,
|
|
313
315
|
},
|
|
@@ -27,6 +27,7 @@ function renderMarkdown(report) {
|
|
|
27
27
|
`| Template files scanned | ${report.templateFilesScanned} |`,
|
|
28
28
|
...(report.scanned && report.scanned.scssFiles > 0 ? [`| SCSS files scanned | ${report.scanned.scssFiles - report.scanned.scssSkipped} |`] : []),
|
|
29
29
|
...(report.scanned && report.scanned.scssSkipped > 0 ? [`| SCSS files skipped (install postcss-scss) | ${report.scanned.scssSkipped} |`] : []),
|
|
30
|
+
...(report.scanned && report.scanned.stylelintIgnored > 0 ? [`| Stylesheets ignored by .stylelintignore (not audited) | ${report.scanned.stylelintIgnored} |`] : []),
|
|
30
31
|
`| Files with issues | ${report.filesWithIssues} |`,
|
|
31
32
|
`| Total findings | ${report.totalWarnings} |`,
|
|
32
33
|
`| Scale cleanliness | ${report.scaleCleanliness}% |`,
|
package/src/audit/render-text.js
CHANGED
|
@@ -21,6 +21,7 @@ function renderText(report) {
|
|
|
21
21
|
` Template files scanned ${String(report.templateFilesScanned).padStart(4)}`,
|
|
22
22
|
...(report.scanned && report.scanned.scssFiles > 0 ? [` SCSS files scanned ${String(report.scanned.scssFiles - report.scanned.scssSkipped).padStart(4)}`] : []),
|
|
23
23
|
...(report.scanned && report.scanned.scssSkipped > 0 ? [` SCSS files skipped ${String(report.scanned.scssSkipped).padStart(4)} (install postcss-scss to audit them)`] : []),
|
|
24
|
+
...(report.scanned && report.scanned.stylelintIgnored > 0 ? [` Ignored by .stylelintignore ${String(report.scanned.stylelintIgnored).padStart(4)} (not audited)`] : []),
|
|
24
25
|
` Files with issues ${String(report.filesWithIssues).padStart(4)}`,
|
|
25
26
|
` Scale cleanliness ${scoreBar(report.scaleCleanliness)} ${report.scaleCleanliness}%`,
|
|
26
27
|
];
|
package/src/audit/report.js
CHANGED
|
@@ -89,6 +89,7 @@ async function createAuditReport(options) {
|
|
|
89
89
|
scanScope,
|
|
90
90
|
scssFiles: cssResults.scssFiles || 0,
|
|
91
91
|
scssSkipped: cssResults.scssSkipped || 0,
|
|
92
|
+
stylelintIgnored: cssResults.stylelintIgnored || 0,
|
|
92
93
|
tailwindFindings: decided.tailwindFindings,
|
|
93
94
|
templateFiles,
|
|
94
95
|
tokenCandidateMinCount: parsed.tokenCandidateMinCount,
|
package/src/audit/scan/files.js
CHANGED
|
@@ -80,7 +80,7 @@ function getGitChangedScanFiles(rootDir, ignorePatterns, parsed) {
|
|
|
80
80
|
const args = parsed.staged
|
|
81
81
|
? ['diff', '--name-only', '--cached', '--diff-filter=ACMR', '--']
|
|
82
82
|
: ['diff', '--name-only', '--diff-filter=ACMR', parsed.since, '--'];
|
|
83
|
-
let output
|
|
83
|
+
let output;
|
|
84
84
|
|
|
85
85
|
try {
|
|
86
86
|
output = execFileSync('git', args, {
|
|
@@ -90,7 +90,7 @@ function getGitChangedScanFiles(rootDir, ignorePatterns, parsed) {
|
|
|
90
90
|
});
|
|
91
91
|
} catch (err) {
|
|
92
92
|
const stderr = err.stderr ? String(err.stderr).trim() : err.message;
|
|
93
|
-
throw new Error(`Unable to read changed files from git: ${stderr}
|
|
93
|
+
throw new Error(`Unable to read changed files from git: ${stderr}`, { cause: err });
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
const cssFiles = [];
|
|
@@ -77,7 +77,10 @@ async function runStylelintAudit(cssFiles, options) {
|
|
|
77
77
|
const results = [];
|
|
78
78
|
|
|
79
79
|
if (plainFiles.length > 0) {
|
|
80
|
+
// A project's own .stylelintignore may exclude every file we pass; that is
|
|
81
|
+
// a count to report, not a reason for the audit to throw.
|
|
80
82
|
const result = await stylelint.lint({
|
|
83
|
+
allowEmptyInput: true,
|
|
81
84
|
files: plainFiles,
|
|
82
85
|
config: {
|
|
83
86
|
plugins: [pluginPath],
|
|
@@ -92,6 +95,7 @@ async function runStylelintAudit(cssFiles, options) {
|
|
|
92
95
|
const scssSyntax = resolveScssSyntax();
|
|
93
96
|
if (scssSyntax) {
|
|
94
97
|
const result = await stylelint.lint({
|
|
98
|
+
allowEmptyInput: true,
|
|
95
99
|
files: scssFiles,
|
|
96
100
|
config: {
|
|
97
101
|
customSyntax: scssSyntax,
|
|
@@ -107,6 +111,10 @@ async function runStylelintAudit(cssFiles, options) {
|
|
|
107
111
|
|
|
108
112
|
results.scssFiles = scssFiles.length;
|
|
109
113
|
results.scssSkipped = scssSkipped;
|
|
114
|
+
// Stylelint returns no result at all for a file its ignore file excludes, so
|
|
115
|
+
// the difference between what was passed and what came back is that count.
|
|
116
|
+
const linted = plainFiles.length + scssFiles.length - scssSkipped;
|
|
117
|
+
results.stylelintIgnored = Math.max(0, linted - results.length);
|
|
110
118
|
return results;
|
|
111
119
|
}
|
|
112
120
|
|
|
@@ -18,7 +18,7 @@ function collectTailwindFindings(templateFiles, options) {
|
|
|
18
18
|
const findings = [];
|
|
19
19
|
|
|
20
20
|
for (const filePath of templateFiles) {
|
|
21
|
-
let source
|
|
21
|
+
let source;
|
|
22
22
|
try {
|
|
23
23
|
source = fs.readFileSync(filePath, 'utf8');
|
|
24
24
|
} catch {
|
|
@@ -64,7 +64,7 @@ function collectTailwindMotionFindings(templateFiles, options) {
|
|
|
64
64
|
const findings = [];
|
|
65
65
|
|
|
66
66
|
for (const filePath of templateFiles) {
|
|
67
|
-
let source
|
|
67
|
+
let source;
|
|
68
68
|
try {
|
|
69
69
|
source = fs.readFileSync(filePath, 'utf8');
|
|
70
70
|
} catch {
|
|
@@ -115,17 +115,51 @@ function buildTailwindMotionFindingText(token, analysis) {
|
|
|
115
115
|
return `Unexpected Tailwind arbitrary motion duration "${token}". Use duration scale values.`;
|
|
116
116
|
}
|
|
117
117
|
|
|
118
|
+
/**
|
|
119
|
+
* Linear scan for string literals. A regex did this before, and from every
|
|
120
|
+
* quote that never closes (an apostrophe in a comment, a quote inside a regex
|
|
121
|
+
* literal) it backtracked to the end of the file; on a 3.5 MB minified editor
|
|
122
|
+
* bundle that took hours. This walks the source once: an escape never closes a
|
|
123
|
+
* literal, a ' or " literal that reaches a line break is not a literal (the
|
|
124
|
+
* language agrees), and a backtick literal may span lines.
|
|
125
|
+
*/
|
|
118
126
|
function findStringLiterals(source) {
|
|
119
127
|
const literals = [];
|
|
120
|
-
const
|
|
121
|
-
let
|
|
122
|
-
|
|
123
|
-
while (
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
}
|
|
128
|
+
const { length } = source;
|
|
129
|
+
let index = 0;
|
|
130
|
+
|
|
131
|
+
while (index < length) {
|
|
132
|
+
const quote = source[index];
|
|
133
|
+
if (quote !== '"' && quote !== "'" && quote !== '`') {
|
|
134
|
+
index += 1;
|
|
135
|
+
continue;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
const valueStart = index + 1;
|
|
139
|
+
let cursor = valueStart;
|
|
140
|
+
let closed = false;
|
|
141
|
+
while (cursor < length) {
|
|
142
|
+
const char = source[cursor];
|
|
143
|
+
if (char === '\\') {
|
|
144
|
+
cursor += 2;
|
|
145
|
+
continue;
|
|
146
|
+
}
|
|
147
|
+
if (char === quote) {
|
|
148
|
+
closed = true;
|
|
149
|
+
break;
|
|
150
|
+
}
|
|
151
|
+
if (quote !== '`' && char === '\n') {
|
|
152
|
+
break;
|
|
153
|
+
}
|
|
154
|
+
cursor += 1;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
if (closed) {
|
|
158
|
+
literals.push({ quote, value: source.slice(valueStart, cursor), valueStart });
|
|
159
|
+
index = cursor + 1;
|
|
160
|
+
} else {
|
|
161
|
+
index = valueStart;
|
|
162
|
+
}
|
|
129
163
|
}
|
|
130
164
|
|
|
131
165
|
return literals;
|
package/src/configs/embed.js
CHANGED
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
* spacing tokens (scaleSources, .rhythmguardrc.json token sources, the
|
|
8
8
|
* stylesheet's custom properties, a Tailwind config, then rhythmic-4).
|
|
9
9
|
* No `extends`, no dependency beyond this plugin, and the shape is frozen for
|
|
10
|
-
* the life of
|
|
11
|
-
* on a minor bump.
|
|
10
|
+
* the life of a major version so a config that embeds it never changes
|
|
11
|
+
* behaviour on a minor bump.
|
|
12
12
|
*/
|
|
13
13
|
module.exports = {
|
|
14
14
|
plugins: ['stylelint-plugin-rhythmguard'],
|
|
@@ -201,12 +201,16 @@ function scaleFromSources(sources, baseFontSize) {
|
|
|
201
201
|
* `.rhythmguardrc.json` token sources and installed token packages. The same
|
|
202
202
|
* places scale inference reads, in the same order.
|
|
203
203
|
*/
|
|
204
|
-
function collectTokenDefinitions({ baseFontSize = 16, root, scaleSources = [], tokenRegex }) {
|
|
204
|
+
function collectTokenDefinitions({ baseFontSize = 16, root, scaleSources = [], tokenPattern = null, tokenRegex }) {
|
|
205
205
|
const definitions = root ? stylesheetDefinitions(root, tokenRegex, baseFontSize) : new Map();
|
|
206
206
|
const sources = [...scaleSources, ...rcTokenSources(process.cwd()), ...discoverTokenPackages(process.cwd())];
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
207
|
+
// A rule's own tokenPattern (`^--space-|^--radius-`) also applies to the
|
|
208
|
+
// files it reads, on top of the spacing names, unless a source sets its own.
|
|
209
|
+
const withPattern = tokenPattern
|
|
210
|
+
? sources.map((source) => (typeof source === 'string' ? { path: source, tokenPattern } : { tokenPattern, ...source }))
|
|
211
|
+
: [];
|
|
212
|
+
for (const parsed of [parseSourcesCached(sources, baseFontSize), parseSourcesCached(withPattern, baseFontSize)]) {
|
|
213
|
+
for (const [token, definition] of parsed ? parsed.definitions : []) {
|
|
210
214
|
if (!definitions.has(token)) {
|
|
211
215
|
definitions.set(token, definition);
|
|
212
216
|
}
|
package/src/core/token-index.js
CHANGED
|
@@ -1,7 +1,45 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
const { PROPERTY_GROUP_PATTERNS } = require('./css-vocabulary');
|
|
3
4
|
const { fixedLengthValue, numbersEqual, toPx } = require('./length');
|
|
4
|
-
const { parseTokenValueLength } = require('./token-sources');
|
|
5
|
+
const { createTokenKindMatcher, parseTokenValueLength } = require('./token-sources');
|
|
6
|
+
|
|
7
|
+
// Dedicated kinds first: a name like --radius-space-1 is a radius token.
|
|
8
|
+
const TOKEN_KINDS = ['radius', 'typography', 'motion', 'size', 'spacing'].map((kind) => [kind, createTokenKindMatcher(kind)]);
|
|
9
|
+
|
|
10
|
+
// Which token kinds may stand in for a property of each group. Spacing and size
|
|
11
|
+
// share tokens in many systems (Open Props --size-*, mittwald --size-px--*);
|
|
12
|
+
// radius, type and motion tokens serve only their own properties.
|
|
13
|
+
const ACCEPTED_KINDS = Object.freeze({
|
|
14
|
+
motion: ['motion'],
|
|
15
|
+
radius: ['radius'],
|
|
16
|
+
size: ['size', 'spacing'],
|
|
17
|
+
spacing: ['spacing', 'size'],
|
|
18
|
+
typography: ['typography'],
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
/** The kind a token's name declares, or null when the name says nothing. */
|
|
22
|
+
function tokenKindOf(token) {
|
|
23
|
+
const found = TOKEN_KINDS.find(([, matches]) => matches(token));
|
|
24
|
+
return found ? found[0] : null;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
function propertyGroupOf(prop) {
|
|
28
|
+
const lower = String(prop || '').toLowerCase();
|
|
29
|
+
const found = Object.entries(PROPERTY_GROUP_PATTERNS).find(([, patterns]) => patterns.some((pattern) => pattern.test(lower)));
|
|
30
|
+
return found ? found[0] : null;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* Whether a token may be offered for a property: a padding never gets a radius
|
|
35
|
+
* token, even when both hold 16px and the token pattern admits both. A token
|
|
36
|
+
* whose name declares no kind, or a property outside every group, is allowed.
|
|
37
|
+
*/
|
|
38
|
+
function tokenFitsProperty(token, prop) {
|
|
39
|
+
const group = prop ? propertyGroupOf(prop) : null;
|
|
40
|
+
const kind = group ? tokenKindOf(String(token).replace(/^var\(\s*|\s*\)$/g, '')) : null;
|
|
41
|
+
return !group || !kind || ACCEPTED_KINDS[group].includes(kind);
|
|
42
|
+
}
|
|
5
43
|
|
|
6
44
|
/**
|
|
7
45
|
* Which token a fix may write for a length. Strict on purpose: the token must
|
|
@@ -19,24 +57,37 @@ function tokenIndexFromDefinitions(definitions, baseFontSize = 16) {
|
|
|
19
57
|
const unit = parsed.unit || 'px';
|
|
20
58
|
const px = toPx(Math.abs(parsed.number), unit, baseFontSize);
|
|
21
59
|
if (px === null || !Number.isFinite(px) || px === 0) continue;
|
|
22
|
-
|
|
60
|
+
const file = definition.files ? [...definition.files][0] : null;
|
|
61
|
+
index.push({ file: file && file !== 'stylesheet' ? file : null, px, raw: String(raw).trim(), token: definition.token, unit });
|
|
23
62
|
}
|
|
24
63
|
}
|
|
25
64
|
return index;
|
|
26
65
|
}
|
|
27
66
|
|
|
28
|
-
|
|
67
|
+
/**
|
|
68
|
+
* Every custom property that holds a length, for one property. The shared
|
|
69
|
+
* resolver behind use-scale's `fixWith: "token"` and prefer-token, so the two
|
|
70
|
+
* rules always know the same tokens. Same unit first; with `anyUnit`, a token
|
|
71
|
+
* in another unit that holds the same px value counts when none matches the
|
|
72
|
+
* unit. Sorted, so messages are stable.
|
|
73
|
+
*/
|
|
74
|
+
function tokensForLength(index, px, unit, { anyUnit = false, prop = null } = {}) {
|
|
29
75
|
const wanted = unit || 'px';
|
|
30
|
-
const
|
|
76
|
+
const sameUnit = new Set();
|
|
77
|
+
const otherUnit = new Set();
|
|
31
78
|
for (const entry of index) {
|
|
32
|
-
if (entry.token.startsWith('--')
|
|
33
|
-
|
|
79
|
+
if (!entry.token.startsWith('--') || !numbersEqual(entry.px, Math.abs(px)) || !tokenFitsProperty(entry.token, prop)) {
|
|
80
|
+
continue;
|
|
34
81
|
}
|
|
82
|
+
(entry.unit === wanted ? sameUnit : otherUnit).add(entry.token);
|
|
35
83
|
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
84
|
+
const found = sameUnit.size > 0 || !anyUnit ? sameUnit : otherUnit;
|
|
85
|
+
return [...found].sort((a, b) => a.localeCompare(b, 'en', { numeric: true }));
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
function tokenForLength(index, px, unit, prop = null) {
|
|
89
|
+
const candidates = tokensForLength(index, px, unit, { prop });
|
|
90
|
+
return candidates.length === 1 ? `var(${candidates[0]})` : null;
|
|
40
91
|
}
|
|
41
92
|
|
|
42
93
|
/** A negative token reference that is still valid where it is written. */
|
|
@@ -54,9 +105,9 @@ function negateReplacement(replacement) {
|
|
|
54
105
|
* The replacement text a length rule writes: the matching token when the
|
|
55
106
|
* options ask for one and exactly one qualifies, otherwise the literal.
|
|
56
107
|
*/
|
|
57
|
-
function replacementFor(parsedLength, nearestPx, options) {
|
|
108
|
+
function replacementFor(parsedLength, nearestPx, options, prop = null) {
|
|
58
109
|
if (options.fixWith === 'token' && options.tokenIndex) {
|
|
59
|
-
const token = tokenForLength(options.tokenIndex, nearestPx, parsedLength.unit || 'px');
|
|
110
|
+
const token = tokenForLength(options.tokenIndex, nearestPx, parsedLength.unit || 'px', prop);
|
|
60
111
|
if (token) {
|
|
61
112
|
return parsedLength.number < 0 ? negateReplacement(token) : token;
|
|
62
113
|
}
|
|
@@ -76,7 +127,10 @@ function tokenHoldsNote(replacement, formattedNearest) {
|
|
|
76
127
|
module.exports = {
|
|
77
128
|
negateReplacement,
|
|
78
129
|
replacementFor,
|
|
130
|
+
tokenFitsProperty,
|
|
79
131
|
tokenHoldsNote,
|
|
80
132
|
tokenForLength,
|
|
81
133
|
tokenIndexFromDefinitions,
|
|
134
|
+
tokenKindOf,
|
|
135
|
+
tokensForLength,
|
|
82
136
|
};
|
|
@@ -86,6 +86,13 @@
|
|
|
86
86
|
"dist/nhsuk/core/settings/_spacing.scss"
|
|
87
87
|
],
|
|
88
88
|
"note": "$nhsuk-spacing-points map"
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"name": "@mozilla-protocol/tokens",
|
|
92
|
+
"files": [
|
|
93
|
+
"dist/units/units.custom-properties.css"
|
|
94
|
+
],
|
|
95
|
+
"note": "--spacing-xs..2xl in px; Protocol's Sass $spacing-* come from the same package"
|
|
89
96
|
}
|
|
90
97
|
]
|
|
91
98
|
}
|
|
@@ -123,7 +123,7 @@ function parseTokenSources({
|
|
|
123
123
|
continue;
|
|
124
124
|
}
|
|
125
125
|
|
|
126
|
-
let tokens
|
|
126
|
+
let tokens;
|
|
127
127
|
const matchesSource = normalizedSource.tokenPattern
|
|
128
128
|
? createPatternMatcher(normalizedSource.tokenPattern, matchesKind)
|
|
129
129
|
: matchesKind;
|
|
@@ -428,7 +428,7 @@ function createScssVariableResolver(source, fallback = () => null) {
|
|
|
428
428
|
if (stack.has(name)) {
|
|
429
429
|
return null;
|
|
430
430
|
}
|
|
431
|
-
let value
|
|
431
|
+
let value;
|
|
432
432
|
if (declarations.has(name)) {
|
|
433
433
|
stack.add(name);
|
|
434
434
|
const raw = declarations.get(name);
|
|
@@ -69,7 +69,13 @@ const ruleFunction = (primary, secondaryOptions) => {
|
|
|
69
69
|
withResolvedScale(options, root);
|
|
70
70
|
if (options.fixWith === 'token') {
|
|
71
71
|
options.tokenIndex = tokenIndexFromDefinitions(
|
|
72
|
-
collectTokenDefinitions({
|
|
72
|
+
collectTokenDefinitions({
|
|
73
|
+
baseFontSize: options.baseFontSize,
|
|
74
|
+
root,
|
|
75
|
+
scaleSources: options.scaleSources,
|
|
76
|
+
tokenPattern: options.tokenPatternExplicit ? options.tokenPattern : null,
|
|
77
|
+
tokenRegex: new RegExp(options.tokenPattern),
|
|
78
|
+
}),
|
|
73
79
|
options.baseFontSize,
|
|
74
80
|
);
|
|
75
81
|
}
|
|
@@ -157,7 +163,7 @@ const ruleFunction = (primary, secondaryOptions) => {
|
|
|
157
163
|
}
|
|
158
164
|
|
|
159
165
|
const fixedValue = options.fixToScale
|
|
160
|
-
? replacementFor(parsedLength, nearest.nearest, options)
|
|
166
|
+
? replacementFor(parsedLength, nearest.nearest, options, decl.prop)
|
|
161
167
|
: null;
|
|
162
168
|
|
|
163
169
|
report(node, nearest, unit, fixedValue);
|
|
@@ -181,7 +187,7 @@ const ruleFunction = (primary, secondaryOptions) => {
|
|
|
181
187
|
}
|
|
182
188
|
|
|
183
189
|
const fixedValue = options.fixToScale
|
|
184
|
-
? replacementFor(parsedLength, nearest.nearest, options)
|
|
190
|
+
? replacementFor(parsedLength, nearest.nearest, options, decl.prop)
|
|
185
191
|
: null;
|
|
186
192
|
|
|
187
193
|
report(node, nearest, 'px', fixedValue);
|
|
@@ -25,25 +25,40 @@ const {
|
|
|
25
25
|
const { buildEffectiveTokenMap } = require('../../core/token-map');
|
|
26
26
|
|
|
27
27
|
const {
|
|
28
|
+
collectTokenDefinitions,
|
|
28
29
|
withResolvedScale,
|
|
29
30
|
} = require('../../core/scale-inference');
|
|
30
31
|
|
|
31
32
|
const { createTokenRegex, reportInvalidPreset, reportValueNode } = require('../report');
|
|
32
33
|
const { validatePrimary, validatePreferTokenSecondaryOptions } = require('../validate');
|
|
33
34
|
|
|
34
|
-
const {
|
|
35
|
+
const {
|
|
36
|
+
negateReplacement,
|
|
37
|
+
tokenFitsProperty,
|
|
38
|
+
tokenIndexFromDefinitions,
|
|
39
|
+
tokensForLength,
|
|
40
|
+
} = require('../../core/token-index');
|
|
35
41
|
|
|
36
42
|
const ruleName = 'rhythmguard/prefer-token';
|
|
37
43
|
|
|
38
44
|
const messages = stylelint.utils.ruleMessages(ruleName, {
|
|
39
45
|
invalidPreset: (presetName, presetNames) =>
|
|
40
46
|
`Unknown scale preset "${presetName}". Available presets: ${presetNames.join(', ')}.`,
|
|
41
|
-
rejected: (value, replacement = null, origin = null, note = '') =>
|
|
47
|
+
rejected: (value, replacement = null, origin = null, note = '', candidates = []) =>
|
|
42
48
|
`Unexpected raw scale value "${value}". ${replacement
|
|
43
49
|
? `Use ${replacement}${origin ? ` (${origin})` : ''}.`
|
|
44
|
-
:
|
|
50
|
+
: candidates.length > 1
|
|
51
|
+
? `Use one of the tokens that hold it: ${listTokens(candidates)}.`
|
|
52
|
+
: 'No known token holds this value; use the nearest token or add one.'}${note ? ` ${note}` : ''}`,
|
|
45
53
|
});
|
|
46
54
|
|
|
55
|
+
function listTokens(tokens) {
|
|
56
|
+
const references = tokens.map((token) => `var(${token})`);
|
|
57
|
+
return references.length > 1
|
|
58
|
+
? `${references.slice(0, -1).join(', ')} or ${references[references.length - 1]}`
|
|
59
|
+
: references.join('');
|
|
60
|
+
}
|
|
61
|
+
|
|
47
62
|
function applyNegativeToken(replacement, parsedLength) {
|
|
48
63
|
return !replacement || parsedLength.number >= 0 ? replacement : negateReplacement(replacement);
|
|
49
64
|
}
|
|
@@ -74,6 +89,36 @@ function resolveTokenReplacement(tokenMap, raw, parsedLength, options) {
|
|
|
74
89
|
return null;
|
|
75
90
|
}
|
|
76
91
|
|
|
92
|
+
/**
|
|
93
|
+
* The tokens use-scale's `fixWith: "token"` would see: the stylesheet,
|
|
94
|
+
* `scaleSources`, `.rhythmguardrc.json` token sources and installed token
|
|
95
|
+
* packages, filtered to the property's kind. One same-unit token is a fix; a
|
|
96
|
+
* token in another unit, or several tokens, are named but never written.
|
|
97
|
+
*/
|
|
98
|
+
function resolveFromIndex(tokenIndex, parsedLength, prop, options) {
|
|
99
|
+
const px = toPx(Math.abs(parsedLength.number), parsedLength.unit || 'px', options.baseFontSize);
|
|
100
|
+
if (px === null || tokenIndex.length === 0) {
|
|
101
|
+
return { candidates: [] };
|
|
102
|
+
}
|
|
103
|
+
const unit = parsedLength.unit || 'px';
|
|
104
|
+
const sameUnit = tokensForLength(tokenIndex, px, unit, { prop });
|
|
105
|
+
const candidates = sameUnit.length > 0 || options.unitStrategy !== 'convert'
|
|
106
|
+
? sameUnit
|
|
107
|
+
: tokensForLength(tokenIndex, px, unit, { anyUnit: true, prop });
|
|
108
|
+
if (candidates.length !== 1) {
|
|
109
|
+
return { candidates };
|
|
110
|
+
}
|
|
111
|
+
const token = `var(${candidates[0]})`;
|
|
112
|
+
const entry = tokenIndex.find((item) => item.token === candidates[0]);
|
|
113
|
+
return {
|
|
114
|
+
candidates,
|
|
115
|
+
fixable: sameUnit.length === 1,
|
|
116
|
+
origin: entry ? entry.file : null,
|
|
117
|
+
replacement: applyNegativeToken(token, parsedLength),
|
|
118
|
+
token,
|
|
119
|
+
};
|
|
120
|
+
}
|
|
121
|
+
|
|
77
122
|
const ruleFunction = (primary, secondaryOptions) => {
|
|
78
123
|
return (root, result) => {
|
|
79
124
|
const valid = validatePrimary(result, ruleName, primary);
|
|
@@ -105,6 +150,17 @@ const ruleFunction = (primary, secondaryOptions) => {
|
|
|
105
150
|
tokenRegex,
|
|
106
151
|
});
|
|
107
152
|
|
|
153
|
+
const tokenIndex = tokenIndexFromDefinitions(
|
|
154
|
+
collectTokenDefinitions({
|
|
155
|
+
baseFontSize: options.baseFontSize,
|
|
156
|
+
root,
|
|
157
|
+
scaleSources: options.scaleSources,
|
|
158
|
+
tokenPattern: options.tokenPatternExplicit ? options.tokenPattern : null,
|
|
159
|
+
tokenRegex,
|
|
160
|
+
}),
|
|
161
|
+
options.baseFontSize,
|
|
162
|
+
);
|
|
163
|
+
|
|
108
164
|
const getScaleStateForProperty = createPropertyScaleResolver(options);
|
|
109
165
|
|
|
110
166
|
root.walkDecls((decl) => {
|
|
@@ -121,10 +177,23 @@ const ruleFunction = (primary, secondaryOptions) => {
|
|
|
121
177
|
const { scaleByUnit, scalePx } = getScaleStateForProperty(prop);
|
|
122
178
|
let changed = false;
|
|
123
179
|
|
|
124
|
-
const reportNode = (node,
|
|
125
|
-
const
|
|
126
|
-
|
|
127
|
-
|
|
180
|
+
const reportNode = (node, parsedLength) => {
|
|
181
|
+
const mapped = resolveTokenReplacement(tokenMap, node.value, parsedLength, options);
|
|
182
|
+
if (mapped && tokenFitsProperty(mapped.token, prop)) {
|
|
183
|
+
const origin = origins[mapped.token] || null;
|
|
184
|
+
reportValueNode({ decl, message: messages.rejected(node.value, mapped.replacement, origin, options.note), node, replacement: mapped.replacement, result, ruleName });
|
|
185
|
+
return;
|
|
186
|
+
}
|
|
187
|
+
const indexed = resolveFromIndex(tokenIndex, parsedLength, prop, options);
|
|
188
|
+
const named = indexed.replacement || null;
|
|
189
|
+
reportValueNode({
|
|
190
|
+
decl,
|
|
191
|
+
message: messages.rejected(node.value, named, indexed.origin || null, options.note, indexed.candidates),
|
|
192
|
+
node,
|
|
193
|
+
replacement: indexed.fixable ? named : null,
|
|
194
|
+
result,
|
|
195
|
+
ruleName,
|
|
196
|
+
});
|
|
128
197
|
};
|
|
129
198
|
|
|
130
199
|
const checkWordNode = (node, context) => {
|
|
@@ -190,7 +259,7 @@ const ruleFunction = (primary, secondaryOptions) => {
|
|
|
190
259
|
}
|
|
191
260
|
}
|
|
192
261
|
|
|
193
|
-
reportNode(node,
|
|
262
|
+
reportNode(node, parsedLength);
|
|
194
263
|
return true;
|
|
195
264
|
};
|
|
196
265
|
|
|
@@ -136,7 +136,7 @@ function checkLengthValue({
|
|
|
136
136
|
}
|
|
137
137
|
|
|
138
138
|
const fixedValue = options.fixToScale && fixable
|
|
139
|
-
? replacementFor(parsedLength, nearest.nearest, options)
|
|
139
|
+
? replacementFor(parsedLength, nearest.nearest, options, decl.prop)
|
|
140
140
|
: null;
|
|
141
141
|
|
|
142
142
|
report(node.value, decl, node, nearest, fixedValue, unit, evaluated ? evaluatedNote(evaluated, options) : '');
|
|
@@ -160,7 +160,7 @@ function checkLengthValue({
|
|
|
160
160
|
}
|
|
161
161
|
|
|
162
162
|
const fixedValue = options.fixToScale && fixable
|
|
163
|
-
? replacementFor(parsedLength, nearest.nearest, options)
|
|
163
|
+
? replacementFor(parsedLength, nearest.nearest, options, decl.prop)
|
|
164
164
|
: null;
|
|
165
165
|
|
|
166
166
|
report(node.value, decl, node, nearest, fixedValue, 'px', evaluated ? evaluatedNote(evaluated, options) : '');
|
|
@@ -239,7 +239,13 @@ const ruleFunction = (primary, secondaryOptions) => {
|
|
|
239
239
|
const tokenRegex = createTokenRegex(options.tokenPattern, result, ruleName);
|
|
240
240
|
if (options.fixWith === 'token') {
|
|
241
241
|
options.tokenIndex = tokenIndexFromDefinitions(
|
|
242
|
-
collectTokenDefinitions({
|
|
242
|
+
collectTokenDefinitions({
|
|
243
|
+
baseFontSize: options.baseFontSize,
|
|
244
|
+
root,
|
|
245
|
+
scaleSources: options.scaleSources,
|
|
246
|
+
tokenPattern: options.tokenPatternExplicit ? options.tokenPattern : null,
|
|
247
|
+
tokenRegex,
|
|
248
|
+
}),
|
|
243
249
|
options.baseFontSize,
|
|
244
250
|
);
|
|
245
251
|
}
|
package/types/audit.d.ts
CHANGED
|
@@ -68,6 +68,8 @@ export interface AuditScanned {
|
|
|
68
68
|
scssFiles?: number;
|
|
69
69
|
/** .scss files found but not audited because postcss-scss is not installed. */
|
|
70
70
|
scssSkipped?: number;
|
|
71
|
+
/** Stylesheets Stylelint skipped because the project's own .stylelintignore excludes them. */
|
|
72
|
+
stylelintIgnored?: number;
|
|
71
73
|
templateFiles: number;
|
|
72
74
|
totalFiles?: number;
|
|
73
75
|
[key: string]: unknown;
|