Check nested properties of sx objects

Author: colebemis

package-lock.json

@@ -32,5 +32,8 @@
     "eslint": ">=4.19.0",
     "@primer/primitives": ">=4.6.2"
   },
-  "prettier": "@github/prettier-config"
+  "prettier": "@github/prettier-config",
+  "dependencies": {
+    "eslint-traverse": "^1.0.0"
+  }
 }

package.json

@@ -79,6 +79,15 @@ ruleTester.run('no-deprecated-colors', rule, {
         }
       ]
     },
+    {
+      code: `import {Box} from "@primer/components"; <Box sx={{"&:hover": {bg: "bg.primary"}}} />`,
+      output: `import {Box} from "@primer/components"; <Box sx={{"&:hover": {bg: "canvas.default"}}} />`,
+      errors: [
+        {
+          message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
+        }
+      ]
+    },
     {
       code: `import {Box} from "@primer/components"; <Box color="auto.green.5" />`,
       errors: [

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

@@ -1,4 +1,5 @@
 const deprecations = require('@primer/primitives/dist/deprecations/colors')
+const traverse = require('eslint-traverse')
 
 const styledSystemColorProps = ['color', 'bg', 'backgroundColor', 'borderColor', 'textShadow', 'boxShadow']
 
@@ -25,19 +26,18 @@ module.exports = {
 
           // 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)
+            // Search all properties of the sx object (even nested properties)
+            traverse(context, attribute.value, path => {
+              if (path.node.type === 'Property' && path.node.value.type === 'Literal') {
+                const prop = path.node
+                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