@primer/stylelint-config 12.7.0-rc.f3bb1ab → 12.7.1-rc.59e46db

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 12.7.1
+
+### Patch Changes
+
+- [`726d7d1`](https://github.com/primer/stylelint-config/commit/726d7d1bf4eac82a032c448cb0be32d5bf66b29a) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating no-deprecated-colors for primitives v8
+
 ## 12.7.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/stylelint-config",
-  "version": "12.7.0-rc.f3bb1ab",
+  "version": "12.7.1-rc.59e46db",
   "description": "Sharable stylelint config used by GitHub's CSS",
   "homepage": "http://primer.style/css/tools/linting",
   "author": "GitHub, Inc.",
@@ -27,7 +27,6 @@
   "dependencies": {
     "anymatch": "^3.1.1",
     "globby": "^11.0.1",
-    "lodash.kebabcase": "^4.1.1",
     "postcss-scss": "^4.0.2",
     "postcss-value-parser": "^4.0.2",
     "string.prototype.matchall": "^4.0.2",
@@ -39,19 +38,19 @@
     "tap-map": "^1.0.0"
   },
   "devDependencies": {
-    "@changesets/changelog-github": "0.4.4",
-    "@changesets/cli": "2.22.0",
+    "@changesets/changelog-github": "0.4.7",
+    "@changesets/cli": "2.26.1",
     "@github/prettier-config": "0.0.4",
     "@primer/css": "^20.0.0",
     "@primer/primitives": "^7.8.3",
     "dedent": "0.7.0",
-    "eslint": "8.18.0",
+    "eslint": "8.22.0",
     "eslint-plugin-github": "4.3.5",
-    "eslint-plugin-jest": "26.5.3",
+    "eslint-plugin-jest": "27.0.1",
     "eslint-plugin-prettier": "4.2.1",
-    "jest": "28.1.2",
-    "jest-preset-stylelint": "5.0.3",
-    "prettier": "2.6.2"
+    "jest": "29.4.3",
+    "jest-preset-stylelint": "6.1.0",
+    "prettier": "2.8.1"
   },
   "jest": {
     "preset": "jest-preset-stylelint",

package/plugins/no-deprecated-colors.js

@@ -1,20 +1,13 @@
 const stylelint = require('stylelint')
-const kebabCase = require('lodash.kebabcase')
 const matchAll = require('string.prototype.matchall')
 
 const ruleName = 'primer/no-deprecated-colors'
 const messages = stylelint.utils.ruleMessages(ruleName, {
   rejected: (varName, replacement) => {
     if (replacement === null) {
-      return `${varName} is a deprecated color variable. Please consult the primer color docs for a replacement. https://primer.style/primitives`
+      return `${varName} is a deprecated color variable. Please consult the primer color docs for a replacement. https://primer.style/primitives/storybook/?path=/story/migration-tables`
     }
 
-    if (Array.isArray(replacement)) {
-      replacement = replacement.map(r => `--color-${kebabCase(r)}`)
-      return `${varName} is a deprecated color variable. Please use one of (${replacement.join(', ')}).`
-    }
-
-    replacement = `--color-${kebabCase(replacement)}`
     return `${varName} is a deprecated color variable. Please use the replacement ${replacement}.`
   }
 })
@@ -39,20 +32,7 @@ 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/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(variableChecks)
-    .map(([k, v]) => {
-      return [`--color-${kebabCase(k)}`, v]
-    })
-    .reduce((acc, [key, value]) => {
-      acc[key] = value
-      return acc
-    }, {})
+  const variableChecks = require(options.deprecatedFile || '../__tests__/__fixtures__/primitives-v8.json')
 
   const lintResult = (root, result) => {
     // Walk all declarations
@@ -62,6 +42,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
       } else {
         seen.set(node, true)
       }
+
       // walk these nodes
       if (!(node.type === 'decl' || node.type === 'atrule')) {
         return
@@ -71,11 +52,22 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
         node.type === 'atrule' ? node.params : node.value,
         variableReferenceRegex
       )) {
-        if (variableName in convertedCSSVars) {
-          let replacement = convertedCSSVars[variableName]
+        if (variableName in variableChecks) {
+          let replacement = variableChecks[variableName]
+          if (typeof replacement === 'object') {
+            for (const property of Object.keys(replacement)) {
+              if (node.prop.includes(property)) {
+                replacement = replacement[property]
+                break
+              }
+            }
+            if (typeof replacement === 'object') {
+              replacement = null
+            }
+          }
 
-          if (context.fix && replacement !== null && !Array.isArray(replacement)) {
-            replacement = `--color-${kebabCase(replacement)}`
+          if (context.fix && replacement !== null) {
+            replacement = `${replacement}, var(${variableName})`
             replacedVars[variableName] = true
             newVars[replacement] = true
             if (node.type === 'atrule') {