Handle sx prop

Author: colebemis

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

@@ -28,7 +28,10 @@ ruleTester.run('no-deprecated-colors', rule, {
     `import {hello} from "@primer/components"; hello("colors.text.primary")`,
     `import {themeGet} from "@primer/components"; themeGet("space.text.primary")`,
     `import {themeGet} from "@other/design-system"; themeGet("colors.text.primary")`,
-    `import {get} from "@other/constants"; get("space.text.primary")`
+    `import {get} from "@other/constants"; get("space.text.primary")`,
+    `import {Box} from '@primer/components'; <Box sx={styles}>Hello</Box>`,
+    `import {Box} from '@primer/components'; <Box sx={{color: text.primary}}>Hello</Box>`,
+    `import {Box} from '@primer/components'; <Box sx={{color: "fg.default"}}>Hello</Box>`
   ],
   invalid: [
     {
@@ -67,6 +70,15 @@ ruleTester.run('no-deprecated-colors', rule, {
         }
       ]
     },
+    {
+      code: `import {Box} from "@primer/components"; <Box sx={{bg: "bg.primary", m: 1, ...rest}} />`,
+      output: `import {Box} from "@primer/components"; <Box sx={{bg: "canvas.default", m: 1, ...rest}} />`,
+      errors: [
+        {
+          message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
+        }
+      ]
+    },
     {
       code: `import {Box} from "@primer/components"; <Box color="auto.green.5" />`,
       errors: [

src/rules/no-deprecated-colors.js

@@ -22,7 +22,22 @@ module.exports = {
           const propName = attribute.name.name
           const propValue = attribute.value.value
 
-          // TODO: handle sx prop
+          // Check for the sx prop
+          if (propName === 'sx' && attribute.value.expression.type === 'ObjectExpression') {
+            // Ignore non-literal properties
+            const sxProperties = attribute.value.expression.properties.filter(
+              property => property.type === 'Property' && property.value.type === 'Literal'
+            )
+
+            for (const prop of sxProperties) {
+              const propName = prop.key.name
+              const propValue = prop.value.value
+
+              if (styledSystemColorProps.includes(propName) && Object.keys(deprecations).includes(propValue)) {
+                replaceDeprecatedColor(context, prop.value, propValue)
+              }
+            }
+          }
 
           // Check if styled-system color prop is using a deprecated color
           if (styledSystemColorProps.includes(propName) && Object.keys(deprecations).includes(propValue)) {
@@ -31,7 +46,8 @@ module.exports = {
         }
       },
       CallExpression(node) {
-        // Skip if not `themeGet` or `get` function
+        // Skip if not calling the `themeGet` or `get` function
+        // `get` is the internal version of `themeGet` that's used in the primer/react repository
         if (!isThemeGet(node.callee, context.getScope(node)) && !isGet(node.callee, context.getScope(node))) {
           return
         }
@@ -86,35 +102,36 @@ function isGet(identifier, scope) {
   return isImportedFrom(/^\.\.?\/constants$/, identifier, scope) && identifier.name === 'get'
 }
 
-function replaceDeprecatedColor(context, node, deprecatedName, transformName = str => str) {
+function replaceDeprecatedColor(context, node, deprecatedName, getDisplayName = str => str) {
   const replacement = deprecations[deprecatedName]
-  const transformedDeprecatedName = transformName(deprecatedName)
 
   if (replacement === null) {
     // No replacement
     context.report({
       node,
-      message: `"${transformedDeprecatedName}" is deprecated. Go to https://primer.style/primitives or reach out in the #primer channel on Slack to find a suitable replacement.`
+      message: `"${getDisplayName(
+        deprecatedName
+      )}" is deprecated. Go to https://primer.style/primitives or reach out in the #primer channel on Slack to find a suitable replacement.`
     })
   } else if (Array.isArray(replacement)) {
     // Multiple possible replacements
     context.report({
       node,
-      message: `"${transformedDeprecatedName}" is deprecated.`,
+      message: `"${getDisplayName(deprecatedName)}" is deprecated.`,
       suggest: replacement.map(replacementValue => ({
-        desc: `Use "${transformName(replacementValue)}" instead.`,
+        desc: `Use "${getDisplayName(replacementValue)}" instead.`,
         fix(fixer) {
-          return fixer.replaceText(node, JSON.stringify(transformName(replacementValue)))
+          return fixer.replaceText(node, JSON.stringify(getDisplayName(replacementValue)))
         }
       }))
     })
   } else {
     // One replacement
     context.report({
       node,
-      message: `"${transformedDeprecatedName}" is deprecated. Use "${transformName(replacement)}" instead.`,
+      message: `"${getDisplayName(deprecatedName)}" is deprecated. Use "${getDisplayName(replacement)}" instead.`,
       fix(fixer) {
-        return fixer.replaceText(node, JSON.stringify(transformName(replacement)))
+        return fixer.replaceText(node, JSON.stringify(getDisplayName(replacement)))
       }
     })
   }