@primer/stylelint-config 12.2.0 → 12.3.0-rc.f3d0e89

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 12.3.0
+
+### Minor Changes
+
+- [#191](https://github.com/primer/stylelint-config/pull/191) [`71c7985`](https://github.com/primer/stylelint-config/commit/71c79853b679b674c1d27686f8d2168660b24a45) Thanks [@jonrohan](https://github.com/jonrohan)! - Refactoring the primer/spacing plugin to better match results
+
 ## 12.2.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/stylelint-config",
-  "version": "12.2.0",
+  "version": "12.3.0-rc.f3d0e89",
   "description": "Sharable stylelint config used by GitHub's CSS",
   "homepage": "http://primer.style/css/tools/linting",
   "author": "GitHub, Inc.",
@@ -44,16 +44,16 @@
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.2",
-    "@changesets/cli": "2.18.1",
+    "@changesets/cli": "2.19.0",
     "@github/prettier-config": "0.0.4",
     "@primer/css": "^19.0.0",
     "@primer/primitives": "^7.0.1",
     "dedent": "0.7.0",
-    "eslint": "8.4.0",
+    "eslint": "8.5.0",
     "eslint-plugin-github": "4.3.5",
     "eslint-plugin-jest": "25.3.0",
     "eslint-plugin-prettier": "4.0.0",
-    "jest": "27.4.3",
+    "jest": "27.4.5",
     "jest-preset-stylelint": "4.2.0",
     "prettier": "2.5.1",
     "stylelint": "14.1.0"

package/plugins/spacing.js

@@ -1,31 +1,123 @@
-const anymatch = require('anymatch')
-const {createVariableRule} = require('./lib/variable-rules')
-
-const spacerVarPatterns = ['$spacer-*', '$em-spacer-*']
-const values = [...spacerVarPatterns, '0', 'auto', 'inherit']
-
-module.exports = createVariableRule(
-  'primer/spacing',
-  ({variables}) => {
-    const spacerVars = Object.keys(variables).filter(anymatch(spacerVarPatterns))
-    const negativeValues = spacerVarPatterns.map(p => `-${p}`)
-    const replacements = {}
-    for (const name of spacerVars) {
-      replacements[`-${variables[name].computed}`] = `-${name}`
+const stylelint = require('stylelint')
+const declarationValueIndex = require('stylelint/lib/utils/declarationValueIndex')
+const valueParser = require('postcss-value-parser')
+
+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 = 'primer/spacing'
+const messages = stylelint.utils.ruleMessages(ruleName, {
+  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/support/spacing`
     }
-    return {
-      margin: {
-        expects: 'a spacer variable',
-        props: 'margin{,-top,-right,-bottom,-left}',
-        values: values.concat(negativeValues),
-        replacements
-      },
-      padding: {
-        expects: 'a non-negative spacer variable',
-        props: 'padding{,-top,-right,-bottom,-left}',
-        values
+
+    return `Please replace ${value} with spacing variable '${replacement}'.`
+  }
+})
+
+// eslint-disable-next-line no-unused-vars
+module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
+  if (!enabled) {
+    return noop
+  }
+
+  const lintResult = (root, result) => {
+    root.walkDecls(/^(padding|margin)/, decl => {
+      const problems = []
+      let containsMath = false
+      let conatinsVariable = false
+      const parsedValue = valueParser(decl.value).walk(declValue => {
+        // Only check word types. https://github.com/TrySound/postcss-value-parser#word
+        if (!['word', 'function'].includes(declValue.type)) {
+          return false
+        }
+
+        // Ignore values that are not numbers.
+        if (['0', 'auto', 'inherit', 'initial'].includes(declValue.value)) {
+          return false
+        }
+        // Remove leading negative sign, if any.
+        const cleanDeclValue = declValue.value.replace(/^-/g, '')
+
+        // If the a variable is found in the value, skip it.
+        if (
+          Object.keys(spacerValues).some(variable =>
+            new RegExp(`${variable.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(cleanDeclValue)
+          )
+        ) {
+          conatinsVariable = true
+          return false
+        }
+
+        // For now we're going to ignore math.
+        if (['*', '+', '-', '/'].includes(declValue.value)) {
+          containsMath = true
+          return false
+        }
+
+        let valueMatch = null
+        if ((valueMatch = Object.keys(spacerValues).find(spacer => spacerValues[spacer] === cleanDeclValue))) {
+          if (context.fix) {
+            declValue.value = declValue.value.replace(spacerValues[valueMatch], valueMatch)
+          } else {
+            problems.push({
+              index: declarationValueIndex(decl) + declValue.sourceIndex,
+              message: messages.rejected(spacerValues[valueMatch], valueMatch)
+            })
+          }
+        } else if (declValue.value !== '' && declValue.type !== 'function' && !containsMath) {
+          problems.push({
+            index: declarationValueIndex(decl) + declValue.sourceIndex,
+            message: messages.rejected(declValue.value, null)
+          })
+        }
+      })
+
+      if (context.fix) {
+        decl.value = parsedValue.toString()
       }
-    }
-  },
-  'https://primer.style/css/support/spacing'
-)
+
+      if (containsMath && conatinsVariable) {
+        return false
+      }
+
+      if (problems.length) {
+        for (const err of problems) {
+          stylelint.utils.report({
+            index: err.index,
+            message: err.message,
+            node: decl,
+            result,
+            ruleName
+          })
+        }
+      }
+    })
+  }
+
+  return lintResult
+})
+
+function noop() {}
+
+module.exports.ruleName = ruleName
+module.exports.messages = messages