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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/stylelint-config",
-  "version": "13.0.1",
+  "version": "13.1.0-rc.437e7b4",
   "description": "Sharable stylelint config used by GitHub's CSS",
   "author": "GitHub, Inc.",
   "license": "MIT",
@@ -44,9 +44,7 @@
   },
   "dependencies": {
     "@github/browserslist-config": "^1.0.0",
-    "@primer/css": "^21.0.8",
     "@primer/primitives": "^9.0.1",
-    "anymatch": "^3.1.1",
     "postcss-scss": "^4.0.2",
     "postcss-styled-syntax": "^0.6.4",
     "postcss-value-parser": "^4.0.2",
@@ -56,8 +54,7 @@
     "stylelint-no-unsupported-browser-features": "^8.0.0",
     "stylelint-order": "^6.0.4",
     "stylelint-scss": "^6.2.0",
-    "stylelint-value-no-unknown-custom-properties": "^6.0.1",
-    "tap-map": "^1.0.0"
+    "stylelint-value-no-unknown-custom-properties": "^6.0.1"
   },
   "prettier": "@github/prettier-config",
   "devDependencies": {

package/plugins/colors.js

@@ -1,43 +1,168 @@
-import {createVariableRule} from './lib/variable-rules.js'
-
-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(-.+)*\)/,
-]
+import stylelint from 'stylelint'
+import declarationValueIndex from 'stylelint/lib/utils/declarationValueIndex.cjs'
+import {primitivesVariables, hasValidColor} from './lib/utils.js'
+import valueParser from 'postcss-value-parser'
+
+const {
+  createPlugin,
+  utils: {report, ruleMessages, validateOptions},
+} = stylelint
 
-export default 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(-.+)*\)/,
-      ],
-    },
+export const ruleName = 'primer/colors'
+export const messages = ruleMessages(ruleName, {
+  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`
   },
-  'https://primer.style/primitives/colors',
-)
+})
+
+let variables = 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'],
+}
+
+const validValues = [
+  'none',
+  'currentcolor',
+  'inherit',
+  'initial',
+  'unset',
+  'revert',
+  'revert-layer',
+  'transparent',
+  '0',
+]
+
+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
+}
+
+variables = variables.filter(variable => {
+  const name = variable['name']
+  // remove shadow and boxShadow variables
+  return !(name.includes('shadow') || name.includes('boxShadow'))
+})
+
+/** @type {import('stylelint').Rule} */
+const ruleFunction = primary => {
+  return (root, result) => {
+    const validOptions = validateOptions(result, ruleName, {
+      actual: primary,
+      possible: [true],
+    })
+    if (!validOptions) return
+
+    const valueIsCorrectType = (value, types) => types.some(type => value.includes(type))
+
+    root.walkDecls(declNode => {
+      const {prop, value} = declNode
+
+      // Skip if prop is not a valid color prop
+      if (!Object.keys(validProps).some(validProp => new RegExp(validProp).test(prop))) return
+
+      // Get the valid types for the prop
+      const types = validProps[Object.keys(validProps).find(re => new RegExp(re).test(prop))]
+
+      // 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
+
+        // Skip if value is a valid value
+        if (validValues.includes(valueNode.value)) return
+
+        if (hasValidColor(valueNode.value) || /^\$/.test(valueNode.value)) {
+          const rejectedValue =
+            valueNode.type === 'function'
+              ? `${valueNode.value}(${valueParser.stringify(valueNode.nodes)})`
+              : valueNode.value
+
+          report({
+            index: declarationValueIndex(declNode) + valueNode.sourceIndex,
+            endIndex: declarationValueIndex(declNode) + valueNode.sourceEndIndex,
+            message: messages.rejected(rejectedValue, propType(prop)),
+            node: declNode,
+            result,
+            ruleName,
+          })
+          return
+        }
+
+        // Skip functions
+        if (valueNode.type === 'function') {
+          return
+        }
+
+        // Variable exists and is the correct type (fg, bg, border)
+        if (
+          variables.some(variable => new RegExp(variable['name']).test(valueNode.value)) &&
+          valueIsCorrectType(valueNode.value, types)
+        ) {
+          return
+        }
+
+        // Value doesn't start with variable --
+        if (!valueNode.value.startsWith('--')) {
+          return
+        }
+
+        // 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
+        }
+
+        // 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
+        }
+
+        report({
+          index: declarationValueIndex(declNode) + valueNode.sourceIndex,
+          endIndex: declarationValueIndex(declNode) + valueNode.sourceEndIndex,
+          message: messages.rejected(`var(${valueNode.value})`, propType(prop)),
+          node: declNode,
+          result,
+          ruleName,
+        })
+      })
+    })
+  }
+}
+
+ruleFunction.ruleName = ruleName
+ruleFunction.messages = messages
+ruleFunction.meta = {
+  fixable: false,
+}
+
+export default createPlugin(ruleName, ruleFunction)

package/plugins/lib/utils.js

@@ -21,6 +21,9 @@ export 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) {
@@ -41,6 +44,19 @@ export 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}
+ */
+export function hasValidColor(value) {
+  return HAS_VALID_HEX.test(value) || COLOR_FUNCTION_NAMES.includes(value)
+}
+
 export function walkGroups(root, validate) {
   for (const node of root.nodes) {
     if (node.type === 'function') {

package/plugins/lib/decl-validator.js

@@ -1,238 +0,0 @@
-import anymatch from 'anymatch'
-import valueParser from 'postcss-value-parser'
-import TapMap from 'tap-map'
-
-const SKIP_VALUE_NODE_TYPES = new Set(['space', 'div'])
-const SKIP_AT_RULE_NAMES = new Set(['each', 'for', 'function', 'mixin'])
-
-export default 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))
-}