Merge pull request #7 from primer/check-import-option

[no-deprecated-colors] Add `skipImportCheck` option

Author: colebemis

.changeset/curly-carrots-tickle.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-primer-react": patch
+---
+
+Add `skipImportCheck` option. By default, the `no-deprecated-colors` rule will only check for deprecated colors used in functions and components that are imported from `@primer/components`. You can disable this behavior by setting `skipImportCheck` to `true`. This is useful for linting custom components that pass color-related props down to Primer React components.

docs/rules/no-deprecated-colors.md

@@ -2,13 +2,12 @@
 
 🔧 The `--fix` option on the [ESLint CLI](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
 
-[Theming](https://primer.style/react/theming) in Primer React is made possible by a theme object that defines your application's colors, spacing, fonts, and more. The color variables in Primer React's [default theme object](https://primer.style/react/theme-reference) are pulled from [Primer Primitives](https://github.com/primer/primitives). When a color variable is deprecated in Primer Primitives, it's important to remove references to that color variable in your application before it's removed from the library.   
+[Theming](https://primer.style/react/theming) in Primer React is made possible by a theme object that defines your application's colors, spacing, fonts, and more. The color variables in Primer React's [default theme object](https://primer.style/react/theme-reference) are pulled from [Primer Primitives](https://github.com/primer/primitives). When a color variable is deprecated in Primer Primitives, it's important to remove references to that color variable in your application before it's removed from the library.
 
 ## Rule details
 
 This rule disallows references to color variables that are deprecated in [Primer Primitives](https://github.com/primer/primitives).
 
-
 👎 Examples of **incorrect** code for this rule:
 
 ```jsx
@@ -21,7 +20,7 @@ const SystemPropExample() = () => <Box color="some.deprecated.color">Incorrect</
 const SxPropExample() = () => <Box sx={{color: 'some.deprecated.color'}}>Incorrect</Box>
 
 const ThemeGetExample = styled.div`
-  color: ${themeGet('some.deprecated.color')};
+  color: ${themeGet('colors.some.deprecated.color')};
 `
 ```
 
@@ -37,6 +36,17 @@ const SystemPropExample() = () => <Box color="some.color">Incorrect</Box>
 const SxPropExample() = () => <Box sx={{color: 'some.color'}}>Incorrect</Box>
 
 const ThemeGetExample = styled.div`
-  color: ${themeGet('some.color')};
+  color: ${themeGet('colors.some.color')};
 `
 ```
+
+## Options
+
+- `skipImportCheck` (default: `false`)
+
+  By default, the `no-deprecated-colors` rule will only check for deprecated colors used in functions and components that are imported from `@primer/components`. You can disable this behavior by setting `skipImportCheck` to `true`. This is useful for linting custom components that pass color-related props down to Primer React components.
+
+
+  ```
+  "primer-react/no-deprecated-colors": ["warn", {"skipImportCheck": true}]
+  ```

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

@@ -43,6 +43,16 @@ ruleTester.run('no-deprecated-colors', rule, {
         }
       ]
     },
+    {
+      code: `import {Box} from "../components"; function Example() { return <Box color="text.primary">Hello</Box> }`,
+      output: `import {Box} from "../components"; function Example() { return <Box color="fg.default">Hello</Box> }`,
+      options: [{skipImportCheck: true}],
+      errors: [
+        {
+          message: '"text.primary" is deprecated. Use "fg.default" instead.'
+        }
+      ]
+    },
     {
       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> }`,

src/rules/no-deprecated-colors.js

@@ -6,13 +6,28 @@ const styledSystemColorProps = ['color', 'bg', 'backgroundColor', 'borderColor',
 module.exports = {
   meta: {
     type: 'suggestion',
-    fixable: 'code'
+    fixable: 'code',
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          skipImportCheck: {
+            type: 'boolean'
+          }
+        },
+        additionalProperties: false
+      }
+    ]
   },
   create(context) {
+    // If `skipImportCheck` is true, this rule will check for deprecated colors
+    // used in any components (not just ones that are imported from `@primer/components`).
+    const skipImportCheck = context.options[0] ? context.options[0].skipImportCheck : false
+
     return {
       JSXOpeningElement(node) {
         // Skip if component was not imported from @primer/components
-        if (!isPrimerComponent(node.name, context.getScope(node))) {
+        if (!skipImportCheck && !isPrimerComponent(node.name, context.getScope(node))) {
           return
         }
 
@@ -77,7 +92,10 @@ module.exports = {
       CallExpression(node) {
         // 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))) {
+        if (
+          !isThemeGet(node.callee, context.getScope(node), skipImportCheck) &&
+          !isGet(node.callee, context.getScope(node))
+        ) {
           return
         }
 
@@ -123,11 +141,17 @@ function isPrimerComponent(identifier, scope) {
   return isImportedFrom(/^@primer\/components/, identifier, scope)
 }
 
-function isThemeGet(identifier, scope) {
-  return isImportedFrom(/^@primer\/components/, identifier, scope) && identifier.name === 'themeGet'
+function isThemeGet(identifier, scope, skipImportCheck = false) {
+  if (!skipImportCheck) {
+    return isImportedFrom(/^@primer\/components/, identifier, scope) && identifier.name === 'themeGet'
+  }
+
+  return identifier.name === 'themeGet'
 }
 
+// `get` is the internal version of `themeGet` that's used in the primer/react repository.
 function isGet(identifier, scope) {
+  // This is a flaky way to check for the `get` function and should probably be improved.
   return isImportedFrom(/^\.\.?\/constants$/, identifier, scope) && identifier.name === 'get'
 }