@primer/stylelint-config 12.0.0-rc.9e96998 → 12.0.1

package/CHANGELOG.md

@@ -1,11 +1,21 @@
 # Changelog
 
+## 12.0.1
+
+### Patch Changes
+
+- [#132](https://github.com/primer/stylelint-config/pull/132) [`b672367`](https://github.com/primer/stylelint-config/commit/b6723679606bb8d39e75025ae17ace9f1c3e2631) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating no-deprecated-colors plugin for edge cases
+
 ## 12.0.0
 
 ### Major Changes
 
 - [#129](https://github.com/primer/stylelint-config/pull/129) [`653d596`](https://github.com/primer/stylelint-config/commit/653d596072b897b265b093aac4cd5c143e61410e) Thanks [@jonrohan](https://github.com/jonrohan)! - Renaming the package to use org scope. This is a breaking change, you'll need to uninstall `stylelint-config-primer` and reinstall `@primer/stylelint-config`.
 
+### Patch Changes
+
+- [#130](https://github.com/primer/stylelint-config/pull/130) [`f495a56`](https://github.com/primer/stylelint-config/commit/f495a563a9e809252630466088eb94177e6c0be4) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating @primer/primitives to 5.0 release candidate
+
 ## 11.1.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/stylelint-config",
-  "version": "12.0.0-rc.9e96998",
+  "version": "12.0.1",
   "description": "Sharable stylelint config used by GitHub's CSS",
   "homepage": "http://primer.style/css/tools/linting",
   "author": "GitHub, Inc.",
@@ -37,14 +37,14 @@
   },
   "peerDependencies": {
     "@primer/css": "*",
-    "@primer/primitives": ">= 4.6.2"
+    "@primer/primitives": "^5.0.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.1",
     "@changesets/cli": "2.17.0",
     "@github/prettier-config": "0.0.4",
     "@primer/css": "^13.2.0",
-    "@primer/primitives": "^4.6.7",
+    "@primer/primitives": "^5.0.0",
     "dedent": "0.7.0",
     "eslint": "7.32.0",
     "eslint-plugin-github": "4.3.0",
@@ -52,7 +52,7 @@
     "eslint-plugin-prettier": "4.0.0",
     "jest": "27.2.2",
     "jest-preset-stylelint": "4.1.1",
-    "prettier": "2.4.0",
+    "prettier": "2.4.1",
     "stylelint": "13.13.1"
   },
   "eslintConfig": {

package/plugins/no-deprecated-colors.js

@@ -39,9 +39,13 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
   const seen = new WeakMap()
 
   // eslint-disable-next-line import/no-dynamic-require
-  const deprecatedColors = require(options.deprecatedFile || '@primer/primitives/dist/deprecations/colors.json')
+  const deprecatedColors = require(options.deprecatedFile || '@primer/primitives/dist/deprecated/colors.json')
+  // eslint-disable-next-line import/no-dynamic-require
+  const removedColors = require(options.removedFile || '@primer/primitives/dist/removed/colors.json')
+
+  const variableChecks = Object.assign(deprecatedColors, removedColors)
 
-  const convertedCSSVars = Object.entries(deprecatedColors)
+  const convertedCSSVars = Object.entries(variableChecks)
     .map(([k, v]) => {
       return [`--color-${kebabCase(k)}`, v]
     })
@@ -51,35 +55,45 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
     }, {})
 
   const lintResult = (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)) {
-          if (variableName in convertedCSSVars) {
-            let replacement = convertedCSSVars[variableName]
-
-            if (context.fix && replacement !== null && !Array.isArray(replacement)) {
-              replacement = `--color-${kebabCase(replacement)}`
-              replacedVars[variableName] = true
-              newVars[replacement] = true
-              decl.value = decl.value.replace(variableName, replacement)
-              return
+    // Walk all declarartions
+    root.walk(node => {
+      if (seen.has(node)) {
+        return
+      } else {
+        seen.set(node, true)
+      }
+      // walk these nodes
+      if (!(node.type === 'decl' || node.type === 'atrule')) {
+        return
+      }
+
+      for (const [, variableName] of matchAll(
+        node.type === 'atrule' ? node.params : node.value,
+        variableReferenceRegex
+      )) {
+        if (variableName in convertedCSSVars) {
+          let replacement = convertedCSSVars[variableName]
+
+          if (context.fix && replacement !== null && !Array.isArray(replacement)) {
+            replacement = `--color-${kebabCase(replacement)}`
+            replacedVars[variableName] = true
+            newVars[replacement] = true
+            if (node.type === 'atrule') {
+              node.params = node.params.replace(variableName, replacement)
+            } else {
+              node.value = node.value.replace(variableName, replacement)
             }
-
-            stylelint.utils.report({
-              message: messages.rejected(variableName, replacement),
-              node: decl,
-              ruleName,
-              result
-            })
+            continue
           }
+
+          stylelint.utils.report({
+            message: messages.rejected(variableName, replacement),
+            node,
+            ruleName,
+            result
+          })
         }
-      })
+      }
     })
   }