Fix use-styled-react-import fixer stripping type keyword from import specifiers (#548)

* Initial plan

* Fix: preserve type keyword in import specifiers when moving imports between @primer/react and @primer/styled-react

Agent-Logs-Url: https://github.com/primer/eslint-plugin-primer-react/sessions/333e9cfd-bc26-4b6b-ae2d-24fe1479cda9

Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com>

* Create breezy-geese-flash.md

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com>
Co-authored-by: Jon Rohan <jonrohan@github.com>

Author: Copilot

.changeset/breezy-geese-flash.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-primer-react": patch
+---
+
+Fix use-styled-react-import fixer stripping type keyword from import specifiers

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

@@ -364,7 +364,7 @@ import { Button } from '@primer/react'
                  <Button sx={{ color: 'red' }}>Styled button</Button>
                </div>
              )`,
-      output: `import { Link, Button } from '@primer/styled-react'
+      output: `import { Button, Link } from '@primer/styled-react'
              const Component = () => (
                <div>
                  <Link sx={{ color: 'red' }} />
@@ -438,6 +438,40 @@ import { ThemeProvider } from '@primer/styled-react'
         },
       ],
     },
+
+    // Invalid: type keyword preserved when splitting imports - component with sx moved to styled-react
+    {
+      code: `import { Button, type ButtonProps } from '@primer/react'
+             const Component = () => <Button sx={{ color: 'red' }}>Click me</Button>`,
+      output: `import { type ButtonProps } from '@primer/react'
+import { Button } from '@primer/styled-react'
+             const Component = () => <Button sx={{ color: 'red' }}>Click me</Button>`,
+      errors: [
+        {
+          messageId: 'useStyledReactImport',
+          data: {componentName: 'Button'},
+        },
+      ],
+    },
+
+    // Invalid: type keyword preserved on moved specifiers (type + utility)
+    {
+      code: `import { type SxProp, sx, Button } from '@primer/react'
+             const Component = () => <Button>Click me</Button>`,
+      output: `import { Button } from '@primer/react'
+import { type SxProp, sx } from '@primer/styled-react'
+             const Component = () => <Button>Click me</Button>`,
+      errors: [
+        {
+          messageId: 'moveToStyledReact',
+          data: {importName: 'SxProp'},
+        },
+        {
+          messageId: 'moveToStyledReact',
+          data: {importName: 'sx'},
+        },
+      ],
+    },
   ],
 })
 

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

@@ -3,6 +3,15 @@
 const url = require('../url')
 const {getJSXOpeningElementName} = require('../utils/get-jsx-opening-element-name')
 
+/**
+ * Format a specifier name, preserving the `type` keyword if present.
+ * @param {import('estree').ImportSpecifier} spec
+ * @returns {string}
+ */
+function formatSpecifier(spec) {
+  return spec.importKind === 'type' ? `type ${spec.imported.name}` : spec.imported.name
+}
+
 // Default components that should be imported from @primer/styled-react when used with sx prop
 const defaultStyledComponents = [
   'ActionList',
@@ -197,19 +206,24 @@ module.exports = {
                 // Convert @primer/react path to @primer/styled-react path
                 const styledReactPath = importSource.replace('@primer/react', '@primer/styled-react')
 
+                // Find the original specifier nodes for moved components to preserve importKind
+                const movedSpecifiers = changes.originalSpecifiers.filter(spec =>
+                  componentsToMove.has(spec.imported.name),
+                )
+
                 // If no components remain, replace with new import directly
                 if (remainingSpecifiers.length === 0) {
-                  const movedComponents = changes.toMove.join(', ')
+                  const movedComponents = movedSpecifiers.map(formatSpecifier).join(', ')
                   fixes.push(fixer.replaceText(importNode, `import { ${movedComponents} } from '${styledReactPath}'`))
                 } else {
                   // Otherwise, update the import to only include remaining components
-                  const remainingNames = remainingSpecifiers.map(spec => spec.imported.name)
+                  const remainingNames = remainingSpecifiers.map(formatSpecifier)
                   fixes.push(
                     fixer.replaceText(importNode, `import { ${remainingNames.join(', ')} } from '${importSource}'`),
                   )
 
                   // Add new styled-react import
-                  const movedComponents = changes.toMove.join(', ')
+                  const movedComponents = movedSpecifiers.map(formatSpecifier).join(', ')
                   fixes.push(
                     fixer.insertTextAfter(importNode, `\nimport { ${movedComponents} } from '${styledReactPath}'`),
                   )
@@ -290,10 +304,16 @@ module.exports = {
                 // Check if there's an existing primer-react import to merge with
                 const existingPrimerReactImport = Array.from(primerReactImportNodes)[0]
 
+                // Find the original specifier nodes for moved components to preserve importKind
+                const movedSpecifiers = changes.originalSpecifiers.filter(spec =>
+                  componentsToMove.has(spec.imported.name),
+                )
+
                 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(
+                  const existingNames = existingPrimerReactImport.specifiers.map(formatSpecifier)
+                  const movedNames = movedSpecifiers.map(formatSpecifier)
+                  const newSpecifiers = [...existingNames, ...movedNames].filter(
                     (name, index, arr) => arr.indexOf(name) === index,
                   )
 
@@ -306,8 +326,9 @@ module.exports = {
                   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(
+                  const existingNames = existingPrimerReactImport.specifiers.map(formatSpecifier)
+                  const movedNames = movedSpecifiers.map(formatSpecifier)
+                  const newSpecifiers = [...existingNames, ...movedNames].filter(
                     (name, index, arr) => arr.indexOf(name) === index,
                   )
 
@@ -318,22 +339,22 @@ module.exports = {
                     ),
                   )
 
-                  const remainingNames = remainingSpecifiers.map(spec => spec.imported.name)
+                  const remainingNames = remainingSpecifiers.map(formatSpecifier)
                   fixes.push(
                     fixer.replaceText(importNode, `import { ${remainingNames.join(', ')} } from '${importSource}'`),
                   )
                 } else if (remainingSpecifiers.length === 0) {
                   // Case: No existing primer-react import, no remaining styled-react imports
-                  const movedComponents = changes.toMove.join(', ')
+                  const movedComponents = movedSpecifiers.map(formatSpecifier).join(', ')
                   fixes.push(fixer.replaceText(importNode, `import { ${movedComponents} } from '${primerReactPath}'`))
                 } else {
                   // Case: No existing primer-react import, some styled-react imports remain
-                  const remainingNames = remainingSpecifiers.map(spec => spec.imported.name)
+                  const remainingNames = remainingSpecifiers.map(formatSpecifier)
                   fixes.push(
                     fixer.replaceText(importNode, `import { ${remainingNames.join(', ')} } from '${importSource}'`),
                   )
 
-                  const movedComponents = changes.toMove.join(', ')
+                  const movedComponents = movedSpecifiers.map(formatSpecifier).join(', ')
                   fixes.push(
                     fixer.insertTextAfter(importNode, `\nimport { ${movedComponents} } from '${primerReactPath}'`),
                   )
@@ -386,18 +407,14 @@ module.exports = {
                   // if there are no remaining specifiers, we can remove the whole import
                   fixes.push(fixer.remove(importNode))
                 } else {
-                  const remainingNames = remainingSpecifiers.map(spec =>
-                    spec.importKind === 'type' ? `type ${spec.imported.name}` : spec.imported.name,
-                  )
+                  const remainingNames = remainingSpecifiers.map(formatSpecifier)
                   fixes.push(
                     fixer.replaceText(importNode, `import { ${remainingNames.join(', ')} } from '${importSource}'`),
                   )
                 }
 
                 if (specifiersToMove.length > 0) {
-                  const movedComponents = specifiersToMove.map(spec =>
-                    spec.importKind === 'type' ? `type ${spec.imported.name}` : spec.imported.name,
-                  )
+                  const movedComponents = specifiersToMove.map(formatSpecifier)
                   const onNewLine = remainingSpecifiers.length > 0
                   fixes.push(
                     fixer.insertTextAfter(