From db903cd0f8d87378f49f2bc81375bd159e140c9c Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Tue, 17 Sep 2024 13:48:25 -0500
Subject: [PATCH 1/4] feat: add no-sx-prop rule

---
 docs/rules/no-sx-prop.md               | 33 +++++++++++++++++
 src/index.js                           |  1 +
 src/rules/__tests__/no-sx-prop.test.js | 34 ++++++++++++++++++
 src/rules/no-sx-prop.js                | 50 ++++++++++++++++++++++++++
 4 files changed, 118 insertions(+)
 create mode 100644 docs/rules/no-sx-prop.md
 create mode 100644 src/rules/__tests__/no-sx-prop.test.js
 create mode 100644 src/rules/no-sx-prop.js

diff --git a/docs/rules/no-sx-prop.md b/docs/rules/no-sx-prop.md
new file mode 100644
index 0000000..e3128cf
--- /dev/null
+++ b/docs/rules/no-sx-prop.md
@@ -0,0 +1,33 @@
+# No Wildcard Imports
+
+## Rule Details
+
+This rule enforces that no sx props are used with `@primer/react`.
+
+👎 Examples of **incorrect** code for this rule
+
+```jsx
+import {Button} from '@primer/react'
+
+function ExampleComponent() {
+  return (
+    <Button
+      sx={
+        {
+          /* ... */
+        }
+      }
+    />
+  )
+}
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+import {Button} from '@primer/react'
+
+function ExampleComponent() {
+  return <Button className="..." />
+}
+```
diff --git a/src/index.js b/src/index.js
index bc284b0..fe010f2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -12,6 +12,7 @@ module.exports = {
     'a11y-use-next-tooltip': require('./rules/a11y-use-next-tooltip'),
     'use-deprecated-from-deprecated': require('./rules/use-deprecated-from-deprecated'),
     'no-wildcard-imports': require('./rules/no-wildcard-imports'),
+    'no-sx-prop': require('./rules/no-sx-prop'),
     'no-unnecessary-components': require('./rules/no-unnecessary-components'),
     'prefer-action-list-item-onselect': require('./rules/prefer-action-list-item-onselect'),
   },
diff --git a/src/rules/__tests__/no-sx-prop.test.js b/src/rules/__tests__/no-sx-prop.test.js
new file mode 100644
index 0000000..8a603d2
--- /dev/null
+++ b/src/rules/__tests__/no-sx-prop.test.js
@@ -0,0 +1,34 @@
+'use strict'
+
+const {RuleTester} = require('eslint')
+const rule = require('../no-sx-prop')
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('@typescript-eslint/parser'),
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+ruleTester.run('no-sx-prop', rule, {
+  valid: [`import {Button} from '@primer/react'`],
+  invalid: [
+    {
+      code: `
+        import {SegmentedControl} from '@primer/react';
+        function Example() {
+          return <SegmentedControl sx={{color: 'red'}} />
+        }
+      `,
+      errors: [
+        {
+          messageId: 'sxProp',
+        },
+      ],
+    },
+  ],
+})
diff --git a/src/rules/no-sx-prop.js b/src/rules/no-sx-prop.js
new file mode 100644
index 0000000..303d3f6
--- /dev/null
+++ b/src/rules/no-sx-prop.js
@@ -0,0 +1,50 @@
+'use strict'
+
+const url = require('../url')
+
+const forbidden = new Set([
+  'SegmentedControl',
+  // 'ActionList',
+  // 'ActionList.Divider',
+  // 'ActionList.Group',
+  // 'ActionList.Item',
+  // 'ActionList.LeadingVisual',
+  // 'ActionList.LinkItem',
+
+  // 'UnderlineNav',
+  // 'UnderlineNav.Item',
+])
+
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'The sx prop is discouraged. Use CSS Modules instead',
+      recommended: true,
+      url: url(module),
+    },
+    fixable: true,
+    schema: [],
+    messages: {
+      sxProp:
+        'The `sx` prop has been deprecated by @primer/react and will be removed in the next major release. Please migrate to CSS Modules instead.',
+    },
+  },
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        if (!forbidden.has(node.name.name)) {
+          return
+        }
+
+        context.report({
+          node,
+          messageId: 'sxProp',
+        })
+      },
+    }
+  },
+}

From 21102b7af15186e31db7783c0e2d27d5816bf317 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Tue, 17 Sep 2024 14:06:46 -0500
Subject: [PATCH 2/4] feat: add SegmentedControl.Button to no-sx-prop rule

---
 src/rules/no-sx-prop.js | 44 +++++++++++++++++++++++++++++++++--------
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/rules/no-sx-prop.js b/src/rules/no-sx-prop.js
index 303d3f6..5c4b18d 100644
--- a/src/rules/no-sx-prop.js
+++ b/src/rules/no-sx-prop.js
@@ -3,7 +3,6 @@
 const url = require('../url')
 
 const forbidden = new Set([
-  'SegmentedControl',
   // 'ActionList',
   // 'ActionList.Divider',
   // 'ActionList.Group',
@@ -11,6 +10,25 @@ const forbidden = new Set([
   // 'ActionList.LeadingVisual',
   // 'ActionList.LinkItem',
 
+  // 'ActionMenu.Button',
+  // 'ActionMenu.Overlay',
+
+  // 'Avatar',
+  // 'AvatarStack',
+
+  // 'BorderBox',
+  // 'Box',
+
+  // 'BranchName',
+
+  // 'Breadcrumbs',
+  // 'Breadcrumbs.Item',
+
+  'SegmentedControl',
+  'SegmentedControl.Button',
+
+  'SplitPageLayout.Pane',
+
   // 'UnderlineNav',
   // 'UnderlineNav.Item',
 ])
@@ -36,14 +54,24 @@ module.exports = {
   create(context) {
     return {
       JSXOpeningElement(node) {
-        if (!forbidden.has(node.name.name)) {
-          return
+        if (node.name.type === 'JSXMemberExpression') {
+          if (node.name.object.type === 'JSXIdentifier' && node.name.property.type === 'JSXIdentifier') {
+            const name = `${node.name.object.name}.${node.name.property.name}`
+            if (forbidden.has(name)) {
+              context.report({
+                node,
+                messageId: 'sxProp',
+              })
+            }
+          }
+        } else if (node.name.type === 'JSXIdentifier') {
+          if (forbidden.has(node.name.name)) {
+            context.report({
+              node,
+              messageId: 'sxProp',
+            })
+          }
         }
-
-        context.report({
-          node,
-          messageId: 'sxProp',
-        })
       },
     }
   },

From b13f173d22ad332e8a8f86602f88063fbca00020 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Tue, 17 Sep 2024 14:13:29 -0500
Subject: [PATCH 3/4] fix: add check for sx prop

---
 src/rules/no-sx-prop.js | 41 ++++++++++++++++++++++++++---------------
 1 file changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/rules/no-sx-prop.js b/src/rules/no-sx-prop.js
index 5c4b18d..3feeeff 100644
--- a/src/rules/no-sx-prop.js
+++ b/src/rules/no-sx-prop.js
@@ -54,23 +54,34 @@ module.exports = {
   create(context) {
     return {
       JSXOpeningElement(node) {
-        if (node.name.type === 'JSXMemberExpression') {
-          if (node.name.object.type === 'JSXIdentifier' && node.name.property.type === 'JSXIdentifier') {
-            const name = `${node.name.object.name}.${node.name.property.name}`
-            if (forbidden.has(name)) {
-              context.report({
-                node,
-                messageId: 'sxProp',
-              })
-            }
-          }
+        let name = null
+
+        if (
+          node.name.type === 'JSXMemberExpression' &&
+          node.name.object.type === 'JSXIdentifier' &&
+          node.name.property.type === 'JSXIdentifier'
+        ) {
+          name = `${node.name.object.name}.${node.name.property.name}`
         } else if (node.name.type === 'JSXIdentifier') {
-          if (forbidden.has(node.name.name)) {
-            context.report({
-              node,
-              messageId: 'sxProp',
-            })
+          name = node.name.name
+        }
+
+        if (!forbidden.has(name)) {
+          return
+        }
+
+        const hasSxProp = node.attributes.some(attr => {
+          if (attr.name.type === 'JSXIdentifier' && attr.name.name === 'sx') {
+            return true
           }
+          return false
+        })
+
+        if (hasSxProp) {
+          context.report({
+            node,
+            messageId: 'sxProp',
+          })
         }
       },
     }

From 643722efb9fd38b9796279aaf7d1ae5521e45d6c Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Tue, 17 Sep 2024 14:18:23 -0500
Subject: [PATCH 4/4] chore: add check for attribute name type

---
 src/rules/__tests__/no-sx-prop.test.js | 2 +-
 src/rules/no-sx-prop.js                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/rules/__tests__/no-sx-prop.test.js b/src/rules/__tests__/no-sx-prop.test.js
index 8a603d2..33b772b 100644
--- a/src/rules/__tests__/no-sx-prop.test.js
+++ b/src/rules/__tests__/no-sx-prop.test.js
@@ -15,7 +15,7 @@ const ruleTester = new RuleTester({
 })
 
 ruleTester.run('no-sx-prop', rule, {
-  valid: [`import {Button} from '@primer/react'`],
+  valid: [],
   invalid: [
     {
       code: `
diff --git a/src/rules/no-sx-prop.js b/src/rules/no-sx-prop.js
index 3feeeff..28a8d2f 100644
--- a/src/rules/no-sx-prop.js
+++ b/src/rules/no-sx-prop.js
@@ -71,7 +71,7 @@ module.exports = {
         }
 
         const hasSxProp = node.attributes.some(attr => {
-          if (attr.name.type === 'JSXIdentifier' && attr.name.name === 'sx') {
+          if (attr.name?.type === 'JSXIdentifier' && attr.name.name === 'sx') {
             return true
           }
           return false