diff --git a/cli/engine/design-system.mjs b/cli/engine/design-system.mjs index 28e01b1d2..7b7e588e9 100644 --- a/cli/engine/design-system.mjs +++ b/cli/engine/design-system.mjs @@ -995,7 +995,9 @@ function extractRadiusTokens(value) { return String(value || '') .replace(/\s*\/\s*/g, ' ') .split(/\s+/) - .map(token => token.trim()) + // var() fallbacks leave the closing parenthesis on the final token. Strip + // it before length resolution so `8px)` is not treated as unitless 8rem. + .map(token => token.trim().replace(/\)+$/, '')) .filter(Boolean); } diff --git a/tests/design-system.test.mjs b/tests/design-system.test.mjs index ebd83243f..e6deba854 100644 --- a/tests/design-system.test.mjs +++ b/tests/design-system.test.mjs @@ -389,6 +389,25 @@ describe('checkSourceDesignSystem()', () => { ); }); + it('judges var() radius fallbacks without keeping the closing parenthesis', () => { + const designSystem = normalizeDesignSystem({ + frontmatter: { rounded: { md: '8px' } }, + }); + const findings = checkSourceDesignSystem(` +.good { + border-radius: var(--radius-md, 8px); +} +.bad { + border-radius: var(--radius-custom, 18px); +} +`, '/tmp/radius-fallbacks.css', { designSystem }); + + assert.deepEqual( + findings.map((item) => [item.antipattern, item.ignoreValue]), + [['design-system-radius', '18px']], + ); + }); + it('strips CSS priority markers before checking font-family declarations', () => { const designSystem = sampleDesignSystem(); const findings = checkSourceDesignSystem(`