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

package/dist/index.cjs

@@ -7,7 +7,7 @@ var valueParser = require('postcss-value-parser');
 var node_module = require('node:module');
 var anymatch = require('anymatch');
 var TapMap = require('tap-map');
-var variables$1 = require('@primer/css/dist/variables.json');
+var variables$2 = require('@primer/css/dist/variables.json');
 var matchAll = require('string.prototype.matchall');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -197,6 +197,10 @@ function primitivesVariables(type) {
     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) {
@@ -229,12 +233,12 @@ function walkGroups$1(root, validate) {
 }
 
 const {
-  createPlugin: createPlugin$1,
-  utils: {report: report$1, ruleMessages: ruleMessages$1, validateOptions: validateOptions$1},
+  createPlugin: createPlugin$2,
+  utils: {report: report$2, ruleMessages: ruleMessages$2, validateOptions: validateOptions$2},
 } = stylelint;
 
-const ruleName$3 = 'primer/borders';
-const messages$3 = ruleMessages$1(ruleName$3, {
+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`
@@ -252,19 +256,19 @@ const messages$3 = ruleMessages$1(ruleName$3, {
   },
 });
 
-const variables = primitivesVariables('border');
+const variables$1 = primitivesVariables('border');
 const sizes$1 = [];
 const radii = [];
 
 // Props that we want to check
-const propList$1 = ['border', 'border-width', 'border-radius'];
+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) {
+for (const variable of variables$1) {
   const name = variable['name'];
 
   if (name.includes('borderWidth')) {
@@ -284,9 +288,9 @@ for (const variable of variables) {
 }
 
 /** @type {import('stylelint').Rule} */
-const ruleFunction$1 = (primary, secondaryOptions, context) => {
+const ruleFunction$2 = (primary, secondaryOptions, context) => {
   return (root, result) => {
-    const validOptions = validateOptions$1(result, ruleName$3, {
+    const validOptions = validateOptions$2(result, ruleName$4, {
       actual: primary,
       possible: [true],
     });
@@ -296,7 +300,7 @@ const ruleFunction$1 = (primary, secondaryOptions, context) => {
     root.walkDecls(declNode => {
       const {prop, value} = declNode;
 
-      if (!propList$1.some(borderProp => prop.startsWith(borderProp))) return
+      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
 
@@ -386,7 +390,7 @@ const ruleFunction$1 = (primary, secondaryOptions, context) => {
           problems.push({
             index: declarationValueIndex(declNode) + node.sourceIndex,
             endIndex: declarationValueIndex(declNode) + node.sourceIndex + node.value.length,
-            message: messages$3.rejected(node.value, replacement, prop),
+            message: messages$4.rejected(node.value, replacement, prop),
           });
         }
 
@@ -399,13 +403,13 @@ const ruleFunction$1 = (primary, secondaryOptions, context) => {
 
       if (problems.length) {
         for (const err of problems) {
-          report$1({
+          report$2({
             index: err.index,
             endIndex: err.endIndex,
             message: err.message,
             node: declNode,
             result,
-            ruleName: ruleName$3,
+            ruleName: ruleName$4,
           });
         }
       }
@@ -413,13 +417,13 @@ const ruleFunction$1 = (primary, secondaryOptions, context) => {
   }
 };
 
-ruleFunction$1.ruleName = ruleName$3;
-ruleFunction$1.messages = messages$3;
-ruleFunction$1.meta = {
+ruleFunction$2.ruleName = ruleName$4;
+ruleFunction$2.messages = messages$4;
+ruleFunction$2.meta = {
   fixable: true,
 };
 
-var borders = createPlugin$1(ruleName$3, ruleFunction$1);
+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']);
@@ -665,18 +669,18 @@ function createVariableRule(ruleName, rules, url) {
     let actualRules = rules;
     let overrides = options.rules;
     if (typeof rules === 'function') {
-      actualRules = rules({variables: variables$1, 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: variables$1});
+      overrides = overrides({rules: actualRules, options, ruleName, variables: variables$2});
     }
     if (overrides) {
       Object.assign(actualRules, overrides);
     }
-    const validate = declarationValidator(actualRules, {variables: variables$1});
+    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.
@@ -801,9 +805,9 @@ var colors = createVariableRule(
   'https://primer.style/primitives/colors',
 );
 
-const ruleName$2 = 'primer/responsive-widths';
+const ruleName$3 = 'primer/responsive-widths';
 
-const messages$2 = stylelint.utils.ruleMessages(ruleName$2, {
+const messages$3 = stylelint.utils.ruleMessages(ruleName$3, {
   rejected: value => {
     return `A value larger than the smallest viewport could break responsive pages. Use a width value smaller than ${value}. https://primer.style/css/support/breakpoints`
   },
@@ -823,7 +827,7 @@ const walkGroups = (root, validate) => {
 };
 
 // eslint-disable-next-line no-unused-vars
-var responsiveWidths = stylelint.createPlugin(ruleName$2, (enabled, options = {}, context) => {
+var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}, context) => {
   if (!enabled) {
     return noop$1
   }
@@ -859,7 +863,7 @@ var responsiveWidths = stylelint.createPlugin(ruleName$2, (enabled, options = {}
             if (parseInt(valueUnit.number) > 320) {
               problems.push({
                 index: declarationValueIndex(decl) + node.sourceIndex,
-                message: messages$2.rejected(node.value),
+                message: messages$3.rejected(node.value),
               });
             }
             break
@@ -867,7 +871,7 @@ var responsiveWidths = stylelint.createPlugin(ruleName$2, (enabled, options = {}
             if (parseInt(valueUnit.number) > 100) {
               problems.push({
                 index: declarationValueIndex(decl) + node.sourceIndex,
-                message: messages$2.rejected(node.value),
+                message: messages$3.rejected(node.value),
               });
             }
             break
@@ -881,7 +885,7 @@ var responsiveWidths = stylelint.createPlugin(ruleName$2, (enabled, options = {}
             message: err.message,
             node: decl,
             result,
-            ruleName: ruleName$2,
+            ruleName: ruleName$3,
           });
         }
       }
@@ -894,12 +898,12 @@ var responsiveWidths = stylelint.createPlugin(ruleName$2, (enabled, options = {}
 function noop$1() {}
 
 const {
-  createPlugin,
-  utils: {report, ruleMessages, validateOptions},
+  createPlugin: createPlugin$1,
+  utils: {report: report$1, ruleMessages: ruleMessages$1, validateOptions: validateOptions$1},
 } = stylelint;
 
-const ruleName$1 = 'primer/spacing';
-const messages$1 = ruleMessages(ruleName$1, {
+const ruleName$2 = 'primer/spacing';
+const messages$2 = ruleMessages$1(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`
@@ -910,7 +914,7 @@ const messages$1 = ruleMessages(ruleName$1, {
 });
 
 // Props that we want to check
-const propList = ['padding', 'margin', 'top', 'right', 'bottom', 'left'];
+const propList$1 = ['padding', 'margin', 'top', 'right', 'bottom', 'left'];
 // Values that we want to ignore
 const valueList = ['${'];
 
@@ -927,9 +931,9 @@ for (const size of sizes) {
 }
 
 /** @type {import('stylelint').Rule} */
-const ruleFunction = (primary, secondaryOptions, context) => {
+const ruleFunction$1 = (primary, secondaryOptions, context) => {
   return (root, result) => {
-    const validOptions = validateOptions(result, ruleName$1, {
+    const validOptions = validateOptions$1(result, ruleName$2, {
       actual: primary,
       possible: [true],
     });
@@ -939,7 +943,7 @@ const ruleFunction = (primary, secondaryOptions, context) => {
     root.walkDecls(declNode => {
       const {prop, value} = declNode;
 
-      if (!propList.some(spacingProp => prop.startsWith(spacingProp))) return
+      if (!propList$1.some(spacingProp => prop.startsWith(spacingProp))) return
       if (valueList.some(valueToIgnore => value.includes(valueToIgnore))) return
 
       const problems = [];
@@ -984,7 +988,7 @@ const ruleFunction = (primary, secondaryOptions, context) => {
           problems.push({
             index: declarationValueIndex(declNode) + node.sourceIndex,
             endIndex: declarationValueIndex(declNode) + node.sourceIndex + node.value.length,
-            message: messages$1.rejected(node.value, replacement),
+            message: messages$2.rejected(node.value, replacement),
           });
         }
 
@@ -995,6 +999,189 @@ const ruleFunction = (primary, secondaryOptions, context) => {
         declNode.value = parsedValue.toString();
       }
 
+      if (problems.length) {
+        for (const err of problems) {
+          report$1({
+            index: err.index,
+            endIndex: err.endIndex,
+            message: err.message,
+            node: declNode,
+            result,
+            ruleName: ruleName$2,
+          });
+        }
+      }
+    });
+  }
+};
+
+ruleFunction$1.ruleName = ruleName$2;
+ruleFunction$1.messages = messages$2;
+ruleFunction$1.meta = {
+  fixable: true,
+};
+
+var spacing = createPlugin$1(ruleName$2, ruleFunction$1);
+
+const {
+  createPlugin,
+  utils: {report, ruleMessages, validateOptions},
+} = stylelint;
+
+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`
+    }
+
+    // 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`
+    }
+
+    // one possible replacement
+    return `Please replace '${value}' with Primer typography variable '${replacement['name']}'. https://primer.style/foundations/primitives/typography`
+  },
+});
+
+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);
+  }
+
+  if (name.includes('weight')) {
+    fontWeights.push(variable);
+  }
+
+  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
+      }
+
+      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({
@@ -1017,30 +1204,7 @@ ruleFunction.meta = {
   fixable: true,
 };
 
-var spacing = createPlugin(ruleName$1, ruleFunction);
-
-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 typography = createPlugin(ruleName$1, ruleFunction);
 
 const ruleName = 'primer/no-display-colors';
 const messages = stylelint.utils.ruleMessages(ruleName, {
@@ -1225,7 +1389,6 @@ var index = {
         'length-zero-no-unit': null,
         'selector-max-type': null,
         'primer/colors': null,
-        'primer/typography': null,
         'primer/box-shadow': null,
       },
     },
@@ -1276,7 +1439,6 @@ var index = {
           },
         ],
         // temporarily disabiling Primer plugins while we work on upgrades https://github.com/github/primer/issues/3165
-        'primer/typography': null,
         'primer/box-shadow': null,
       },
     },

package/dist/index.mjs

@@ -5,7 +5,7 @@ import valueParser from 'postcss-value-parser';
 import { createRequire } from 'node:module';
 import anymatch from 'anymatch';
 import TapMap from 'tap-map';
-import variables$1 from '@primer/css/dist/variables.json' with { type: 'json' };
+import variables$2 from '@primer/css/dist/variables.json' with { type: 'json' };
 import matchAll from 'string.prototype.matchall';
 
 var propertyOrder = [
@@ -194,6 +194,10 @@ function primitivesVariables(type) {
     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) {
@@ -226,12 +230,12 @@ function walkGroups$1(root, validate) {
 }
 
 const {
-  createPlugin: createPlugin$1,
-  utils: {report: report$1, ruleMessages: ruleMessages$1, validateOptions: validateOptions$1},
+  createPlugin: createPlugin$2,
+  utils: {report: report$2, ruleMessages: ruleMessages$2, validateOptions: validateOptions$2},
 } = stylelint;
 
-const ruleName$3 = 'primer/borders';
-const messages$3 = ruleMessages$1(ruleName$3, {
+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`
@@ -249,19 +253,19 @@ const messages$3 = ruleMessages$1(ruleName$3, {
   },
 });
 
-const variables = primitivesVariables('border');
+const variables$1 = primitivesVariables('border');
 const sizes$1 = [];
 const radii = [];
 
 // Props that we want to check
-const propList$1 = ['border', 'border-width', 'border-radius'];
+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) {
+for (const variable of variables$1) {
   const name = variable['name'];
 
   if (name.includes('borderWidth')) {
@@ -281,9 +285,9 @@ for (const variable of variables) {
 }
 
 /** @type {import('stylelint').Rule} */
-const ruleFunction$1 = (primary, secondaryOptions, context) => {
+const ruleFunction$2 = (primary, secondaryOptions, context) => {
   return (root, result) => {
-    const validOptions = validateOptions$1(result, ruleName$3, {
+    const validOptions = validateOptions$2(result, ruleName$4, {
       actual: primary,
       possible: [true],
     });
@@ -293,7 +297,7 @@ const ruleFunction$1 = (primary, secondaryOptions, context) => {
     root.walkDecls(declNode => {
       const {prop, value} = declNode;
 
-      if (!propList$1.some(borderProp => prop.startsWith(borderProp))) return
+      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
 
@@ -383,7 +387,7 @@ const ruleFunction$1 = (primary, secondaryOptions, context) => {
           problems.push({
             index: declarationValueIndex(declNode) + node.sourceIndex,
             endIndex: declarationValueIndex(declNode) + node.sourceIndex + node.value.length,
-            message: messages$3.rejected(node.value, replacement, prop),
+            message: messages$4.rejected(node.value, replacement, prop),
           });
         }
 
@@ -396,13 +400,13 @@ const ruleFunction$1 = (primary, secondaryOptions, context) => {
 
       if (problems.length) {
         for (const err of problems) {
-          report$1({
+          report$2({
             index: err.index,
             endIndex: err.endIndex,
             message: err.message,
             node: declNode,
             result,
-            ruleName: ruleName$3,
+            ruleName: ruleName$4,
           });
         }
       }
@@ -410,13 +414,13 @@ const ruleFunction$1 = (primary, secondaryOptions, context) => {
   }
 };
 
-ruleFunction$1.ruleName = ruleName$3;
-ruleFunction$1.messages = messages$3;
-ruleFunction$1.meta = {
+ruleFunction$2.ruleName = ruleName$4;
+ruleFunction$2.messages = messages$4;
+ruleFunction$2.meta = {
   fixable: true,
 };
 
-var borders = createPlugin$1(ruleName$3, ruleFunction$1);
+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']);
@@ -662,18 +666,18 @@ function createVariableRule(ruleName, rules, url) {
     let actualRules = rules;
     let overrides = options.rules;
     if (typeof rules === 'function') {
-      actualRules = rules({variables: variables$1, 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: variables$1});
+      overrides = overrides({rules: actualRules, options, ruleName, variables: variables$2});
     }
     if (overrides) {
       Object.assign(actualRules, overrides);
     }
-    const validate = declarationValidator(actualRules, {variables: variables$1});
+    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.
@@ -798,9 +802,9 @@ var colors = createVariableRule(
   'https://primer.style/primitives/colors',
 );
 
-const ruleName$2 = 'primer/responsive-widths';
+const ruleName$3 = 'primer/responsive-widths';
 
-const messages$2 = stylelint.utils.ruleMessages(ruleName$2, {
+const messages$3 = stylelint.utils.ruleMessages(ruleName$3, {
   rejected: value => {
     return `A value larger than the smallest viewport could break responsive pages. Use a width value smaller than ${value}. https://primer.style/css/support/breakpoints`
   },
@@ -820,7 +824,7 @@ const walkGroups = (root, validate) => {
 };
 
 // eslint-disable-next-line no-unused-vars
-var responsiveWidths = stylelint.createPlugin(ruleName$2, (enabled, options = {}, context) => {
+var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}, context) => {
   if (!enabled) {
     return noop$1
   }
@@ -856,7 +860,7 @@ var responsiveWidths = stylelint.createPlugin(ruleName$2, (enabled, options = {}
             if (parseInt(valueUnit.number) > 320) {
               problems.push({
                 index: declarationValueIndex(decl) + node.sourceIndex,
-                message: messages$2.rejected(node.value),
+                message: messages$3.rejected(node.value),
               });
             }
             break
@@ -864,7 +868,7 @@ var responsiveWidths = stylelint.createPlugin(ruleName$2, (enabled, options = {}
             if (parseInt(valueUnit.number) > 100) {
               problems.push({
                 index: declarationValueIndex(decl) + node.sourceIndex,
-                message: messages$2.rejected(node.value),
+                message: messages$3.rejected(node.value),
               });
             }
             break
@@ -878,7 +882,7 @@ var responsiveWidths = stylelint.createPlugin(ruleName$2, (enabled, options = {}
             message: err.message,
             node: decl,
             result,
-            ruleName: ruleName$2,
+            ruleName: ruleName$3,
           });
         }
       }
@@ -891,12 +895,12 @@ var responsiveWidths = stylelint.createPlugin(ruleName$2, (enabled, options = {}
 function noop$1() {}
 
 const {
-  createPlugin,
-  utils: {report, ruleMessages, validateOptions},
+  createPlugin: createPlugin$1,
+  utils: {report: report$1, ruleMessages: ruleMessages$1, validateOptions: validateOptions$1},
 } = stylelint;
 
-const ruleName$1 = 'primer/spacing';
-const messages$1 = ruleMessages(ruleName$1, {
+const ruleName$2 = 'primer/spacing';
+const messages$2 = ruleMessages$1(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`
@@ -907,7 +911,7 @@ const messages$1 = ruleMessages(ruleName$1, {
 });
 
 // Props that we want to check
-const propList = ['padding', 'margin', 'top', 'right', 'bottom', 'left'];
+const propList$1 = ['padding', 'margin', 'top', 'right', 'bottom', 'left'];
 // Values that we want to ignore
 const valueList = ['${'];
 
@@ -924,9 +928,9 @@ for (const size of sizes) {
 }
 
 /** @type {import('stylelint').Rule} */
-const ruleFunction = (primary, secondaryOptions, context) => {
+const ruleFunction$1 = (primary, secondaryOptions, context) => {
   return (root, result) => {
-    const validOptions = validateOptions(result, ruleName$1, {
+    const validOptions = validateOptions$1(result, ruleName$2, {
       actual: primary,
       possible: [true],
     });
@@ -936,7 +940,7 @@ const ruleFunction = (primary, secondaryOptions, context) => {
     root.walkDecls(declNode => {
       const {prop, value} = declNode;
 
-      if (!propList.some(spacingProp => prop.startsWith(spacingProp))) return
+      if (!propList$1.some(spacingProp => prop.startsWith(spacingProp))) return
       if (valueList.some(valueToIgnore => value.includes(valueToIgnore))) return
 
       const problems = [];
@@ -981,7 +985,7 @@ const ruleFunction = (primary, secondaryOptions, context) => {
           problems.push({
             index: declarationValueIndex(declNode) + node.sourceIndex,
             endIndex: declarationValueIndex(declNode) + node.sourceIndex + node.value.length,
-            message: messages$1.rejected(node.value, replacement),
+            message: messages$2.rejected(node.value, replacement),
           });
         }
 
@@ -992,6 +996,189 @@ const ruleFunction = (primary, secondaryOptions, context) => {
         declNode.value = parsedValue.toString();
       }
 
+      if (problems.length) {
+        for (const err of problems) {
+          report$1({
+            index: err.index,
+            endIndex: err.endIndex,
+            message: err.message,
+            node: declNode,
+            result,
+            ruleName: ruleName$2,
+          });
+        }
+      }
+    });
+  }
+};
+
+ruleFunction$1.ruleName = ruleName$2;
+ruleFunction$1.messages = messages$2;
+ruleFunction$1.meta = {
+  fixable: true,
+};
+
+var spacing = createPlugin$1(ruleName$2, ruleFunction$1);
+
+const {
+  createPlugin,
+  utils: {report, ruleMessages, validateOptions},
+} = stylelint;
+
+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`
+    }
+
+    // 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`
+    }
+
+    // one possible replacement
+    return `Please replace '${value}' with Primer typography variable '${replacement['name']}'. https://primer.style/foundations/primitives/typography`
+  },
+});
+
+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);
+  }
+
+  if (name.includes('weight')) {
+    fontWeights.push(variable);
+  }
+
+  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
+      }
+
+      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({
@@ -1014,30 +1201,7 @@ ruleFunction.meta = {
   fixable: true,
 };
 
-var spacing = createPlugin(ruleName$1, ruleFunction);
-
-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 typography = createPlugin(ruleName$1, ruleFunction);
 
 const ruleName = 'primer/no-display-colors';
 const messages = stylelint.utils.ruleMessages(ruleName, {
@@ -1222,7 +1386,6 @@ var index = {
         'length-zero-no-unit': null,
         'selector-max-type': null,
         'primer/colors': null,
-        'primer/typography': null,
         'primer/box-shadow': null,
       },
     },
@@ -1273,7 +1436,6 @@ var index = {
           },
         ],
         // temporarily disabiling Primer plugins while we work on upgrades https://github.com/github/primer/issues/3165
-        'primer/typography': null,
         'primer/box-shadow': null,
       },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/stylelint-config",
-  "version": "13.0.0-rc.ee7c4cb",
+  "version": "13.0.0-rc.f49bf6d",
   "description": "Sharable stylelint config used by GitHub's CSS",
   "author": "GitHub, Inc.",
   "license": "MIT",

package/plugins/lib/utils.js

@@ -13,6 +13,10 @@ export function primitivesVariables(type) {
     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) {

package/plugins/typography.js

@@ -1,24 +1,186 @@
-import {createVariableRule} from './lib/variable-rules.js'
-
-export default 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'],
-    },
+import stylelint from 'stylelint'
+import declarationValueIndex from 'stylelint/lib/utils/declarationValueIndex.cjs'
+import {primitivesVariables} from './lib/utils.js'
+
+const {
+  createPlugin,
+  utils: {report, ruleMessages, validateOptions},
+} = stylelint
+
+export const ruleName = 'primer/typography'
+export const messages = ruleMessages(ruleName, {
+  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`
+    }
+
+    // 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`
+    }
+
+    // one possible replacement
+    return `Please replace '${value}' with Primer typography variable '${replacement['name']}'. https://primer.style/foundations/primitives/typography`
   },
-  'https://primer.style/css/utilities/typography',
-)
+})
+
+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)
+  }
+
+  if (name.includes('weight')) {
+    fontWeights.push(variable)
+  }
+
+  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, {
+      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
+      }
+
+      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.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,
+          })
+        }
+      }
+    })
+  }
+}
+
+ruleFunction.ruleName = ruleName
+ruleFunction.messages = messages
+ruleFunction.meta = {
+  fixable: true,
+}
+
+export default createPlugin(ruleName, ruleFunction)