Add fix for names like border-top

primer · Apr 18, 2024 · 434f9d4 · 434f9d4
1 parent 2125c55
commit 434f9d4
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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 = []