@primer/stylelint-config 12.3.0-rc.f3d0e89 → 12.3.2-rc.bf1f6ff

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 12.3.2
+
+### Patch Changes
+
+- [#215](https://github.com/primer/stylelint-config/pull/215) [`66b16ae`](https://github.com/primer/stylelint-config/commit/66b16ae2edd81f8c8949f83c96d7011e5d395cc0) Thanks [@jonrohan](https://github.com/jonrohan)! - Making linter pick up separate function groups
+
+## 12.3.1
+
+### Patch Changes
+
+- [#213](https://github.com/primer/stylelint-config/pull/213) [`2a27f86`](https://github.com/primer/stylelint-config/commit/2a27f86868b1f4717100a1f0897cdaefb1dd6be7) Thanks [@jonrohan](https://github.com/jonrohan)! - Fixing an issue where the new spacing plugin isn't traversing child sectors.
+
 ## 12.3.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/stylelint-config",
-  "version": "12.3.0-rc.f3d0e89",
+  "version": "12.3.2-rc.bf1f6ff",
   "description": "Sharable stylelint config used by GitHub's CSS",
   "homepage": "http://primer.style/css/tools/linting",
   "author": "GitHub, Inc.",
@@ -20,7 +20,7 @@
     "plugins/"
   ],
   "scripts": {
-    "test": "jest",
+    "test": "jest --coverage false",
     "lint": "eslint .",
     "release": "changeset publish"
   },
@@ -44,19 +44,19 @@
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.2",
-    "@changesets/cli": "2.19.0",
+    "@changesets/cli": "2.20.0",
     "@github/prettier-config": "0.0.4",
     "@primer/css": "^19.0.0",
     "@primer/primitives": "^7.0.1",
     "dedent": "0.7.0",
-    "eslint": "8.5.0",
+    "eslint": "8.8.0",
     "eslint-plugin-github": "4.3.5",
-    "eslint-plugin-jest": "25.3.0",
+    "eslint-plugin-jest": "26.0.0",
     "eslint-plugin-prettier": "4.0.0",
-    "jest": "27.4.5",
+    "jest": "27.4.7",
     "jest-preset-stylelint": "4.2.0",
     "prettier": "2.5.1",
-    "stylelint": "14.1.0"
+    "stylelint": "14.3.0"
   },
   "jest": {
     "preset": "jest-preset-stylelint",

package/plugins/spacing.js

@@ -2,6 +2,7 @@ const stylelint = require('stylelint')
 const declarationValueIndex = require('stylelint/lib/utils/declarationValueIndex')
 const valueParser = require('postcss-value-parser')
 
+// TODO: Pull this in from primer/primitives
 const spacerValues = {
   '$spacer-1': '4px',
   '$spacer-2': '8px',
@@ -34,6 +35,17 @@ const messages = stylelint.utils.ruleMessages(ruleName, {
   }
 })
 
+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
 module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
   if (!enabled) {
@@ -41,65 +53,61 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
   }
 
   const lintResult = (root, result) => {
-    root.walkDecls(/^(padding|margin)/, decl => {
+    root.walk(decl => {
+      if (decl.type !== 'decl' || !decl.prop.match(/^(padding|margin)/)) {
+        return noop
+      }
+
       const problems = []
-      let containsMath = false
-      let conatinsVariable = false
-      const parsedValue = valueParser(decl.value).walk(declValue => {
+
+      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 (!['word', 'function'].includes(declValue.type)) {
-          return false
+        if (node.type !== 'word') {
+          return
         }
 
-        // Ignore values that are not numbers.
-        if (['0', 'auto', 'inherit', 'initial'].includes(declValue.value)) {
-          return false
+        // 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
         }
-        // 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)
+            new RegExp(`${variable.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(cleanValue)
           )
         ) {
-          conatinsVariable = true
-          return false
+          return
         }
 
-        // For now we're going to ignore math.
-        if (['*', '+', '-', '/'].includes(declValue.value)) {
-          containsMath = true
-          return false
-        }
+        const replacement = Object.keys(spacerValues).find(spacer => spacerValues[spacer] === cleanValue) || null
+        const valueMatch = replacement ? spacerValues[replacement] : node.value
 
-        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) {
+        if (replacement && context.fix) {
+          node.value = node.value.replace(valueMatch, replacement)
+        } else {
           problems.push({
-            index: declarationValueIndex(decl) + declValue.sourceIndex,
-            message: messages.rejected(declValue.value, null)
+            index: declarationValueIndex(decl) + node.sourceIndex,
+            message: messages.rejected(valueMatch, replacement)
           })
         }
+
+        return
       })
 
       if (context.fix) {
         decl.value = parsedValue.toString()
       }
 
-      if (containsMath && conatinsVariable) {
-        return false
-      }
-
       if (problems.length) {
         for (const err of problems) {
           stylelint.utils.report({