eslint-plugin-primer-react 8.6.0 → 8.6.1-rc.78da63c

package/.github/workflows/add-to-inbox.yml

@@ -12,7 +12,7 @@ jobs:
       PROJECT_ID: 4503
     steps:
       - id: get-primer-access-token
-        uses: actions/create-github-app-token@v3
+        uses: actions/create-github-app-token@v3.1.1
         with:
           app-id: ${{ vars.PRIMER_ISSUE_TRIAGE_APP_ID }}
           private-key: ${{ secrets.PRIMER_ISSUE_TRIAGE_APP_PRIVATE_KEY }}
@@ -22,7 +22,7 @@ jobs:
         env:
           GH_TOKEN: ${{ steps.get-primer-access-token.outputs.token }}
       - id: get-github-access-token
-        uses: actions/create-github-app-token@v3
+        uses: actions/create-github-app-token@v3.1.1
         with:
           app-id: ${{ vars.PRIMER_ISSUE_TRIAGE_APP_ID_FOR_GITHUB }}
           private-key: ${{ secrets.PRIMER_ISSUE_TRIAGE_APP_PRIVATE_KEY_FOR_GITHUB }}

package/.github/workflows/release.yml

@@ -26,7 +26,7 @@ jobs:
           fetch-depth: 0
           persist-credentials: false
 
-      - uses: actions/create-github-app-token@f8d387b68d61c58ab83c6c016672934102569859
+      - uses: actions/create-github-app-token@1b10c78c7865c340bc4f6099eb2f838309f1e8c3
         id: app-token
         with:
           app-id: ${{ vars.PRIMER_APP_ID_SHARED }}
@@ -82,7 +82,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Output canary version number
-        uses: actions/github-script@v7.0.1
+        uses: actions/github-script@v9.0.0
         with:
           script: |
             const package = require(`${process.env.GITHUB_WORKSPACE}/package.json`)
@@ -131,7 +131,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Output release candidate version number
-        uses: actions/github-script@v7.0.1
+        uses: actions/github-script@v9.0.0
         with:
           script: |
             const package = require(`${process.env.GITHUB_WORKSPACE}/package.json`)

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # eslint-plugin-primer-react
 
+## 8.6.1
+
+### Patch Changes
+
+- [#548](https://github.com/primer/eslint-plugin-primer-react/pull/548) [`7f5af96`](https://github.com/primer/eslint-plugin-primer-react/commit/7f5af9610d0dde4c0e9941dc485ef1487c8d48ac) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Fix use-styled-react-import fixer stripping type keyword from import specifiers
+
 ## 8.6.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "8.6.0",
+  "version": "8.6.1-rc.78da63c",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "engines": {
@@ -38,7 +38,7 @@
     "eslint-traverse": "^1.0.0",
     "lodash": "^4.17.21",
     "styled-system": "^5.1.5",
-    "typescript": "^5.8.2"
+    "typescript": "^6.0.3"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.6.0",
@@ -57,7 +57,7 @@
     "eslint-plugin-prettier": "^5.5.4",
     "globals": "^17.0.0",
     "jest": "^30.0.5",
-    "markdownlint-cli2": "^0.21.0",
+    "markdownlint-cli2": "^0.22.0",
     "markdownlint-cli2-formatter-pretty": "^0.0.10"
   },
   "prettier": "@github/prettier-config"

package/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'},
+        },
+      ],
+    },
   ],
 })
 

package/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(