diff --git a/__tests__/index.js b/__tests__/index.js index 8cfc5b25..d030fd1b 100644 --- a/__tests__/index.js +++ b/__tests__/index.js @@ -33,9 +33,10 @@ describe('stylelint-config', () => { } `).then(data => { expect(data).toHaveErrored() - expect(data).toHaveWarningsLength(2) + expect(data).toHaveWarningsLength(3) expect(data).toHaveWarnings([ 'Expected "top" to come before "width" (order/properties-order)', + "Please use a primer size variable instead of '.2em'. Consult the primer docs for a suitable replacement. https://primer.style/foundations/primitives/size (primer/spacing)", 'Unexpected value "initial" for property "max-width" (declaration-property-value-disallowed-list)', ]) }) diff --git a/__tests__/spacing.js b/__tests__/spacing.js index 00365219..248224ad 100644 --- a/__tests__/spacing.js +++ b/__tests__/spacing.js @@ -35,6 +35,10 @@ testRule({ code: '.x { margin: auto; }', description: 'CSS > Ignore auto values.', }, + { + code: '.x { border-top-width: 4px; }', + description: 'CSS > Ignores values with top in name.', + }, { code: '.x { padding: calc(var(--base-size-4) * 2); }', description: 'CSS > Finds variable calc values.', @@ -65,6 +69,55 @@ testRule({ column: 15, description: "CSS > Replaces '4px' with '--base-size-4'.", }, + { + code: '.x { padding: 4px; margin: 4px; top: 4px; right: 4px; bottom: 4px; left: 4px; }', + fixed: '.x { padding: var(--base-size-4); margin: var(--base-size-4); top: var(--base-size-4); right: var(--base-size-4); bottom: var(--base-size-4); left: var(--base-size-4); }', + description: "CSS > Replaces '4px' with '--base-size-4'.", + warnings: [ + { + column: 15, + line: 1, + rule: 'primer/spacing', + severity: 'error', + message: messages.rejected('4px', {name: '--base-size-4'}), + }, + { + column: 28, + line: 1, + rule: 'primer/spacing', + severity: 'error', + message: messages.rejected('4px', {name: '--base-size-4'}), + }, + { + column: 38, + line: 1, + rule: 'primer/spacing', + severity: 'error', + message: messages.rejected('4px', {name: '--base-size-4'}), + }, + { + column: 50, + line: 1, + rule: 'primer/spacing', + severity: 'error', + message: messages.rejected('4px', {name: '--base-size-4'}), + }, + { + column: 63, + line: 1, + rule: 'primer/spacing', + severity: 'error', + message: messages.rejected('4px', {name: '--base-size-4'}), + }, + { + column: 74, + line: 1, + rule: 'primer/spacing', + severity: 'error', + message: messages.rejected('4px', {name: '--base-size-4'}), + }, + ], + }, { code: '.x { padding: -4px; }', unfixable: true, diff --git a/plugins/spacing.js b/plugins/spacing.js index 40ae752f..062ce7c0 100644 --- a/plugins/spacing.js +++ b/plugins/spacing.js @@ -42,7 +42,7 @@ const meta = { } // Props that we want to check -const propList = ['padding', 'margin'] +const propList = ['padding', 'margin', 'top', 'right', 'bottom', 'left'] /** @type {import('stylelint').Rule} */ const ruleFunction = (primary, secondaryOptions, context) => { @@ -57,7 +57,7 @@ const ruleFunction = (primary, secondaryOptions, context) => { root.walkDecls(declNode => { const {prop, value} = declNode - if (!propList.some(spacingProp => prop.includes(spacingProp))) return + if (!propList.some(spacingProp => prop.startsWith(spacingProp))) return const problems = []