@primer/stylelint-config 12.9.2 → 13.0.0-rc.04ba287

package/dist/index.cjs

@@ -0,0 +1,1288 @@
+'use strict';
+
+var browsers = require('@github/browserslist-config');
+var stylelint = require('stylelint');
+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;
+var propertyOrder = [
+  'all',
+  'position',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'z-index',
+  'display',
+  'float',
+  'width',
+  'min-width',
+  'max-width',
+  'height',
+  'min-height',
+  'max-height',
+  'box-sizing',
+  'padding',
+  'padding-top',
+  'padding-right',
+  'padding-bottom',
+  'padding-left',
+  'margin',
+  'margin-top',
+  'margin-right',
+  'margin-bottom',
+  'margin-left',
+  'overflow',
+  'overflow-x',
+  'overflow-y',
+  'clip',
+  'clear',
+  'font',
+  'font-family',
+  'font-size',
+  'font-style',
+  'font-weight',
+  'font-variant',
+  'font-size-adjust',
+  'font-stretch',
+  'font-effect',
+  'font-emphasize',
+  'font-emphasize-position',
+  'font-emphasize-style',
+  'font-smooth',
+  'hyphens',
+  'line-height',
+  'color',
+  'text-align',
+  'text-align-last',
+  'text-emphasis',
+  'text-emphasis-color',
+  'text-emphasis-style',
+  'text-emphasis-position',
+  'text-decoration',
+  'text-indent',
+  'text-justify',
+  'text-outline',
+  'text-overflow',
+  'text-overflow-ellipsis',
+  'text-overflow-mode',
+  'text-shadow',
+  'text-transform',
+  'text-wrap',
+  'letter-spacing',
+  'word-break',
+  'word-spacing',
+  'word-wrap',
+  'tab-size',
+  'white-space',
+  'vertical-align',
+  'list-style',
+  'list-style-position',
+  'list-style-type',
+  'list-style-image',
+  'pointer-events',
+  'fill',
+  'fill-opacity',
+  'stroke',
+  'stroke-opacity',
+  'stroke-width',
+  'shape-rendering',
+  'cursor',
+  'visibility',
+  'zoom',
+  'flex-direction',
+  'flex-order',
+  'flex-pack',
+  'flex-align',
+  'table-layout',
+  'empty-cells',
+  'caption-side',
+  'border-spacing',
+  'border-collapse',
+  'content',
+  'quotes',
+  'counter-reset',
+  'counter-increment',
+  'resize',
+  'user-select',
+  'nav-index',
+  'nav-up',
+  'nav-right',
+  'nav-down',
+  'nav-left',
+  'background',
+  'background-color',
+  'background-image',
+  'filter',
+  'background-repeat',
+  'background-attachment',
+  'background-position',
+  'background-position-x',
+  'background-position-y',
+  'background-clip',
+  'background-origin',
+  'background-size',
+  'border',
+  'border-color',
+  'border-style',
+  'border-width',
+  'border-top',
+  'border-top-color',
+  'border-top-style',
+  'border-top-width',
+  'border-right',
+  'border-right-color',
+  'border-right-style',
+  'border-right-width',
+  'border-bottom',
+  'border-bottom-color',
+  'border-bottom-style',
+  'border-bottom-width',
+  'border-left',
+  'border-left-color',
+  'border-left-style',
+  'border-left-width',
+  'border-radius',
+  'border-top-left-radius',
+  'border-top-right-radius',
+  'border-bottom-right-radius',
+  'border-bottom-left-radius',
+  'border-image',
+  'border-image-source',
+  'border-image-slice',
+  'border-image-width',
+  'border-image-outset',
+  'border-image-repeat',
+  'outline',
+  'outline-width',
+  'outline-style',
+  'outline-color',
+  'outline-offset',
+  'box-shadow',
+  'opacity',
+  'transition',
+  'transition-delay',
+  'transition-timing-function',
+  'transition-duration',
+  'transition-property',
+  'transform',
+  'transform-origin',
+  'animation',
+  'animation-name',
+  'animation-duration',
+  'animation-fill-mode',
+  'animation-play-state',
+  'animation-timing-function',
+  'animation-delay',
+  'animation-iteration-count',
+  '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']);
+
+function declarationValidator(rules, options = {}) {
+  const {formatMessage = defaultMessageFormatter, variables, verbose = false} = options;
+  const variableReplacements = new TapMap();
+  if (variables) {
+    for (const [name, {values}] of Object.entries(variables)) {
+      for (const value of values) {
+        variableReplacements.tap(value, () => []).push(name);
+      }
+    }
+  }
+
+  const validators = Object.entries(rules)
+    .map(([key, rule]) => {
+      if (rule === false) {
+        return false
+      }
+      const {name = key, props = name, expects = `a ${name} value`} = rule;
+      const replacements = Object.assign({}, rule.replacements, getVariableReplacements(rule.values));
+      // console.warn(`replacements for "${key}": ${JSON.stringify(replacements)}`)
+      Object.assign(rule, {name, props, expects, replacements});
+      return {
+        rule,
+        matchesProp: anymatch(props),
+        validate: Array.isArray(rule.components) ? componentValidator(rule) : valueValidator(rule),
+      }
+    })
+    .filter(Boolean);
+
+  const validatorsByProp = new TapMap();
+  const validatorsByReplacementValue = new Map();
+  for (const validator of validators) {
+    for (const value of Object.keys(validator.rule.replacements)) {
+      validatorsByReplacementValue.set(value, validator);
+    }
+  }
+
+  return decl => {
+    if (closest(decl, isSkippableAtRule)) {
+      if (verbose) {
+        // eslint-disable-next-line no-console
+        console.warn(`skipping declaration: ${decl.parent.toString()}`);
+      }
+      // As a general rule, any rule nested in an at-rule is ignored, since
+      // @for, @each, @mixin, and @function blocks can use whatever variables
+      // they want
+      return {valid: true}
+    }
+    const validator = getPropValidator(decl.prop);
+    if (validator) {
+      const result = validator.validate(decl);
+      result.errors = result.errors.map(formatMessage);
+      return result
+    } else {
+      return {valid: true}
+    }
+  }
+
+  function getVariableReplacements(values) {
+    const replacements = {};
+    const varValues = (Array.isArray(values) ? values : [values]).filter(v => typeof v === 'string' && v.includes('$'));
+    const matches = anymatch(varValues);
+    for (const [value, aliases] of variableReplacements.entries()) {
+      for (const alias of aliases) {
+        if (matches(alias)) {
+          replacements[value] = alias;
+        }
+      }
+    }
+    return replacements
+  }
+
+  function getPropValidator(prop) {
+    return validatorsByProp.tap(prop, () => validators.find(v => v.matchesProp(prop)))
+  }
+
+  function valueValidator({expects, values, replacements, singular = false}) {
+    const matches = anymatch(values);
+    return function validate({prop, value}, nested) {
+      if (matches(value)) {
+        return {
+          valid: true,
+          errors: [],
+          fixable: false,
+          replacement: undefined,
+        }
+      } else if (replacements[value]) {
+        let replacement = value;
+        do {
+          replacement = replacements[replacement];
+        } while (replacements[replacement])
+        return {
+          valid: false,
+          errors: [{expects, prop, value, replacement}],
+          fixable: true,
+          replacement,
+        }
+      } else {
+        if (nested || singular) {
+          return {
+            valid: false,
+            errors: [{expects, prop, value}],
+            fixable: false,
+            replacement: undefined,
+          }
+        }
+
+        const parsed = valueParser(value);
+        const validations = parsed.nodes
+          .map((node, index) => Object.assign(node, {index}))
+          .filter(node => !SKIP_VALUE_NODE_TYPES.has(node.type))
+          .map(node => {
+            const validation = validate({prop, value: valueParser.stringify(node)}, true);
+            validation.index = node.index;
+            return validation
+          });
+
+        const valid = validations.every(v => v.valid);
+        if (valid) {
+          return {valid, errors: [], fixable: false, replacement: undefined}
+        }
+
+        const fixable = validations.some(v => v.fixable);
+        const errors = validations.reduce((list, v) => list.concat(v.errors), []);
+
+        let replacement = undefined;
+        for (const validation of validations) {
+          if (fixable && validation.replacement) {
+            parsed.nodes[validation.index] = {type: 'word', value: validation.replacement};
+          }
+        }
+
+        if (fixable) {
+          replacement = valueParser.stringify(parsed);
+        }
+
+        return {
+          valid,
+          fixable,
+          errors,
+          replacement,
+        }
+      }
+    }
+  }
+
+  function componentValidator({expects, components, values, replacements}) {
+    const matchesCompoundValue = anymatch(values);
+    return decl => {
+      const {prop, value: compoundValue} = decl;
+      const parsed = valueParser(compoundValue);
+      if (parsed.nodes.length === 1 && matchesCompoundValue(compoundValue)) {
+        return {valid: true, errors: []}
+      }
+
+      const errors = [];
+
+      let fixable = false;
+      let componentIndex = 0;
+      for (const [index, node] of Object.entries(parsed.nodes)) {
+        if (SKIP_VALUE_NODE_TYPES.has(node.type)) {
+          continue
+        }
+
+        const value = valueParser.stringify(node);
+
+        let componentProp = components[componentIndex++];
+        let validator = getPropValidator(componentProp);
+        if (validatorsByReplacementValue.has(value)) {
+          validator = validatorsByReplacementValue.get(value);
+          componentProp = validator.rule.name;
+        }
+
+        const nestedProp = `${componentProp} (in ${prop})`;
+        if (validator) {
+          const result = validator.validate({prop: nestedProp, value}, true);
+          if (result.replacement) {
+            parsed.nodes[index] = {
+              type: 'word',
+              value: result.replacement,
+            };
+            fixable = true;
+          }
+          for (const error of result.errors) {
+            errors.push(error);
+          }
+        } else {
+          errors.push({expects, prop: nestedProp, value});
+        }
+      }
+
+      let replacement = fixable ? valueParser.stringify(parsed) : undefined;
+
+      // if a compound replacement exists, suggest *that* instead
+      if (replacement && replacements[replacement]) {
+        do {
+          replacement = replacements[replacement];
+        } while (replacements[replacement])
+        return {
+          valid: false,
+          errors: [{expects, prop, value: compoundValue, replacement}],
+          fixable: true,
+          replacement,
+        }
+      }
+
+      return {
+        valid: errors.length === 0,
+        errors,
+        fixable,
+        replacement,
+      }
+    }
+  }
+
+  function isSkippableAtRule(node) {
+    return node.type === 'atrule' && SKIP_AT_RULE_NAMES.has(node.name)
+  }
+}
+
+function defaultMessageFormatter(error) {
+  const {expects, value, replacement} = error;
+  const expected = replacement ? `"${replacement}"` : expects;
+  return `Please use ${expected} instead of "${value}"`
+}
+
+function closest(node, test) {
+  let ancestor = node;
+  do {
+    if (test(ancestor)) return ancestor
+  } while ((ancestor = ancestor.parent))
+}
+
+function createVariableRule(ruleName, rules, url) {
+  const plugin = stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
+    if (enabled === false) {
+      return noop$2
+    }
+
+    let actualRules = rules;
+    let overrides = options.rules;
+    if (typeof rules === 'function') {
+      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: variables$1});
+    }
+    if (overrides) {
+      Object.assign(actualRules, overrides);
+    }
+    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.
+    const {verbose = false, disableFix} = options;
+    const fixEnabled = context && context.fix && !disableFix;
+    const seen = new WeakMap();
+
+    return (root, result) => {
+      root.walkRules(rule => {
+        rule.walkDecls(decl => {
+          if (seen.has(decl)) {
+            return
+          } else {
+            seen.set(decl, true);
+          }
+
+          const validated = validate(decl);
+          const {valid, fixable, replacement, errors} = validated;
+          if (valid) {
+            // eslint-disable-next-line no-console
+            if (verbose) console.warn(`valid: "${decl.toString()}" in: "${rule.selector}"`);
+            return
+          } else if (fixEnabled && fixable) {
+            // eslint-disable-next-line no-console
+            if (verbose) console.warn(`  fixed: ${replacement}`);
+            decl.value = replacement;
+          } else {
+            // eslint-disable-next-line no-console
+            if (verbose) console.warn(`  ${errors.length} error(s)`);
+            for (const error of errors) {
+              const message = stylelint.utils
+                .ruleMessages(ruleName, {
+                  rejected: m => {
+                    if (url) {
+                      return `${m}. See ${url}.`
+                    }
+                    return `${m}.`
+                  },
+                })
+                .rejected(error);
+
+              stylelint.utils.report({
+                message,
+                node: decl,
+                result,
+                ruleName,
+              });
+            }
+          }
+        });
+      });
+    }
+  });
+
+  Object.assign(plugin, {rules});
+
+  return plugin
+}
+
+function noop$2() {}
+
+var boxShadow = createVariableRule(
+  'primer/box-shadow',
+  {
+    'box shadow': {
+      expects: 'a box-shadow variable',
+      props: 'box-shadow',
+      values: [
+        '$box-shadow*',
+        '$*-shadow',
+        'none',
+        // Match variables in any of the following formats: --color-shadow-*, --color-*-shadow-*, --color-*-shadow, --shadow-*, *shadow*
+        /var\(--color-(.+-)*shadow(-.+)*\)/,
+        /var\(--shadow(-.+)*\)/,
+        /var\((.+-)*shadow(-.+)*\)/,
+      ],
+      singular: true,
+    },
+  },
+  'https://primer.style/css/utilities/box-shadow',
+);
+
+const bgVars = [
+  '$bg-*',
+  '$tooltip-background-color',
+  // Match variables in any of the following formats: --color-bg-*, --color-*-bg-*, --color-*-bg, *bgColor*, *fgColor*, *borderColor*, *iconColor*
+  /var\(--color-(.+-)*bg(-.+)*\)/,
+  /var\(--color-[^)]+\)/,
+  /var\((.+-)*bgColor(-.+)*\)/,
+  /var\((.+-)*fgColor(-.+)*\)/,
+  /var\((.+-)*borderColor(-.+)*\)/,
+  /var\((.+-)*iconColor(-.+)*\)/,
+];
+
+var colors = createVariableRule(
+  'primer/colors',
+  {
+    'background-color': {
+      expects: 'a background color variable',
+      values: bgVars.concat('none', 'transparent'),
+    },
+    background: {
+      expects: 'a background color variable',
+      values: bgVars.concat('none', 'transparent', 'top', 'right', 'bottom', 'left', 'center', '*px', 'url(*)'),
+    },
+    'text color': {
+      expects: 'a text color variable',
+      props: 'color',
+      values: [
+        '$text-*',
+        '$tooltip-text-color',
+        'inherit',
+        // Match variables in any of the following formats: --color-text-*, --color-*-text-*, --color-*-text, *fgColor*, *iconColor*
+        /var\(--color-(.+-)*text(-.+)*\)/,
+        /var\(--color-(.+-)*fg(-.+)*\)/,
+        /var\(--color-[^)]+\)/,
+        /var\((.+-)*fgColor(-.+)*\)/,
+        /var\((.+-)*iconColor(-.+)*\)/,
+      ],
+    },
+  },
+  'https://primer.style/primitives/colors',
+);
+
+const ruleName$2 = 'primer/responsive-widths';
+
+const messages$2 = stylelint.utils.ruleMessages(ruleName$2, {
+  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`
+  },
+});
+
+// 320px is the smallest viewport size that we support
+
+const walkGroups = (root, validate) => {
+  for (const node of root.nodes) {
+    if (node.type === 'function') {
+      walkGroups(node, validate);
+    } else {
+      validate(node);
+    }
+  }
+  return root
+};
+
+// eslint-disable-next-line no-unused-vars
+var responsiveWidths = stylelint.createPlugin(ruleName$2, (enabled, options = {}, context) => {
+  if (!enabled) {
+    return noop$1
+  }
+
+  const lintResult = (root, result) => {
+    root.walk(decl => {
+      // Ignore things inside of breakpoints
+      if (decl.type === 'atrule' && decl.name === 'include' && decl.params.includes('breakpoint')) {
+        return false
+      }
+
+      if (decl.type !== 'decl' || !decl.prop.match(/^(min-width|width)/)) {
+        return noop$1
+      }
+
+      const problems = [];
+
+      walkGroups(valueParser(decl.value), node => {
+        // Only check word types. https://github.com/TrySound/postcss-value-parser#word
+        if (node.type !== 'word') {
+          return
+        }
+
+        // Exact values to ignore.
+        if (['*', '+', '-', '/', '0', 'auto', 'inherit', 'initial'].includes(node.value)) {
+          return
+        }
+
+        const valueUnit = valueParser.unit(node.value);
+
+        switch (valueUnit.unit) {
+          case 'px':
+            if (parseInt(valueUnit.number) > 320) {
+              problems.push({
+                index: declarationValueIndex(decl) + node.sourceIndex,
+                message: messages$2.rejected(node.value),
+              });
+            }
+            break
+          case 'vw':
+            if (parseInt(valueUnit.number) > 100) {
+              problems.push({
+                index: declarationValueIndex(decl) + node.sourceIndex,
+                message: messages$2.rejected(node.value),
+              });
+            }
+            break
+        }
+      });
+
+      if (problems.length) {
+        for (const err of problems) {
+          stylelint.utils.report({
+            index: err.index,
+            message: err.message,
+            node: decl,
+            result,
+            ruleName: ruleName$2,
+          });
+        }
+      }
+    });
+  };
+
+  return lintResult
+});
+
+function noop$1() {}
+
+const {
+  createPlugin,
+  utils: {report, ruleMessages, validateOptions},
+} = stylelint;
+
+const ruleName$1 = 'primer/spacing';
+const messages$1 = ruleMessages(ruleName$1, {
+  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`
+    }
+
+    return `Please replace '${value}' with size variable '${replacement['name']}'. https://primer.style/foundations/primitives/size`
+  },
+});
+
+// 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 (root, result) => {
+    const validOptions = validateOptions(result, ruleName$1, {
+      actual: primary,
+      possible: [true],
+    });
+
+    if (!validOptions) return
+
+    root.walkDecls(declNode => {
+      const {prop, value} = declNode;
+
+      if (!propList.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
+        }
+
+        // Exact values to ignore.
+        if (['*', '+', '-', '/', '0', 'auto', 'inherit', 'initial'].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 the variable is found in the value, skip it.
+        if (
+          sizes.some(variable =>
+            new RegExp(`${variable['name'].replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(node.value),
+          )
+        ) {
+          return
+        }
+
+        const replacement = 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$1.rejected(node.value, replacement),
+          });
+        }
+
+        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: ruleName$1,
+          });
+        }
+      }
+    });
+  }
+};
+
+ruleFunction.ruleName = ruleName$1;
+ruleFunction.messages = messages$1;
+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',
+);
+
+const ruleName = 'primer/no-display-colors';
+const messages = stylelint.utils.ruleMessages(ruleName, {
+  rejected: varName => `${varName} is in alpha and should be used with caution with approval from the Primer team`,
+});
+
+// Match CSS variable references (e.g var(--display-blue-fgColor))
+// eslint-disable-next-line no-useless-escape
+const variableReferenceRegex = /var\(([^\),]+)(,.*)?\)/g;
+
+var noDisplayColors = stylelint.createPlugin(ruleName, (enabled, options = {}) => {
+  if (!enabled) {
+    return noop
+  }
+
+  const {verbose = false} = options;
+  // eslint-disable-next-line no-console
+  const log = verbose ? (...args) => console.warn(...args) : noop;
+
+  // Keep track of declarations we've already seen
+  const seen = new WeakMap();
+
+  return (root, result) => {
+    root.walkRules(rule => {
+      rule.walkDecls(decl => {
+        if (seen.has(decl)) {
+          return
+        } else {
+          seen.set(decl, true);
+        }
+
+        for (const [, variableName] of matchAll(decl.value, variableReferenceRegex)) {
+          log(`Found variable reference ${variableName}`);
+          if (variableName.match(/^--display-.*/)) {
+            stylelint.utils.report({
+              message: messages.rejected(variableName),
+              node: decl,
+              result,
+              ruleName,
+            });
+          }
+        }
+      });
+    });
+  }
+});
+
+function noop() {}
+
+const require$1 = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)));
+
+/** @type {import('stylelint').Config} */
+var index = {
+  extends: ['stylelint-config-standard'],
+  ignoreFiles: ['**/*.js', '**/*.cjs', '**/*.ts', '**/*.mjs'],
+  reportNeedlessDisables: true,
+  plugins: [
+    'stylelint-value-no-unknown-custom-properties',
+    'stylelint-no-unsupported-browser-features',
+    'stylelint-order',
+    borders,
+    boxShadow,
+    colors,
+    responsiveWidths,
+    spacing,
+    typography,
+    noDisplayColors,
+  ],
+  rules: {
+    'alpha-value-notation': 'number',
+    'at-rule-disallowed-list': ['extend'],
+    'at-rule-no-unknown': null,
+    'block-no-empty': true,
+    'color-function-notation': null,
+    'color-named': 'never',
+    'color-no-invalid-hex': true,
+    'comment-no-empty': null,
+    'csstools/value-no-unknown-custom-properties': [
+      true,
+      {
+        severity: 'warning',
+        importFrom: [
+          '@primer/primitives/dist/css/functional/size/size-coarse.css',
+          '@primer/primitives/dist/css/functional/size/border.css',
+          '@primer/primitives/dist/css/functional/size/size.css',
+          '@primer/primitives/dist/css/functional/size/size-fine.css',
+          '@primer/primitives/dist/css/functional/size/breakpoints.css',
+          '@primer/primitives/dist/css/functional/size/viewport.css',
+          '@primer/primitives/dist/css/functional/motion/motion.css',
+          '@primer/primitives/dist/css/functional/themes/light.css',
+          '@primer/primitives/dist/css/functional/typography/typography.css',
+          '@primer/primitives/dist/css/base/size/size.css',
+          '@primer/primitives/dist/css/base/typography/typography.css',
+        ].map(path => require$1.resolve(path)),
+      },
+    ],
+    'custom-property-pattern': null,
+    'declaration-block-no-duplicate-properties': [true, {ignore: ['consecutive-duplicates']}],
+    'declaration-block-no-redundant-longhand-properties': null,
+    'declaration-block-no-shorthand-property-overrides': true,
+    'declaration-property-value-disallowed-list': {
+      '/^transition/': ['/all/'],
+      '/^background/': ['http:', 'https:'],
+      '/^border/': ['none'],
+      '/.+/': ['initial'],
+    },
+    'function-calc-no-unspaced-operator': true,
+    'function-linear-gradient-no-nonstandard-direction': true,
+    'function-no-unknown': null,
+    'keyframes-name-pattern': null,
+    'max-nesting-depth': 3,
+    'media-feature-name-no-unknown': null,
+    'media-feature-name-no-vendor-prefix': null,
+    'no-descending-specificity': null,
+    'no-duplicate-selectors': true,
+    'no-invalid-position-at-import-rule': [true, {ignoreAtRules: ['use']}],
+    'number-max-precision': null,
+    'order/properties-order': propertyOrder,
+    'plugin/no-unsupported-browser-features': [
+      true,
+      {
+        severity: 'warning',
+        ignore: ['css-nesting'],
+        ignorePartialSupport: true,
+        browsers,
+      },
+    ],
+    'primer/borders': true,
+    'primer/box-shadow': true,
+    'primer/colors': true,
+    'primer/responsive-widths': true,
+    'primer/spacing': true,
+    'primer/typography': true,
+    'primer/no-display-colors': true,
+    'property-no-unknown': [
+      true,
+      {
+        ignoreProperties: ['@container', 'container-type'],
+      },
+    ],
+    'selector-class-pattern': null,
+    'selector-max-compound-selectors': 3,
+    'selector-max-id': 0,
+    'selector-max-specificity': '0,4,0',
+    'selector-max-type': 0,
+    'selector-no-qualifying-type': true,
+    'selector-pseudo-element-no-unknown': true,
+    'string-no-newline': true,
+    'unit-no-unknown': true,
+    'value-keyword-case': null,
+    'selector-not-notation': null,
+    'import-notation': ['string'],
+    'annotation-no-unknown': null,
+    'keyframe-selector-notation': ['percentage-unless-within-keyword-only-block'],
+    'media-query-no-invalid': null,
+    'media-feature-range-notation': ['prefix'],
+  },
+  overrides: [
+    {
+      files: ['**/*.scss'],
+      customSyntax: 'postcss-scss',
+      plugins: ['stylelint-scss'],
+      rules: {
+        'scss/at-extend-no-missing-placeholder': true,
+        'scss/at-rule-no-unknown': true,
+        'scss/declaration-nested-properties-no-divided-groups': true,
+        'scss/dollar-variable-no-missing-interpolation': true,
+        'scss/function-quote-no-quoted-strings-inside': true,
+        'scss/function-unquote-no-unquoted-strings-inside': true,
+        'scss/no-duplicate-mixins': true,
+        'scss/selector-no-redundant-nesting-selector': true,
+      },
+    },
+    {
+      files: ['**/*.tsx'],
+      customSyntax: 'postcss-styled-syntax',
+      rules: {
+        'order/properties-order': null,
+        'rule-empty-line-before': null,
+        'declaration-empty-line-before': null,
+        'comment-empty-line-before': null,
+        'length-zero-no-unit': null,
+        'selector-max-type': null,
+        'primer/colors': null,
+        'primer/typography': null,
+        'primer/box-shadow': null,
+      },
+    },
+    {
+      files: ['**/*.pcss'],
+      rules: {
+        'media-feature-range-notation': null,
+        'import-notation': null,
+        'custom-property-pattern': null,
+        'selector-class-pattern': null,
+        'keyframes-name-pattern': null,
+        'no-descending-specificity': null,
+        'declaration-block-no-redundant-longhand-properties': null,
+        'color-function-notation': 'legacy',
+        'selector-nested-pattern': '^&\\s?\\W',
+        'at-rule-no-unknown': [
+          true,
+          {
+            ignoreAtRules: ['mixin', 'define-mixin'],
+          },
+        ],
+      },
+    },
+    {
+      files: ['**/*.module.css'],
+      plugins: ['stylelint-css-modules-no-global-scoped-selector'],
+      rules: {
+        'property-no-unknown': [
+          true,
+          {
+            ignoreProperties: ['composes', 'compose-with'],
+            ignoreSelectors: [':export', /^:import/],
+          },
+        ],
+        'selector-pseudo-class-no-unknown': [
+          true,
+          {ignorePseudoClasses: ['export', 'import', 'global', 'local', 'external']},
+        ],
+        'selector-type-no-unknown': [
+          true,
+          {
+            ignoreTypes: ['from'],
+          },
+        ],
+        'function-no-unknown': [
+          true,
+          {
+            ignoreFunctions: ['global'],
+          },
+        ],
+        'css-modules/no-global-scoped-selector': true,
+        // temporarily disabiling Primer plugins while we work on upgrades https://github.com/github/primer/issues/3165
+        'primer/typography': null,
+        'primer/box-shadow': null,
+      },
+    },
+  ],
+};
+
+module.exports = index;