@primer/stylelint-config 13.0.0-rc.980b8d0 → 13.0.0-rc.d369892

package/dist/index.mjs

@@ -0,0 +1,1695 @@
+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 matchAll from 'string.prototype.matchall';
+import { createRequire } from 'node:module';
+
+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 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$4
+    }
+
+    let actualRules = rules;
+    let overrides = options.rules;
+    if (typeof rules === 'function') {
+      actualRules = rules({variables, options, ruleName});
+    } else {
+      actualRules = Object.assign({}, rules);
+    }
+    if (typeof overrides === 'function') {
+      delete options.rules;
+      overrides = overrides({rules: actualRules, options, ruleName, variables});
+    }
+    if (overrides) {
+      Object.assign(actualRules, overrides);
+    }
+    const validate = declarationValidator(actualRules, {variables});
+
+    // 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$4() {}
+
+var borders = createVariableRule(
+  'primer/borders',
+  {
+    border: {
+      expects: 'a border variable',
+      props: 'border{,-top,-right,-bottom,-left}',
+      values: ['$border', 'none', '0'],
+      components: ['border-width', 'border-style', 'border-color'],
+      replacements: {
+        // because shorthand border properties ¯\_(ツ)_/¯
+        '$border-width $border-style $border-gray': '$border',
+        '$border-width $border-gray $border-style': '$border',
+        '$border-style $border-width $border-gray': '$border',
+        '$border-style $border-gray $border-width': '$border',
+        '$border-gray $border-width $border-style': '$border',
+        '$border-gray $border-style $border-width': '$border',
+        '$border-width $border-style $border-color': '$border',
+        '$border-width $border-color $border-style': '$border',
+        '$border-style $border-width $border-color': '$border',
+        '$border-style $border-color $border-width': '$border',
+        '$border-color $border-width $border-style': '$border',
+        '$border-color $border-style $border-width': '$border',
+      },
+    },
+    'border color': {
+      expects: 'a border color variable',
+      props: 'border{,-top,-right,-bottom,-left}-color',
+      values: [
+        '$border-*',
+        'transparent',
+        'currentColor',
+        // Match variables in any of the following formats: --color-border-*, --color-*-border-*, --color-*-border, --borderColor-, *borderColor*
+        /var\(--color-(.+-)*border(-.+)*\)/,
+        /var\(--color-[^)]+\)/,
+        /var\(--borderColor-[^)]+\)/,
+        /var\((.+-)*borderColor(-.+)*\)/,
+      ],
+      replacements: {
+        '$border-gray': '$border-color',
+      },
+    },
+    'border style': {
+      expects: 'a border style variable',
+      props: 'border{,-top,-right,-bottom,-left}-style',
+      values: ['$border-style', 'none'],
+    },
+    'border width': {
+      expects: 'a border width variable',
+      props: 'border{,-top,-right,-bottom,-left}-width',
+      values: ['$border-width*', '0'],
+    },
+    'border radius': {
+      expects: 'a border radius variable',
+      props: 'border{,-{top,bottom}-{left,right}}-radius',
+      values: ['$border-radius', '0', '50%', 'inherit'],
+      replacements: {
+        '100%': '50%',
+      },
+    },
+  },
+  'https://primer.style/css/utilities/borders',
+);
+
+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$3 = 'primer/responsive-widths';
+
+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`
+  },
+});
+
+// 320px is the smallest viewport size that we support
+
+const walkGroups$1 = (root, validate) => {
+  for (const node of root.nodes) {
+    if (node.type === 'function') {
+      walkGroups$1(node, validate);
+    } else {
+      validate(node);
+    }
+  }
+  return root
+};
+
+// eslint-disable-next-line no-unused-vars
+var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}, context) => {
+  if (!enabled) {
+    return noop$3
+  }
+
+  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$3
+      }
+
+      const problems = [];
+
+      walkGroups$1(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$3.rejected(node.value),
+              });
+            }
+            break
+          case 'vw':
+            if (parseInt(valueUnit.number) > 100) {
+              problems.push({
+                index: declarationValueIndex(decl) + node.sourceIndex,
+                message: messages$3.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$3,
+          });
+        }
+      }
+    });
+  };
+
+  return lintResult
+});
+
+function noop$3() {}
+
+// TODO: Pull this in from primer/primitives
+const spacerValues = {
+  '$spacer-1': '4px',
+  '$spacer-2': '8px',
+  '$spacer-3': '16px',
+  '$spacer-4': '24px',
+  '$spacer-5': '32px',
+  '$spacer-6': '40px',
+  '$spacer-7': '48px',
+  '$spacer-8': '64px',
+  '$spacer-9': '80px',
+  '$spacer-10': '96px',
+  '$spacer-11': '112px',
+  '$spacer-12': '128px',
+  '$em-spacer-1': '0.0625em',
+  '$em-spacer-2': '0.125em',
+  '$em-spacer-3': '0.25em',
+  '$em-spacer-4': '0.375em',
+  '$em-spacer-5': '0.5em',
+  '$em-spacer-6': '0.75em',
+};
+
+const ruleName$2 = 'primer/spacing';
+const messages$2 = stylelint.utils.ruleMessages(ruleName$2, {
+  rejected: (value, replacement) => {
+    if (replacement === null) {
+      return `Please use a primer spacer variable instead of '${value}'. Consult the primer docs for a suitable replacement. https://primer.style/css/storybook/?path=/docs/support-spacing--docs`
+    }
+
+    return `Please replace ${value} with spacing variable '${replacement}'.`
+  },
+});
+
+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 spacing = stylelint.createPlugin(ruleName$2, (enabled, options = {}, context) => {
+  if (!enabled) {
+    return noop$2
+  }
+
+  const lintResult = (root, result) => {
+    root.walk(decl => {
+      if (decl.type !== 'decl' || !decl.prop.match(/^(padding|margin)/)) {
+        return noop$2
+      }
+
+      const problems = [];
+
+      const parsedValue = walkGroups(valueParser(decl.value), node => {
+        // Remove leading negative sign, if any.
+        const cleanValue = node.value.replace(/^-/g, '');
+
+        // 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(cleanValue);
+
+        if (valueUnit && (valueUnit.unit === '' || !/^[0-9.]+$/.test(valueUnit.number))) {
+          return
+        }
+
+        // If the a variable is found in the value, skip it.
+        if (
+          Object.keys(spacerValues).some(variable =>
+            new RegExp(`${variable.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(cleanValue),
+          )
+        ) {
+          return
+        }
+
+        const replacement = Object.keys(spacerValues).find(spacer => spacerValues[spacer] === cleanValue) || null;
+        const valueMatch = replacement ? spacerValues[replacement] : node.value;
+
+        if (replacement && context.fix) {
+          node.value = node.value.replace(valueMatch, replacement);
+        } else {
+          problems.push({
+            index: declarationValueIndex(decl) + node.sourceIndex,
+            message: messages$2.rejected(valueMatch, replacement),
+          });
+        }
+
+        return
+      });
+
+      if (context.fix) {
+        decl.value = parsedValue.toString();
+      }
+
+      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$2() {}
+
+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',
+);
+
+// Meant as temp until we can move to primitives or css
+const colorTypes = ['accent', 'success', 'attention', 'severe', 'danger', 'open', 'closed', 'done', 'sponsors'];
+
+var utilities$1 = {
+  color: [
+    {
+      value: 'var(--color-fg-default)',
+      utilityClass: 'color-fg-default',
+    },
+    {
+      value: 'var(--color-fg-muted)',
+      utilityClass: 'color-fg-muted',
+    },
+    {
+      value: 'var(--color-fg-subtle)',
+      utilityClass: 'color-fg-subtle',
+    },
+  ].concat(
+    colorTypes.map(type => {
+      return {
+        value: `var(--color-${type}-fg)`,
+        utilityClass: `color-fg-${type}`,
+      }
+    }),
+  ),
+  'background-color': [
+    {
+      value: 'var(--color-canvas-default)',
+      utilityClass: 'color-bg-default',
+    },
+    {
+      value: 'var(--color-canvas-overlay)',
+      utilityClass: 'color-bg-overlay',
+    },
+    {
+      value: 'var(--color-canvas-inset)',
+      utilityClass: 'color-bg-inset',
+    },
+    {
+      value: 'var(--color-canvas-subtle)',
+      utilityClass: 'color-bg-subtle',
+    },
+    {
+      value: 'transparent',
+      utilityClass: 'color-bg-transparent',
+    },
+  ]
+    .concat(
+      colorTypes.map(type => {
+        return {
+          value: `var(--color-${type}-subtle)`,
+          utilityClass: `color-bg-${type}`,
+        }
+      }),
+    )
+    .concat(
+      colorTypes.map(type => {
+        return {
+          value: `var(--color-${type}-emphasis)`,
+          utilityClass: `color-bg-${type}-emphasis`,
+        }
+      }),
+    ),
+  'border-color': [
+    {
+      value: 'var(--color-border-default',
+      utilityClass: 'color-border-default',
+    },
+    {
+      value: 'var(--color-border-muted',
+      utilityClass: 'color-border-muted',
+    },
+    {
+      value: 'var(--color-border-subtle',
+      utilityClass: 'color-border-subtle',
+    },
+  ]
+    .concat(
+      colorTypes.map(type => {
+        return {
+          value: `var(--color-${type}-muted)`,
+          utilityClass: `color-border-${type}`,
+        }
+      }),
+    )
+    .concat(
+      colorTypes.map(type => {
+        return {
+          value: `var(--color-${type}-emphasis)`,
+          utilityClass: `color-border-${type}-emphasis`,
+        }
+      }),
+    ),
+  margin: Array.from(new Array(6)).map((_, i) => {
+    return {
+      value: `$spacer-${i + 1}`,
+      utilityClass: `m-${i + 1}`,
+    }
+  }),
+  'margin-top': Array.from(new Array(6)).map((_, i) => {
+    return {
+      value: `$spacer-${i + 1}`,
+      utilityClass: `mt-${i + 1}`,
+    }
+  }),
+  'margin-right': Array.from(new Array(6)).map((_, i) => {
+    return {
+      value: `$spacer-${i + 1}`,
+      utilityClass: `mr-${i + 1}`,
+    }
+  }),
+  'margin-bottom': Array.from(new Array(6)).map((_, i) => {
+    return {
+      value: `$spacer-${i + 1}`,
+      utilityClass: `mb-${i + 1}`,
+    }
+  }),
+  'margin-left': Array.from(new Array(6)).map((_, i) => {
+    return {
+      value: `$spacer-${i + 1}`,
+      utilityClass: `ml-${i + 1}`,
+    }
+  }),
+  padding: Array.from(new Array(6)).map((_, i) => {
+    return {
+      value: `$spacer-${i + 1}`,
+      utilityClass: `p-${i + 1}`,
+    }
+  }),
+  'padding-top': Array.from(new Array(6)).map((_, i) => {
+    return {
+      value: `$spacer-${i + 1}`,
+      utilityClass: `pt-${i + 1}`,
+    }
+  }),
+  'padding-right': Array.from(new Array(6)).map((_, i) => {
+    return {
+      value: `$spacer-${i + 1}`,
+      utilityClass: `pr-${i + 1}`,
+    }
+  }),
+  'padding-bottom': Array.from(new Array(6)).map((_, i) => {
+    return {
+      value: `$spacer-${i + 1}`,
+      utilityClass: `pb-${i + 1}`,
+    }
+  }),
+  'padding-left': Array.from(new Array(6)).map((_, i) => {
+    return {
+      value: `$spacer-${i + 1}`,
+      utilityClass: `pl-${i + 1}`,
+    }
+  }),
+  'line-height': [
+    {
+      value: '$lh-condensed-ultra',
+      utilityClass: 'lh-condensed-ultra',
+    },
+    {
+      value: '$lh-condensed',
+      utilityClass: 'lh-condensed',
+    },
+    {
+      value: '$lh-default',
+      utilityClass: 'lh-default',
+    },
+    {
+      value: '0',
+      utilityClass: 'lh-0',
+    },
+  ],
+  'text-align': [
+    {
+      value: 'left',
+      utilityClass: 'text-left',
+    },
+    {
+      value: 'right',
+      utilityClass: 'text-right',
+    },
+    {
+      value: 'center',
+      utilityClass: 'text-center',
+    },
+  ],
+  'font-style': [
+    {
+      value: 'italic',
+      utilityClass: 'text-italic',
+    },
+  ],
+  'text-transform': [
+    {
+      value: 'uppercase',
+      utilityClass: 'text-uppercase',
+    },
+  ],
+  'text-decoration': [
+    {
+      value: 'underline',
+      utilityClass: 'text-underline',
+    },
+    {
+      value: 'none',
+      utilityClass: 'no-underline',
+    },
+  ],
+  'white-space': [
+    {
+      value: 'nowrap',
+      utilityClass: 'no-wrap',
+    },
+    {
+      value: 'normal',
+      utilityClass: 'ws-normal',
+    },
+  ],
+  'word-break': [
+    {
+      value: 'break-all',
+      utilityClass: 'wb-break-all',
+    },
+  ],
+  width: [
+    {
+      value: '100%',
+      utilityClass: 'width-full',
+    },
+    {
+      value: 'auto%',
+      utilityClass: 'width-auto',
+    },
+  ],
+  overflow: [
+    {
+      value: 'visible',
+      utilityClass: 'overflow-visible',
+    },
+    {
+      value: 'hidden',
+      utilityClass: 'overflow-hidden',
+    },
+    {
+      value: 'auto',
+      utilityClass: 'overflow-auto',
+    },
+    {
+      value: 'scroll',
+      utilityClass: 'overflow-scroll',
+    },
+  ],
+  'overflow-x': [
+    {
+      value: 'visible',
+      utilityClass: 'overflow-x-visible',
+    },
+    {
+      value: 'hidden',
+      utilityClass: 'overflow-x-hidden',
+    },
+    {
+      value: 'auto',
+      utilityClass: 'overflow-x-auto',
+    },
+    {
+      value: 'scroll',
+      utilityClass: 'overflow-x-scroll',
+    },
+  ],
+  'overflow-y': [
+    {
+      value: 'visible',
+      utilityClass: 'overflow-y-visible',
+    },
+    {
+      value: 'hidden',
+      utilityClass: 'overflow-y-hidden',
+    },
+    {
+      value: 'auto',
+      utilityClass: 'overflow-y-auto',
+    },
+    {
+      value: 'scroll',
+      utilityClass: 'overflow-y-scroll',
+    },
+  ],
+  height: [
+    {
+      value: '100%',
+      utilityClass: 'height-full',
+    },
+  ],
+  'max-width': [
+    {
+      value: '100%',
+      utilityClass: 'width-fit',
+    },
+  ],
+  'max-height': [
+    {
+      value: '100%',
+      utilityClass: 'height-fit',
+    },
+  ],
+  'min-width': [
+    {
+      value: '0',
+      utilityClass: 'min-width-0',
+    },
+  ],
+  float: [
+    {
+      value: 'left',
+      utilityClass: 'float-left',
+    },
+    {
+      value: 'right',
+      utilityClass: 'float-right',
+    },
+    {
+      value: 'none',
+      utilityClass: 'float-none',
+    },
+  ],
+  'list-style': [
+    {
+      value: 'none',
+      utilityClass: 'list-style-none',
+    },
+  ],
+  'user-select': [
+    {
+      value: 'none',
+      utilityClass: 'user-select-none',
+    },
+  ],
+  visibility: [
+    {
+      value: 'hidden',
+      utilityClass: 'v-hidden',
+    },
+    {
+      value: 'visible',
+      utilityClass: 'v-visible',
+    },
+  ],
+  'vertical-align': [
+    {
+      value: 'middle',
+      utilityClass: 'v-align-middle',
+    },
+    {
+      value: 'top',
+      utilityClass: 'v-align-top',
+    },
+    {
+      value: 'bottom',
+      utilityClass: 'v-align-bottom',
+    },
+    {
+      value: 'text-top',
+      utilityClass: 'v-align-text-top',
+    },
+    {
+      value: 'text-bottom',
+      utilityClass: 'v-align-text-bottom',
+    },
+    {
+      value: 'text-baseline',
+      utilityClass: 'v-align-baseline',
+    },
+  ],
+  'font-weight': [
+    {
+      value: '$font-weight-normal',
+      utilityClass: 'text-normal',
+    },
+    {
+      value: '$font-weight-bold',
+      utilityClass: 'text-bold',
+    },
+    {
+      value: '$font-weight-semibold',
+      utilityClass: 'text-semibold',
+    },
+    {
+      value: '$font-weight-light',
+      utilityClass: 'text-light',
+    },
+  ],
+  top: [
+    {
+      value: '0',
+      utilityClass: 'top-0',
+    },
+    {
+      value: 'auto',
+      utilityClass: 'top-auto',
+    },
+  ],
+  right: [
+    {
+      value: '0',
+      utilityClass: 'right-0',
+    },
+    {
+      value: 'auto',
+      utilityClass: 'right-auto',
+    },
+  ],
+  bottom: [
+    {
+      value: '0',
+      utilityClass: 'bottom-0',
+    },
+    {
+      value: 'auto',
+      utilityClass: 'bottom-auto',
+    },
+  ],
+  left: [
+    {
+      value: '0',
+      utilityClass: 'left-0',
+    },
+    {
+      value: 'auto',
+      utilityClass: 'left-auto',
+    },
+  ],
+  position: [
+    {
+      value: 'static',
+      utilityClass: 'position-static',
+    },
+    {
+      value: 'relative',
+      utilityClass: 'position-relative',
+    },
+    {
+      value: 'absolute',
+      utilityClass: 'position-absolute',
+    },
+    {
+      value: 'fixed',
+      utilityClass: 'position-fixed',
+    },
+    {
+      value: 'sticky',
+      utilityClass: 'position-sticky',
+    },
+  ],
+  'box-shadow': [
+    {
+      value: 'none',
+      utilityClass: 'box-shadow-none',
+    },
+    {
+      value: 'var(--color-shadow-small)',
+      utilityClass: 'box-shadow-small',
+    },
+    {
+      value: 'var(--color-shadow-medium)',
+      utilityClass: 'box-shadow-medium',
+    },
+    {
+      value: 'var(--color-shadow-large)',
+      utilityClass: 'box-shadow-large',
+    },
+    {
+      value: 'var(--color-shadow-extra-large)',
+      utilityClass: 'box-shadow-extra-large',
+    },
+  ],
+  border: [
+    {
+      value: '$border',
+      utilityClass: 'border',
+    },
+    {
+      value: '0',
+      utilityClass: 'border-0',
+    },
+  ],
+  'border-top': [
+    {
+      value: '$border',
+      utilityClass: 'border-top',
+    },
+    {
+      value: '0',
+      utilityClass: 'border-top-0',
+    },
+  ],
+  'border-right': [
+    {
+      value: '$border',
+      utilityClass: 'border-right',
+    },
+    {
+      value: '0',
+      utilityClass: 'border-right-0',
+    },
+  ],
+  'border-bottom': [
+    {
+      value: '$border',
+      utilityClass: 'border-bottom',
+    },
+    {
+      value: '0',
+      utilityClass: 'border-bottom-0',
+    },
+  ],
+  'border-left': [
+    {
+      value: '$border',
+      utilityClass: 'border-left',
+    },
+    {
+      value: '0',
+      utilityClass: 'border-left-0',
+    },
+  ],
+};
+
+const ruleName$1 = 'primer/utilities';
+
+const messages$1 = stylelint.utils.ruleMessages(ruleName$1, {
+  rejected: (selector, utilityClass) => {
+    return `Consider using the Primer utility '.${utilityClass}' instead of the selector '${selector}' in your html. https://primer.style/css/utilities`
+  },
+});
+
+// eslint-disable-next-line no-unused-vars
+var utilities = stylelint.createPlugin(ruleName$1, (enabled, options = {}, context) => {
+  if (!enabled) {
+    return noop$1
+  }
+
+  const utilityReplacement = (declaration, value) => {
+    const declarationUtilities = utilities$1[declaration];
+    if (declarationUtilities) {
+      return declarationUtilities.find(utility => {
+        return utility.value === value
+      })
+    }
+  };
+
+  const lintResult = (root, result) => {
+    root.walkRules(rule => {
+      if (!/^\.[\w\-_]+$/.exec(rule.selector)) {
+        return
+      }
+      const decls = rule.nodes.filter(decl => decl.type === 'decl');
+
+      if (decls.length === 1) {
+        const replacement = utilityReplacement(decls[0].prop, decls[0].value);
+        if (replacement) {
+          stylelint.utils.report({
+            index: rule.sourceIndex,
+            message: messages$1.rejected(rule.selector, replacement.utilityClass),
+            node: rule,
+            result,
+            ruleName: ruleName$1,
+          });
+        }
+      }
+    });
+  };
+
+  return lintResult
+});
+
+function noop$1() {}
+
+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 = createRequire(import.meta.url);
+
+/** @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,
+    utilities,
+    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.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/utilities': null,
+    '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/spacing': null,
+        'primer/colors': null,
+        'primer/borders': null,
+        'primer/typography': null,
+        'primer/box-shadow': null,
+        'primer/utilities': 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'],
+      rules: {
+        // Don't support nesting until it's more broadly shipped
+        'max-nesting-depth': [0],
+        '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'],
+          },
+        ],
+        // temporarily disabiling Primer plugins while we work on upgrades https://github.com/github/primer/issues/3165
+        'primer/spacing': null,
+        'primer/borders': null,
+        'primer/typography': null,
+        'primer/box-shadow': null,
+        'primer/utilities': null,
+      },
+    },
+  ],
+};
+
+export { index as default };