@primer/stylelint-config 13.0.0-rc.864dd2a → 13.0.0-rc.99be5f2

package/dist/index.cjs

@@ -7,8 +7,8 @@ var valueParser = require('postcss-value-parser');
 var TapMap = require('tap-map');
 var variables = require('@primer/css/dist/variables.json');
 var declarationValueIndex = require('stylelint/lib/utils/declarationValueIndex.cjs');
-var matchAll = require('string.prototype.matchall');
 var node_module = require('node:module');
+var matchAll = require('string.prototype.matchall');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 var propertyOrder = [
@@ -422,7 +422,7 @@ function closest(node, test) {
 function createVariableRule(ruleName, rules, url) {
   const plugin = stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
     if (enabled === false) {
-      return noop$4
+      return noop$3
     }
 
     let actualRules = rules;
@@ -499,7 +499,7 @@ function createVariableRule(ruleName, rules, url) {
   return plugin
 }
 
-function noop$4() {}
+function noop$3() {}
 
 var borders = createVariableRule(
   'primer/borders',
@@ -651,7 +651,7 @@ const walkGroups$1 = (root, validate) => {
 // eslint-disable-next-line no-unused-vars
 var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}, context) => {
   if (!enabled) {
-    return noop$3
+    return noop$2
   }
 
   const lintResult = (root, result) => {
@@ -662,7 +662,7 @@ var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}
       }
 
       if (decl.type !== 'decl' || !decl.prop.match(/^(min-width|width)/)) {
-        return noop$3
+        return noop$2
       }
 
       const problems = [];
@@ -717,40 +717,44 @@ var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}
   return lintResult
 });
 
-function noop$3() {}
+function noop$2() {}
 
-// TODO: Pull this in from primer/primitives
-const spacerValues = {
-  '$spacer-1': '4px',
-  '$spacer-2': '8px',
-  '$spacer-3': '16px',
-  '$spacer-4': '24px',
-  '$spacer-5': '32px',
-  '$spacer-6': '40px',
-  '$spacer-7': '48px',
-  '$spacer-8': '64px',
-  '$spacer-9': '80px',
-  '$spacer-10': '96px',
-  '$spacer-11': '112px',
-  '$spacer-12': '128px',
-  '$em-spacer-1': '0.0625em',
-  '$em-spacer-2': '0.125em',
-  '$em-spacer-3': '0.25em',
-  '$em-spacer-4': '0.375em',
-  '$em-spacer-5': '0.5em',
-  '$em-spacer-6': '0.75em',
-};
+const require$2 = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)));
 
-const ruleName$2 = 'primer/spacing';
-const messages$2 = stylelint.utils.ruleMessages(ruleName$2, {
-  rejected: (value, replacement) => {
-    if (replacement === null) {
-      return `Please use a primer spacer variable instead of '${value}'. Consult the primer docs for a suitable replacement. https://primer.style/css/storybook/?path=/docs/support-spacing--docs`
+async function primitivesVariables(type) {
+  const variables = [];
+
+  const files = [];
+  switch (type) {
+    case 'size':
+      files.push('base/size/size.json');
+      break
+  }
+
+  for (const file of files) {
+    // eslint-disable-next-line import/no-dynamic-require
+    const data = require$2(`@primer/primitives/dist/styleLint/${file}`);
+
+    for (const key of Object.keys(data)) {
+      const size = data[key];
+      const values = size['value'];
+      values.push(`${parseInt(size['original']['value']) + 1}px`);
+      values.push(`${parseInt(size['original']['value']) - 1}px`);
+
+      variables.push({
+        name: `--${size['name']}`,
+        values,
+      });
     }
+  }
 
-    return `Please replace ${value} with spacing variable '${replacement}'.`
-  },
-});
+  return variables
+}
+
+const {
+  createPlugin,
+  utils: {report, ruleMessages, validateOptions},
+} = stylelint;
 
 const walkGroups = (root, validate) => {
   for (const node of root.nodes) {
@@ -763,24 +767,47 @@ const walkGroups = (root, validate) => {
   return root
 };
 
-// eslint-disable-next-line no-unused-vars
-var spacing = stylelint.createPlugin(ruleName$2, (enabled, options = {}, context) => {
-  if (!enabled) {
-    return noop$2
-  }
+const ruleName$2 = 'primer/spacing';
+const messages$2 = ruleMessages(ruleName$2, {
+  rejected: (value, replacement) => {
+    if (!replacement) {
+      return `Please use a primer size variable instead of '${value}'. Consult the primer docs for a suitable replacement. https://primer.style/foundations/primitives/size`
+    }
 
-  const lintResult = (root, result) => {
-    root.walk(decl => {
-      if (decl.type !== 'decl' || !decl.prop.match(/^(padding|margin)/)) {
-        return noop$2
-      }
+    return `Please replace '${value}' with size variable '${replacement['name']}'. https://primer.style/foundations/primitives/size`
+  },
+});
 
-      const problems = [];
+const meta = {
+  fixable: true,
+};
+
+/** @type {import('stylelint').Rule} */
+const ruleFunction = (primary, secondaryOptions, context) => {
+  return async (root, result) => {
+    // Props that we want to check
+    const propList = ['padding', 'margin', 'top', 'right', 'bottom', 'left'];
+    // Values that we want to ignore
+    const valueList = ['${'];
+
+    const sizes = await primitivesVariables('size');
+
+    const validOptions = validateOptions(result, ruleName$2, {
+      actual: primary,
+      possible: [true],
+    });
+
+    if (!validOptions) return
+
+    root.walkDecls(declNode => {
+      const {prop, value} = declNode;
 
-      const parsedValue = walkGroups(valueParser(decl.value), node => {
-        // Remove leading negative sign, if any.
-        const cleanValue = node.value.replace(/^-/g, '');
+      if (!propList.some(spacingProp => prop.startsWith(spacingProp))) return
+      if (valueList.some(valueToIgnore => value.includes(valueToIgnore))) return
 
+      const problems = [];
+
+      const parsedValue = walkGroups(valueParser(value), node => {
         // Only check word types. https://github.com/TrySound/postcss-value-parser#word
         if (node.type !== 'word') {
           return
@@ -791,30 +818,36 @@ var spacing = stylelint.createPlugin(ruleName$2, (enabled, options = {}, context
           return
         }
 
-        const valueUnit = valueParser.unit(cleanValue);
+        const valueUnit = valueParser.unit(node.value);
 
-        if (valueUnit && (valueUnit.unit === '' || !/^[0-9.]+$/.test(valueUnit.number))) {
+        if (valueUnit && (valueUnit.unit === '' || !/^-?[0-9.]+$/.test(valueUnit.number))) {
           return
         }
 
-        // If the a variable is found in the value, skip it.
+        // Skip if the value unit isn't a supported unit.
+        if (valueUnit && !['px', 'rem', 'em'].includes(valueUnit.unit)) {
+          return
+        }
+
+        // If the variable is found in the value, skip it.
         if (
-          Object.keys(spacerValues).some(variable =>
-            new RegExp(`${variable.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(cleanValue),
+          sizes.some(variable =>
+            new RegExp(`${variable['name'].replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(node.value),
           )
         ) {
           return
         }
 
-        const replacement = Object.keys(spacerValues).find(spacer => spacerValues[spacer] === cleanValue) || null;
-        const valueMatch = replacement ? spacerValues[replacement] : node.value;
+        const replacement = sizes.find(variable => variable.values.includes(node.value.replace('-', '')));
+        const fixable = replacement && valueUnit && !valueUnit.number.includes('-');
 
-        if (replacement && context.fix) {
-          node.value = node.value.replace(valueMatch, replacement);
+        if (fixable && context.fix) {
+          node.value = node.value.replace(node.value, `var(${replacement['name']})`);
         } else {
           problems.push({
-            index: declarationValueIndex(decl) + node.sourceIndex,
-            message: messages$2.rejected(valueMatch, replacement),
+            index: declarationValueIndex(declNode) + node.sourceIndex,
+            endIndex: declarationValueIndex(declNode) + node.sourceIndex + node.value.length,
+            message: messages$2.rejected(node.value, replacement),
           });
         }
 
@@ -822,27 +855,30 @@ var spacing = stylelint.createPlugin(ruleName$2, (enabled, options = {}, context
       });
 
       if (context.fix) {
-        decl.value = parsedValue.toString();
+        declNode.value = parsedValue.toString();
       }
 
       if (problems.length) {
         for (const err of problems) {
-          stylelint.utils.report({
+          report({
             index: err.index,
+            endIndex: err.endIndex,
             message: err.message,
-            node: decl,
+            node: declNode,
             result,
             ruleName: ruleName$2,
           });
         }
       }
     });
-  };
+  }
+};
 
-  return lintResult
-});
+ruleFunction.ruleName = ruleName$2;
+ruleFunction.messages = messages$2;
+ruleFunction.meta = meta;
 
-function noop$2() {}
+var spacing = createPlugin(ruleName$2, ruleFunction);
 
 var typography = createVariableRule(
   'primer/typography',
@@ -1628,7 +1664,6 @@ var index = {
         'comment-empty-line-before': null,
         'length-zero-no-unit': null,
         'selector-max-type': null,
-        'primer/spacing': null,
         'primer/colors': null,
         'primer/borders': null,
         'primer/typography': null,
@@ -1658,6 +1693,7 @@ var index = {
     },
     {
       files: ['**/*.module.css'],
+      plugins: ['stylelint-css-modules-no-global-scoped-selector'],
       rules: {
         'property-no-unknown': [
           true,
@@ -1682,8 +1718,8 @@ var index = {
             ignoreFunctions: ['global'],
           },
         ],
+        'css-modules/no-global-scoped-selector': true,
         // temporarily disabiling Primer plugins while we work on upgrades https://github.com/github/primer/issues/3165
-        'primer/spacing': null,
         'primer/borders': null,
         'primer/typography': null,
         'primer/box-shadow': null,

package/dist/index.mjs

@@ -5,8 +5,8 @@ import valueParser from 'postcss-value-parser';
 import TapMap from 'tap-map';
 import variables from '@primer/css/dist/variables.json' assert { type: 'json' };
 import declarationValueIndex from 'stylelint/lib/utils/declarationValueIndex.cjs';
-import matchAll from 'string.prototype.matchall';
 import { createRequire } from 'node:module';
+import matchAll from 'string.prototype.matchall';
 
 var propertyOrder = [
   'all',
@@ -419,7 +419,7 @@ function closest(node, test) {
 function createVariableRule(ruleName, rules, url) {
   const plugin = stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
     if (enabled === false) {
-      return noop$4
+      return noop$3
     }
 
     let actualRules = rules;
@@ -496,7 +496,7 @@ function createVariableRule(ruleName, rules, url) {
   return plugin
 }
 
-function noop$4() {}
+function noop$3() {}
 
 var borders = createVariableRule(
   'primer/borders',
@@ -648,7 +648,7 @@ const walkGroups$1 = (root, validate) => {
 // eslint-disable-next-line no-unused-vars
 var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}, context) => {
   if (!enabled) {
-    return noop$3
+    return noop$2
   }
 
   const lintResult = (root, result) => {
@@ -659,7 +659,7 @@ var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}
       }
 
       if (decl.type !== 'decl' || !decl.prop.match(/^(min-width|width)/)) {
-        return noop$3
+        return noop$2
       }
 
       const problems = [];
@@ -714,40 +714,44 @@ var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}
   return lintResult
 });
 
-function noop$3() {}
+function noop$2() {}
 
-// TODO: Pull this in from primer/primitives
-const spacerValues = {
-  '$spacer-1': '4px',
-  '$spacer-2': '8px',
-  '$spacer-3': '16px',
-  '$spacer-4': '24px',
-  '$spacer-5': '32px',
-  '$spacer-6': '40px',
-  '$spacer-7': '48px',
-  '$spacer-8': '64px',
-  '$spacer-9': '80px',
-  '$spacer-10': '96px',
-  '$spacer-11': '112px',
-  '$spacer-12': '128px',
-  '$em-spacer-1': '0.0625em',
-  '$em-spacer-2': '0.125em',
-  '$em-spacer-3': '0.25em',
-  '$em-spacer-4': '0.375em',
-  '$em-spacer-5': '0.5em',
-  '$em-spacer-6': '0.75em',
-};
+const require$1 = createRequire(import.meta.url);
 
-const ruleName$2 = 'primer/spacing';
-const messages$2 = stylelint.utils.ruleMessages(ruleName$2, {
-  rejected: (value, replacement) => {
-    if (replacement === null) {
-      return `Please use a primer spacer variable instead of '${value}'. Consult the primer docs for a suitable replacement. https://primer.style/css/storybook/?path=/docs/support-spacing--docs`
+async function primitivesVariables(type) {
+  const variables = [];
+
+  const files = [];
+  switch (type) {
+    case 'size':
+      files.push('base/size/size.json');
+      break
+  }
+
+  for (const file of files) {
+    // eslint-disable-next-line import/no-dynamic-require
+    const data = require$1(`@primer/primitives/dist/styleLint/${file}`);
+
+    for (const key of Object.keys(data)) {
+      const size = data[key];
+      const values = size['value'];
+      values.push(`${parseInt(size['original']['value']) + 1}px`);
+      values.push(`${parseInt(size['original']['value']) - 1}px`);
+
+      variables.push({
+        name: `--${size['name']}`,
+        values,
+      });
     }
+  }
 
-    return `Please replace ${value} with spacing variable '${replacement}'.`
-  },
-});
+  return variables
+}
+
+const {
+  createPlugin,
+  utils: {report, ruleMessages, validateOptions},
+} = stylelint;
 
 const walkGroups = (root, validate) => {
   for (const node of root.nodes) {
@@ -760,24 +764,47 @@ const walkGroups = (root, validate) => {
   return root
 };
 
-// eslint-disable-next-line no-unused-vars
-var spacing = stylelint.createPlugin(ruleName$2, (enabled, options = {}, context) => {
-  if (!enabled) {
-    return noop$2
-  }
+const ruleName$2 = 'primer/spacing';
+const messages$2 = ruleMessages(ruleName$2, {
+  rejected: (value, replacement) => {
+    if (!replacement) {
+      return `Please use a primer size variable instead of '${value}'. Consult the primer docs for a suitable replacement. https://primer.style/foundations/primitives/size`
+    }
 
-  const lintResult = (root, result) => {
-    root.walk(decl => {
-      if (decl.type !== 'decl' || !decl.prop.match(/^(padding|margin)/)) {
-        return noop$2
-      }
+    return `Please replace '${value}' with size variable '${replacement['name']}'. https://primer.style/foundations/primitives/size`
+  },
+});
 
-      const problems = [];
+const meta = {
+  fixable: true,
+};
+
+/** @type {import('stylelint').Rule} */
+const ruleFunction = (primary, secondaryOptions, context) => {
+  return async (root, result) => {
+    // Props that we want to check
+    const propList = ['padding', 'margin', 'top', 'right', 'bottom', 'left'];
+    // Values that we want to ignore
+    const valueList = ['${'];
+
+    const sizes = await primitivesVariables('size');
+
+    const validOptions = validateOptions(result, ruleName$2, {
+      actual: primary,
+      possible: [true],
+    });
+
+    if (!validOptions) return
+
+    root.walkDecls(declNode => {
+      const {prop, value} = declNode;
 
-      const parsedValue = walkGroups(valueParser(decl.value), node => {
-        // Remove leading negative sign, if any.
-        const cleanValue = node.value.replace(/^-/g, '');
+      if (!propList.some(spacingProp => prop.startsWith(spacingProp))) return
+      if (valueList.some(valueToIgnore => value.includes(valueToIgnore))) return
 
+      const problems = [];
+
+      const parsedValue = walkGroups(valueParser(value), node => {
         // Only check word types. https://github.com/TrySound/postcss-value-parser#word
         if (node.type !== 'word') {
           return
@@ -788,30 +815,36 @@ var spacing = stylelint.createPlugin(ruleName$2, (enabled, options = {}, context
           return
         }
 
-        const valueUnit = valueParser.unit(cleanValue);
+        const valueUnit = valueParser.unit(node.value);
 
-        if (valueUnit && (valueUnit.unit === '' || !/^[0-9.]+$/.test(valueUnit.number))) {
+        if (valueUnit && (valueUnit.unit === '' || !/^-?[0-9.]+$/.test(valueUnit.number))) {
           return
         }
 
-        // If the a variable is found in the value, skip it.
+        // Skip if the value unit isn't a supported unit.
+        if (valueUnit && !['px', 'rem', 'em'].includes(valueUnit.unit)) {
+          return
+        }
+
+        // If the variable is found in the value, skip it.
         if (
-          Object.keys(spacerValues).some(variable =>
-            new RegExp(`${variable.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(cleanValue),
+          sizes.some(variable =>
+            new RegExp(`${variable['name'].replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(node.value),
           )
         ) {
           return
         }
 
-        const replacement = Object.keys(spacerValues).find(spacer => spacerValues[spacer] === cleanValue) || null;
-        const valueMatch = replacement ? spacerValues[replacement] : node.value;
+        const replacement = sizes.find(variable => variable.values.includes(node.value.replace('-', '')));
+        const fixable = replacement && valueUnit && !valueUnit.number.includes('-');
 
-        if (replacement && context.fix) {
-          node.value = node.value.replace(valueMatch, replacement);
+        if (fixable && context.fix) {
+          node.value = node.value.replace(node.value, `var(${replacement['name']})`);
         } else {
           problems.push({
-            index: declarationValueIndex(decl) + node.sourceIndex,
-            message: messages$2.rejected(valueMatch, replacement),
+            index: declarationValueIndex(declNode) + node.sourceIndex,
+            endIndex: declarationValueIndex(declNode) + node.sourceIndex + node.value.length,
+            message: messages$2.rejected(node.value, replacement),
           });
         }
 
@@ -819,27 +852,30 @@ var spacing = stylelint.createPlugin(ruleName$2, (enabled, options = {}, context
       });
 
       if (context.fix) {
-        decl.value = parsedValue.toString();
+        declNode.value = parsedValue.toString();
       }
 
       if (problems.length) {
         for (const err of problems) {
-          stylelint.utils.report({
+          report({
             index: err.index,
+            endIndex: err.endIndex,
             message: err.message,
-            node: decl,
+            node: declNode,
             result,
             ruleName: ruleName$2,
           });
         }
       }
     });
-  };
+  }
+};
 
-  return lintResult
-});
+ruleFunction.ruleName = ruleName$2;
+ruleFunction.messages = messages$2;
+ruleFunction.meta = meta;
 
-function noop$2() {}
+var spacing = createPlugin(ruleName$2, ruleFunction);
 
 var typography = createVariableRule(
   'primer/typography',
@@ -1625,7 +1661,6 @@ var index = {
         'comment-empty-line-before': null,
         'length-zero-no-unit': null,
         'selector-max-type': null,
-        'primer/spacing': null,
         'primer/colors': null,
         'primer/borders': null,
         'primer/typography': null,
@@ -1655,6 +1690,7 @@ var index = {
     },
     {
       files: ['**/*.module.css'],
+      plugins: ['stylelint-css-modules-no-global-scoped-selector'],
       rules: {
         'property-no-unknown': [
           true,
@@ -1679,8 +1715,8 @@ var index = {
             ignoreFunctions: ['global'],
           },
         ],
+        'css-modules/no-global-scoped-selector': true,
         // temporarily disabiling Primer plugins while we work on upgrades https://github.com/github/primer/issues/3165
-        'primer/spacing': null,
         'primer/borders': null,
         'primer/typography': null,
         'primer/box-shadow': null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/stylelint-config",
-  "version": "13.0.0-rc.864dd2a",
+  "version": "13.0.0-rc.99be5f2",
   "description": "Sharable stylelint config used by GitHub's CSS",
   "author": "GitHub, Inc.",
   "license": "MIT",
@@ -45,7 +45,7 @@
   "dependencies": {
     "@github/browserslist-config": "^1.0.0",
     "@primer/css": "^21.0.8",
-    "@primer/primitives": "^7.16.0",
+    "@primer/primitives": "^7.17.1",
     "anymatch": "^3.1.1",
     "postcss-scss": "^4.0.2",
     "postcss-styled-syntax": "^0.6.4",
@@ -53,16 +53,22 @@
     "string.prototype.matchall": "^4.0.2",
     "stylelint": "^16.3.1",
     "stylelint-config-standard": "^36.0.0",
+    "stylelint-css-modules-no-global-scoped-selector": "^1.0.2",
     "stylelint-no-unsupported-browser-features": "^8.0.0",
     "stylelint-order": "^6.0.4",
     "stylelint-scss": "^6.2.0",
     "stylelint-value-no-unknown-custom-properties": "^6.0.1",
     "tap-map": "^1.0.0"
   },
+  "overrides": {
+    "stylelint-css-modules-no-global-scoped-selector": {
+      "stylelint": "$stylelint"
+    }
+  },
   "prettier": "@github/prettier-config",
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "2.26.1",
+    "@changesets/cli": "2.27.1",
     "@github/prettier-config": "^0.0.6",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",

package/plugins/lib/primitives.js

@@ -0,0 +1,33 @@
+import {createRequire} from 'node:module'
+
+const require = createRequire(import.meta.url)
+
+export async function primitivesVariables(type) {
+  const variables = []
+
+  const files = []
+  switch (type) {
+    case 'size':
+      files.push('base/size/size.json')
+      break
+  }
+
+  for (const file of files) {
+    // eslint-disable-next-line import/no-dynamic-require
+    const data = require(`@primer/primitives/dist/styleLint/${file}`)
+
+    for (const key of Object.keys(data)) {
+      const size = data[key]
+      const values = size['value']
+      values.push(`${parseInt(size['original']['value']) + 1}px`)
+      values.push(`${parseInt(size['original']['value']) - 1}px`)
+
+      variables.push({
+        name: `--${size['name']}`,
+        values,
+      })
+    }
+  }
+
+  return variables
+}

package/plugins/spacing.js

@@ -1,39 +1,12 @@
 import stylelint from 'stylelint'
 import declarationValueIndex from 'stylelint/lib/utils/declarationValueIndex.cjs'
 import valueParser from 'postcss-value-parser'
+import {primitivesVariables} from './lib/primitives.js'
 
-// TODO: Pull this in from primer/primitives
-const spacerValues = {
-  '$spacer-1': '4px',
-  '$spacer-2': '8px',
-  '$spacer-3': '16px',
-  '$spacer-4': '24px',
-  '$spacer-5': '32px',
-  '$spacer-6': '40px',
-  '$spacer-7': '48px',
-  '$spacer-8': '64px',
-  '$spacer-9': '80px',
-  '$spacer-10': '96px',
-  '$spacer-11': '112px',
-  '$spacer-12': '128px',
-  '$em-spacer-1': '0.0625em',
-  '$em-spacer-2': '0.125em',
-  '$em-spacer-3': '0.25em',
-  '$em-spacer-4': '0.375em',
-  '$em-spacer-5': '0.5em',
-  '$em-spacer-6': '0.75em',
-}
-
-export const ruleName = 'primer/spacing'
-export const messages = stylelint.utils.ruleMessages(ruleName, {
-  rejected: (value, replacement) => {
-    if (replacement === null) {
-      return `Please use a primer spacer variable instead of '${value}'. Consult the primer docs for a suitable replacement. https://primer.style/css/storybook/?path=/docs/support-spacing--docs`
-    }
-
-    return `Please replace ${value} with spacing variable '${replacement}'.`
-  },
-})
+const {
+  createPlugin,
+  utils: {report, ruleMessages, validateOptions},
+} = stylelint
 
 const walkGroups = (root, validate) => {
   for (const node of root.nodes) {
@@ -46,24 +19,47 @@ const walkGroups = (root, validate) => {
   return root
 }
 
-// eslint-disable-next-line no-unused-vars
-export default stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
-  if (!enabled) {
-    return noop
-  }
+export const ruleName = 'primer/spacing'
+export const messages = ruleMessages(ruleName, {
+  rejected: (value, replacement) => {
+    if (!replacement) {
+      return `Please use a primer size variable instead of '${value}'. Consult the primer docs for a suitable replacement. https://primer.style/foundations/primitives/size`
+    }
 
-  const lintResult = (root, result) => {
-    root.walk(decl => {
-      if (decl.type !== 'decl' || !decl.prop.match(/^(padding|margin)/)) {
-        return noop
-      }
+    return `Please replace '${value}' with size variable '${replacement['name']}'. https://primer.style/foundations/primitives/size`
+  },
+})
 
-      const problems = []
+const meta = {
+  fixable: true,
+}
+
+/** @type {import('stylelint').Rule} */
+const ruleFunction = (primary, secondaryOptions, context) => {
+  return async (root, result) => {
+    // Props that we want to check
+    const propList = ['padding', 'margin', 'top', 'right', 'bottom', 'left']
+    // Values that we want to ignore
+    const valueList = ['${']
+
+    const sizes = await primitivesVariables('size')
+
+    const validOptions = validateOptions(result, ruleName, {
+      actual: primary,
+      possible: [true],
+    })
+
+    if (!validOptions) return
+
+    root.walkDecls(declNode => {
+      const {prop, value} = declNode
 
-      const parsedValue = walkGroups(valueParser(decl.value), node => {
-        // Remove leading negative sign, if any.
-        const cleanValue = node.value.replace(/^-/g, '')
+      if (!propList.some(spacingProp => prop.startsWith(spacingProp))) return
+      if (valueList.some(valueToIgnore => value.includes(valueToIgnore))) return
 
+      const problems = []
+
+      const parsedValue = walkGroups(valueParser(value), node => {
         // Only check word types. https://github.com/TrySound/postcss-value-parser#word
         if (node.type !== 'word') {
           return
@@ -74,30 +70,36 @@ export default stylelint.createPlugin(ruleName, (enabled, options = {}, context)
           return
         }
 
-        const valueUnit = valueParser.unit(cleanValue)
+        const valueUnit = valueParser.unit(node.value)
 
-        if (valueUnit && (valueUnit.unit === '' || !/^[0-9.]+$/.test(valueUnit.number))) {
+        if (valueUnit && (valueUnit.unit === '' || !/^-?[0-9.]+$/.test(valueUnit.number))) {
           return
         }
 
-        // If the a variable is found in the value, skip it.
+        // Skip if the value unit isn't a supported unit.
+        if (valueUnit && !['px', 'rem', 'em'].includes(valueUnit.unit)) {
+          return
+        }
+
+        // If the variable is found in the value, skip it.
         if (
-          Object.keys(spacerValues).some(variable =>
-            new RegExp(`${variable.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(cleanValue),
+          sizes.some(variable =>
+            new RegExp(`${variable['name'].replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(node.value),
           )
         ) {
           return
         }
 
-        const replacement = Object.keys(spacerValues).find(spacer => spacerValues[spacer] === cleanValue) || null
-        const valueMatch = replacement ? spacerValues[replacement] : node.value
+        const replacement = sizes.find(variable => variable.values.includes(node.value.replace('-', '')))
+        const fixable = replacement && valueUnit && !valueUnit.number.includes('-')
 
-        if (replacement && context.fix) {
-          node.value = node.value.replace(valueMatch, replacement)
+        if (fixable && context.fix) {
+          node.value = node.value.replace(node.value, `var(${replacement['name']})`)
         } else {
           problems.push({
-            index: declarationValueIndex(decl) + node.sourceIndex,
-            message: messages.rejected(valueMatch, replacement),
+            index: declarationValueIndex(declNode) + node.sourceIndex,
+            endIndex: declarationValueIndex(declNode) + node.sourceIndex + node.value.length,
+            message: messages.rejected(node.value, replacement),
           })
         }
 
@@ -105,15 +107,16 @@ export default stylelint.createPlugin(ruleName, (enabled, options = {}, context)
       })
 
       if (context.fix) {
-        decl.value = parsedValue.toString()
+        declNode.value = parsedValue.toString()
       }
 
       if (problems.length) {
         for (const err of problems) {
-          stylelint.utils.report({
+          report({
             index: err.index,
+            endIndex: err.endIndex,
             message: err.message,
-            node: decl,
+            node: declNode,
             result,
             ruleName,
           })
@@ -121,8 +124,10 @@ export default stylelint.createPlugin(ruleName, (enabled, options = {}, context)
       }
     })
   }
+}
 
-  return lintResult
-})
+ruleFunction.ruleName = ruleName
+ruleFunction.messages = messages
+ruleFunction.meta = meta
 
-function noop() {}
+export default createPlugin(ruleName, ruleFunction)