fix(ds): sweep composition drift against design.md + ratchet five new metrics #2905
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| import { countOffScaleSpacing, OFF_SCALE_ICON_RE, OFF_SCALE_RADIUS_RE, RAW_DURATION_RE } from '../ds-lint-rules.cjs' | ||
|
|
||
| const countMatches = (text: string, re: RegExp) => (text.match(re) ?? []).length | ||
|
|
||
| describe('offScaleSpacing', () => { | ||
| it('flags off-scale steps across every spacing family, logical ps/pe/ms/me included', () => { | ||
| for (const cls of ['p-5', 'px-7', 'py-2.5', 'gap-11', 'p-4.5', 'pr-18', 'ps-5', 'pe-18', 'ms-2.5', 'me-7']) { | ||
| expect(countOffScaleSpacing(`<div className="${cls}" />`)).toBe(1) | ||
| } | ||
| }) | ||
|
|
||
| it('flags negative and variant-prefixed forms', () => { | ||
| expect(countOffScaleSpacing('className="-m-2.5"')).toBe(1) | ||
| expect(countOffScaleSpacing('className="-mt-5"')).toBe(1) | ||
| expect(countOffScaleSpacing('className="md:pr-18"')).toBe(1) | ||
| expect(countOffScaleSpacing('className="first:ps-7"')).toBe(1) | ||
| }) | ||
|
|
||
| it('accepts every documented scale step, negatives and variants included', () => { | ||
| for (const cls of [ | ||
| 'p-0', | ||
| 'p-0.5', | ||
| 'gap-1', | ||
| 'px-2', | ||
| 'py-3', | ||
| 'p-4', | ||
| 'gap-6', | ||
| 'p-8', | ||
| 'mt-10', | ||
| 'pb-12', | ||
| 'ps-4', | ||
| 'me-2', | ||
| '-mt-4', | ||
| 'md:gap-6', | ||
| 'space-y-8', | ||
| 'gap-x-16', | ||
| ]) { | ||
| expect(countOffScaleSpacing(`<div className="${cls}" />`)).toBe(0) | ||
| } | ||
| }) | ||
|
|
||
| it('does not misread longer utilities or words as spacing classes', () => { | ||
| for (const text of [ | ||
| 'className="max-p-5"', | ||
| 'theme-3', | ||
| 'frame-2', | ||
| 'className="p-[13px]"', | ||
| 'className="ms-auto"', | ||
| ]) { | ||
| expect(countOffScaleSpacing(text)).toBe(0) | ||
| } | ||
| }) | ||
| }) | ||
|
|
||
| describe('iconOffScale', () => { | ||
| it('flags off-step size, width/height props, and class-sized Icons', () => { | ||
| for (const text of [ | ||
| '<Icon name="info" size={18} />', | ||
| '<Icon name={logo} width={18} height={18} />', | ||
| '<Icon name="swap" width={32} height={32} />', | ||
| 'iconSize={13}', | ||
| '<Icon name="check" className="size-4" />', | ||
| '<Icon name="paste" className="h-3.5 w-3.5" />', | ||
| ]) { | ||
| expect(countMatches(text, OFF_SCALE_ICON_RE)).toBeGreaterThan(0) | ||
| } | ||
| }) | ||
|
|
||
| it('accepts the 16/20/24 steps', () => { | ||
| for (const text of [ | ||
| '<Icon name="info" size={16} />', | ||
| '<Icon size={20} />', | ||
| '<Icon size={24} />', | ||
| 'iconSize={20}', | ||
| ]) { | ||
| expect(countMatches(text, OFF_SCALE_ICON_RE)).toBe(0) | ||
| } | ||
| }) | ||
| }) | ||
|
|
||
| describe('offScaleRadius', () => { | ||
| it('flags radii off the none/2/4/full scale, sides included', () => { | ||
| for (const cls of ['rounded-md', 'rounded-lg', 'rounded-t-2xl', 'rounded-3xl']) { | ||
| expect(countMatches(`className="${cls}"`, OFF_SCALE_RADIUS_RE)).toBe(1) | ||
| } | ||
| }) | ||
|
|
||
| it('accepts the scale classes', () => { | ||
| for (const cls of ['rounded-sm', 'rounded-round', 'rounded-full', 'rounded-none']) { | ||
| expect(countMatches(`className="${cls}"`, OFF_SCALE_RADIUS_RE)).toBe(0) | ||
| } | ||
| }) | ||
| }) | ||
|
|
||
| describe('rawDuration', () => { | ||
| it('flags any numeric or arbitrary duration', () => { | ||
| for (const cls of ['duration-100', 'duration-250', 'duration-75', 'duration-[250ms]']) { | ||
| expect(countMatches(`className="${cls}"`, RAW_DURATION_RE)).toBe(1) | ||
| } | ||
| }) | ||
|
|
||
| it('accepts the motion tokens', () => { | ||
| for (const cls of ['duration-instant', 'duration-fast', 'duration-moderate', 'duration-slow']) { | ||
| expect(countMatches(`className="${cls}"`, RAW_DURATION_RE)).toBe(0) | ||
| } | ||
| }) | ||
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| // composition-drift matchers shared by ds-lint-counts.mjs and its regression | ||
| // tests (scripts/__tests__/ds-lint-rules.test.ts). the counting script has | ||
| // top-level side effects (it walks src/), so the rules live here where a test | ||
| // can import them without running the scan. CommonJS on purpose: node's ESM | ||
| // loader named-imports it statically, and jest's CJS runtime requires it with | ||
| // no transform. | ||
|
|
||
| // allowlist inversion, not a blocklist: tailwind v4 compiles ANY numeric step | ||
| // (p-4.5, pr-18, -mt-5, ps-5), so the metric flags every numeric spacing | ||
| // utility — negative forms, variant prefixes, and the logical ps/pe/ms/me | ||
| // families included — whose magnitude is not a documented scale step. | ||
| const SPACING_STEPS = new Set(['0', '0.5', '1', '2', '3', '4', '6', '8', '10', '12', '14', '16']) | ||
| const NUMERIC_SPACING_RE = | ||
| /(?<![a-z0-9-])-?(?:px|py|pt|pb|pl|pr|ps|pe|p|mx|my|mt|mb|ml|mr|ms|me|m|gap-x|gap-y|gap|space-y|space-x)-([0-9]+(?:\.[0-9]+)?)(?![0-9.a-z%\]])/g | ||
|
innolope-dev marked this conversation as resolved.
Outdated
|
||
|
|
||
| function countOffScaleSpacing(text) { | ||
| let n = 0 | ||
| for (const m of text.matchAll(NUMERIC_SPACING_RE)) if (!SPACING_STEPS.has(m[1])) n++ | ||
| return n | ||
| } | ||
|
|
||
| // three ways an Icon gets sized: the size prop (also width/height, which the | ||
| // component forwards), Button's iconSize, and — banned outright by the icon | ||
| // law — tailwind size-/h-/w- classes on the Icon itself. | ||
| const OFF_SCALE_ICON_RE = | ||
| /<Icon\s[^>]*?\b(?:size|width|height)=\{(?!16\}|20\}|24\})[0-9]+\}|\biconSize=\{(?!16\}|20\}|24\})[0-9]+\}|<Icon\s[^>]*?className="[^"]*\b(?:size|h|w)-[0-9]/g | ||
|
innolope-dev marked this conversation as resolved.
Outdated
|
||
|
|
||
| const OFF_SCALE_RADIUS_RE = /\brounded(?:-[trbl]{1,2})?-(?:md|lg|xl|2xl|3xl)\b/g | ||
|
innolope-dev marked this conversation as resolved.
Outdated
|
||
|
|
||
| // any numeric duration is off-token (the motion scale is instant/fast/ | ||
| // moderate/slow); arbitrary values (duration-[250ms]) count too. | ||
| const RAW_DURATION_RE = /\bduration-(?:[0-9]+\b|\[[^\]]+\])/g | ||
|
|
||
| module.exports = { | ||
| SPACING_STEPS, | ||
| NUMERIC_SPACING_RE, | ||
| countOffScaleSpacing, | ||
| OFF_SCALE_ICON_RE, | ||
| OFF_SCALE_RADIUS_RE, | ||
| RAW_DURATION_RE, | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.