@primer/stylelint-config 13.0.0-rc.c3d4a78 → 13.0.0-rc.c67f7df

package/dist/index.cjs

@@ -2,12 +2,12 @@
 
 var browsers = require('@github/browserslist-config');
 var stylelint = require('stylelint');
-var anymatch = require('anymatch');
-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 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 matchAll = require('string.prototype.matchall');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -184,6 +184,243 @@ var propertyOrder = [
   'animation-direction',
 ];
 
+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)));
+
+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
+  }
+
+  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 = 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$1,
+  utils: {report: report$1, ruleMessages: ruleMessages$1, validateOptions: validateOptions$1},
+} = stylelint;
+
+const ruleName$3 = 'primer/borders';
+const messages$3 = ruleMessages$1(ruleName$3, {
+  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 = primitivesVariables('border');
+const sizes$1 = [];
+const radii = [];
+
+// Props that we want to check
+const propList$1 = ['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) {
+  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$1 = (primary, secondaryOptions, context) => {
+  return (root, result) => {
+    const validOptions = validateOptions$1(result, ruleName$3, {
+      actual: primary,
+      possible: [true],
+    });
+
+    if (!validOptions) return
+
+    root.walkDecls(declNode => {
+      const {prop, value} = declNode;
+
+      if (!propList$1.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$3.rejected(node.value, replacement, prop),
+          });
+        }
+
+        return
+      });
+
+      if (context.fix) {
+        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$3,
+          });
+        }
+      }
+    });
+  }
+};
+
+ruleFunction$1.ruleName = ruleName$3;
+ruleFunction$1.messages = messages$3;
+ruleFunction$1.meta = {
+  fixable: true,
+};
+
+var borders = createPlugin$1(ruleName$3, ruleFunction$1);
+
 const SKIP_VALUE_NODE_TYPES = new Set(['space', 'div']);
 const SKIP_AT_RULE_NAMES = new Set(['each', 'for', 'function', 'mixin']);
 
@@ -428,18 +665,18 @@ function createVariableRule(ruleName, rules, url) {
     let actualRules = rules;
     let overrides = options.rules;
     if (typeof rules === 'function') {
-      actualRules = rules({variables, options, ruleName});
+      actualRules = rules({variables: variables$1, 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$1});
     }
     if (overrides) {
       Object.assign(actualRules, overrides);
     }
-    const validate = declarationValidator(actualRules, {variables});
+    const validate = declarationValidator(actualRules, {variables: variables$1});
 
     // The stylelint docs suggest respecting a "disableFix" rule option that
     // overrides the "global" context.fix (--fix) linting option.
@@ -501,69 +738,6 @@ function createVariableRule(ruleName, rules, url) {
 
 function noop$2() {}
 
-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',
-);
-
 var boxShadow = createVariableRule(
   'primer/box-shadow',
   {
@@ -637,10 +811,10 @@ const messages$2 = stylelint.utils.ruleMessages(ruleName$2, {
 
 // 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);
     }
@@ -667,7 +841,7 @@ var responsiveWidths = stylelint.createPlugin(ruleName$2, (enabled, options = {}
 
       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
@@ -719,57 +893,11 @@ var responsiveWidths = stylelint.createPlugin(ruleName$2, (enabled, options = {}
 
 function noop$1() {}
 
-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)));
-
-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'];
-      const intValue = parseInt(size['original']['value']);
-      if (![2, 6].includes(intValue)) {
-        values.push(`${intValue + 1}px`);
-        values.push(`${intValue - 1}px`);
-      }
-
-      variables.push({
-        name: `--${size['name']}`,
-        values,
-      });
-    }
-  }
-
-  return variables
-}
-
 const {
   createPlugin,
   utils: {report, ruleMessages, validateOptions},
 } = stylelint;
 
-const walkGroups = (root, validate) => {
-  for (const node of root.nodes) {
-    if (node.type === 'function') {
-      walkGroups(node, validate);
-    } else {
-      validate(node);
-    }
-  }
-  return root
-};
-
 const ruleName$1 = 'primer/spacing';
 const messages$1 = ruleMessages(ruleName$1, {
   rejected: (value, replacement) => {
@@ -781,20 +909,26 @@ const messages$1 = ruleMessages(ruleName$1, {
   },
 });
 
-const meta = {
-  fixable: true,
-};
+// Props that we want to check
+const propList = ['padding', 'margin', 'top', 'right', 'bottom', 'left'];
+// Values that we want to ignore
+const valueList = ['${'];
 
-/** @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 = primitivesVariables('spacing');
 
-    const sizes = await primitivesVariables('size');
+// 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`);
+  }
+}
 
+/** @type {import('stylelint').Rule} */
+const ruleFunction = (primary, secondaryOptions, context) => {
+  return (root, result) => {
     const validOptions = validateOptions(result, ruleName$1, {
       actual: primary,
       possible: [true],
@@ -810,7 +944,7 @@ const ruleFunction = (primary, secondaryOptions, context) => {
 
       const problems = [];
 
-      const parsedValue = walkGroups(valueParser(value), node => {
+      const parsedValue = walkGroups$1(valueParser(value), node => {
         // Only check word types. https://github.com/TrySound/postcss-value-parser#word
         if (node.type !== 'word') {
           return
@@ -879,7 +1013,9 @@ const ruleFunction = (primary, secondaryOptions, context) => {
 
 ruleFunction.ruleName = ruleName$1;
 ruleFunction.messages = messages$1;
-ruleFunction.meta = meta;
+ruleFunction.meta = {
+  fixable: true,
+};
 
 var spacing = createPlugin(ruleName$1, ruleFunction);
 
@@ -1089,7 +1225,6 @@ var index = {
         'length-zero-no-unit': null,
         'selector-max-type': null,
         'primer/colors': null,
-        'primer/borders': null,
         'primer/typography': null,
         'primer/box-shadow': null,
       },
@@ -1143,7 +1278,6 @@ var index = {
         ],
         'css-modules/no-global-scoped-selector': true,
         // temporarily disabiling Primer plugins while we work on upgrades https://github.com/github/primer/issues/3165
-        'primer/borders': null,
         'primer/typography': null,
         'primer/box-shadow': null,
       },

package/dist/index.mjs

@@ -1,11 +1,11 @@
 import browsers from '@github/browserslist-config';
 import stylelint from 'stylelint';
-import anymatch from 'anymatch';
-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 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' assert { type: 'json' };
 import matchAll from 'string.prototype.matchall';
 
 var propertyOrder = [
@@ -181,6 +181,243 @@ 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
+  }
+
+  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$1,
+  utils: {report: report$1, ruleMessages: ruleMessages$1, validateOptions: validateOptions$1},
+} = stylelint;
+
+const ruleName$3 = 'primer/borders';
+const messages$3 = ruleMessages$1(ruleName$3, {
+  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 = primitivesVariables('border');
+const sizes$1 = [];
+const radii = [];
+
+// Props that we want to check
+const propList$1 = ['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) {
+  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$1 = (primary, secondaryOptions, context) => {
+  return (root, result) => {
+    const validOptions = validateOptions$1(result, ruleName$3, {
+      actual: primary,
+      possible: [true],
+    });
+
+    if (!validOptions) return
+
+    root.walkDecls(declNode => {
+      const {prop, value} = declNode;
+
+      if (!propList$1.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$3.rejected(node.value, replacement, prop),
+          });
+        }
+
+        return
+      });
+
+      if (context.fix) {
+        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$3,
+          });
+        }
+      }
+    });
+  }
+};
+
+ruleFunction$1.ruleName = ruleName$3;
+ruleFunction$1.messages = messages$3;
+ruleFunction$1.meta = {
+  fixable: true,
+};
+
+var borders = createPlugin$1(ruleName$3, ruleFunction$1);
+
 const SKIP_VALUE_NODE_TYPES = new Set(['space', 'div']);
 const SKIP_AT_RULE_NAMES = new Set(['each', 'for', 'function', 'mixin']);
 
@@ -425,18 +662,18 @@ function createVariableRule(ruleName, rules, url) {
     let actualRules = rules;
     let overrides = options.rules;
     if (typeof rules === 'function') {
-      actualRules = rules({variables, options, ruleName});
+      actualRules = rules({variables: variables$1, 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$1});
     }
     if (overrides) {
       Object.assign(actualRules, overrides);
     }
-    const validate = declarationValidator(actualRules, {variables});
+    const validate = declarationValidator(actualRules, {variables: variables$1});
 
     // The stylelint docs suggest respecting a "disableFix" rule option that
     // overrides the "global" context.fix (--fix) linting option.
@@ -498,69 +735,6 @@ function createVariableRule(ruleName, rules, url) {
 
 function noop$2() {}
 
-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',
-);
-
 var boxShadow = createVariableRule(
   'primer/box-shadow',
   {
@@ -634,10 +808,10 @@ const messages$2 = stylelint.utils.ruleMessages(ruleName$2, {
 
 // 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);
     }
@@ -664,7 +838,7 @@ var responsiveWidths = stylelint.createPlugin(ruleName$2, (enabled, options = {}
 
       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
@@ -716,57 +890,11 @@ var responsiveWidths = stylelint.createPlugin(ruleName$2, (enabled, options = {}
 
 function noop$1() {}
 
-const require$1 = createRequire(import.meta.url);
-
-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'];
-      const intValue = parseInt(size['original']['value']);
-      if (![2, 6].includes(intValue)) {
-        values.push(`${intValue + 1}px`);
-        values.push(`${intValue - 1}px`);
-      }
-
-      variables.push({
-        name: `--${size['name']}`,
-        values,
-      });
-    }
-  }
-
-  return variables
-}
-
 const {
   createPlugin,
   utils: {report, ruleMessages, validateOptions},
 } = stylelint;
 
-const walkGroups = (root, validate) => {
-  for (const node of root.nodes) {
-    if (node.type === 'function') {
-      walkGroups(node, validate);
-    } else {
-      validate(node);
-    }
-  }
-  return root
-};
-
 const ruleName$1 = 'primer/spacing';
 const messages$1 = ruleMessages(ruleName$1, {
   rejected: (value, replacement) => {
@@ -778,20 +906,26 @@ const messages$1 = ruleMessages(ruleName$1, {
   },
 });
 
-const meta = {
-  fixable: true,
-};
+// Props that we want to check
+const propList = ['padding', 'margin', 'top', 'right', 'bottom', 'left'];
+// Values that we want to ignore
+const valueList = ['${'];
 
-/** @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 = primitivesVariables('spacing');
 
-    const sizes = await primitivesVariables('size');
+// 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`);
+  }
+}
 
+/** @type {import('stylelint').Rule} */
+const ruleFunction = (primary, secondaryOptions, context) => {
+  return (root, result) => {
     const validOptions = validateOptions(result, ruleName$1, {
       actual: primary,
       possible: [true],
@@ -807,7 +941,7 @@ const ruleFunction = (primary, secondaryOptions, context) => {
 
       const problems = [];
 
-      const parsedValue = walkGroups(valueParser(value), node => {
+      const parsedValue = walkGroups$1(valueParser(value), node => {
         // Only check word types. https://github.com/TrySound/postcss-value-parser#word
         if (node.type !== 'word') {
           return
@@ -876,7 +1010,9 @@ const ruleFunction = (primary, secondaryOptions, context) => {
 
 ruleFunction.ruleName = ruleName$1;
 ruleFunction.messages = messages$1;
-ruleFunction.meta = meta;
+ruleFunction.meta = {
+  fixable: true,
+};
 
 var spacing = createPlugin(ruleName$1, ruleFunction);
 
@@ -1086,7 +1222,6 @@ var index = {
         'length-zero-no-unit': null,
         'selector-max-type': null,
         'primer/colors': null,
-        'primer/borders': null,
         'primer/typography': null,
         'primer/box-shadow': null,
       },
@@ -1140,7 +1275,6 @@ var index = {
         ],
         'css-modules/no-global-scoped-selector': true,
         // temporarily disabiling Primer plugins while we work on upgrades https://github.com/github/primer/issues/3165
-        '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.c3d4a78",
+  "version": "13.0.0-rc.c67f7df",
   "description": "Sharable stylelint config used by GitHub's CSS",
   "author": "GitHub, Inc.",
   "license": "MIT",

package/plugins/borders.js

@@ -1,64 +1,197 @@
-import {createVariableRule} from './lib/variable-rules.js'
-
-export default 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%',
-      },
-    },
+import stylelint from 'stylelint'
+import declarationValueIndex from 'stylelint/lib/utils/declarationValueIndex.cjs'
+import valueParser from 'postcss-value-parser'
+import {walkGroups, primitivesVariables} from './lib/utils.js'
+
+const {
+  createPlugin,
+  utils: {report, ruleMessages, validateOptions},
+} = stylelint
+
+export const ruleName = 'primer/borders'
+export const messages = ruleMessages(ruleName, {
+  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`
   },
-  'https://primer.style/css/utilities/borders',
-)
+})
+
+const variables = primitivesVariables('border')
+const sizes = []
+const radii = []
+
+// Props that we want to check
+const propList = ['border', 'border-width', 'border-radius']
+// Values that we want to ignore
+const valueList = ['${']
+
+const borderShorthand = prop =>
+  /^border(-(top|right|bottom|left|block-start|block-end|inline-start|inline-end))?$/.test(prop)
+
+for (const variable of variables) {
+  const name = variable['name']
+
+  if (name.includes('borderWidth')) {
+    const value = variable['values']
+      .pop()
+      .replace(/max|\(|\)/g, '')
+      .split(',')[0]
+    sizes.push({
+      name,
+      values: [value],
+    })
+  }
+
+  if (name.includes('borderRadius')) {
+    radii.push(variable)
+  }
+}
+
+/** @type {import('stylelint').Rule} */
+const ruleFunction = (primary, secondaryOptions, context) => {
+  return (root, result) => {
+    const validOptions = validateOptions(result, ruleName, {
+      actual: primary,
+      possible: [true],
+    })
+
+    if (!validOptions) return
+
+    root.walkDecls(declNode => {
+      const {prop, value} = declNode
+
+      if (!propList.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.some(valueToIgnore => value.includes(valueToIgnore))) return
+
+      const problems = []
+
+      const parsedValue = walkGroups(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, node.value)) {
+            return
+          }
+        }
+
+        if (prop.includes('radius')) {
+          if (checkForVariable(radii, node.value)) {
+            return
+          }
+        }
+
+        const replacement = (prop.includes('radius') ? radii : sizes).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.rejected(node.value, replacement, prop),
+          })
+        }
+
+        return
+      })
+
+      if (context.fix) {
+        declNode.value = parsedValue.toString()
+      }
+
+      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)

package/plugins/lib/{primitives.js → utils.js}

@@ -2,14 +2,17 @@ import {createRequire} from 'node:module'
 
 const require = createRequire(import.meta.url)
 
-export async function primitivesVariables(type) {
+export function primitivesVariables(type) {
   const variables = []
 
   const files = []
   switch (type) {
-    case 'size':
+    case 'spacing':
       files.push('base/size/size.json')
       break
+    case 'border':
+      files.push('functional/size/border.json')
+      break
   }
 
   for (const file of files) {
@@ -18,12 +21,7 @@ export async function primitivesVariables(type) {
 
     for (const key of Object.keys(data)) {
       const size = data[key]
-      const values = size['value']
-      const intValue = parseInt(size['original']['value'])
-      if (![2, 6].includes(intValue)) {
-        values.push(`${intValue + 1}px`)
-        values.push(`${intValue - 1}px`)
-      }
+      const values = typeof size['value'] === 'string' ? [size['value']] : size['value']
 
       variables.push({
         name: `--${size['name']}`,
@@ -34,3 +32,14 @@ export async function primitivesVariables(type) {
 
   return variables
 }
+
+export function walkGroups(root, validate) {
+  for (const node of root.nodes) {
+    if (node.type === 'function') {
+      walkGroups(node, validate)
+    } else {
+      validate(node)
+    }
+  }
+  return root
+}

package/plugins/spacing.js

@@ -1,24 +1,13 @@
 import stylelint from 'stylelint'
 import declarationValueIndex from 'stylelint/lib/utils/declarationValueIndex.cjs'
 import valueParser from 'postcss-value-parser'
-import {primitivesVariables} from './lib/primitives.js'
+import {primitivesVariables, walkGroups} from './lib/utils.js'
 
 const {
   createPlugin,
   utils: {report, ruleMessages, validateOptions},
 } = stylelint
 
-const walkGroups = (root, validate) => {
-  for (const node of root.nodes) {
-    if (node.type === 'function') {
-      walkGroups(node, validate)
-    } else {
-      validate(node)
-    }
-  }
-  return root
-}
-
 export const ruleName = 'primer/spacing'
 export const messages = ruleMessages(ruleName, {
   rejected: (value, replacement) => {
@@ -30,20 +19,26 @@ export const messages = ruleMessages(ruleName, {
   },
 })
 
-const meta = {
-  fixable: true,
+// Props that we want to check
+const propList = ['padding', 'margin', 'top', 'right', 'bottom', 'left']
+// Values that we want to ignore
+const valueList = ['${']
+
+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`)
+  }
 }
 
 /** @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')
-
+  return (root, result) => {
     const validOptions = validateOptions(result, ruleName, {
       actual: primary,
       possible: [true],
@@ -128,6 +123,8 @@ const ruleFunction = (primary, secondaryOptions, context) => {
 
 ruleFunction.ruleName = ruleName
 ruleFunction.messages = messages
-ruleFunction.meta = meta
+ruleFunction.meta = {
+  fixable: true,
+}
 
 export default createPlugin(ruleName, ruleFunction)