@primer/stylelint-config 13.0.1-rc.bbe2b12 → 13.1.0-rc.437e7b4

package/dist/index.mjs

@@ -3,9 +3,6 @@ import stylelint from 'stylelint';
 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$3 from '@primer/css/dist/variables.json' with { type: 'json' };
 import matchAll from 'string.prototype.matchall';
 
 var propertyOrder = [
@@ -202,6 +199,9 @@ function primitivesVariables(type) {
       files.push('functional/themes/light.json');
       files.push('functional/size/border.json');
       break
+    case 'colors':
+      files.push('functional/themes/light.json');
+      break
   }
 
   for (const file of files) {
@@ -222,6 +222,19 @@ function primitivesVariables(type) {
   return variables
 }
 
+const HAS_VALID_HEX = /#(?:[\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})(?:$|[^\da-f])/i;
+const COLOR_FUNCTION_NAMES = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'lab', 'lch', 'oklab', 'oklch'];
+
+/**
+ * Check if a value contains a valid 3, 4, 6 or 8 digit hex
+ *
+ * @param {string} value
+ * @returns {boolean}
+ */
+function hasValidColor(value) {
+  return HAS_VALID_HEX.test(value) || COLOR_FUNCTION_NAMES.includes(value)
+}
+
 function walkGroups$1(root, validate) {
   for (const node of root.nodes) {
     if (node.type === 'function') {
@@ -234,12 +247,12 @@ function walkGroups$1(root, validate) {
 }
 
 const {
-  createPlugin: createPlugin$3,
-  utils: {report: report$3, ruleMessages: ruleMessages$3, validateOptions: validateOptions$3},
+  createPlugin: createPlugin$4,
+  utils: {report: report$4, ruleMessages: ruleMessages$4, validateOptions: validateOptions$4},
 } = stylelint;
 
-const ruleName$5 = 'primer/borders';
-const messages$5 = ruleMessages$3(ruleName$5, {
+const ruleName$6 = 'primer/borders';
+const messages$6 = ruleMessages$4(ruleName$6, {
   rejected: (value, replacement, propName) => {
     if (propName && propName.includes('radius') && value.includes('borderWidth')) {
       return `Border radius variables can not be used for border widths`
@@ -257,7 +270,7 @@ const messages$5 = ruleMessages$3(ruleName$5, {
   },
 });
 
-const variables$2 = primitivesVariables('border');
+const variables$3 = primitivesVariables('border');
 const sizes$1 = [];
 const radii = [];
 
@@ -269,7 +282,7 @@ 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$2) {
+for (const variable of variables$3) {
   const name = variable['name'];
 
   if (name.includes('borderWidth')) {
@@ -289,9 +302,9 @@ for (const variable of variables$2) {
 }
 
 /** @type {import('stylelint').Rule} */
-const ruleFunction$3 = primary => {
+const ruleFunction$4 = primary => {
   return (root, result) => {
-    const validOptions = validateOptions$3(result, ruleName$5, {
+    const validOptions = validateOptions$4(result, ruleName$6, {
       actual: primary,
       possible: [true],
     });
@@ -388,13 +401,13 @@ const ruleFunction$3 = primary => {
             node.value = node.value.replace(node.value, `var(${replacement['name']})`);
           };
         }
-        report$3({
+        report$4({
           index: declarationValueIndex(declNode) + node.sourceIndex,
           endIndex: declarationValueIndex(declNode) + node.sourceIndex + node.value.length,
-          message: messages$5.rejected(node.value, replacement, prop),
+          message: messages$6.rejected(node.value, replacement, prop),
           node: declNode,
           result,
-          ruleName: ruleName$5,
+          ruleName: ruleName$6,
           fix,
         });
 
@@ -406,21 +419,21 @@ const ruleFunction$3 = primary => {
   }
 };
 
-ruleFunction$3.ruleName = ruleName$5;
-ruleFunction$3.messages = messages$5;
-ruleFunction$3.meta = {
+ruleFunction$4.ruleName = ruleName$6;
+ruleFunction$4.messages = messages$6;
+ruleFunction$4.meta = {
   fixable: true,
 };
 
-var borders = createPlugin$3(ruleName$5, ruleFunction$3);
+var borders = createPlugin$4(ruleName$6, ruleFunction$4);
 
 const {
-  createPlugin: createPlugin$2,
-  utils: {report: report$2, ruleMessages: ruleMessages$2, validateOptions: validateOptions$2},
+  createPlugin: createPlugin$3,
+  utils: {report: report$3, ruleMessages: ruleMessages$3, validateOptions: validateOptions$3},
 } = stylelint;
 
-const ruleName$4 = 'primer/box-shadow';
-const messages$4 = ruleMessages$2(ruleName$4, {
+const ruleName$5 = 'primer/box-shadow';
+const messages$5 = ruleMessages$3(ruleName$5, {
   rejected: (value, replacement) => {
     if (!replacement) {
       return `Please use a Primer box-shadow variable instead of '${value}'. Consult the primer docs for a suitable replacement. https://primer.style/foundations/primitives/color#shadow or https://primer.style/foundations/primitives/size#border-size`
@@ -430,10 +443,10 @@ const messages$4 = ruleMessages$2(ruleName$4, {
   },
 });
 
-const variables$1 = primitivesVariables('box-shadow');
+const variables$2 = primitivesVariables('box-shadow');
 const shadows = [];
 
-for (const variable of variables$1) {
+for (const variable of variables$2) {
   const name = variable['name'];
 
   // TODO: Decide if this is safe. Someday we might have variables that
@@ -444,9 +457,9 @@ for (const variable of variables$1) {
 }
 
 /** @type {import('stylelint').Rule} */
-const ruleFunction$2 = primary => {
+const ruleFunction$3 = primary => {
   return (root, result) => {
-    const validOptions = validateOptions$2(result, ruleName$4, {
+    const validOptions = validateOptions$3(result, ruleName$5, {
       actual: primary,
       possible: [true],
     });
@@ -479,378 +492,190 @@ const ruleFunction$2 = primary => {
         };
       }
 
-      report$2({
+      report$3({
         index: declarationValueIndex(declNode),
         endIndex: declarationValueIndex(declNode) + value.length,
-        message: messages$4.rejected(value, replacement),
+        message: messages$5.rejected(value, replacement),
         node: declNode,
         result,
-        ruleName: ruleName$4,
+        ruleName: ruleName$5,
         fix,
       });
     });
   }
 };
 
-ruleFunction$2.ruleName = ruleName$4;
-ruleFunction$2.messages = messages$4;
-ruleFunction$2.meta = {
+ruleFunction$3.ruleName = ruleName$5;
+ruleFunction$3.messages = messages$5;
+ruleFunction$3.meta = {
   fixable: true,
 };
 
-var boxShadow = createPlugin$2(ruleName$4, ruleFunction$2);
-
-const SKIP_VALUE_NODE_TYPES = new Set(['space', 'div']);
-const SKIP_AT_RULE_NAMES = new Set(['each', 'for', 'function', 'mixin']);
+var boxShadow = createPlugin$3(ruleName$5, ruleFunction$3);
 
-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 {
+  createPlugin: createPlugin$2,
+  utils: {report: report$2, ruleMessages: ruleMessages$2, validateOptions: validateOptions$2},
+} = stylelint;
 
-  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);
+const ruleName$4 = 'primer/colors';
+const messages$4 = ruleMessages$2(ruleName$4, {
+  rejected: (value, type) => {
+    if (type === 'fg') {
+      return `Please use a Primer foreground color variable instead of '${value}'. https://primer.style/foundations/primitives/color#foreground`
+    } else if (type === 'bg') {
+      return `Please use a Primer background color variable instead of '${value}'. https://primer.style/foundations/primitives/color#background`
+    } else if (type === 'border') {
+      return `Please use a Primer border color variable instead of '${value}'. https://primer.style/foundations/primitives/color#border`
     }
-  }
+    return `Please use with a Primer color variable instead of '${value}'. https://primer.style/foundations/primitives/color`
+  },
+});
 
-  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}
-    }
-  }
+let variables$1 = primitivesVariables('colors');
+const validProps = {
+  '^color$': ['fgColor', 'iconColor'],
+  '^background(-color)?$': ['bgColor'],
+  '^border(-top|-right|-bottom|-left|-inline|-block)*(-color)?$': ['borderColor'],
+  '^fill$': ['fgColor', 'iconColor', 'bgColor'],
+  '^stroke$': ['fgColor', 'iconColor', 'bgColor', 'borderColor'],
+};
 
-  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
-  }
+const validValues = [
+  'none',
+  'currentcolor',
+  'inherit',
+  'initial',
+  'unset',
+  'revert',
+  'revert-layer',
+  'transparent',
+  '0',
+];
 
-  function getPropValidator(prop) {
-    return validatorsByProp.tap(prop, () => validators.find(v => v.matchesProp(prop)))
+const propType = prop => {
+  if (/^color/.test(prop)) {
+    return 'fg'
+  } else if (/^background(-color)?$/.test(prop)) {
+    return 'bg'
+  } else if (/^border(-top|-right|-bottom|-left|-inline|-block)*(-color)?$/.test(prop)) {
+    return 'border'
+  } else if (/^fill$/.test(prop)) {
+    return 'fg'
+  } else if (/^stroke$/.test(prop)) {
+    return 'fg'
   }
+  return undefined
+};
 
-  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,
-          }
-        }
+variables$1 = variables$1.filter(variable => {
+  const name = variable['name'];
+  // remove shadow and boxShadow variables
+  return !(name.includes('shadow') || name.includes('boxShadow'))
+});
 
-        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
-          });
+/** @type {import('stylelint').Rule} */
+const ruleFunction$2 = primary => {
+  return (root, result) => {
+    const validOptions = validateOptions$2(result, ruleName$4, {
+      actual: primary,
+      possible: [true],
+    });
+    if (!validOptions) return
 
-        const valid = validations.every(v => v.valid);
-        if (valid) {
-          return {valid, errors: [], fixable: false, replacement: undefined}
-        }
+    const valueIsCorrectType = (value, types) => types.some(type => value.includes(type));
 
-        const fixable = validations.some(v => v.fixable);
-        const errors = validations.reduce((list, v) => list.concat(v.errors), []);
+    root.walkDecls(declNode => {
+      const {prop, value} = declNode;
 
-        let replacement = undefined;
-        for (const validation of validations) {
-          if (fixable && validation.replacement) {
-            parsed.nodes[validation.index] = {type: 'word', value: validation.replacement};
-          }
-        }
+      // Skip if prop is not a valid color prop
+      if (!Object.keys(validProps).some(validProp => new RegExp(validProp).test(prop))) return
 
-        if (fixable) {
-          replacement = valueParser.stringify(parsed);
-        }
+      // Get the valid types for the prop
+      const types = validProps[Object.keys(validProps).find(re => new RegExp(re).test(prop))];
 
-        return {
-          valid,
-          fixable,
-          errors,
-          replacement,
-        }
-      }
-    }
-  }
+      // Walk the value split
+      valueParser(value).walk(valueNode => {
+        // Skip if value is not a word or function
+        if (valueNode.type !== 'word' && valueNode.type !== 'function') return
 
-  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: []}
-      }
+        // Skip if value is a valid value
+        if (validValues.includes(valueNode.value)) return
 
-      const errors = [];
+        if (hasValidColor(valueNode.value) || /^\$/.test(valueNode.value)) {
+          const rejectedValue =
+            valueNode.type === 'function'
+              ? `${valueNode.value}(${valueParser.stringify(valueNode.nodes)})`
+              : valueNode.value;
 
-      let fixable = false;
-      let componentIndex = 0;
-      for (const [index, node] of Object.entries(parsed.nodes)) {
-        if (SKIP_VALUE_NODE_TYPES.has(node.type)) {
-          continue
+          report$2({
+            index: declarationValueIndex(declNode) + valueNode.sourceIndex,
+            endIndex: declarationValueIndex(declNode) + valueNode.sourceEndIndex,
+            message: messages$4.rejected(rejectedValue, propType(prop)),
+            node: declNode,
+            result,
+            ruleName: ruleName$4,
+          });
+          return
         }
 
-        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;
+        // Skip functions
+        if (valueNode.type === 'function') {
+          return
         }
 
-        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});
+        // Variable exists and is the correct type (fg, bg, border)
+        if (
+          variables$1.some(variable => new RegExp(variable['name']).test(valueNode.value)) &&
+          valueIsCorrectType(valueNode.value, types)
+        ) {
+          return
         }
-      }
 
-      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,
+        // Value doesn't start with variable --
+        if (!valueNode.value.startsWith('--')) {
+          return
         }
-      }
-
-      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
-    }
+        // Ignore old system colors --color-*
+        if (
+          [
+            /^--color-(?:[a-zA-Z0-9-]+-)*text(?:-[a-zA-Z0-9-]+)*$/,
+            /^--color-(?:[a-zA-Z0-9-](?!-))*-fg(?:-[a-zA-Z0-9-]+)*$/,
+            /^--color-[^)]+$/,
+          ].some(oldSysRe => oldSysRe.test(valueNode.value))
+        ) {
+          return
+        }
 
-    let actualRules = rules;
-    let overrides = options.rules;
-    if (typeof rules === 'function') {
-      actualRules = rules({variables: variables$3, options, ruleName});
-    } else {
-      actualRules = Object.assign({}, rules);
-    }
-    if (typeof overrides === 'function') {
-      delete options.rules;
-      overrides = overrides({rules: actualRules, options, ruleName, variables: variables$3});
-    }
-    if (overrides) {
-      Object.assign(actualRules, overrides);
-    }
-    const validate = declarationValidator(actualRules, {variables: variables$3});
-
-    // 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);
-          }
+        // Property is shortand and value doesn't include color
+        if (
+          (/^border(-top|-right|-bottom|-left|-inline|-block)*$/.test(prop) || /^background$/.test(prop)) &&
+          !valueNode.value.toLowerCase().includes('color')
+        ) {
+          return
+        }
 
-          const validated = validate(decl);
-          const {valid, fixable, replacement, errors} = validated;
-          if (valid) {
-            return
-          } else if (fixEnabled && fixable) {
-            decl.value = replacement;
-          } else {
-            for (const error of errors) {
-              const message = stylelint.utils
-                .ruleMessages(ruleName, {
-                  rejected: m => {
-                    {
-                      return `${m}. See ${url}.`
-                    }
-                  },
-                })
-                .rejected(error);
-
-              stylelint.utils.report({
-                message,
-                node: decl,
-                result,
-                ruleName,
-              });
-            }
-          }
+        report$2({
+          index: declarationValueIndex(declNode) + valueNode.sourceIndex,
+          endIndex: declarationValueIndex(declNode) + valueNode.sourceEndIndex,
+          message: messages$4.rejected(`var(${valueNode.value})`, propType(prop)),
+          node: declNode,
+          result,
+          ruleName: ruleName$4,
         });
       });
-    }
-  });
-
-  Object.assign(plugin, {rules});
-
-  return plugin
-}
+    });
+  }
+};
 
-function noop$2() {}
-
-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(-.+)*\)/,
-];
+ruleFunction$2.ruleName = ruleName$4;
+ruleFunction$2.messages = messages$4;
+ruleFunction$2.meta = {
+  fixable: false,
+};
 
-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',
-);
+var colors = createPlugin$2(ruleName$4, ruleFunction$2);
 
 const ruleName$3 = 'primer/responsive-widths';