Only update components imported from Primer

Author: colebemis

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

@@ -12,57 +12,92 @@ jest.mock('@primer/primitives/dist/deprecations/colors_v2', () => testDeprecatio
 
 const ruleTester = new RuleTester({
   parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
     ecmaFeatures: {
       jsx: true
     }
   }
 })
 
 ruleTester.run('no-deprecated-colors', rule, {
-  valid: [],
+  valid: [
+    `import {Box} from '@other/design-system'; <Box color="text.primary">Hello</Box>`,
+    `import {Box} from '@primer/components'; <Box color="fg.default">Hello</Box>`
+  ],
   invalid: [
     {
-      code: '<Box color="text.primary" />',
-      output: '<Box color="fg.default" />',
+      code: `import {Box} from '@primer/components'; function Example() { return <Box color="text.primary">Hello</Box> }`,
+      output: `import {Box} from '@primer/components'; function Example() { return <Box color="fg.default">Hello</Box> }`,
       errors: [
         {
           message: '"text.primary" is deprecated. Use "fg.default" instead.'
         }
       ]
     },
     {
-      code: '<Box bg="bg.primary" />',
-      output: '<Box bg="canvas.default" />',
+      code: `import Box from '@primer/components/lib-esm/Box'; function Example() { return <Box color="text.primary">Hello</Box> }`,
+      output: `import Box from '@primer/components/lib-esm/Box'; function Example() { return <Box color="fg.default">Hello</Box> }`,
+      errors: [
+        {
+          message: '"text.primary" is deprecated. Use "fg.default" instead.'
+        }
+      ]
+    },
+    {
+      code: `import {Box} from '@primer/components'; const Example = () => <Box color="text.primary">Hello</Box>`,
+      output: `import {Box} from '@primer/components'; const Example = () => <Box color="fg.default">Hello</Box>`,
+      errors: [
+        {
+          message: '"text.primary" is deprecated. Use "fg.default" instead.'
+        }
+      ]
+    },
+    {
+      code: `import {Box} from '@primer/components'; <Box bg="bg.primary" />`,
+      output: `import {Box} from '@primer/components'; <Box bg="canvas.default" />`,
       errors: [
         {
           message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
         }
       ]
     },
     {
-      code: '<Box color="auto.green.5" />',
+      code: `import {Box} from '@primer/components'; <Box color="auto.green.5" />`,
       errors: [
         {
           message: '"auto.green.5" is deprecated.',
           suggestions: [
             {
               desc: 'Use "success.fg" instead.',
-              output: '<Box color="success.fg" />'
+              output: `import {Box} from '@primer/components'; <Box color="success.fg" />`
             },
             {
               desc: 'Use "success.emphasis" instead.',
-              output: '<Box color="success.emphasis" />'
+              output: `import {Box} from '@primer/components'; <Box color="success.emphasis" />`
             }
           ]
         }
       ]
     },
     {
-      code: '<Box color="fade.fg10" />',
+      code: `import {Box} from '@primer/components'; <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.'
+            '"fade.fg10" is deprecated. Go to https://primer.style/primitives or reach out in the #primer channel on Slack to find a suitable replacement.'
+        }
+      ]
+    },
+    {
+      code: `import {Box, Text} from '@primer/components'; <Box bg="bg.primary"><Text color="text.primary">Hello</Text></Box>`,
+      output: `import {Box, Text} from '@primer/components'; <Box bg="canvas.default"><Text color="fg.default">Hello</Text></Box>`,
+      errors: [
+        {
+          message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
+        },
+        {
+          message: '"text.primary" is deprecated. Use "fg.default" instead.'
         }
       ]
     }

src/rules/no-deprecated-colors.js

@@ -8,11 +8,17 @@ module.exports = {
   },
   create(context) {
     return {
-      // TODO: check get() and themeGet()
       JSXOpeningElement(node) {
-        // TODO: check if jsx element was imported from @primer/components
+        // Skip if component was not imported from @primer/components
+        if (!isImportedFrom(/^@primer\/components/, node.name, context.getScope(node))) {
+          return
+        }
 
         for (const attribute of node.attributes) {
+          if (!attribute.name || !attribute.value) {
+            continue
+          }
+
           const propName = attribute.name.name
           const propValue = attribute.value.value
 
@@ -54,3 +60,30 @@ module.exports = {
     }
   }
 }
+
+/**
+ * Get the variable declaration for the given identifier
+ */
+function getVariableDeclaration(scope, identifier) {
+  if (scope === null) {
+    return null
+  }
+
+  for (const variable of scope.variables) {
+    if (variable.name === identifier.name) {
+      return variable.defs[0]
+    }
+  }
+
+  return getVariableDeclaration(scope.upper, identifier)
+}
+
+/**
+ * Check if the given identifier is imported from the given module
+ */
+function isImportedFrom(moduleRegex, identifier, scope) {
+  const definition = getVariableDeclaration(scope, identifier)
+
+  // Return true if the variable was imported from the given module
+  return definition && definition.type == 'ImportBinding' && moduleRegex.test(definition.parent.source.value)
+}