feat: Enhance use-styled-react-import rule to enforce correct imports for components without sx prop

Author: jonrohan

docs/rules/use-styled-react-import.md

@@ -6,11 +6,11 @@
 
 <!-- end auto-generated rule header -->
 
-Enforce importing components that use `sx` prop from `@primer/styled-react` instead of `@primer/react`.
+Enforce importing components that use `sx` prop from `@primer/styled-react` instead of `@primer/react`, and vice versa.
 
 ## Rule Details
 
-This rule detects when certain Primer React components are used with the `sx` prop and ensures they are imported from the temporary `@primer/styled-react` package instead of `@primer/react`. It also moves certain types and utilities to the styled-react package.
+This rule detects when certain Primer React components are used with the `sx` prop and ensures they are imported from the temporary `@primer/styled-react` package instead of `@primer/react`. When the same components are used without the `sx` prop, it ensures they are imported from `@primer/react` instead of `@primer/styled-react`. It also moves certain types and utilities to the styled-react package.
 
 ### Components that should be imported from `@primer/styled-react` when used with `sx`:
 
@@ -60,6 +60,12 @@ const Component = () => <Box sx={{padding: 2}}>Content</Box>
 import {sx} from '@primer/react'
 ```
 
+```jsx
+import {Button} from '@primer/styled-react'
+
+const Component = () => <Button>Click me</Button>
+```
+
 ### ✅ Correct
 
 ```jsx
@@ -86,6 +92,13 @@ import {Button} from '@primer/react'
 const Component = () => <Button>Click me</Button>
 ```
 
+```jsx
+// Components imported from styled-react but used without sx prop should be moved back
+import {Button} from '@primer/react'
+
+const Component = () => <Button>Click me</Button>
+```
+
 ## Options
 
 This rule has no options.

src/rules/__tests__/use-styled-react-import.test.js

@@ -33,6 +33,9 @@ ruleTester.run('use-styled-react-import', rule, {
     // Valid: Mixed imports - component without sx prop
     `import { Button, Text } from '@primer/react'
      const Component = () => <Button>Click me</Button>`,
+
+    // Valid: Component without sx prop imported from styled-react (when not used)
+    `import { Button } from '@primer/styled-react'`,
   ],
   invalid: [
     // Invalid: Box with sx prop imported from @primer/react
@@ -116,5 +119,58 @@ import { Button } from '@primer/styled-react'
         },
       ],
     },
+
+    // Invalid: Button imported from styled-react but used without sx prop
+    {
+      code: `import { Button } from '@primer/styled-react'
+             const Component = () => <Button>Click me</Button>`,
+      output: `import { Button } from '@primer/react'
+             const Component = () => <Button>Click me</Button>`,
+      errors: [
+        {
+          messageId: 'usePrimerReactImport',
+          data: {componentName: 'Button'},
+        },
+      ],
+    },
+
+    // Invalid: Box imported from styled-react but used without sx prop
+    {
+      code: `import { Box } from '@primer/styled-react'
+             const Component = () => <Box>Content</Box>`,
+      output: `import { Box } from '@primer/react'
+             const Component = () => <Box>Content</Box>`,
+      errors: [
+        {
+          messageId: 'usePrimerReactImport',
+          data: {componentName: 'Box'},
+        },
+      ],
+    },
+
+    // Invalid: Multiple components from styled-react, one used without sx
+    {
+      code: `import { Button, Box } from '@primer/styled-react'
+             const Component = () => (
+               <div>
+                 <Button>Regular button</Button>
+                 <Box sx={{ padding: 2 }}>Styled box</Box>
+               </div>
+             )`,
+      output: `import { Box } from '@primer/styled-react'
+import { Button } from '@primer/react'
+             const Component = () => (
+               <div>
+                 <Button>Regular button</Button>
+                 <Box sx={{ padding: 2 }}>Styled box</Box>
+               </div>
+             )`,
+      errors: [
+        {
+          messageId: 'usePrimerReactImport',
+          data: {componentName: 'Button'},
+        },
+      ],
+    },
   ],
 })

src/rules/use-styled-react-import.js

@@ -47,12 +47,14 @@ module.exports = {
     messages: {
       useStyledReactImport: 'Import {{ componentName }} from "@primer/styled-react" when using with sx prop',
       moveToStyledReact: 'Move {{ importName }} import to "@primer/styled-react"',
+      usePrimerReactImport: 'Import {{ componentName }} from "@primer/react" when not using sx prop',
     },
   },
   create(context) {
     const componentsWithSx = new Set()
+    const allUsedComponents = new Set() // Track all used components
     const primerReactImports = new Map() // Map of component name to import node
-    const styledReactImports = new Set() // Set of components already imported from styled-react
+    const styledReactImports = new Map() // Map of components imported from styled-react to import node
 
     return {
       ImportDeclaration(node) {
@@ -73,10 +75,11 @@ module.exports = {
             }
           }
         } else if (importSource === '@primer/styled-react') {
-          // Track what's already imported from styled-react
+          // Track what's imported from styled-react
           for (const specifier of node.specifiers) {
             if (specifier.type === 'ImportSpecifier') {
-              styledReactImports.add(specifier.imported.name)
+              const importedName = specifier.imported.name
+              styledReactImports.set(importedName, {node, specifier})
             }
           }
         }
@@ -85,6 +88,11 @@ module.exports = {
       JSXOpeningElement(node) {
         const componentName = getJSXOpeningElementName(node)
 
+        // Track all used components that are in our styled components list
+        if (styledComponents.has(componentName)) {
+          allUsedComponents.add(componentName)
+        }
+
         // Check if this component has an sx prop
         const hasSxProp = node.attributes.some(
           attr => attr.type === 'JSXAttribute' && attr.name && attr.name.name === 'sx',
@@ -146,6 +154,55 @@ module.exports = {
           }
         }
 
+        // Report errors for components used WITHOUT sx prop that are imported from @primer/styled-react
+        for (const componentName of allUsedComponents) {
+          // If component is used but NOT with sx prop, and it's imported from styled-react
+          if (!componentsWithSx.has(componentName) && styledReactImports.has(componentName)) {
+            const importInfo = styledReactImports.get(componentName)
+            context.report({
+              node: importInfo.specifier,
+              messageId: 'usePrimerReactImport',
+              data: {componentName},
+              fix(fixer) {
+                const {node: importNode, specifier} = importInfo
+                const otherSpecifiers = importNode.specifiers.filter(s => s !== specifier)
+
+                // If this is the only import, replace the whole import
+                if (otherSpecifiers.length === 0) {
+                  return fixer.replaceText(importNode, `import { ${componentName} } from '@primer/react'`)
+                }
+
+                // Otherwise, remove from current import and add new import
+                const fixes = []
+
+                // Remove the specifier from current import
+                if (importNode.specifiers.length === 1) {
+                  fixes.push(fixer.remove(importNode))
+                } else {
+                  const isFirst = importNode.specifiers[0] === specifier
+                  const isLast = importNode.specifiers[importNode.specifiers.length - 1] === specifier
+
+                  if (isFirst) {
+                    const nextSpecifier = importNode.specifiers[1]
+                    fixes.push(fixer.removeRange([specifier.range[0], nextSpecifier.range[0]]))
+                  } else if (isLast) {
+                    const prevSpecifier = importNode.specifiers[importNode.specifiers.length - 2]
+                    fixes.push(fixer.removeRange([prevSpecifier.range[1], specifier.range[1]]))
+                  } else {
+                    const nextSpecifier = importNode.specifiers[importNode.specifiers.indexOf(specifier) + 1]
+                    fixes.push(fixer.removeRange([specifier.range[0], nextSpecifier.range[0]]))
+                  }
+                }
+
+                // Add new import
+                fixes.push(fixer.insertTextAfter(importNode, `\nimport { ${componentName} } from '@primer/react'`))
+
+                return fixes
+              },
+            })
+          }
+        }
+
         // Also report for types and utilities that should always be from styled-react
         for (const [importName, importInfo] of primerReactImports) {
           if ((styledTypes.has(importName) || styledUtilities.has(importName)) && !styledReactImports.has(importName)) {