From af4935f4408094df1d6d3621982b45619242e342 Mon Sep 17 00:00:00 2001
From: Jonathan Fuchs <jfuchs@github.com>
Date: Tue, 28 Sep 2021 16:36:39 -0700
Subject: [PATCH 01/12] Adds a no-system-props rule

---
 const styledSystemAttributes = ['width',.js |  24 ++++
 docs/rules/no-system-props.md               |   0
 package-lock.json                           | 137 +++++++++++++++++++-
 package.json                                |   4 +-
 src/configs/recommended.js                  |   3 +-
 src/index.js                                |   3 +-
 src/rules/__tests__/no-system-props.test.js | 104 +++++++++++++++
 src/rules/no-deprecated-colors.js           |  36 +----
 src/rules/no-system-props.js                |  83 ++++++++++++
 src/utils/getVariableDeclaration.js         |  17 +++
 src/utils/isImportedFrom.js                 |  12 ++
 src/utils/isPrimerComponent.js              |   6 +
 12 files changed, 393 insertions(+), 36 deletions(-)
 create mode 100644 const styledSystemAttributes = ['width',.js
 create mode 100644 docs/rules/no-system-props.md
 create mode 100644 src/rules/__tests__/no-system-props.test.js
 create mode 100644 src/rules/no-system-props.js
 create mode 100644 src/utils/getVariableDeclaration.js
 create mode 100644 src/utils/isImportedFrom.js
 create mode 100644 src/utils/isPrimerComponent.js

diff --git a/const styledSystemAttributes = ['width',.js b/const styledSystemAttributes = ['width',.js
new file mode 100644
index 00000000..66dd6c30
--- /dev/null
+++ b/const styledSystemAttributes = ['width',.js	
@@ -0,0 +1,24 @@
+const styledSystemAttributes = ['width', 'height']
+
+export default function(context) {
+  return {
+    JSXOpeningElement(node) {
+      console.log(node.attributes)
+
+      const systemAttributeNodes = node.attributes.filter(attribute => {
+        return styledSystemAttributes.indexOf(attribute.name) !== -1
+      })
+
+      if (systemAttributeNodes.length !== 0) {
+        context.report({
+          node,
+          message: `Styled-system attributes are deprecated (${attributes.map(a => a.name)})`,
+        })
+
+        // fix(fixer) {
+
+        // }
+      }
+    }
+  };
+};
diff --git a/docs/rules/no-system-props.md b/docs/rules/no-system-props.md
new file mode 100644
index 00000000..e69de29b
diff --git a/package-lock.json b/package-lock.json
index c7e5ecd3..da6c4092 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1309,6 +1309,116 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "@styled-system/background": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/background/-/background-5.1.2.tgz",
+      "integrity": "sha512-jtwH2C/U6ssuGSvwTN3ri/IyjdHb8W9X/g8Y0JLcrH02G+BW3OS8kZdHphF1/YyRklnrKrBT2ngwGUK6aqqV3A==",
+      "requires": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "@styled-system/border": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@styled-system/border/-/border-5.1.5.tgz",
+      "integrity": "sha512-JvddhNrnhGigtzWRCVuAHepniyVi6hBlimxWDVAdcTuk7aRn9BYJUwfHslURtwYFsF5FoEs8Zmr1oZq2M1AP0A==",
+      "requires": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "@styled-system/color": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/color/-/color-5.1.2.tgz",
+      "integrity": "sha512-1kCkeKDZkt4GYkuFNKc7vJQMcOmTl3bJY3YBUs7fCNM6mMYJeT1pViQ2LwBSBJytj3AB0o4IdLBoepgSgGl5MA==",
+      "requires": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "@styled-system/core": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/core/-/core-5.1.2.tgz",
+      "integrity": "sha512-XclBDdNIy7OPOsN4HBsawG2eiWfCcuFt6gxKn1x4QfMIgeO6TOlA2pZZ5GWZtIhCUqEPTgIBta6JXsGyCkLBYw==",
+      "requires": {
+        "object-assign": "^4.1.1"
+      }
+    },
+    "@styled-system/css": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@styled-system/css/-/css-5.1.5.tgz",
+      "integrity": "sha512-XkORZdS5kypzcBotAMPBoeckDs9aSZVkvrAlq5K3xP8IMAUek+x2O4NtwoSgkYkWWzVBu6DGdFZLR790QWGG+A=="
+    },
+    "@styled-system/flexbox": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/flexbox/-/flexbox-5.1.2.tgz",
+      "integrity": "sha512-6hHV52+eUk654Y1J2v77B8iLeBNtc+SA3R4necsu2VVinSD7+XY5PCCEzBFaWs42dtOEDIa2lMrgL0YBC01mDQ==",
+      "requires": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "@styled-system/grid": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/grid/-/grid-5.1.2.tgz",
+      "integrity": "sha512-K3YiV1KyHHzgdNuNlaw8oW2ktMuGga99o1e/NAfTEi5Zsa7JXxzwEnVSDSBdJC+z6R8WYTCYRQC6bkVFcvdTeg==",
+      "requires": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "@styled-system/layout": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/layout/-/layout-5.1.2.tgz",
+      "integrity": "sha512-wUhkMBqSeacPFhoE9S6UF3fsMEKFv91gF4AdDWp0Aym1yeMPpqz9l9qS/6vjSsDPF7zOb5cOKC3tcKKOMuDCPw==",
+      "requires": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "@styled-system/position": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/position/-/position-5.1.2.tgz",
+      "integrity": "sha512-60IZfMXEOOZe3l1mCu6sj/2NAyUmES2kR9Kzp7s2D3P4qKsZWxD1Se1+wJvevb+1TP+ZMkGPEYYXRyU8M1aF5A==",
+      "requires": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "@styled-system/props": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@styled-system/props/-/props-5.1.5.tgz",
+      "integrity": "sha512-FXhbzq2KueZpGaHxaDm8dowIEWqIMcgsKs6tBl6Y6S0njG9vC8dBMI6WSLDnzMoSqIX3nSKHmOmpzpoihdDewg==",
+      "requires": {
+        "styled-system": "^5.1.5"
+      }
+    },
+    "@styled-system/shadow": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/shadow/-/shadow-5.1.2.tgz",
+      "integrity": "sha512-wqniqYb7XuZM7K7C0d1Euxc4eGtqEe/lvM0WjuAFsQVImiq6KGT7s7is+0bNI8O4Dwg27jyu4Lfqo/oIQXNzAg==",
+      "requires": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "@styled-system/space": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/space/-/space-5.1.2.tgz",
+      "integrity": "sha512-+zzYpR8uvfhcAbaPXhH8QgDAV//flxqxSjHiS9cDFQQUSznXMQmxJegbhcdEF7/eNnJgHeIXv1jmny78kipgBA==",
+      "requires": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "@styled-system/typography": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/typography/-/typography-5.1.2.tgz",
+      "integrity": "sha512-BxbVUnN8N7hJ4aaPOd7wEsudeT7CxarR+2hns8XCX1zp0DFfbWw4xYa/olA0oQaqx7F1hzDg+eRaGzAJbF+jOg==",
+      "requires": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "@styled-system/variant": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@styled-system/variant/-/variant-5.1.5.tgz",
+      "integrity": "sha512-Yn8hXAFoWIro8+Q5J8YJd/mP85Teiut3fsGVR9CAxwgNfIAiqlYxsk5iHU7VHJks/0KjL4ATSjmbtCDC/4l1qw==",
+      "requires": {
+        "@styled-system/core": "^5.1.2",
+        "@styled-system/css": "^5.1.5"
+      }
+    },
     "@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -4129,6 +4239,11 @@
       "integrity": "sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==",
       "dev": true
     },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -4949,6 +5064,26 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
+    "styled-system": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-5.1.5.tgz",
+      "integrity": "sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A==",
+      "requires": {
+        "@styled-system/background": "^5.1.2",
+        "@styled-system/border": "^5.1.5",
+        "@styled-system/color": "^5.1.2",
+        "@styled-system/core": "^5.1.2",
+        "@styled-system/flexbox": "^5.1.2",
+        "@styled-system/grid": "^5.1.2",
+        "@styled-system/layout": "^5.1.2",
+        "@styled-system/position": "^5.1.2",
+        "@styled-system/shadow": "^5.1.2",
+        "@styled-system/space": "^5.1.2",
+        "@styled-system/typography": "^5.1.2",
+        "@styled-system/variant": "^5.1.5",
+        "object-assign": "^4.1.1"
+      }
+    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
diff --git a/package.json b/package.json
index bd1ce8aa..16fa591a 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,8 @@
   },
   "prettier": "@github/prettier-config",
   "dependencies": {
-    "eslint-traverse": "^1.0.0"
+    "@styled-system/props": "^5.1.5",
+    "eslint-traverse": "^1.0.0",
+    "styled-system": "^5.1.5"
   }
 }
diff --git a/src/configs/recommended.js b/src/configs/recommended.js
index 81cf6e25..312652f1 100644
--- a/src/configs/recommended.js
+++ b/src/configs/recommended.js
@@ -7,6 +7,7 @@ module.exports = {
   },
   plugins: ['primer-react'],
   rules: {
-    'primer-react/no-deprecated-colors': 'warn'
+    'primer-react/no-deprecated-colors': 'warn',
+    'primer-react/no-system-props': 'warn'
   }
 }
diff --git a/src/index.js b/src/index.js
index 23ded67a..b3714491 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
 module.exports = {
   rules: {
-    'no-deprecated-colors': require('./rules/no-deprecated-colors')
+    'no-deprecated-colors': require('./rules/no-deprecated-colors'),
+    'no-system-props': require('./rules/no-system-props')
   },
   configs: {
     recommended: require('./configs/recommended')
diff --git a/src/rules/__tests__/no-system-props.test.js b/src/rules/__tests__/no-system-props.test.js
new file mode 100644
index 00000000..0494eeb4
--- /dev/null
+++ b/src/rules/__tests__/no-system-props.test.js
@@ -0,0 +1,104 @@
+const rule = require('../no-system-props')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  }
+})
+
+ruleTester.run('no-system-props', rule, {
+  valid: [
+    `import {Button} from '@primer/components'; <Button sx={{width: 200}} />`,
+    `import {Button} from 'coles-cool-design-system'; <Button width={200} />`,
+    `import {Button} from '@primer/components'; <Button someOtherProp="foo" />`,
+    `import {Box} from '@primer/components'; <Box width={200} />`,
+    `import {TextInput} from '@primer/components'; <TextInput width={200} />`
+  ],
+  invalid: [
+    {
+      code: `import {Button} from '@primer/components'; <Button width={200} />`,
+      output: `import {Button} from '@primer/components'; <Button sx={{width: 200}} />`,
+      errors: [
+        {
+          messageId: 'noSystemProps',
+          data: {propNames: 'width'}
+        }
+      ]
+    },
+    {
+      code: `import {Button} from '@primer/components'; <Button width="200" />`,
+      output: `import {Button} from '@primer/components'; <Button sx={{width: "200"}} />`,
+      errors: [
+        {
+          messageId: 'noSystemProps',
+          data: {propNames: 'width'}
+        }
+      ]
+    },
+    {
+      code: `import {Button} from '@primer/components'; <Button width={"200"} />`,
+      output: `import {Button} from '@primer/components'; <Button sx={{width: "200"}} />`,
+      errors: [
+        {
+          messageId: 'noSystemProps',
+          data: {propNames: 'width'}
+        }
+      ]
+    },
+    {
+      code: `import {Button} from '@primer/components'; <Button width={myWidth} />`,
+      output: `import {Button} from '@primer/components'; <Button sx={{width: myWidth}} />`,
+      errors: [
+        {
+          messageId: 'noSystemProps',
+          data: {propNames: 'width'}
+        }
+      ]
+    },
+    {
+      code: `import {Button} from '@primer/components'; <Button width={200} height={200} />`,
+      output: `import {Button} from '@primer/components'; <Button  sx={{width: 200, height: 200}} />`,
+      errors: [
+        {
+          messageId: 'noSystemProps',
+          data: {propNames: 'width, height'}
+        }
+      ]
+    },
+    {
+      code: `import {Button} from '@primer/components'; <Button width={200} sx={{height: 200}} />`,
+      output: `import {Button} from '@primer/components'; <Button  sx={{width: 200, height: 200}} />`,
+      errors: [
+        {
+          messageId: 'noSystemProps',
+          data: {propNames: 'width'}
+        }
+      ]
+    },
+    {
+      code: `import {Button} from '@primer/components'; <Button width={200} sx={{width: 300}} />`,
+      output: `import {Button} from '@primer/components'; <Button  sx={{width: 300}} />`,
+      errors: [
+        {
+          messageId: 'noSystemProps',
+          data: {propNames: 'width'}
+        }
+      ]
+    },
+    {
+      code: `import {Button} from '@primer/components'; <Button width={200} sx={myStylez} />`,
+      output: `import {Button} from '@primer/components'; <Button width={200} sx={myStylez} />`,
+      errors: [
+        {
+          messageId: 'noSystemProps',
+          data: {propNames: 'width'}
+        }
+      ]
+    }
+  ]
+})
diff --git a/src/rules/no-deprecated-colors.js b/src/rules/no-deprecated-colors.js
index c4509ced..d3b77f1c 100644
--- a/src/rules/no-deprecated-colors.js
+++ b/src/rules/no-deprecated-colors.js
@@ -1,5 +1,8 @@
 const deprecations = require('@primer/primitives/dist/deprecations/colors')
 const traverse = require('eslint-traverse')
+const {isImportedFrom} = require('../utils/isImportedFrom')
+const {isPrimerComponent} = require('../utils/isPrimerComponent')
+const {getVariableDeclaration} = require('../utils/getVariableDeclaration')
 
 const styledSystemColorProps = ['color', 'bg', 'backgroundColor', 'borderColor', 'textShadow', 'boxShadow']
 
@@ -125,37 +128,6 @@ 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)
-}
-
-function isPrimerComponent(identifier, scope) {
-  return isImportedFrom(/^@primer\/components/, identifier, scope)
-}
-
 function isThemeGet(identifier, scope, skipImportCheck = false) {
   if (!skipImportCheck) {
     return isImportedFrom(/^@primer\/components/, identifier, scope) && identifier.name === 'themeGet'
@@ -205,7 +177,7 @@ function replaceDeprecatedColor(
       node,
       message: `"${transformName(deprecatedName)}" is deprecated. Use "${transformName(replacement)}" instead.`,
       fix(fixer) {
-        return fixer.replaceText(node, transformReplacementValue(transformName(replacement)))
+        // return fixer.replaceText(node, transformReplacementValue(transformName(replacement)))
       }
     })
   }
diff --git a/src/rules/no-system-props.js b/src/rules/no-system-props.js
new file mode 100644
index 00000000..572198ce
--- /dev/null
+++ b/src/rules/no-system-props.js
@@ -0,0 +1,83 @@
+const {isPrimerComponent} = require('../utils/isPrimerComponent')
+const {pick} = require('@styled-system/props')
+
+// Components for which we allow all styled system props
+const excludedComponents = new Set(['Box', 'Text'])
+
+// Components for which we allow a set of prop names
+const excludedComponentProps = new Map([['ProgressBar', new Set(['bg'])]])
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    fixable: 'code',
+    schema: [],
+    messages: {
+      noSystemProps: 'Styled-system props are deprecated ({{ propNames }})'
+    }
+  },
+  create(context) {
+    return {
+      JSXOpeningElement(jsxNode) {
+        if (!isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) return
+        if (excludedComponents.has(jsxNode.name.name)) return
+
+        const propsByNameMap = jsxNode.attributes.reduce((prev, cur) => {
+          prev[cur.name.name] = cur
+          return prev
+        }, {})
+
+        let badProps = Object.values(pick(propsByNameMap))
+
+        badProps = badProps.filter(prop => {
+          const excludedProps = excludedComponentProps.get(jsxNode.name.name)
+          if (!excludedProps) {
+            return true
+          }
+          return !excludedProps.has(prop.name.name)
+        })
+
+        if (badProps.length !== 0) {
+          context.report({
+            node: jsxNode,
+            messageId: 'noSystemProps',
+            data: {
+              propNames: badProps.map(a => a.name.name).join(', ')
+            },
+            fix(fixer) {
+              const existingSxProp = jsxNode.attributes.find(attribute => attribute.name.name === 'sx')
+              const badPropStylesMap = stylesMapFromPropNodes(badProps, context)
+              if (existingSxProp && existingSxProp.value.expression.type !== 'ObjectExpression') {
+                return
+              }
+              return [
+                ...badProps.map(node => fixer.remove(node)),
+                existingSxProp
+                  ? fixer.replaceText(
+                      existingSxProp,
+                      sxPropTextFromStylesMap(new Map([...badPropStylesMap, ...stylesMapfromSxProp(existingSxProp)]))
+                    )
+                  : fixer.insertTextAfter(
+                      jsxNode.attributes[jsxNode.attributes.length - 1],
+                      sxPropTextFromStylesMap(badPropStylesMap)
+                    )
+              ]
+            }
+          })
+        }
+      }
+    }
+  }
+}
+
+const sxPropTextFromStylesMap = styles => {
+  return `sx={{${[...styles].map(([name, value]) => `${name}: ${value}`).join(', ')}}}`
+}
+
+const stylesMapfromSxProp = sxProp => {
+  return new Map(sxProp.value.expression.properties.map(prop => [prop.key.name, prop.value.raw]))
+}
+
+const stylesMapFromPropNodes = (badProps, context) => {
+  return new Map(badProps.map(a => [a.name.name, a.value.raw ?? context.getSourceCode().getText(a.value.expression)]))
+}
diff --git a/src/utils/getVariableDeclaration.js b/src/utils/getVariableDeclaration.js
new file mode 100644
index 00000000..1ad057dd
--- /dev/null
+++ b/src/utils/getVariableDeclaration.js
@@ -0,0 +1,17 @@
+/**
+ * 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)
+}
+exports.getVariableDeclaration = getVariableDeclaration
diff --git a/src/utils/isImportedFrom.js b/src/utils/isImportedFrom.js
new file mode 100644
index 00000000..1fa06788
--- /dev/null
+++ b/src/utils/isImportedFrom.js
@@ -0,0 +1,12 @@
+const {getVariableDeclaration} = require('./getVariableDeclaration')
+
+/**
+ * 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)
+}
+exports.isImportedFrom = isImportedFrom
diff --git a/src/utils/isPrimerComponent.js b/src/utils/isPrimerComponent.js
new file mode 100644
index 00000000..2b33a752
--- /dev/null
+++ b/src/utils/isPrimerComponent.js
@@ -0,0 +1,6 @@
+const {isImportedFrom} = require('./isImportedFrom')
+
+function isPrimerComponent(identifier, scope) {
+  return isImportedFrom(/^@primer\/components/, identifier, scope)
+}
+exports.isPrimerComponent = isPrimerComponent

From fbc35d204780cab1630161e70e634a2c82cd1a8b Mon Sep 17 00:00:00 2001
From: Jonathan Fuchs <jfuchs@github.com>
Date: Tue, 28 Sep 2021 16:39:49 -0700
Subject: [PATCH 02/12] fixup

---
 src/rules/no-system-props.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/rules/no-system-props.js b/src/rules/no-system-props.js
index 572198ce..1d45967a 100644
--- a/src/rules/no-system-props.js
+++ b/src/rules/no-system-props.js
@@ -79,5 +79,5 @@ const stylesMapfromSxProp = sxProp => {
 }
 
 const stylesMapFromPropNodes = (badProps, context) => {
-  return new Map(badProps.map(a => [a.name.name, a.value.raw ?? context.getSourceCode().getText(a.value.expression)]))
+  return new Map(badProps.map(a => [a.name.name, a.value.raw || context.getSourceCode().getText(a.value.expression)]))
 }

From 1765eb9254679eee2e31ca81025b39acdd3dc01b Mon Sep 17 00:00:00 2001
From: Jonathan Fuchs <jfuchs@github.com>
Date: Tue, 28 Sep 2021 16:48:13 -0700
Subject: [PATCH 03/12] fixup

---
 const styledSystemAttributes = ['width',.js | 24 ---------------------
 src/rules/no-deprecated-colors.js           |  3 +--
 2 files changed, 1 insertion(+), 26 deletions(-)
 delete mode 100644 const styledSystemAttributes = ['width',.js

diff --git a/const styledSystemAttributes = ['width',.js b/const styledSystemAttributes = ['width',.js
deleted file mode 100644
index 66dd6c30..00000000
--- a/const styledSystemAttributes = ['width',.js	
+++ /dev/null
@@ -1,24 +0,0 @@
-const styledSystemAttributes = ['width', 'height']
-
-export default function(context) {
-  return {
-    JSXOpeningElement(node) {
-      console.log(node.attributes)
-
-      const systemAttributeNodes = node.attributes.filter(attribute => {
-        return styledSystemAttributes.indexOf(attribute.name) !== -1
-      })
-
-      if (systemAttributeNodes.length !== 0) {
-        context.report({
-          node,
-          message: `Styled-system attributes are deprecated (${attributes.map(a => a.name)})`,
-        })
-
-        // fix(fixer) {
-
-        // }
-      }
-    }
-  };
-};
diff --git a/src/rules/no-deprecated-colors.js b/src/rules/no-deprecated-colors.js
index d3b77f1c..a1791dae 100644
--- a/src/rules/no-deprecated-colors.js
+++ b/src/rules/no-deprecated-colors.js
@@ -2,7 +2,6 @@ const deprecations = require('@primer/primitives/dist/deprecations/colors')
 const traverse = require('eslint-traverse')
 const {isImportedFrom} = require('../utils/isImportedFrom')
 const {isPrimerComponent} = require('../utils/isPrimerComponent')
-const {getVariableDeclaration} = require('../utils/getVariableDeclaration')
 
 const styledSystemColorProps = ['color', 'bg', 'backgroundColor', 'borderColor', 'textShadow', 'boxShadow']
 
@@ -177,7 +176,7 @@ function replaceDeprecatedColor(
       node,
       message: `"${transformName(deprecatedName)}" is deprecated. Use "${transformName(replacement)}" instead.`,
       fix(fixer) {
-        // return fixer.replaceText(node, transformReplacementValue(transformName(replacement)))
+        return fixer.replaceText(node, transformReplacementValue(transformName(replacement)))
       }
     })
   }

From 9f9298bda2432d615c0e19736a697d23bcb483ff Mon Sep 17 00:00:00 2001
From: Jonathan Fuchs <jfuchs@github.com>
Date: Tue, 28 Sep 2021 16:50:29 -0700
Subject: [PATCH 04/12] fixup

---
 src/rules/__tests__/no-system-props.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/rules/__tests__/no-system-props.test.js b/src/rules/__tests__/no-system-props.test.js
index 0494eeb4..1f84e7e7 100644
--- a/src/rules/__tests__/no-system-props.test.js
+++ b/src/rules/__tests__/no-system-props.test.js
@@ -17,7 +17,7 @@ ruleTester.run('no-system-props', rule, {
     `import {Button} from 'coles-cool-design-system'; <Button width={200} />`,
     `import {Button} from '@primer/components'; <Button someOtherProp="foo" />`,
     `import {Box} from '@primer/components'; <Box width={200} />`,
-    `import {TextInput} from '@primer/components'; <TextInput width={200} />`
+    `import {ProgressBar} from '@primer/components'; <ProgressBar bg="howdy" />`
   ],
   invalid: [
     {

From 557e6f2bf60da811893e2cc2bf4db0ac785f4385 Mon Sep 17 00:00:00 2001
From: Jonathan Fuchs <jfuchs@github.com>
Date: Thu, 30 Sep 2021 13:27:21 -0700
Subject: [PATCH 05/12] docs

---
 docs/rules/no-system-props.md | 38 +++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/docs/rules/no-system-props.md b/docs/rules/no-system-props.md
index e69de29b..1ff76263 100644
--- a/docs/rules/no-system-props.md
+++ b/docs/rules/no-system-props.md
@@ -0,0 +1,38 @@
+# Disallow use of style system props (no-system-colors)
+
+🔧 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.
+
+System props are deprecated in Primer components (excluding utility components).
+
+## Rule details
+
+This rule disallows use of any styled system prop on a Primer component.
+
+\*The two non-deprecated utility components (`Box` and `Text`) are allowed to use system props.
+
+👎 Examples of **incorrect** code for this rule:
+
+```jsx
+/* eslint primer-react/no-system-props: "error" */
+import {Button} from '@primer/components'
+
+<Button width={200} />
+<Button width={200} sx={{height: 300}} />
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+/* eslint primer-react/no-system-props: "error" */
+import {Box, Button, ProgressBar} from '@primer/components'
+import {Avatar} from 'some-other-library'
+
+<Button sx={{width: 200}} />,
+<Button someOtherProp="foo" />,
+
+<ProgressBar bg="howdy" />
+
+<Box width={200} />,
+
+<Avatar width={200} />,
+```

From f35e97a09f02967c8cec85e96131c35eda990b80 Mon Sep 17 00:00:00 2001
From: Jonathan Fuchs <jfuchs@github.com>
Date: Thu, 30 Sep 2021 15:51:09 -0700
Subject: [PATCH 06/12] Fixes and comments

---
 package-lock.json                           |  3 +-
 package.json                                |  1 +
 src/rules/__tests__/no-system-props.test.js | 35 ++++++----
 src/rules/no-system-props.js                | 74 ++++++++++++++++-----
 4 files changed, 81 insertions(+), 32 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index da6c4092..20b12d66 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3984,8 +3984,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.clonedeep": {
       "version": "4.5.0",
diff --git a/package.json b/package.json
index 16fa591a..3ab7b0ef 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
   "dependencies": {
     "@styled-system/props": "^5.1.5",
     "eslint-traverse": "^1.0.0",
+    "lodash": "^4.17.21",
     "styled-system": "^5.1.5"
   }
 }
diff --git a/src/rules/__tests__/no-system-props.test.js b/src/rules/__tests__/no-system-props.test.js
index 1f84e7e7..908abdd8 100644
--- a/src/rules/__tests__/no-system-props.test.js
+++ b/src/rules/__tests__/no-system-props.test.js
@@ -17,7 +17,8 @@ ruleTester.run('no-system-props', rule, {
     `import {Button} from 'coles-cool-design-system'; <Button width={200} />`,
     `import {Button} from '@primer/components'; <Button someOtherProp="foo" />`,
     `import {Box} from '@primer/components'; <Box width={200} />`,
-    `import {ProgressBar} from '@primer/components'; <ProgressBar bg="howdy" />`
+    `import {ProgressBar} from '@primer/components'; <ProgressBar bg="howdy" />`,
+    `import {Button} from '@primer/components'; <Button {...someExpression()} />`
   ],
   invalid: [
     {
@@ -26,7 +27,7 @@ ruleTester.run('no-system-props', rule, {
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width'}
+          data: {propNames: 'width', componentName: 'Button'}
         }
       ]
     },
@@ -36,7 +37,7 @@ ruleTester.run('no-system-props', rule, {
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width'}
+          data: {propNames: 'width', componentName: 'Button'}
         }
       ]
     },
@@ -46,7 +47,7 @@ ruleTester.run('no-system-props', rule, {
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width'}
+          data: {propNames: 'width', componentName: 'Button'}
         }
       ]
     },
@@ -56,27 +57,27 @@ ruleTester.run('no-system-props', rule, {
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width'}
+          data: {propNames: 'width', componentName: 'Button'}
         }
       ]
     },
     {
-      code: `import {Button} from '@primer/components'; <Button width={200} height={200} />`,
-      output: `import {Button} from '@primer/components'; <Button  sx={{width: 200, height: 200}} />`,
+      code: `import {Button} from '@primer/components'; <Button width={200} height={100} />`,
+      output: `import {Button} from '@primer/components'; <Button  sx={{width: 200, height: 100}} />`,
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width, height'}
+          data: {propNames: 'width, height', componentName: 'Button'}
         }
       ]
     },
     {
       code: `import {Button} from '@primer/components'; <Button width={200} sx={{height: 200}} />`,
-      output: `import {Button} from '@primer/components'; <Button  sx={{width: 200, height: 200}} />`,
+      output: `import {Button} from '@primer/components'; <Button  sx={{height: 200, width: 200}} />`,
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width'}
+          data: {propNames: 'width', componentName: 'Button'}
         }
       ]
     },
@@ -86,7 +87,7 @@ ruleTester.run('no-system-props', rule, {
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width'}
+          data: {propNames: 'width', componentName: 'Button'}
         }
       ]
     },
@@ -96,7 +97,17 @@ ruleTester.run('no-system-props', rule, {
       errors: [
         {
           messageId: 'noSystemProps',
-          data: {propNames: 'width'}
+          data: {propNames: 'width', componentName: 'Button'}
+        }
+      ]
+    },
+    {
+      code: `import {Button} from '@primer/components'; <Button width={200} sx={{...partialStyles, width: 100}} />`,
+      output: `import {Button} from '@primer/components'; <Button  sx={{...partialStyles, width: 100}} />`,
+      errors: [
+        {
+          messageId: 'noSystemProps',
+          data: {propNames: 'width', componentName: 'Button'}
         }
       ]
     }
diff --git a/src/rules/no-system-props.js b/src/rules/no-system-props.js
index 1d45967a..b2ead09b 100644
--- a/src/rules/no-system-props.js
+++ b/src/rules/no-system-props.js
@@ -1,5 +1,6 @@
 const {isPrimerComponent} = require('../utils/isPrimerComponent')
 const {pick} = require('@styled-system/props')
+const {some, last} = require('lodash')
 
 // Components for which we allow all styled system props
 const excludedComponents = new Set(['Box', 'Text'])
@@ -13,7 +14,7 @@ module.exports = {
     fixable: 'code',
     schema: [],
     messages: {
-      noSystemProps: 'Styled-system props are deprecated ({{ propNames }})'
+      noSystemProps: 'Styled-system props are deprecated ({{componentName}} called with props: {{ propNames }})'
     }
   },
   create(context) {
@@ -22,13 +23,20 @@ module.exports = {
         if (!isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) return
         if (excludedComponents.has(jsxNode.name.name)) return
 
-        const propsByNameMap = jsxNode.attributes.reduce((prev, cur) => {
-          prev[cur.name.name] = cur
-          return prev
+        // Create an object mapping from prop name to the AST node for that attribute
+        const propsByNameObject = jsxNode.attributes.reduce((object, cur) => {
+          // We don't do anything about spreads for now — only named attributes:
+          if (cur.type === 'JSXAttribute') {
+            object[cur.name.name] = cur
+          }
+
+          return object
         }, {})
 
-        let badProps = Object.values(pick(propsByNameMap))
+        // Create an array of bad prop attribute nodes
+        let badProps = Object.values(pick(propsByNameObject))
 
+        // Filter out our exceptional props
         badProps = badProps.filter(prop => {
           const excludedProps = excludedComponentProps.get(jsxNode.name.name)
           if (!excludedProps) {
@@ -42,25 +50,37 @@ module.exports = {
             node: jsxNode,
             messageId: 'noSystemProps',
             data: {
+              componentName: jsxNode.name.name,
               propNames: badProps.map(a => a.name.name).join(', ')
             },
             fix(fixer) {
-              const existingSxProp = jsxNode.attributes.find(attribute => attribute.name.name === 'sx')
+              const existingSxProp = jsxNode.attributes.find(
+                attribute => attribute.type === 'JSXAttribute' && attribute.name.name === 'sx'
+              )
               const badPropStylesMap = stylesMapFromPropNodes(badProps, context)
               if (existingSxProp && existingSxProp.value.expression.type !== 'ObjectExpression') {
                 return
               }
+
+              const stylesToAdd = existingSxProp
+                ? excludeSxEntriesFromStyleMap(badPropStylesMap, existingSxProp)
+                : badPropStylesMap
+
               return [
+                // Remove the bad props:
                 ...badProps.map(node => fixer.remove(node)),
-                existingSxProp
-                  ? fixer.replaceText(
-                      existingSxProp,
-                      sxPropTextFromStylesMap(new Map([...badPropStylesMap, ...stylesMapfromSxProp(existingSxProp)]))
-                    )
-                  : fixer.insertTextAfter(
-                      jsxNode.attributes[jsxNode.attributes.length - 1],
-                      sxPropTextFromStylesMap(badPropStylesMap)
-                    )
+                ...(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(badPropStylesMap))
+                    ]
+                  : [])
               ]
             }
           })
@@ -71,13 +91,31 @@ module.exports = {
 }
 
 const sxPropTextFromStylesMap = styles => {
-  return `sx={{${[...styles].map(([name, value]) => `${name}: ${value}`).join(', ')}}}`
+  return `sx={{${objectEntriesStringFromStylesMap(styles)}}}`
 }
 
-const stylesMapfromSxProp = sxProp => {
-  return new Map(sxProp.value.expression.properties.map(prop => [prop.key.name, prop.value.raw]))
+const objectEntriesStringFromStylesMap = styles => {
+  return [...styles].map(([name, value]) => `${name}: ${value}`).join(', ')
 }
 
+// Given an array of styled prop attributes, return a mapping from attribute to expression
 const stylesMapFromPropNodes = (badProps, context) => {
   return new Map(badProps.map(a => [a.name.name, a.value.raw || context.getSourceCode().getText(a.value.expression)]))
 }
+
+// Given a style map and an existing sx prop, return a style map containing
+// only the entries that aren't already overridden by an sx object entry
+const excludeSxEntriesFromStyleMap = (stylesMap, sxProp) => {
+  if (
+    !sxProp.value ||
+    sxProp.value.type !== 'JSXExpressionContainer' ||
+    sxProp.value.expression.type != 'ObjectExpression'
+  ) {
+    return stylesMap
+  }
+  return new Map(
+    [...stylesMap].filter(([key, _value]) => {
+      return !some(sxProp.value.expression.properties, p => p.type === 'Property' && p.key.name === key)
+    })
+  )
+}

From a6db9d643c9faaee908d5829fd24d40ed5187ddf Mon Sep 17 00:00:00 2001
From: Jonathan Fuchs <jfuchs@github.com>
Date: Thu, 30 Sep 2021 16:58:04 -0700
Subject: [PATCH 07/12] updates

---
 src/rules/no-system-props.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/rules/no-system-props.js b/src/rules/no-system-props.js
index b2ead09b..3e22c052 100644
--- a/src/rules/no-system-props.js
+++ b/src/rules/no-system-props.js
@@ -6,7 +6,12 @@ const {some, last} = require('lodash')
 const excludedComponents = new Set(['Box', 'Text'])
 
 // Components for which we allow a set of prop names
-const excludedComponentProps = new Map([['ProgressBar', new Set(['bg'])]])
+const excludedComponentProps = new Map([
+  ['Avatar', new Set(['size'])],
+  ['Label', new Set(['variant'])],
+  ['ProgressBar', new Set(['bg'])],
+  ['Spinner', new Set(['size'])]
+])
 
 module.exports = {
   meta: {
@@ -100,7 +105,12 @@ const objectEntriesStringFromStylesMap = styles => {
 
 // Given an array of styled prop attributes, return a mapping from attribute to expression
 const stylesMapFromPropNodes = (badProps, context) => {
-  return new Map(badProps.map(a => [a.name.name, a.value.raw || context.getSourceCode().getText(a.value.expression)]))
+  return new Map(
+    badProps.map(a => [
+      a.name.name,
+      a.value === null ? 'true' : a.value.raw || context.getSourceCode().getText(a.value.expression)
+    ])
+  )
 }
 
 // Given a style map and an existing sx prop, return a style map containing

From 4a852ec71b87b2657c4d57bb35dde89f2c940938 Mon Sep 17 00:00:00 2001
From: Jonathan Fuchs <jfuchs@github.com>
Date: Fri, 1 Oct 2021 12:38:53 -0700
Subject: [PATCH 08/12] fixes

---
 src/rules/__tests__/no-system-props.test.js | 20 +++++++++++++++-----
 src/rules/no-system-props.js                |  7 +++++--
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/rules/__tests__/no-system-props.test.js b/src/rules/__tests__/no-system-props.test.js
index 908abdd8..50a3bdc7 100644
--- a/src/rules/__tests__/no-system-props.test.js
+++ b/src/rules/__tests__/no-system-props.test.js
@@ -23,7 +23,7 @@ ruleTester.run('no-system-props', rule, {
   invalid: [
     {
       code: `import {Button} from '@primer/components'; <Button width={200} />`,
-      output: `import {Button} from '@primer/components'; <Button sx={{width: 200}} />`,
+      output: `import {Button} from '@primer/components'; <Button  sx={{width: 200}} />`,
       errors: [
         {
           messageId: 'noSystemProps',
@@ -33,7 +33,7 @@ ruleTester.run('no-system-props', rule, {
     },
     {
       code: `import {Button} from '@primer/components'; <Button width="200" />`,
-      output: `import {Button} from '@primer/components'; <Button sx={{width: "200"}} />`,
+      output: `import {Button} from '@primer/components'; <Button  sx={{width: "200"}} />`,
       errors: [
         {
           messageId: 'noSystemProps',
@@ -43,7 +43,7 @@ ruleTester.run('no-system-props', rule, {
     },
     {
       code: `import {Button} from '@primer/components'; <Button width={"200"} />`,
-      output: `import {Button} from '@primer/components'; <Button sx={{width: "200"}} />`,
+      output: `import {Button} from '@primer/components'; <Button  sx={{width: "200"}} />`,
       errors: [
         {
           messageId: 'noSystemProps',
@@ -53,7 +53,7 @@ ruleTester.run('no-system-props', rule, {
     },
     {
       code: `import {Button} from '@primer/components'; <Button width={myWidth} />`,
-      output: `import {Button} from '@primer/components'; <Button sx={{width: myWidth}} />`,
+      output: `import {Button} from '@primer/components'; <Button  sx={{width: myWidth}} />`,
       errors: [
         {
           messageId: 'noSystemProps',
@@ -63,7 +63,7 @@ ruleTester.run('no-system-props', rule, {
     },
     {
       code: `import {Button} from '@primer/components'; <Button width={200} height={100} />`,
-      output: `import {Button} from '@primer/components'; <Button  sx={{width: 200, height: 100}} />`,
+      output: `import {Button} from '@primer/components'; <Button   sx={{width: 200, height: 100}} />`,
       errors: [
         {
           messageId: 'noSystemProps',
@@ -110,6 +110,16 @@ ruleTester.run('no-system-props', rule, {
           data: {propNames: 'width', componentName: 'Button'}
         }
       ]
+    },
+    {
+      code: `import {Label} from '@primer/components'; <Label width={200} outline />`,
+      output: `import {Label} from '@primer/components'; <Label  outline sx={{width: 200}} />`,
+      errors: [
+        {
+          messageId: 'noSystemProps',
+          data: {propNames: 'width', componentName: 'Label'}
+        }
+      ]
     }
   ]
 })
diff --git a/src/rules/no-system-props.js b/src/rules/no-system-props.js
index 3e22c052..f5993c49 100644
--- a/src/rules/no-system-props.js
+++ b/src/rules/no-system-props.js
@@ -7,10 +7,13 @@ const excludedComponents = new Set(['Box', 'Text'])
 
 // Components for which we allow a set of prop names
 const excludedComponentProps = new Map([
+  ['AnchoredOverlay', new Set(['width', 'height'])],
   ['Avatar', new Set(['size'])],
+  ['Dialog', new Set(['width', 'height'])],
   ['Label', new Set(['variant'])],
   ['ProgressBar', new Set(['bg'])],
-  ['Spinner', new Set(['size'])]
+  ['Spinner', new Set(['size'])],
+  ['StyledOcticon', new Set(['size'])]
 ])
 
 module.exports = {
@@ -96,7 +99,7 @@ module.exports = {
 }
 
 const sxPropTextFromStylesMap = styles => {
-  return `sx={{${objectEntriesStringFromStylesMap(styles)}}}`
+  return ` sx={{${objectEntriesStringFromStylesMap(styles)}}}`
 }
 
 const objectEntriesStringFromStylesMap = styles => {

From b49b8d4e7fd704884fae7b1337b94d66ba512d86 Mon Sep 17 00:00:00 2001
From: Jonathan Fuchs <jfuchs@github.com>
Date: Fri, 1 Oct 2021 13:09:38 -0700
Subject: [PATCH 09/12] exclude BaseStyles

---
 src/rules/no-system-props.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/rules/no-system-props.js b/src/rules/no-system-props.js
index f5993c49..c215aa01 100644
--- a/src/rules/no-system-props.js
+++ b/src/rules/no-system-props.js
@@ -3,7 +3,11 @@ const {pick} = require('@styled-system/props')
 const {some, last} = require('lodash')
 
 // Components for which we allow all styled system props
-const excludedComponents = new Set(['Box', 'Text'])
+const excludedComponents = new Set([
+  'Box',
+  'Text',
+  'BaseStyles' // BaseStyles will be deprecated eventually
+])
 
 // Components for which we allow a set of prop names
 const excludedComponentProps = new Map([

From df269623f3430066ea6440042da13932e3e35bc4 Mon Sep 17 00:00:00 2001
From: Jonathan Fuchs <jfuchs@github.com>
Date: Fri, 1 Oct 2021 13:14:52 -0700
Subject: [PATCH 10/12] changeset

---
 .changeset/gorgeous-games-confess.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/gorgeous-games-confess.md

diff --git a/.changeset/gorgeous-games-confess.md b/.changeset/gorgeous-games-confess.md
new file mode 100644
index 00000000..f9023bbb
--- /dev/null
+++ b/.changeset/gorgeous-games-confess.md
@@ -0,0 +1,5 @@
+---
+'eslint-plugin-primer-react': minor
+---
+
+Added a no-system-props rule

From b1cc317f1b4e7c4f3e238061f86e6371705ddb73 Mon Sep 17 00:00:00 2001
From: Jonathan Fuchs <jfuchs@github.com>
Date: Fri, 1 Oct 2021 14:14:54 -0700
Subject: [PATCH 11/12] Address comments

---
 docs/rules/no-system-props.md | 26 ++++++++++++-----------
 src/rules/no-system-props.js  | 39 ++++++++++++++++++-----------------
 2 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/docs/rules/no-system-props.md b/docs/rules/no-system-props.md
index 1ff76263..3bc6a0e5 100644
--- a/docs/rules/no-system-props.md
+++ b/docs/rules/no-system-props.md
@@ -1,12 +1,12 @@
-# Disallow use of style system props (no-system-colors)
+# Disallow use of styled-system props (no-system-colors)
 
 🔧 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.
 
-System props are deprecated in Primer components (excluding utility components).
+[Styled-system](https://styled-system.com/table) props are deprecated in Primer components (excluding utility components).
 
 ## Rule details
 
-This rule disallows use of any styled system prop on a Primer component.
+This rule disallows the use of any styled-system prop on Primer components.
 
 \*The two non-deprecated utility components (`Box` and `Text`) are allowed to use system props.
 
@@ -26,13 +26,15 @@ import {Button} from '@primer/components'
 /* eslint primer-react/no-system-props: "error" */
 import {Box, Button, ProgressBar} from '@primer/components'
 import {Avatar} from 'some-other-library'
-
-<Button sx={{width: 200}} />,
-<Button someOtherProp="foo" />,
-
-<ProgressBar bg="howdy" />
-
-<Box width={200} />,
-
-<Avatar width={200} />,
+// Non-system props are allowed
+<Button someOtherProp="foo" />
+// If you need to override styles, use the `sx` prop instead of system props
+<Button sx={{mr: 2}} />
+// Some component prop names overlap with styled-system prop names.
+// These props are still allowed
+<ProgressBar bg="success.emphasis" />
+// Utility components like Box and Text still accept system props
+<Box mr={2} />
+// System props passed to non-Primer components are allowed
+<Avatar mr={2} />
 ```
diff --git a/src/rules/no-system-props.js b/src/rules/no-system-props.js
index c215aa01..f03c6d14 100644
--- a/src/rules/no-system-props.js
+++ b/src/rules/no-system-props.js
@@ -14,6 +14,7 @@ const excludedComponentProps = new Map([
   ['AnchoredOverlay', new Set(['width', 'height'])],
   ['Avatar', new Set(['size'])],
   ['Dialog', new Set(['width', 'height'])],
+  ['Flash', new Set(['variant'])],
   ['Label', new Set(['variant'])],
   ['ProgressBar', new Set(['bg'])],
   ['Spinner', new Set(['size'])],
@@ -26,7 +27,7 @@ module.exports = {
     fixable: 'code',
     schema: [],
     messages: {
-      noSystemProps: 'Styled-system props are deprecated ({{componentName}} called with props: {{ propNames }})'
+      noSystemProps: 'Styled-system props are deprecated ({{ componentName }} called with props: {{ propNames }})'
     }
   },
   create(context) {
@@ -36,20 +37,20 @@ module.exports = {
         if (excludedComponents.has(jsxNode.name.name)) return
 
         // Create an object mapping from prop name to the AST node for that attribute
-        const propsByNameObject = jsxNode.attributes.reduce((object, cur) => {
-          // We don't do anything about spreads for now — only named attributes:
-          if (cur.type === 'JSXAttribute') {
-            object[cur.name.name] = cur
+        const propsByNameObject = jsxNode.attributes.reduce((object, attribute) => {
+          // We don't do anything about spreads for now — only named attributes
+          if (attribute.type === 'JSXAttribute') {
+            object[attribute.name.name] = attribute
           }
 
           return object
         }, {})
 
-        // Create an array of bad prop attribute nodes
-        let badProps = Object.values(pick(propsByNameObject))
+        // Create an array of system prop attribute nodes
+        let systemProps = Object.values(pick(propsByNameObject))
 
         // Filter out our exceptional props
-        badProps = badProps.filter(prop => {
+        systemProps = systemProps.filter(prop => {
           const excludedProps = excludedComponentProps.get(jsxNode.name.name)
           if (!excludedProps) {
             return true
@@ -57,40 +58,40 @@ module.exports = {
           return !excludedProps.has(prop.name.name)
         })
 
-        if (badProps.length !== 0) {
+        if (systemProps.length !== 0) {
           context.report({
             node: jsxNode,
             messageId: 'noSystemProps',
             data: {
               componentName: jsxNode.name.name,
-              propNames: badProps.map(a => a.name.name).join(', ')
+              propNames: systemProps.map(a => a.name.name).join(', ')
             },
             fix(fixer) {
               const existingSxProp = jsxNode.attributes.find(
                 attribute => attribute.type === 'JSXAttribute' && attribute.name.name === 'sx'
               )
-              const badPropStylesMap = stylesMapFromPropNodes(badProps, context)
+              const systemPropstylesMap = stylesMapFromPropNodes(systemProps, context)
               if (existingSxProp && existingSxProp.value.expression.type !== 'ObjectExpression') {
                 return
               }
 
               const stylesToAdd = existingSxProp
-                ? excludeSxEntriesFromStyleMap(badPropStylesMap, existingSxProp)
-                : badPropStylesMap
+                ? excludeSxEntriesFromStyleMap(systemPropstylesMap, existingSxProp)
+                : systemPropstylesMap
 
               return [
-                // Remove the bad props:
-                ...badProps.map(node => fixer.remove(node)),
+                // Remove the bad props
+                ...systemProps.map(node => fixer.remove(node)),
                 ...(stylesToAdd.size > 0
                   ? [
                       existingSxProp
-                        ? // Update an existing sx prop:
+                        ? // Update an existing sx prop
                           fixer.insertTextAfter(
                             last(existingSxProp.value.expression.properties),
                             `, ${objectEntriesStringFromStylesMap(stylesToAdd)}`
                           )
                         : // Insert new sx prop
-                          fixer.insertTextAfter(last(jsxNode.attributes), sxPropTextFromStylesMap(badPropStylesMap))
+                          fixer.insertTextAfter(last(jsxNode.attributes), sxPropTextFromStylesMap(systemPropstylesMap))
                     ]
                   : [])
               ]
@@ -111,9 +112,9 @@ const objectEntriesStringFromStylesMap = styles => {
 }
 
 // Given an array of styled prop attributes, return a mapping from attribute to expression
-const stylesMapFromPropNodes = (badProps, context) => {
+const stylesMapFromPropNodes = (systemProps, context) => {
   return new Map(
-    badProps.map(a => [
+    systemProps.map(a => [
       a.name.name,
       a.value === null ? 'true' : a.value.raw || context.getSourceCode().getText(a.value.expression)
     ])

From 0555c31c7a866b5f231c84370942c2f703bb3cd0 Mon Sep 17 00:00:00 2001
From: Jonathan Fuchs <jfuchs@github.com>
Date: Fri, 1 Oct 2021 14:18:56 -0700
Subject: [PATCH 12/12] kebab-case

---
 docs/rules/no-system-props.md                                   | 2 +-
 src/rules/no-system-props.js                                    | 2 +-
 .../{getVariableDeclaration.js => get-variable-declaration.js}  | 0
 src/utils/{isImportedFrom.js => is-imported-from.js}            | 2 +-
 src/utils/{isPrimerComponent.js => is-primer-component.js}      | 2 +-
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename src/utils/{getVariableDeclaration.js => get-variable-declaration.js} (100%)
 rename src/utils/{isImportedFrom.js => is-imported-from.js} (85%)
 rename src/utils/{isPrimerComponent.js => is-primer-component.js} (74%)

diff --git a/docs/rules/no-system-props.md b/docs/rules/no-system-props.md
index 3bc6a0e5..75e361db 100644
--- a/docs/rules/no-system-props.md
+++ b/docs/rules/no-system-props.md
@@ -6,7 +6,7 @@
 
 ## Rule details
 
-This rule disallows the use of any styled-system prop on Primer components.
+This rule disallows the use of any styled-system prop on Primer components, as the `sx` prop is now the prefered way to apply additional styling.
 
 \*The two non-deprecated utility components (`Box` and `Text`) are allowed to use system props.
 
diff --git a/src/rules/no-system-props.js b/src/rules/no-system-props.js
index f03c6d14..5db05cba 100644
--- a/src/rules/no-system-props.js
+++ b/src/rules/no-system-props.js
@@ -1,4 +1,4 @@
-const {isPrimerComponent} = require('../utils/isPrimerComponent')
+const {isPrimerComponent} = require('../utils/is-primer-component')
 const {pick} = require('@styled-system/props')
 const {some, last} = require('lodash')
 
diff --git a/src/utils/getVariableDeclaration.js b/src/utils/get-variable-declaration.js
similarity index 100%
rename from src/utils/getVariableDeclaration.js
rename to src/utils/get-variable-declaration.js
diff --git a/src/utils/isImportedFrom.js b/src/utils/is-imported-from.js
similarity index 85%
rename from src/utils/isImportedFrom.js
rename to src/utils/is-imported-from.js
index 1fa06788..ff5e08d7 100644
--- a/src/utils/isImportedFrom.js
+++ b/src/utils/is-imported-from.js
@@ -1,4 +1,4 @@
-const {getVariableDeclaration} = require('./getVariableDeclaration')
+const {getVariableDeclaration} = require('./get-variable-declaration')
 
 /**
  * Check if the given identifier is imported from the given module
diff --git a/src/utils/isPrimerComponent.js b/src/utils/is-primer-component.js
similarity index 74%
rename from src/utils/isPrimerComponent.js
rename to src/utils/is-primer-component.js
index 2b33a752..bb333c06 100644
--- a/src/utils/isPrimerComponent.js
+++ b/src/utils/is-primer-component.js
@@ -1,4 +1,4 @@
-const {isImportedFrom} = require('./isImportedFrom')
+const {isImportedFrom} = require('./is-imported-from')
 
 function isPrimerComponent(identifier, scope) {
   return isImportedFrom(/^@primer\/components/, identifier, scope)