Implement no-deprecated-colors rule

Author: colebemis

package-lock.json

@@ -21,6 +21,7 @@
   "homepage": "https://github.com/primer/eslint-plugin-primer-react#readme",
   "devDependencies": {
     "@github/prettier-config": "0.0.4",
+    "@primer/primitives": "^4.6.1",
     "eslint": "^7.32.0",
     "jest": "^27.0.6"
   },

package.json

@@ -1,9 +1,70 @@
 const rule = require('../no-deprecated-colors')
 const {RuleTester} = require('eslint')
 
-const ruleTester = new RuleTester()
+const testDeprecations = {
+  'text.primary': 'fg.default',
+  'bg.primary': 'canvas.default',
+  'auto.green.5': ['success.fg', 'success.emphasis'],
+  'fade.fg10': null
+}
+
+jest.mock('@primer/primitives/dist/deprecations/colors_v2', () => testDeprecations)
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    }
+  }
+})
 
 ruleTester.run('no-deprecated-colors', rule, {
   valid: [],
-  invalid: [{code: 'hello()', errors: ['Hello ESLint']}]
+  invalid: [
+    {
+      code: '<Box color="text.primary" />',
+      output: '<Box color="fg.default" />',
+      errors: [
+        {
+          message: '"text.primary" is deprecated. Use "fg.default" instead.'
+        }
+      ]
+    },
+    {
+      code: '<Box bg="bg.primary" />',
+      output: '<Box bg="canvas.default" />',
+      errors: [
+        {
+          message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
+        }
+      ]
+    },
+    {
+      code: '<Box color="auto.green.5" />',
+      errors: [
+        {
+          message: '"auto.green.5" is deprecated.',
+          suggestions: [
+            {
+              desc: 'Use "success.fg" instead.',
+              output: '<Box color="success.fg" />'
+            },
+            {
+              desc: 'Use "success.emphasis" instead.',
+              output: '<Box color="success.emphasis" />'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      code: '<Box color="fade.fg10" />',
+      errors: [
+        {
+          message:
+            '"fade.fg10" is deprecated. See https://primer.style/primitives or reach out in the #primer Slack channel to find a suitable replacement.'
+        }
+      ]
+    }
+  ]
 })

src/rules/__tests__/no-deprecated-colors.test.js

@@ -1,9 +1,53 @@
+const deprecations = require('@primer/primitives/dist/deprecations/colors_v2')
+
+const styledSystemColorProps = ['color', 'bg', 'backgroundColor', 'borderColor', 'textShadow', 'boxShadow']
+
 module.exports = {
-  meta: {},
+  meta: {
+    fixable: 'code'
+  },
   create(context) {
     return {
-      CallExpression(node) {
-        context.report({node, message: 'Hello ESLint'})
+      JSXOpeningElement(node) {
+        // TODO: check if jsx element was imported from @primer/components
+
+        for (const attribute of node.attributes) {
+          const propName = attribute.name.name
+          const propValue = attribute.value.value
+
+          if (styledSystemColorProps.includes(propName) && Object.keys(deprecations).includes(propValue)) {
+            const replacement = deprecations[propValue]
+
+            if (replacement === null) {
+              // No replacement
+              context.report({
+                node: attribute.value,
+                message: `"${propValue}" is deprecated. See https://primer.style/primitives or reach out in the #primer Slack channel to find a suitable replacement.`
+              })
+            } else if (Array.isArray(replacement)) {
+              // Multiple possible replacements
+              context.report({
+                node: attribute.value,
+                message: `"${propValue}" is deprecated.`,
+                suggest: replacement.map(replacementValue => ({
+                  desc: `Use "${replacementValue}" instead.`,
+                  fix(fixer) {
+                    return fixer.replaceText(attribute.value, JSON.stringify(replacementValue))
+                  }
+                }))
+              })
+            } else {
+              // One replacement
+              context.report({
+                node: attribute.value,
+                message: `"${propValue}" is deprecated. Use "${replacement}" instead.`,
+                fix(fixer) {
+                  return fixer.replaceText(attribute.value, JSON.stringify(replacement))
+                }
+              })
+            }
+          }
+        }
       }
     }
   }