eslint-plugin-primer-react 8.1.0-rc.d5a1ac8 → 8.2.0-rc.1772227

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "8.1.0-rc.d5a1ac8",
+  "version": "8.2.0-rc.1772227",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "engines": {
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@styled-system/props": "^5.1.5",
-    "@typescript-eslint/utils": "8.39.0",
+    "@typescript-eslint/utils": "^8.39.0",
     "eslint-plugin-github": "^6.0.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-traverse": "^1.0.0",
@@ -46,7 +46,7 @@
     "@github/markdownlint-github": "^0.6.3",
     "@github/prettier-config": "0.0.6",
     "@types/jest": "^30.0.0",
-    "@typescript-eslint/rule-tester": "8.39.0",
+    "@typescript-eslint/rule-tester": "8.42.0",
     "eslint": "^9.0.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-filenames": "^1.3.2",

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

@@ -56,6 +56,48 @@ ruleTester.run('use-styled-react-import', rule, {
       ],
     },
 
+    // Invalid: ActionList.Item with sx prop and ActionList imported from @primer/react
+    {
+      code: `import { ActionList } from '@primer/react'
+             const Component = () => <ActionList.Item sx={{ color: 'red' }}>Content</ActionList.Item>`,
+      output: `import { ActionList } from '@primer/styled-react'
+             const Component = () => <ActionList.Item sx={{ color: 'red' }}>Content</ActionList.Item>`,
+      errors: [
+        {
+          messageId: 'useStyledReactImport',
+          data: {componentName: 'ActionList'},
+        },
+      ],
+    },
+
+    // Invalid: FormControl used both with and without sx prop - should move to styled-react
+    {
+      code: `import { FormControl } from '@primer/react'
+             const Component = () => (
+               <div>
+                 <FormControl></FormControl>
+                 <FormControl sx={{ color: 'red' }}>
+                   <FormControl.Label visuallyHidden>Label</FormControl.Label>
+                 </FormControl>
+               </div>
+             )`,
+      output: `import { FormControl } from '@primer/styled-react'
+             const Component = () => (
+               <div>
+                 <FormControl></FormControl>
+                 <FormControl sx={{ color: 'red' }}>
+                   <FormControl.Label visuallyHidden>Label</FormControl.Label>
+                 </FormControl>
+               </div>
+             )`,
+      errors: [
+        {
+          messageId: 'useStyledReactImport',
+          data: {componentName: 'FormControl'},
+        },
+      ],
+    },
+
     // Invalid: Button with sx prop imported from @primer/react
     {
       code: `import { Button } from '@primer/react'
@@ -70,6 +112,41 @@ ruleTester.run('use-styled-react-import', rule, {
       ],
     },
 
+    // Invalid: ActionList used without sx, ActionList.Item used with sx - should move ActionList to styled-react
+    {
+      code: `import { ActionList, ActionMenu } from '@primer/react'
+             const Component = () => (
+               <ActionMenu>
+                 <ActionMenu.Overlay>
+                   <ActionList>
+                     <ActionList.Item sx={{ paddingLeft: 'calc(1 * var(--base-size-12))' }}>
+                       Item
+                     </ActionList.Item>
+                   </ActionList>
+                 </ActionMenu.Overlay>
+               </ActionMenu>
+             )`,
+      output: `import { ActionMenu } from '@primer/react'
+import { ActionList } from '@primer/styled-react'
+             const Component = () => (
+               <ActionMenu>
+                 <ActionMenu.Overlay>
+                   <ActionList>
+                     <ActionList.Item sx={{ paddingLeft: 'calc(1 * var(--base-size-12))' }}>
+                       Item
+                     </ActionList.Item>
+                   </ActionList>
+                 </ActionMenu.Overlay>
+               </ActionMenu>
+             )`,
+      errors: [
+        {
+          messageId: 'useStyledReactImport',
+          data: {componentName: 'ActionList'},
+        },
+      ],
+    },
+
     // Invalid: Multiple components, one with sx prop
     {
       code: `import { Button, Box, Avatar } from '@primer/react'
@@ -138,7 +215,7 @@ import { Button } from '@primer/styled-react'
       ],
     },
 
-    // Invalid: <Link /> and <StyledButton /> imported from styled-react but used without sx prop
+    // Invalid: <Link /> and <Button /> imported from styled-react but used without sx prop
     {
       code: `import { Button } from '@primer/react'
 import { Button as StyledButton, Link } from '@primer/styled-react'
@@ -155,7 +232,7 @@ import { Button as StyledButton, Link } from '@primer/styled-react'
                <div>
                  <Link />
                  <Button>Regular button</Button>
-                 <Button>Styled button</Button>
+                 <StyledButton>Styled button</StyledButton>
                </div>
              )`,
       errors: [
@@ -167,10 +244,6 @@ import { Button as StyledButton, Link } from '@primer/styled-react'
           messageId: 'usePrimerReactImport',
           data: {componentName: 'Link'},
         },
-        {
-          messageId: 'usePrimerReactImport',
-          data: {componentName: 'Button'},
-        },
       ],
     },
 
@@ -213,7 +286,7 @@ import { Button } from '@primer/react'
       ],
     },
 
-    // Invalid: Button used both with and without sx prop - should use alias
+    // Invalid: Button and Link used with sx prop - should move both to styled-react
     {
       code: `import { Button, Link } from '@primer/react'
              const Component = () => (
@@ -223,27 +296,83 @@ import { Button } from '@primer/react'
                  <Button sx={{ color: 'red' }}>Styled button</Button>
                </div>
              )`,
-      output: `import { Button } from '@primer/react'
-import { Button as StyledButton, Link } from '@primer/styled-react'
+      output: `import { Link, Button } from '@primer/styled-react'
              const Component = () => (
                <div>
                  <Link sx={{ color: 'red' }} />
                  <Button>Regular button</Button>
-                 <StyledButton sx={{ color: 'red' }}>Styled button</StyledButton>
+                 <Button sx={{ color: 'red' }}>Styled button</Button>
                </div>
              )`,
       errors: [
         {
-          messageId: 'useStyledReactImportWithAlias',
-          data: {componentName: 'Button', aliasName: 'StyledButton'},
+          messageId: 'useStyledReactImport',
+          data: {componentName: 'Button'},
         },
         {
           messageId: 'useStyledReactImport',
           data: {componentName: 'Link'},
         },
+      ],
+    },
+  ],
+})
+
+// Test configuration options
+ruleTester.run('use-styled-react-import with custom configuration', rule, {
+  valid: [
+    // Valid: Custom component not in default list
+    {
+      code: `import { CustomButton } from '@primer/react'
+             const Component = () => <CustomButton sx={{ color: 'red' }}>Click me</CustomButton>`,
+      options: [{}], // Using default configuration
+    },
+
+    // Valid: Custom component in custom list used without sx prop
+    {
+      code: `import { CustomButton } from '@primer/react'
+             const Component = () => <CustomButton>Click me</CustomButton>`,
+      options: [{styledComponents: ['CustomButton']}],
+    },
+
+    // Valid: Custom component with sx prop imported from styled-react
+    {
+      code: `import { CustomButton } from '@primer/styled-react'
+             const Component = () => <CustomButton sx={{ color: 'red' }}>Click me</CustomButton>`,
+      options: [{styledComponents: ['CustomButton']}],
+    },
+
+    // Valid: Box not in custom list, so sx usage is allowed from @primer/react
+    {
+      code: `import { Box } from '@primer/react'
+             const Component = () => <Box sx={{ color: 'red' }}>Content</Box>`,
+      options: [{styledComponents: ['CustomButton']}], // Box not included
+    },
+  ],
+  invalid: [
+    // Invalid: Custom component with sx prop should be from styled-react
+    {
+      code: `import { CustomButton } from '@primer/react'
+             const Component = () => <CustomButton sx={{ color: 'red' }}>Click me</CustomButton>`,
+      output: `import { CustomButton } from '@primer/styled-react'
+             const Component = () => <CustomButton sx={{ color: 'red' }}>Click me</CustomButton>`,
+      options: [{styledComponents: ['CustomButton']}],
+      errors: [
+        {
+          messageId: 'useStyledReactImport',
+          data: {componentName: 'CustomButton'},
+        },
+      ],
+    },
+    // Invalid: Custom utility should be from styled-react
+    {
+      code: `import { customSx } from '@primer/react'`,
+      output: `import { customSx } from '@primer/styled-react'`,
+      options: [{styledUtilities: ['customSx']}],
+      errors: [
         {
-          messageId: 'useAliasedComponent',
-          data: {componentName: 'Button', aliasName: 'StyledButton'},
+          messageId: 'moveToStyledReact',
+          data: {importName: 'customSx'},
         },
       ],
     },

package/src/rules/no-system-props.js

@@ -48,6 +48,7 @@ const excludedComponentProps = new Map([
   ['PointerBox', new Set(['bg'])],
   ['Truncate', new Set(['maxWidth'])],
   ['Stack', new Set(['padding', 'gap'])],
+  ['SkeletonBox', new Set(['width', 'height'])],
 ])
 
 const alwaysExcludedProps = new Set(['variant', 'size'])

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

@@ -3,8 +3,8 @@
 const url = require('../url')
 const {getJSXOpeningElementName} = require('../utils/get-jsx-opening-element-name')
 
-// Components that should be imported from @primer/styled-react when used with sx prop
-const styledComponents = new Set([
+// Default components that should be imported from @primer/styled-react when used with sx prop
+const defaultStyledComponents = [
   'ActionList',
   'ActionMenu',
   'Box',
@@ -23,13 +23,13 @@ const styledComponents = new Set([
   'Truncate',
   'Octicon',
   'Dialog',
-])
+]
 
-// Types that should be imported from @primer/styled-react
-const styledTypes = new Set(['BoxProps', 'SxProp', 'BetterSystemStyleObject'])
+// Default types that should be imported from @primer/styled-react
+const defaultStyledTypes = ['BoxProps', 'SxProp', 'BetterSystemStyleObject']
 
-// Utilities that should be imported from @primer/styled-react
-const styledUtilities = new Set(['sx'])
+// Default utilities that should be imported from @primer/styled-react
+const defaultStyledUtilities = ['sx']
 
 /**
  * @type {import('eslint').Rule.RuleModule}
@@ -43,25 +43,46 @@ module.exports = {
       url: url(module),
     },
     fixable: 'code',
-    schema: [],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          styledComponents: {
+            type: 'array',
+            items: {type: 'string'},
+            description: 'Components that should be imported from @primer/styled-react when used with sx prop',
+          },
+          styledTypes: {
+            type: 'array',
+            items: {type: 'string'},
+            description: 'Types that should be imported from @primer/styled-react',
+          },
+          styledUtilities: {
+            type: 'array',
+            items: {type: 'string'},
+            description: 'Utilities that should be imported from @primer/styled-react',
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
     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) {
+    // Get configuration options or use defaults
+    const options = context.options[0] || {}
+    const styledComponents = new Set(options.styledComponents || defaultStyledComponents)
+    const styledTypes = new Set(options.styledTypes || defaultStyledTypes)
+    const styledUtilities = new Set(options.styledUtilities || defaultStyledUtilities)
     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 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) {
@@ -86,13 +107,7 @@ 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)
-              }
             }
           }
         }
@@ -102,12 +117,12 @@ 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
+        // For compound components like "ActionList.Item", we need to check the parent component
+        const parentComponentName = componentName.includes('.') ? componentName.split('.')[0] : componentName
 
         // Track all used components that are in our styled components list
-        if (styledComponents.has(originalComponentName)) {
-          allUsedComponents.add(originalComponentName)
+        if (styledComponents.has(parentComponentName)) {
+          allUsedComponents.add(parentComponentName)
 
           // Check if this component has an sx prop
           const hasSxProp = openingElement.attributes.some(
@@ -115,20 +130,9 @@ module.exports = {
           )
 
           if (hasSxProp) {
-            componentsWithSx.add(originalComponentName)
-            jsxElementsWithSx.push({node, componentName: originalComponentName, openingElement})
+            componentsWithSx.add(parentComponentName)
           } else {
-            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,
-              })
-            }
+            componentsWithoutSx.add(parentComponentName)
           }
         }
       },
@@ -141,23 +145,16 @@ module.exports = {
         for (const componentName of componentsWithSx) {
           const importInfo = primerReactImports.get(componentName)
           if (importInfo && !styledReactImports.has(componentName)) {
-            const hasConflict = componentsWithoutSx.has(componentName)
             const {node: importNode} = importInfo
 
             if (!importNodeChanges.has(importNode)) {
               importNodeChanges.set(importNode, {
                 toMove: [],
-                toAlias: [],
                 originalSpecifiers: [...importNode.specifiers],
               })
             }
 
-            const changes = importNodeChanges.get(importNode)
-            if (hasConflict) {
-              changes.toAlias.push(componentName)
-            } else {
-              changes.toMove.push(componentName)
-            }
+            importNodeChanges.get(importNode).toMove.push(componentName)
           }
         }
 
@@ -165,15 +162,12 @@ 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: hasConflict ? 'useStyledReactImportWithAlias' : 'useStyledReactImport',
-              data: hasConflict ? {componentName, aliasName: `Styled${componentName}`} : {componentName},
+              messageId: 'useStyledReactImport',
+              data: {componentName},
               fix(fixer) {
-                const {node: importNode, specifier} = importInfo
+                const {node: importNode} = importInfo
                 const changes = importNodeChanges.get(importNode)
 
                 if (!changes) {
@@ -181,10 +175,7 @@ module.exports = {
                 }
 
                 // Only apply the fix once per import node (for the first component processed)
-                const isFirstComponent =
-                  changes.originalSpecifiers[0] === specifier ||
-                  (changes.toMove.length > 0 && changes.toMove[0] === componentName) ||
-                  (changes.toAlias.length > 0 && changes.toAlias[0] === componentName)
+                const isFirstComponent = changes.toMove[0] === componentName
 
                 if (!isFirstComponent) {
                   return null
@@ -196,27 +187,13 @@ module.exports = {
                 // Find specifiers that remain in original import
                 const remainingSpecifiers = changes.originalSpecifiers.filter(spec => {
                   const name = spec.imported.name
-                  // Keep components that are not being moved (only aliased components stay for non-sx usage)
                   return !componentsToMove.has(name)
                 })
 
-                // If no components remain, replace with new imports directly
+                // If no components remain, replace with new import directly
                 if (remainingSpecifiers.length === 0) {
-                  // Build the new imports to replace the original
-                  const newImports = []
-
-                  // Add imports for moved components
-                  for (const componentName of changes.toMove) {
-                    newImports.push(`import { ${componentName} } from '@primer/styled-react'`)
-                  }
-
-                  // Add aliased imports for conflicted components
-                  for (const componentName of changes.toAlias) {
-                    const aliasName = `Styled${componentName}`
-                    newImports.push(`import { ${componentName} as ${aliasName} } from '@primer/styled-react'`)
-                  }
-
-                  fixes.push(fixer.replaceText(importNode, newImports.join('\n')))
+                  const movedComponents = changes.toMove.join(', ')
+                  fixes.push(fixer.replaceText(importNode, `import { ${movedComponents} } from '@primer/styled-react'`))
                 } else {
                   // Otherwise, update the import to only include remaining components
                   const remainingNames = remainingSpecifiers.map(spec => spec.imported.name)
@@ -224,56 +201,11 @@ module.exports = {
                     fixer.replaceText(importNode, `import { ${remainingNames.join(', ')} } from '@primer/react'`),
                   )
 
-                  // Combine all styled-react imports into a single import statement
-                  const styledReactImports = []
-
-                  // Add aliased components first
-                  for (const componentName of changes.toAlias) {
-                    const aliasName = `Styled${componentName}`
-                    styledReactImports.push(`${componentName} as ${aliasName}`)
-                  }
-
-                  // Add moved components second
-                  for (const componentName of changes.toMove) {
-                    styledReactImports.push(componentName)
-                  }
-
-                  if (styledReactImports.length > 0) {
-                    fixes.push(
-                      fixer.insertTextAfter(
-                        importNode,
-                        `\nimport { ${styledReactImports.join(', ')} } from '@primer/styled-react'`,
-                      ),
-                    )
-                  }
-                }
-
-                return fixes
-              },
-            })
-          }
-        }
-
-        // 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))
+                  // Add new styled-react import
+                  const movedComponents = changes.toMove.join(', ')
+                  fixes.push(
+                    fixer.insertTextAfter(importNode, `\nimport { ${movedComponents} } from '@primer/styled-react'`),
+                  )
                 }
 
                 return fixes
@@ -403,30 +335,6 @@ module.exports = {
           }
         }
 
-        // 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
-              },
-            })
-          }
-        }
-
         // 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)) {