feat: Enhance use-styled-react-import rule to support alias mapping for styled-react imports and improve error reporting for components used without sx prop

Author: jonrohan

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

@@ -138,6 +138,42 @@ import { Button } from '@primer/styled-react'
       ],
     },
 
+    // Invalid: <Link /> and <StyledButton /> imported from styled-react but used without sx prop
+    {
+      code: `import { Button } from '@primer/react'
+import { Button as StyledButton, Link } from '@primer/styled-react'
+             const Component = () => (
+               <div>
+                 <Link />
+                 <Button>Regular button</Button>
+                 <StyledButton>Styled button</StyledButton>
+               </div>
+             )`,
+      output: `import { Button, Link } from '@primer/react'
+
+             const Component = () => (
+               <div>
+                 <Link />
+                 <Button>Regular button</Button>
+                 <Button>Styled button</Button>
+               </div>
+             )`,
+      errors: [
+        {
+          messageId: 'usePrimerReactImport',
+          data: {componentName: 'Button'},
+        },
+        {
+          messageId: 'usePrimerReactImport',
+          data: {componentName: 'Link'},
+        },
+        {
+          messageId: 'usePrimerReactImport',
+          data: {componentName: 'Button'},
+        },
+      ],
+    },
+
     // Invalid: Box imported from styled-react but used without sx prop
     {
       code: `import { Box } from '@primer/styled-react'

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

@@ -59,7 +59,9 @@ module.exports = {
     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 aliasMapping = new Map() // Map local name to original component name for aliased imports
     const jsxElementsWithSx = [] // Track JSX elements that use sx prop
+    const jsxElementsWithoutSx = [] // Track JSX elements that don't use sx prop
 
     return {
       ImportDeclaration(node) {
@@ -84,7 +86,13 @@ module.exports = {
           for (const specifier of node.specifiers) {
             if (specifier.type === 'ImportSpecifier') {
               const importedName = specifier.imported.name
+              const localName = specifier.local.name
               styledReactImports.set(importedName, {node, specifier})
+
+              // Track alias mapping for styled-react imports
+              if (localName !== importedName) {
+                aliasMapping.set(localName, importedName)
+              }
             }
           }
         }
@@ -94,20 +102,33 @@ module.exports = {
         const openingElement = node.openingElement
         const componentName = getJSXOpeningElementName(openingElement)
 
+        // Check if this is an aliased component from styled-react
+        const originalComponentName = aliasMapping.get(componentName) || componentName
+
         // Track all used components that are in our styled components list
-        if (styledComponents.has(componentName)) {
-          allUsedComponents.add(componentName)
+        if (styledComponents.has(originalComponentName)) {
+          allUsedComponents.add(originalComponentName)
 
           // 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) {
-            componentsWithSx.add(componentName)
-            jsxElementsWithSx.push({node, componentName, openingElement})
+            componentsWithSx.add(originalComponentName)
+            jsxElementsWithSx.push({node, componentName: originalComponentName, openingElement})
           } else {
-            componentsWithoutSx.add(componentName)
+            componentsWithoutSx.add(originalComponentName)
+
+            // If this is an aliased component without sx, we need to track it for renaming
+            if (aliasMapping.has(componentName)) {
+              jsxElementsWithoutSx.push({
+                node,
+                localName: componentName,
+                originalName: originalComponentName,
+                openingElement,
+              })
+            }
           }
         }
       },
@@ -261,6 +282,32 @@ module.exports = {
           }
         }
 
+        // Group styled-react imports that need to be moved to primer-react
+        const styledReactImportNodeChanges = new Map()
+
+        // Collect components that need to be moved from styled-react to primer-react
+        for (const componentName of allUsedComponents) {
+          if (!componentsWithSx.has(componentName) && styledReactImports.has(componentName)) {
+            const importInfo = styledReactImports.get(componentName)
+            const {node: importNode} = importInfo
+
+            if (!styledReactImportNodeChanges.has(importNode)) {
+              styledReactImportNodeChanges.set(importNode, {
+                toMove: [],
+                originalSpecifiers: [...importNode.specifiers],
+              })
+            }
+
+            styledReactImportNodeChanges.get(importNode).toMove.push(componentName)
+          }
+        }
+
+        // Find existing primer-react import nodes to merge with
+        const primerReactImportNodes = new Set()
+        for (const [, {node}] of primerReactImports) {
+          primerReactImportNodes.add(node)
+        }
+
         // 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
@@ -271,38 +318,108 @@ module.exports = {
               messageId: 'usePrimerReactImport',
               data: {componentName},
               fix(fixer) {
-                const {node: importNode, specifier} = importInfo
-                const otherSpecifiers = importNode.specifiers.filter(s => s !== specifier)
+                const {node: importNode} = importInfo
+                const changes = styledReactImportNodeChanges.get(importNode)
 
-                // If this is the only import, replace the whole import
-                if (otherSpecifiers.length === 0) {
-                  return fixer.replaceText(importNode, `import { ${componentName} } from '@primer/react'`)
+                if (!changes) {
+                  return null
+                }
+
+                // Only apply the fix once per import node (for the first component processed)
+                const isFirstComponent = changes.toMove[0] === componentName
+
+                if (!isFirstComponent) {
+                  return null
                 }
 
-                // Otherwise, remove from current import and add new import
                 const fixes = []
+                const componentsToMove = new Set(changes.toMove)
 
-                // Remove the specifier from current import
-                if (importNode.specifiers.length === 1) {
+                // Find specifiers that remain in styled-react import
+                const remainingSpecifiers = changes.originalSpecifiers.filter(spec => {
+                  const name = spec.imported.name
+                  return !componentsToMove.has(name)
+                })
+
+                // Check if there's an existing primer-react import to merge with
+                const existingPrimerReactImport = Array.from(primerReactImportNodes)[0]
+
+                if (existingPrimerReactImport && remainingSpecifiers.length === 0) {
+                  // Case: No remaining styled-react imports, merge with existing primer-react import
+                  const existingSpecifiers = existingPrimerReactImport.specifiers.map(spec => spec.imported.name)
+                  const newSpecifiers = [...existingSpecifiers, ...changes.toMove].filter(
+                    (name, index, arr) => arr.indexOf(name) === index,
+                  )
+
+                  fixes.push(
+                    fixer.replaceText(
+                      existingPrimerReactImport,
+                      `import { ${newSpecifiers.join(', ')} } from '@primer/react'`,
+                    ),
+                  )
                   fixes.push(fixer.remove(importNode))
+                } else if (existingPrimerReactImport && remainingSpecifiers.length > 0) {
+                  // Case: Some styled-react imports remain, merge moved components with existing primer-react
+                  const existingSpecifiers = existingPrimerReactImport.specifiers.map(spec => spec.imported.name)
+                  const newSpecifiers = [...existingSpecifiers, ...changes.toMove].filter(
+                    (name, index, arr) => arr.indexOf(name) === index,
+                  )
+
+                  fixes.push(
+                    fixer.replaceText(
+                      existingPrimerReactImport,
+                      `import { ${newSpecifiers.join(', ')} } from '@primer/react'`,
+                    ),
+                  )
+
+                  const remainingNames = remainingSpecifiers.map(spec => spec.imported.name)
+                  fixes.push(
+                    fixer.replaceText(
+                      importNode,
+                      `import { ${remainingNames.join(', ')} } from '@primer/styled-react'`,
+                    ),
+                  )
+                } else if (remainingSpecifiers.length === 0) {
+                  // Case: No existing primer-react import, no remaining styled-react imports
+                  const movedComponents = changes.toMove.join(', ')
+                  fixes.push(fixer.replaceText(importNode, `import { ${movedComponents} } from '@primer/react'`))
                 } else {
-                  const isFirst = importNode.specifiers[0] === specifier
-                  const isLast = importNode.specifiers[importNode.specifiers.length - 1] === specifier
+                  // Case: No existing primer-react import, some styled-react imports remain
+                  const remainingNames = remainingSpecifiers.map(spec => spec.imported.name)
+                  fixes.push(
+                    fixer.replaceText(
+                      importNode,
+                      `import { ${remainingNames.join(', ')} } 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]]))
-                  } else {
-                    const nextSpecifier = importNode.specifiers[importNode.specifiers.indexOf(specifier) + 1]
-                    fixes.push(fixer.removeRange([specifier.range[0], nextSpecifier.range[0]]))
-                  }
+                  const movedComponents = changes.toMove.join(', ')
+                  fixes.push(fixer.insertTextAfter(importNode, `\nimport { ${movedComponents} } from '@primer/react'`))
                 }
 
-                // Add new import
-                fixes.push(fixer.insertTextAfter(importNode, `\nimport { ${componentName} } from '@primer/react'`))
+                return fixes
+              },
+            })
+          }
+        }
+
+        // Report and fix JSX elements that use aliased components without sx prop
+        for (const {node: jsxNode, originalName, openingElement} of jsxElementsWithoutSx) {
+          if (!componentsWithSx.has(originalName) && styledReactImports.has(originalName)) {
+            context.report({
+              node: openingElement,
+              messageId: 'usePrimerReactImport',
+              data: {componentName: originalName},
+              fix(fixer) {
+                const fixes = []
+
+                // Replace the aliased component name with the original component name in JSX opening tag
+                fixes.push(fixer.replaceText(openingElement.name, originalName))
+
+                // Replace the aliased component name in JSX closing tag if it exists
+                if (jsxNode.closingElement) {
+                  fixes.push(fixer.replaceText(jsxNode.closingElement.name, originalName))
+                }
 
                 return fixes
               },