Add skip import check

Author: SferaDev

docs/rules/no-system-props.md

@@ -1,4 +1,4 @@
-# Disallow use of styled-system props (no-system-colors)
+# Disallow use of styled-system props (no-system-props)
 
 🔧 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.
 
@@ -41,6 +41,10 @@ import {Avatar} from 'some-other-library'
 
 ## Options
 
+- `skipImportCheck` (default: `false`)
+
+  By default, the `no-system-props` rule will only check for styled system props 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 styled system props down to Primer React components.
+
 - `includeUtilityComponents` (default: `false`)
 
   By default, `Box` and `Text` are excluded because styled system props are not deprecated in our utility components. If you prefer to avoid styled system props there as well for consistency, you can set `includeUtilityComponents` to `true`.

src/rules/no-system-props.js

@@ -1,6 +1,6 @@
-const {isPrimerComponent} = require('../utils/is-primer-component')
-const {pick} = require('@styled-system/props')
-const {some, last} = require('lodash')
+const { isPrimerComponent } = require('../utils/is-primer-component')
+const { pick } = require('@styled-system/props')
+const { some, last } = require('lodash')
 
 // Components for which we allow all styled system props
 const alwaysExcludedComponents = new Set([
@@ -29,6 +29,9 @@ module.exports = {
     schema: [
       {
         properties: {
+          skipImportCheck: {
+            type: 'boolean'
+          },
           includeUtilityComponents: {
             type: 'boolean'
           }
@@ -40,6 +43,10 @@ module.exports = {
     }
   },
   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
+
     const includeUtilityComponents = context.options[0] ? context.options[0].includeUtilityComponents : false
 
     const excludedComponents = new Set([
@@ -49,7 +56,7 @@ module.exports = {
 
     return {
       JSXOpeningElement(jsxNode) {
-        if (!isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) return
+        if (!skipImportCheck && !isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) return
         if (excludedComponents.has(jsxNode.name.name)) return
 
         // Create an object mapping from prop name to the AST node for that attribute
@@ -65,7 +72,7 @@ module.exports = {
         // Create an array of system prop attribute nodes
         let systemProps = Object.values(pick(propsByNameObject))
 
-        let excludedProps = excludedComponentProps.has(jsxNode.name.name)
+        const excludedProps = excludedComponentProps.has(jsxNode.name.name)
           ? new Set([...alwaysExcludedProps, ...excludedComponentProps.get(jsxNode.name.name)])
           : alwaysExcludedProps
 
@@ -100,15 +107,15 @@ module.exports = {
                 ...systemProps.map(node => fixer.remove(node)),
                 ...(stylesToAdd.size > 0
                   ? [
-                      existingSxProp
-                        ? // Update an existing sx prop
-                          fixer.insertTextAfter(
-                            last(existingSxProp.value.expression.properties),
-                            `, ${objectEntriesStringFromStylesMap(stylesToAdd)}`
-                          )
-                        : // Insert new sx prop
-                          fixer.insertTextAfter(last(jsxNode.attributes), sxPropTextFromStylesMap(systemPropstylesMap))
-                    ]
+                    existingSxProp
+                      ? // Update an existing sx prop
+                      fixer.insertTextAfter(
+                        last(existingSxProp.value.expression.properties),
+                        `, ${objectEntriesStringFromStylesMap(stylesToAdd)}`
+                      )
+                      : // Insert new sx prop
+                      fixer.insertTextAfter(last(jsxNode.attributes), sxPropTextFromStylesMap(systemPropstylesMap))
+                  ]
                   : [])
               ]
             }
@@ -143,12 +150,12 @@ const excludeSxEntriesFromStyleMap = (stylesMap, sxProp) => {
   if (
     !sxProp.value ||
     sxProp.value.type !== 'JSXExpressionContainer' ||
-    sxProp.value.expression.type != 'ObjectExpression'
+    sxProp.value.expression.type !== 'ObjectExpression'
   ) {
     return stylesMap
   }
   return new Map(
-    [...stylesMap].filter(([key, _value]) => {
+    [...stylesMap].filter(([key]) => {
       return !some(sxProp.value.expression.properties, p => p.type === 'Property' && p.key.name === key)
     })
   )