handle identifiers, add more test cases

Author: siddharthkp

src/rules/__tests__/no-color-css-vars.test.js

@@ -110,8 +110,41 @@ ruleTester.run('no-color-css-vars', rule, {
           message: 'Replace var(--color-canvas-default) with canvas.default'
         }
       ]
+    },
+    {
+      name: 'variable in scope',
+      code: `
+        const baseStyles = { color: 'var(--color-fg-muted)' }
+        export const Fixture = <Button sx={baseStyles}>Test</Button>
+      `,
+      output: `
+        const baseStyles = { color: 'fg.muted' }
+        export const Fixture = <Button sx={baseStyles}>Test</Button>
+      `,
+      errors: [
+        {
+          message: 'Replace var(--color-fg-muted) with fg.muted'
+        }
+      ]
+    },
+    {
+      name: 'merge in sx',
+      code: `
+        import {merge} from '@primer/react'
+        export const Fixture = props => <Button sx={merge({color: 'var(--color-fg-muted)'}, props.sx)}>Test</Button>
+      `,
+      output: `
+        import {merge} from '@primer/react'
+        export const Fixture = props => <Button sx={merge({color: 'fg.muted'}, props.sx)}>Test</Button>
+      `,
+      errors: [
+        {
+          message: 'Replace var(--color-fg-muted) with fg.muted'
+        }
+      ]
     }
     // {
+    //   name: 'variable in styled.component',
     //   code: `
     //     import {sx, SxProp} from '@primer/react'
     //     export const HighlightToken = styled.span<SxProp>\`
@@ -138,15 +171,31 @@ ruleTester.run('no-color-css-vars', rule, {
     //     }
     //   ]
     // },
-
     // {
+    //   name: 'MemberExpression in sx: not handled',
+    //   code: `
+    //     const colors = { muted: 'var(--color-fg-muted)' }
+    //     export const Fixture = <Button sx={colors.muted}>Test</Button>
+    //   `,
+    //   output: `
+    //     const colors = { muted: 'fg.muted' }
+    //     export const Fixture = <Button sx={colors.muted}>Test</Button>
+    //   `,
+    //   errors: [
+    //     {
+    //       message: 'Replace var(--color-fg-muted) with fg.muted'
+    //     }
+    //   ]
+    // },
+    // {
+    //   name: 'CallExpression in sx: not handled',
     //   code: `
-    //     const styles = { color: 'var(--color-fg-muted)' }
-    //     export const Fixture = <Button sx={styles}>Test</Button>
+    //     const getColors = () => 'var(--color-fg-muted)'
+    //     export const Fixture = <Button sx={getColors()}>Test</Button>
     //   `,
     //   output: `
-    //     const styles = { color: 'fg.muted' }
-    //     export const Fixture = <Button sx={styles}>Test</Button>
+    //     const getColors = () => 'fg.muted'
+    //     export const Fixture = <Button sx={getColors()}>Test</Button>
     //   `,
     //   errors: [
     //     {

src/rules/no-color-css-vars.js

@@ -23,6 +23,7 @@ module.exports = {
       }
     ]
   },
+  /** @param {import('eslint').Rule.RuleContext} context */
   create(context) {
     const styledSystemProps = [
       'bg',
@@ -39,10 +40,29 @@ module.exports = {
     ]
 
     return {
+      /** @param {import('eslint').Rule.Node} node */
       JSXAttribute(node) {
         if (node.name.name === 'sx') {
-          const rawText = context.getSourceCode().getText(node.value)
-          checkForVariables(node.value, rawText)
+          if (node.value.expression.type === 'ObjectExpression') {
+            // example: sx={{ color: 'fg.default' }} or sx={{ ':hover': {color: 'fg.default'} }}
+            const rawText = context.sourceCode.getText(node.value)
+            checkForVariables(node.value, rawText)
+          } else if (node.value.expression.type === 'Identifier') {
+            // example: sx={baseStyles}
+            const variableScope = context.sourceCode.getScope(node.value.expression)
+            const variable = variableScope.set.get(node.value.expression.name)
+
+            // if variable is not defined in scope, give up (could be imported from different file)
+            if (!variable) return
+
+            const variableDeclarator = variable.identifiers[0].parent
+            const rawText = context.sourceCode.getText(variableDeclarator)
+            checkForVariables(variableDeclarator, rawText)
+          } else {
+            // worth a try!
+            const rawText = context.sourceCode.getText(node.value)
+            checkForVariables(node.value, rawText)
+          }
         } else if (
           styledSystemProps.includes(node.name.name) &&
           node.value.type === 'Literal' &&