feat: Update use-styled-react-import rule to handle components used with and without sx prop, including aliasing for conflicts

Author: jonrohan

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

@@ -10,7 +10,11 @@ Enforce importing components that use `sx` prop from `@primer/styled-react` inst
 
 ## 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`. 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.
+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`.
+
+When a component is used both with and without the `sx` prop in the same file, the rule will import the styled version with an alias (e.g., `StyledButton`) and update the JSX usage accordingly to avoid naming conflicts.
+
+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`:
 
@@ -66,6 +70,13 @@ import {Button} from '@primer/styled-react'
 const Component = () => <Button>Click me</Button>
 ```
 
+```jsx
+import {Button} from '@primer/react'
+
+const Component1 = () => <Button>Click me</Button>
+const Component2 = () => <Button sx={{color: 'red'}}>Styled me</Button>
+```
+
 ### ✅ Correct
 
 ```jsx
@@ -99,6 +110,15 @@ import {Button} from '@primer/react'
 const Component = () => <Button>Click me</Button>
 ```
 
+```jsx
+// When a component is used both ways, use an alias for the styled version
+import {Button} from '@primer/react'
+import {Button as StyledButton} from '@primer/styled-react'
+
+const Component1 = () => <Button>Click me</Button>
+const Component2 = () => <StyledButton sx={{color: 'red'}}>Styled me</StyledButton>
+```
+
 ## Options
 
 This rule has no options.

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

@@ -172,5 +172,34 @@ import { Button } from '@primer/react'
         },
       ],
     },
+
+    // Invalid: Button used both with and without sx prop - should use alias
+    {
+      code: `import { Button } from '@primer/react'
+             const Component = () => (
+               <div>
+                 <Button>Regular button</Button>
+                 <Button sx={{ color: 'red' }}>Styled button</Button>
+               </div>
+             )`,
+      output: `import { Button } from '@primer/react'
+import { Button as StyledButton } from '@primer/styled-react'
+             const Component = () => (
+               <div>
+                 <Button>Regular button</Button>
+                 <StyledButton sx={{ color: 'red' }}>Styled button</StyledButton>
+               </div>
+             )`,
+      errors: [
+        {
+          messageId: 'useStyledReactImportWithAlias',
+          data: {componentName: 'Button', aliasName: 'StyledButton'},
+        },
+        {
+          messageId: 'useAliasedComponent',
+          data: {componentName: 'Button', aliasName: 'StyledButton'},
+        },
+      ],
+    },
   ],
 })

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

@@ -46,15 +46,20 @@ module.exports = {
     schema: [],
     messages: {
       useStyledReactImport: 'Import {{ componentName }} from "@primer/styled-react" when using with sx prop',
+      useStyledReactImportWithAlias:
+        'Import {{ componentName }} as {{ aliasName }} from "@primer/styled-react" when using with sx prop (conflicts with non-sx usage)',
+      useAliasedComponent: 'Use {{ aliasName }} instead of {{ componentName }} when using 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 componentsWithoutSx = new Set() // Track components used without sx
     const allUsedComponents = new Set() // Track all used components
     const primerReactImports = new Map() // Map of component name to import node
     const styledReactImports = new Map() // Map of components imported from styled-react to import node
+    const jsxElementsWithSx = [] // Track JSX elements that use sx prop
 
     return {
       ImportDeclaration(node) {
@@ -85,21 +90,25 @@ module.exports = {
         }
       },
 
-      JSXOpeningElement(node) {
-        const componentName = getJSXOpeningElementName(node)
+      JSXElement(node) {
+        const openingElement = node.openingElement
+        const componentName = getJSXOpeningElementName(openingElement)
 
         // 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',
-        )
+          // Check if this component has an sx prop
+          const hasSxProp = openingElement.attributes.some(
+            attr => attr.type === 'JSXAttribute' && attr.name && attr.name.name === 'sx',
+          )
 
-        if (hasSxProp && styledComponents.has(componentName)) {
-          componentsWithSx.add(componentName)
+          if (hasSxProp) {
+            componentsWithSx.add(componentName)
+            jsxElementsWithSx.push({node, componentName, openingElement})
+          } else {
+            componentsWithoutSx.add(componentName)
+          }
         }
       },
 
@@ -108,45 +117,86 @@ module.exports = {
         for (const componentName of componentsWithSx) {
           const importInfo = primerReactImports.get(componentName)
           if (importInfo && !styledReactImports.has(componentName)) {
+            // Check if this component is also used without sx prop (conflict scenario)
+            const hasConflict = componentsWithoutSx.has(componentName)
+
             context.report({
               node: importInfo.specifier,
-              messageId: 'useStyledReactImport',
-              data: {componentName},
+              messageId: hasConflict ? 'useStyledReactImportWithAlias' : 'useStyledReactImport',
+              data: hasConflict ? {componentName, aliasName: `Styled${componentName}`} : {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/styled-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))
+                if (hasConflict) {
+                  // Use alias when there's a conflict - keep original import and add aliased import
+                  const aliasName = `Styled${componentName}`
+                  return fixer.insertTextAfter(
+                    importNode,
+                    `\nimport { ${componentName} as ${aliasName} } from '@primer/styled-react'`,
+                  )
                 } else {
-                  const isFirst = importNode.specifiers[0] === specifier
-                  const isLast = importNode.specifiers[importNode.specifiers.length - 1] === specifier
+                  // No conflict - use the original logic
+                  // If this is the only import, replace the whole import
+                  if (otherSpecifiers.length === 0) {
+                    return fixer.replaceText(importNode, `import { ${componentName} } from '@primer/styled-react'`)
+                  }
 
-                  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]]))
+                  // 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 nextSpecifier = importNode.specifiers[importNode.specifiers.indexOf(specifier) + 1]
-                    fixes.push(fixer.removeRange([specifier.range[0], nextSpecifier.range[0]]))
+                    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/styled-react'`),
+                  )
+
+                  return fixes
                 }
+              },
+            })
+          }
+        }
 
-                // Add new import
-                fixes.push(
-                  fixer.insertTextAfter(importNode, `\nimport { ${componentName} } from '@primer/styled-react'`),
-                )
+        // Report on JSX elements that should use aliased components
+        for (const {node: jsxNode, componentName, openingElement} of jsxElementsWithSx) {
+          const hasConflict = componentsWithoutSx.has(componentName)
+          const isImportedFromPrimerReact = primerReactImports.has(componentName)
+
+          if (hasConflict && isImportedFromPrimerReact && !styledReactImports.has(componentName)) {
+            const aliasName = `Styled${componentName}`
+            context.report({
+              node: openingElement,
+              messageId: 'useAliasedComponent',
+              data: {componentName, aliasName},
+              fix(fixer) {
+                const fixes = []
+
+                // Replace the component name in the JSX opening tag
+                fixes.push(fixer.replaceText(openingElement.name, aliasName))
+
+                // Replace the component name in the JSX closing tag if it exists
+                if (jsxNode.closingElement) {
+                  fixes.push(fixer.replaceText(jsxNode.closingElement.name, aliasName))
+                }
 
                 return fixes
               },