@primer/stylelint-config 13.0.0-rc.f33e046 → 13.0.0-rc.f49bf6d

package/dist/index.mjs

@@ -1,12 +1,12 @@
 import browsers from '@github/browserslist-config';
 import stylelint from 'stylelint';
-import anymatch from 'anymatch';
+import declarationValueIndex from 'stylelint/lib/utils/declarationValueIndex.cjs';
 import valueParser from 'postcss-value-parser';
+import { createRequire } from 'node:module';
+import anymatch from 'anymatch';
 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 variables$2 from '@primer/css/dist/variables.json' with { type: 'json' };
 import matchAll from 'string.prototype.matchall';
-import { createRequire } from 'node:module';
 
 var propertyOrder = [
   'all',
@@ -181,6 +181,247 @@ var propertyOrder = [
   'animation-direction',
 ];
 
+const require$1 = createRequire(import.meta.url);
+
+function primitivesVariables(type) {
+  const variables = [];
+
+  const files = [];
+  switch (type) {
+    case 'spacing':
+      files.push('base/size/size.json');
+      break
+    case 'border':
+      files.push('functional/size/border.json');
+      break
+    case 'typography':
+      files.push('base/typography/typography.json');
+      files.push('functional/typography/typography.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 = typeof size['value'] === 'string' ? [size['value']] : size['value'];
+
+      variables.push({
+        name: `--${size['name']}`,
+        values,
+      });
+    }
+  }
+
+  return variables
+}
+
+function walkGroups$1(root, validate) {
+  for (const node of root.nodes) {
+    if (node.type === 'function') {
+      walkGroups$1(node, validate);
+    } else {
+      validate(node);
+    }
+  }
+  return root
+}
+
+const {
+  createPlugin: createPlugin$2,
+  utils: {report: report$2, ruleMessages: ruleMessages$2, validateOptions: validateOptions$2},
+} = stylelint;
+
+const ruleName$4 = 'primer/borders';
+const messages$4 = ruleMessages$2(ruleName$4, {
+  rejected: (value, replacement, propName) => {
+    if (propName && propName.includes('radius') && value.includes('borderWidth')) {
+      return `Border radius variables can not be used for border widths`
+    }
+
+    if ((propName && propName.includes('width')) || (borderShorthand(propName) && value.includes('borderRadius'))) {
+      return `Border width variables can not be used for border radii`
+    }
+
+    if (!replacement) {
+      return `Please use a Primer border variable instead of '${value}'. Consult the primer docs for a suitable replacement. https://primer.style/foundations/primitives/size#border`
+    }
+
+    return `Please replace '${value}' with a Primer border variable '${replacement['name']}'. https://primer.style/foundations/primitives/size#border`
+  },
+});
+
+const variables$1 = primitivesVariables('border');
+const sizes$1 = [];
+const radii = [];
+
+// Props that we want to check
+const propList$2 = ['border', 'border-width', 'border-radius'];
+// Values that we want to ignore
+const valueList$1 = ['${'];
+
+const borderShorthand = prop =>
+  /^border(-(top|right|bottom|left|block-start|block-end|inline-start|inline-end))?$/.test(prop);
+
+for (const variable of variables$1) {
+  const name = variable['name'];
+
+  if (name.includes('borderWidth')) {
+    const value = variable['values']
+      .pop()
+      .replace(/max|\(|\)/g, '')
+      .split(',')[0];
+    sizes$1.push({
+      name,
+      values: [value],
+    });
+  }
+
+  if (name.includes('borderRadius')) {
+    radii.push(variable);
+  }
+}
+
+/** @type {import('stylelint').Rule} */
+const ruleFunction$2 = (primary, secondaryOptions, context) => {
+  return (root, result) => {
+    const validOptions = validateOptions$2(result, ruleName$4, {
+      actual: primary,
+      possible: [true],
+    });
+
+    if (!validOptions) return
+
+    root.walkDecls(declNode => {
+      const {prop, value} = declNode;
+
+      if (!propList$2.some(borderProp => prop.startsWith(borderProp))) return
+      if (/^border(-(top|right|bottom|left|block-start|block-end|inline-start|inline-end))?-color$/.test(prop)) return
+      if (valueList$1.some(valueToIgnore => value.includes(valueToIgnore))) return
+
+      const problems = [];
+
+      const parsedValue = walkGroups$1(valueParser(value), node => {
+        const checkForVariable = (vars, nodeValue) =>
+          vars.some(variable =>
+            new RegExp(`${variable['name'].replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(nodeValue),
+          );
+
+        // Only check word types. https://github.com/TrySound/postcss-value-parser#word
+        if (node.type !== 'word') {
+          return
+        }
+
+        // Exact values to ignore.
+        if (
+          [
+            '*',
+            '+',
+            '-',
+            '/',
+            '0',
+            'none',
+            'inherit',
+            'initial',
+            'revert',
+            'revert-layer',
+            'unset',
+            'solid',
+            'dashed',
+            'dotted',
+            'transparent',
+          ].includes(node.value)
+        ) {
+          return
+        }
+
+        const valueUnit = valueParser.unit(node.value);
+
+        if (valueUnit && (valueUnit.unit === '' || !/^-?[0-9.]+$/.test(valueUnit.number))) {
+          return
+        }
+
+        // Skip if the value unit isn't a supported unit.
+        if (valueUnit && !['px', 'rem', 'em'].includes(valueUnit.unit)) {
+          return
+        }
+
+        // if we're looking at the border property that sets color in shorthand, don't bother checking the color
+        if (
+          // using border shorthand
+          borderShorthand(prop) &&
+          // includes a color as a third space-separated value
+          value.split(' ').length > 2 &&
+          // the color in the third space-separated value includes `node.value`
+          value
+            .split(' ')
+            .slice(2)
+            .some(color => color.includes(node.value))
+        ) {
+          return
+        }
+
+        // If the variable is found in the value, skip it.
+        if (prop.includes('width') || borderShorthand(prop)) {
+          if (checkForVariable(sizes$1, node.value)) {
+            return
+          }
+        }
+
+        if (prop.includes('radius')) {
+          if (checkForVariable(radii, node.value)) {
+            return
+          }
+        }
+
+        const replacement = (prop.includes('radius') ? radii : sizes$1).find(variable =>
+          variable.values.includes(node.value.replace('-', '')),
+        );
+        const fixable = replacement && valueUnit && !valueUnit.number.includes('-');
+
+        if (fixable && context.fix) {
+          node.value = node.value.replace(node.value, `var(${replacement['name']})`);
+        } else {
+          problems.push({
+            index: declarationValueIndex(declNode) + node.sourceIndex,
+            endIndex: declarationValueIndex(declNode) + node.sourceIndex + node.value.length,
+            message: messages$4.rejected(node.value, replacement, prop),
+          });
+        }
+
+        return
+      });
+
+      if (context.fix) {
+        declNode.value = parsedValue.toString();
+      }
+
+      if (problems.length) {
+        for (const err of problems) {
+          report$2({
+            index: err.index,
+            endIndex: err.endIndex,
+            message: err.message,
+            node: declNode,
+            result,
+            ruleName: ruleName$4,
+          });
+        }
+      }
+    });
+  }
+};
+
+ruleFunction$2.ruleName = ruleName$4;
+ruleFunction$2.messages = messages$4;
+ruleFunction$2.meta = {
+  fixable: true,
+};
+
+var borders = createPlugin$2(ruleName$4, ruleFunction$2);
+
 const SKIP_VALUE_NODE_TYPES = new Set(['space', 'div']);
 const SKIP_AT_RULE_NAMES = new Set(['each', 'for', 'function', 'mixin']);
 
@@ -419,24 +660,24 @@ 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$2
     }
 
     let actualRules = rules;
     let overrides = options.rules;
     if (typeof rules === 'function') {
-      actualRules = rules({variables, options, ruleName});
+      actualRules = rules({variables: variables$2, options, ruleName});
     } else {
       actualRules = Object.assign({}, rules);
     }
     if (typeof overrides === 'function') {
       delete options.rules;
-      overrides = overrides({rules: actualRules, options, ruleName, variables});
+      overrides = overrides({rules: actualRules, options, ruleName, variables: variables$2});
     }
     if (overrides) {
       Object.assign(actualRules, overrides);
     }
-    const validate = declarationValidator(actualRules, {variables});
+    const validate = declarationValidator(actualRules, {variables: variables$2});
 
     // The stylelint docs suggest respecting a "disableFix" rule option that
     // overrides the "global" context.fix (--fix) linting option.
@@ -496,70 +737,7 @@ function createVariableRule(ruleName, rules, url) {
   return plugin
 }
 
-function noop$4() {}
-
-var borders = createVariableRule(
-  'primer/borders',
-  {
-    border: {
-      expects: 'a border variable',
-      props: 'border{,-top,-right,-bottom,-left}',
-      values: ['$border', 'none', '0'],
-      components: ['border-width', 'border-style', 'border-color'],
-      replacements: {
-        // because shorthand border properties ¯\_(ツ)_/¯
-        '$border-width $border-style $border-gray': '$border',
-        '$border-width $border-gray $border-style': '$border',
-        '$border-style $border-width $border-gray': '$border',
-        '$border-style $border-gray $border-width': '$border',
-        '$border-gray $border-width $border-style': '$border',
-        '$border-gray $border-style $border-width': '$border',
-        '$border-width $border-style $border-color': '$border',
-        '$border-width $border-color $border-style': '$border',
-        '$border-style $border-width $border-color': '$border',
-        '$border-style $border-color $border-width': '$border',
-        '$border-color $border-width $border-style': '$border',
-        '$border-color $border-style $border-width': '$border',
-      },
-    },
-    'border color': {
-      expects: 'a border color variable',
-      props: 'border{,-top,-right,-bottom,-left}-color',
-      values: [
-        '$border-*',
-        'transparent',
-        'currentColor',
-        // Match variables in any of the following formats: --color-border-*, --color-*-border-*, --color-*-border, --borderColor-, *borderColor*
-        /var\(--color-(.+-)*border(-.+)*\)/,
-        /var\(--color-[^)]+\)/,
-        /var\(--borderColor-[^)]+\)/,
-        /var\((.+-)*borderColor(-.+)*\)/,
-      ],
-      replacements: {
-        '$border-gray': '$border-color',
-      },
-    },
-    'border style': {
-      expects: 'a border style variable',
-      props: 'border{,-top,-right,-bottom,-left}-style',
-      values: ['$border-style', 'none'],
-    },
-    'border width': {
-      expects: 'a border width variable',
-      props: 'border{,-top,-right,-bottom,-left}-width',
-      values: ['$border-width*', '0'],
-    },
-    'border radius': {
-      expects: 'a border radius variable',
-      props: 'border{,-{top,bottom}-{left,right}}-radius',
-      values: ['$border-radius', '0', '50%', 'inherit'],
-      replacements: {
-        '100%': '50%',
-      },
-    },
-  },
-  'https://primer.style/css/utilities/borders',
-);
+function noop$2() {}
 
 var boxShadow = createVariableRule(
   'primer/box-shadow',
@@ -634,10 +812,10 @@ const messages$3 = stylelint.utils.ruleMessages(ruleName$3, {
 
 // 320px is the smallest viewport size that we support
 
-const walkGroups$1 = (root, validate) => {
+const walkGroups = (root, validate) => {
   for (const node of root.nodes) {
     if (node.type === 'function') {
-      walkGroups$1(node, validate);
+      walkGroups(node, validate);
     } else {
       validate(node);
     }
@@ -648,7 +826,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$1
   }
 
   const lintResult = (root, result) => {
@@ -659,12 +837,12 @@ var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}
       }
 
       if (decl.type !== 'decl' || !decl.prop.match(/^(min-width|width)/)) {
-        return noop$3
+        return noop$1
       }
 
       const problems = [];
 
-      walkGroups$1(valueParser(decl.value), node => {
+      walkGroups(valueParser(decl.value), node => {
         // Only check word types. https://github.com/TrySound/postcss-value-parser#word
         if (node.type !== 'word') {
           return
@@ -714,70 +892,60 @@ var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}
   return lintResult
 });
 
-function noop$3() {}
-
-// 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',
-};
+function noop$1() {}
+
+const {
+  createPlugin: createPlugin$1,
+  utils: {report: report$1, ruleMessages: ruleMessages$1, validateOptions: validateOptions$1},
+} = stylelint;
 
 const ruleName$2 = 'primer/spacing';
-const messages$2 = stylelint.utils.ruleMessages(ruleName$2, {
+const messages$2 = ruleMessages$1(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`
+    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`
     }
 
-    return `Please replace ${value} with spacing variable '${replacement}'.`
+    return `Please replace '${value}' with size variable '${replacement['name']}'. https://primer.style/foundations/primitives/size`
   },
 });
 
-const walkGroups = (root, validate) => {
-  for (const node of root.nodes) {
-    if (node.type === 'function') {
-      walkGroups(node, validate);
-    } else {
-      validate(node);
-    }
-  }
-  return root
-};
+// Props that we want to check
+const propList$1 = ['padding', 'margin', 'top', 'right', 'bottom', 'left'];
+// Values that we want to ignore
+const valueList = ['${'];
 
-// eslint-disable-next-line no-unused-vars
-var spacing = stylelint.createPlugin(ruleName$2, (enabled, options = {}, context) => {
-  if (!enabled) {
-    return noop$2
+const sizes = primitivesVariables('spacing');
+
+// Add +-1px to each value
+for (const size of sizes) {
+  const values = size['values'];
+  const px = parseInt(values.find(value => value.includes('px')));
+  if (![2, 6].includes(px)) {
+    values.push(`${px + 1}px`);
+    values.push(`${px - 1}px`);
   }
+}
 
-  const lintResult = (root, result) => {
-    root.walk(decl => {
-      if (decl.type !== 'decl' || !decl.prop.match(/^(padding|margin)/)) {
-        return noop$2
-      }
+/** @type {import('stylelint').Rule} */
+const ruleFunction$1 = (primary, secondaryOptions, context) => {
+  return (root, result) => {
+    const validOptions = validateOptions$1(result, ruleName$2, {
+      actual: primary,
+      possible: [true],
+    });
 
-      const problems = [];
+    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$1.some(spacingProp => prop.startsWith(spacingProp))) return
+      if (valueList.some(valueToIgnore => value.includes(valueToIgnore))) return
+
+      const problems = [];
 
+      const parsedValue = walkGroups$1(valueParser(value), node => {
         // Only check word types. https://github.com/TrySound/postcss-value-parser#word
         if (node.type !== 'word') {
           return
@@ -788,30 +956,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))) {
+          return
+        }
 
-        if (valueUnit && (valueUnit.unit === '' || !/^[0-9.]+$/.test(valueUnit.number))) {
+        // Skip if the value unit isn't a supported unit.
+        if (valueUnit && !['px', 'rem', 'em'].includes(valueUnit.unit)) {
           return
         }
 
-        // If the a variable is found in the value, skip it.
+        // 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,627 +993,215 @@ 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$1({
             index: err.index,
+            endIndex: err.endIndex,
             message: err.message,
-            node: decl,
+            node: declNode,
             result,
             ruleName: ruleName$2,
           });
         }
       }
     });
-  };
-
-  return lintResult
-});
+  }
+};
 
-function noop$2() {}
+ruleFunction$1.ruleName = ruleName$2;
+ruleFunction$1.messages = messages$2;
+ruleFunction$1.meta = {
+  fixable: true,
+};
 
-var typography = createVariableRule(
-  'primer/typography',
-  {
-    'font-size': {
-      expects: 'a font-size variable',
-      values: ['$body-font-size', '$h{000,00,0,1,2,3,4,5,6}-size', '$font-size-*', '1', '1em', 'inherit'],
-    },
-    'font-weight': {
-      props: 'font-weight',
-      values: ['$font-weight-*', 'inherit'],
-      replacements: {
-        bold: '$font-weight-bold',
-        normal: '$font-weight-normal',
-      },
-    },
-    'line-height': {
-      props: 'line-height',
-      values: ['$body-line-height', '$lh-*', '0', '1', '1em', 'inherit'],
-    },
-  },
-  'https://primer.style/css/utilities/typography',
-);
+var spacing = createPlugin$1(ruleName$2, ruleFunction$1);
 
-// Meant as temp until we can move to primitives or css
-const colorTypes = ['accent', 'success', 'attention', 'severe', 'danger', 'open', 'closed', 'done', 'sponsors'];
+const {
+  createPlugin,
+  utils: {report, ruleMessages, validateOptions},
+} = stylelint;
 
-var utilities$1 = {
-  color: [
-    {
-      value: 'var(--color-fg-default)',
-      utilityClass: 'color-fg-default',
-    },
-    {
-      value: 'var(--color-fg-muted)',
-      utilityClass: 'color-fg-muted',
-    },
-    {
-      value: 'var(--color-fg-subtle)',
-      utilityClass: 'color-fg-subtle',
-    },
-  ].concat(
-    colorTypes.map(type => {
-      return {
-        value: `var(--color-${type}-fg)`,
-        utilityClass: `color-fg-${type}`,
-      }
-    }),
-  ),
-  'background-color': [
-    {
-      value: 'var(--color-canvas-default)',
-      utilityClass: 'color-bg-default',
-    },
-    {
-      value: 'var(--color-canvas-overlay)',
-      utilityClass: 'color-bg-overlay',
-    },
-    {
-      value: 'var(--color-canvas-inset)',
-      utilityClass: 'color-bg-inset',
-    },
-    {
-      value: 'var(--color-canvas-subtle)',
-      utilityClass: 'color-bg-subtle',
-    },
-    {
-      value: 'transparent',
-      utilityClass: 'color-bg-transparent',
-    },
-  ]
-    .concat(
-      colorTypes.map(type => {
-        return {
-          value: `var(--color-${type}-subtle)`,
-          utilityClass: `color-bg-${type}`,
-        }
-      }),
-    )
-    .concat(
-      colorTypes.map(type => {
-        return {
-          value: `var(--color-${type}-emphasis)`,
-          utilityClass: `color-bg-${type}-emphasis`,
-        }
-      }),
-    ),
-  'border-color': [
-    {
-      value: 'var(--color-border-default',
-      utilityClass: 'color-border-default',
-    },
-    {
-      value: 'var(--color-border-muted',
-      utilityClass: 'color-border-muted',
-    },
-    {
-      value: 'var(--color-border-subtle',
-      utilityClass: 'color-border-subtle',
-    },
-  ]
-    .concat(
-      colorTypes.map(type => {
-        return {
-          value: `var(--color-${type}-muted)`,
-          utilityClass: `color-border-${type}`,
-        }
-      }),
-    )
-    .concat(
-      colorTypes.map(type => {
-        return {
-          value: `var(--color-${type}-emphasis)`,
-          utilityClass: `color-border-${type}-emphasis`,
-        }
-      }),
-    ),
-  margin: Array.from(new Array(6)).map((_, i) => {
-    return {
-      value: `$spacer-${i + 1}`,
-      utilityClass: `m-${i + 1}`,
-    }
-  }),
-  'margin-top': Array.from(new Array(6)).map((_, i) => {
-    return {
-      value: `$spacer-${i + 1}`,
-      utilityClass: `mt-${i + 1}`,
-    }
-  }),
-  'margin-right': Array.from(new Array(6)).map((_, i) => {
-    return {
-      value: `$spacer-${i + 1}`,
-      utilityClass: `mr-${i + 1}`,
-    }
-  }),
-  'margin-bottom': Array.from(new Array(6)).map((_, i) => {
-    return {
-      value: `$spacer-${i + 1}`,
-      utilityClass: `mb-${i + 1}`,
-    }
-  }),
-  'margin-left': Array.from(new Array(6)).map((_, i) => {
-    return {
-      value: `$spacer-${i + 1}`,
-      utilityClass: `ml-${i + 1}`,
-    }
-  }),
-  padding: Array.from(new Array(6)).map((_, i) => {
-    return {
-      value: `$spacer-${i + 1}`,
-      utilityClass: `p-${i + 1}`,
-    }
-  }),
-  'padding-top': Array.from(new Array(6)).map((_, i) => {
-    return {
-      value: `$spacer-${i + 1}`,
-      utilityClass: `pt-${i + 1}`,
-    }
-  }),
-  'padding-right': Array.from(new Array(6)).map((_, i) => {
-    return {
-      value: `$spacer-${i + 1}`,
-      utilityClass: `pr-${i + 1}`,
-    }
-  }),
-  'padding-bottom': Array.from(new Array(6)).map((_, i) => {
-    return {
-      value: `$spacer-${i + 1}`,
-      utilityClass: `pb-${i + 1}`,
-    }
-  }),
-  'padding-left': Array.from(new Array(6)).map((_, i) => {
-    return {
-      value: `$spacer-${i + 1}`,
-      utilityClass: `pl-${i + 1}`,
+const ruleName$1 = 'primer/typography';
+const messages$1 = ruleMessages(ruleName$1, {
+  rejected: (value, replacement) => {
+    // no possible replacement
+    if (!replacement) {
+      return `Please use a Primer typography variable instead of '${value}'. Consult the primer docs for a suitable replacement. https://primer.style/foundations/primitives/typography`
     }
-  }),
-  'line-height': [
-    {
-      value: '$lh-condensed-ultra',
-      utilityClass: 'lh-condensed-ultra',
-    },
-    {
-      value: '$lh-condensed',
-      utilityClass: 'lh-condensed',
-    },
-    {
-      value: '$lh-default',
-      utilityClass: 'lh-default',
-    },
-    {
-      value: '0',
-      utilityClass: 'lh-0',
-    },
-  ],
-  'text-align': [
-    {
-      value: 'left',
-      utilityClass: 'text-left',
-    },
-    {
-      value: 'right',
-      utilityClass: 'text-right',
-    },
-    {
-      value: 'center',
-      utilityClass: 'text-center',
-    },
-  ],
-  'font-style': [
-    {
-      value: 'italic',
-      utilityClass: 'text-italic',
-    },
-  ],
-  'text-transform': [
-    {
-      value: 'uppercase',
-      utilityClass: 'text-uppercase',
-    },
-  ],
-  'text-decoration': [
-    {
-      value: 'underline',
-      utilityClass: 'text-underline',
-    },
-    {
-      value: 'none',
-      utilityClass: 'no-underline',
-    },
-  ],
-  'white-space': [
-    {
-      value: 'nowrap',
-      utilityClass: 'no-wrap',
-    },
-    {
-      value: 'normal',
-      utilityClass: 'ws-normal',
-    },
-  ],
-  'word-break': [
-    {
-      value: 'break-all',
-      utilityClass: 'wb-break-all',
-    },
-  ],
-  width: [
-    {
-      value: '100%',
-      utilityClass: 'width-full',
-    },
-    {
-      value: 'auto%',
-      utilityClass: 'width-auto',
-    },
-  ],
-  overflow: [
-    {
-      value: 'visible',
-      utilityClass: 'overflow-visible',
-    },
-    {
-      value: 'hidden',
-      utilityClass: 'overflow-hidden',
-    },
-    {
-      value: 'auto',
-      utilityClass: 'overflow-auto',
-    },
-    {
-      value: 'scroll',
-      utilityClass: 'overflow-scroll',
-    },
-  ],
-  'overflow-x': [
-    {
-      value: 'visible',
-      utilityClass: 'overflow-x-visible',
-    },
-    {
-      value: 'hidden',
-      utilityClass: 'overflow-x-hidden',
-    },
-    {
-      value: 'auto',
-      utilityClass: 'overflow-x-auto',
-    },
-    {
-      value: 'scroll',
-      utilityClass: 'overflow-x-scroll',
-    },
-  ],
-  'overflow-y': [
-    {
-      value: 'visible',
-      utilityClass: 'overflow-y-visible',
-    },
-    {
-      value: 'hidden',
-      utilityClass: 'overflow-y-hidden',
-    },
-    {
-      value: 'auto',
-      utilityClass: 'overflow-y-auto',
-    },
-    {
-      value: 'scroll',
-      utilityClass: 'overflow-y-scroll',
-    },
-  ],
-  height: [
-    {
-      value: '100%',
-      utilityClass: 'height-full',
-    },
-  ],
-  'max-width': [
-    {
-      value: '100%',
-      utilityClass: 'width-fit',
-    },
-  ],
-  'max-height': [
-    {
-      value: '100%',
-      utilityClass: 'height-fit',
-    },
-  ],
-  'min-width': [
-    {
-      value: '0',
-      utilityClass: 'min-width-0',
-    },
-  ],
-  float: [
-    {
-      value: 'left',
-      utilityClass: 'float-left',
-    },
-    {
-      value: 'right',
-      utilityClass: 'float-right',
-    },
-    {
-      value: 'none',
-      utilityClass: 'float-none',
-    },
-  ],
-  'list-style': [
-    {
-      value: 'none',
-      utilityClass: 'list-style-none',
-    },
-  ],
-  'user-select': [
-    {
-      value: 'none',
-      utilityClass: 'user-select-none',
-    },
-  ],
-  visibility: [
-    {
-      value: 'hidden',
-      utilityClass: 'v-hidden',
-    },
-    {
-      value: 'visible',
-      utilityClass: 'v-visible',
-    },
-  ],
-  'vertical-align': [
-    {
-      value: 'middle',
-      utilityClass: 'v-align-middle',
-    },
-    {
-      value: 'top',
-      utilityClass: 'v-align-top',
-    },
-    {
-      value: 'bottom',
-      utilityClass: 'v-align-bottom',
-    },
-    {
-      value: 'text-top',
-      utilityClass: 'v-align-text-top',
-    },
-    {
-      value: 'text-bottom',
-      utilityClass: 'v-align-text-bottom',
-    },
-    {
-      value: 'text-baseline',
-      utilityClass: 'v-align-baseline',
-    },
-  ],
-  'font-weight': [
-    {
-      value: '$font-weight-normal',
-      utilityClass: 'text-normal',
-    },
-    {
-      value: '$font-weight-bold',
-      utilityClass: 'text-bold',
-    },
-    {
-      value: '$font-weight-semibold',
-      utilityClass: 'text-semibold',
-    },
-    {
-      value: '$font-weight-light',
-      utilityClass: 'text-light',
-    },
-  ],
-  top: [
-    {
-      value: '0',
-      utilityClass: 'top-0',
-    },
-    {
-      value: 'auto',
-      utilityClass: 'top-auto',
-    },
-  ],
-  right: [
-    {
-      value: '0',
-      utilityClass: 'right-0',
-    },
-    {
-      value: 'auto',
-      utilityClass: 'right-auto',
-    },
-  ],
-  bottom: [
-    {
-      value: '0',
-      utilityClass: 'bottom-0',
-    },
-    {
-      value: 'auto',
-      utilityClass: 'bottom-auto',
-    },
-  ],
-  left: [
-    {
-      value: '0',
-      utilityClass: 'left-0',
-    },
-    {
-      value: 'auto',
-      utilityClass: 'left-auto',
-    },
-  ],
-  position: [
-    {
-      value: 'static',
-      utilityClass: 'position-static',
-    },
-    {
-      value: 'relative',
-      utilityClass: 'position-relative',
-    },
-    {
-      value: 'absolute',
-      utilityClass: 'position-absolute',
-    },
-    {
-      value: 'fixed',
-      utilityClass: 'position-fixed',
-    },
-    {
-      value: 'sticky',
-      utilityClass: 'position-sticky',
-    },
-  ],
-  'box-shadow': [
-    {
-      value: 'none',
-      utilityClass: 'box-shadow-none',
-    },
-    {
-      value: 'var(--color-shadow-small)',
-      utilityClass: 'box-shadow-small',
-    },
-    {
-      value: 'var(--color-shadow-medium)',
-      utilityClass: 'box-shadow-medium',
-    },
-    {
-      value: 'var(--color-shadow-large)',
-      utilityClass: 'box-shadow-large',
-    },
-    {
-      value: 'var(--color-shadow-extra-large)',
-      utilityClass: 'box-shadow-extra-large',
-    },
-  ],
-  border: [
-    {
-      value: '$border',
-      utilityClass: 'border',
-    },
-    {
-      value: '0',
-      utilityClass: 'border-0',
-    },
-  ],
-  'border-top': [
-    {
-      value: '$border',
-      utilityClass: 'border-top',
-    },
-    {
-      value: '0',
-      utilityClass: 'border-top-0',
-    },
-  ],
-  'border-right': [
-    {
-      value: '$border',
-      utilityClass: 'border-right',
-    },
-    {
-      value: '0',
-      utilityClass: 'border-right-0',
-    },
-  ],
-  'border-bottom': [
-    {
-      value: '$border',
-      utilityClass: 'border-bottom',
-    },
-    {
-      value: '0',
-      utilityClass: 'border-bottom-0',
-    },
-  ],
-  'border-left': [
-    {
-      value: '$border',
-      utilityClass: 'border-left',
-    },
-    {
-      value: '0',
-      utilityClass: 'border-left-0',
-    },
-  ],
-};
 
-const ruleName$1 = 'primer/utilities';
+    // multiple possible replacements
+    if (replacement.length) {
+      return `Please use one of the following Primer typography variables instead of '${value}': ${replacement.map(replacementObj => `'${replacementObj.name}'`).join(', ')}. https://primer.style/foundations/primitives/typography`
+    }
 
-const messages$1 = stylelint.utils.ruleMessages(ruleName$1, {
-  rejected: (selector, utilityClass) => {
-    return `Consider using the Primer utility '.${utilityClass}' instead of the selector '${selector}' in your html. https://primer.style/css/utilities`
+    // one possible replacement
+    return `Please replace '${value}' with Primer typography variable '${replacement['name']}'. https://primer.style/foundations/primitives/typography`
   },
 });
 
-// eslint-disable-next-line no-unused-vars
-var utilities = stylelint.createPlugin(ruleName$1, (enabled, options = {}, context) => {
-  if (!enabled) {
-    return noop$1
+const fontWeightKeywordMap = {
+  normal: 400,
+  bold: 600,
+  bolder: 600,
+  lighter: 300,
+};
+const getClosestFontWeight = (goalWeightNumber, fontWeightsTokens) => {
+  return fontWeightsTokens.reduce((prev, curr) =>
+    Math.abs(curr.values - goalWeightNumber) < Math.abs(prev.values - goalWeightNumber) ? curr : prev,
+  ).values
+};
+
+const variables = primitivesVariables('typography');
+const fontSizes = [];
+const fontWeights = [];
+const lineHeights = [];
+const fontStacks = [];
+const fontShorthands = [];
+
+// Props that we want to check for typography variables
+const propList = ['font-size', 'font-weight', 'line-height', 'font-family', 'font'];
+
+for (const variable of variables) {
+  const name = variable['name'];
+
+  if (name.includes('size')) {
+    fontSizes.push(variable);
   }
 
-  const utilityReplacement = (declaration, value) => {
-    const declarationUtilities = utilities$1[declaration];
-    if (declarationUtilities) {
-      return declarationUtilities.find(utility => {
-        return utility.value === value
-      })
-    }
-  };
+  if (name.includes('weight')) {
+    fontWeights.push(variable);
+  }
 
-  const lintResult = (root, result) => {
-    root.walkRules(rule => {
-      if (!/^\.[\w\-_]+$/.exec(rule.selector)) {
+  if (name.includes('lineHeight')) {
+    lineHeights.push(variable);
+  }
+
+  if (name.includes('fontStack')) {
+    fontStacks.push(variable);
+  }
+
+  if (name.includes('shorthand')) {
+    fontShorthands.push(variable);
+  }
+}
+
+/** @type {import('stylelint').Rule} */
+const ruleFunction = (primary, secondaryOptions, context) => {
+  return (root, result) => {
+    const validOptions = validateOptions(result, ruleName$1, {
+      actual: primary,
+      possible: [true],
+    });
+    let validValues = [];
+
+    if (!validOptions) return
+
+    root.walkDecls(declNode => {
+      const {prop, value} = declNode;
+
+      if (!propList.some(typographyProp => prop.startsWith(typographyProp))) return
+
+      const problems = [];
+
+      const checkForVariable = (vars, nodeValue) =>
+        vars.some(variable =>
+          new RegExp(`${variable['name'].replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(nodeValue),
+        );
+
+      // Exact values to ignore.
+      if (value === 'inherit') {
         return
       }
-      const decls = rule.nodes.filter(decl => decl.type === 'decl');
 
-      if (decls.length === 1) {
-        const replacement = utilityReplacement(decls[0].prop, decls[0].value);
-        if (replacement) {
-          stylelint.utils.report({
-            index: rule.sourceIndex,
-            message: messages$1.rejected(rule.selector, replacement.utilityClass),
-            node: rule,
+      switch (prop) {
+        case 'font-size':
+          validValues = fontSizes;
+          break
+        case 'font-weight':
+          validValues = fontWeights;
+          break
+        case 'line-height':
+          validValues = lineHeights;
+          break
+        case 'font-family':
+          validValues = fontStacks;
+          break
+        case 'font':
+          validValues = fontShorthands;
+          break
+        default:
+          validValues = [];
+      }
+
+      if (checkForVariable(validValues, value)) {
+        return
+      }
+
+      const getReplacements = () => {
+        const replacementTokens = validValues.filter(variable => {
+          if (!(variable.values instanceof Array)) {
+            let nodeValue = value;
+
+            if (prop === 'font-weight') {
+              nodeValue = getClosestFontWeight(fontWeightKeywordMap[value] || value, fontWeights);
+            }
+
+            return variable.values.toString() === nodeValue.toString()
+          }
+
+          return variable.values.includes(value.replace('-', ''))
+        });
+
+        if (!replacementTokens.length) {
+          return
+        }
+
+        if (replacementTokens.length > 1) {
+          return replacementTokens
+        }
+
+        return replacementTokens[0]
+      };
+      const replacement = getReplacements();
+      const fixable = replacement && !replacement.length;
+
+      if (fixable && context.fix) {
+        declNode.value = value.replace(value, `var(${replacement['name']})`);
+      } else {
+        problems.push({
+          index: declarationValueIndex(declNode),
+          endIndex: declarationValueIndex(declNode) + value.length,
+          message: messages$1.rejected(value, replacement, prop),
+        });
+      }
+
+      if (problems.length) {
+        for (const err of problems) {
+          report({
+            index: err.index,
+            endIndex: err.endIndex,
+            message: err.message,
+            node: declNode,
             result,
             ruleName: ruleName$1,
           });
         }
       }
     });
-  };
+  }
+};
 
-  return lintResult
-});
+ruleFunction.ruleName = ruleName$1;
+ruleFunction.messages = messages$1;
+ruleFunction.meta = {
+  fixable: true,
+};
 
-function noop$1() {}
+var typography = createPlugin(ruleName$1, ruleFunction);
 
 const ruleName = 'primer/no-display-colors';
 const messages = stylelint.utils.ruleMessages(ruleName, {
@@ -1506,7 +1268,6 @@ var index = {
     responsiveWidths,
     spacing,
     typography,
-    utilities,
     noDisplayColors,
   ],
   rules: {
@@ -1574,7 +1335,6 @@ var index = {
     'primer/responsive-widths': true,
     'primer/spacing': true,
     'primer/typography': true,
-    'primer/utilities': null,
     'primer/no-display-colors': true,
     'property-no-unknown': [
       true,
@@ -1625,12 +1385,8 @@ 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,
         'primer/box-shadow': null,
-        'primer/utilities': null,
       },
     },
     {
@@ -1680,11 +1436,7 @@ var index = {
           },
         ],
         // 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,
-        'primer/utilities': null,
       },
     },
   ],