eslint-plugin-primer-react 8.5.1-rc.7865cb9 → 8.5.1-rc.79a6690

package/CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ### Patch Changes
 
+- [#474](https://github.com/primer/eslint-plugin-primer-react/pull/474) [`1e0f943`](https://github.com/primer/eslint-plugin-primer-react/commit/1e0f943a264aaac2581b95916bd0cb8a66a41a17) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Fix `no-unnecessary-components` rule to support `@primer/styled-react` imports.
+
 - [#461](https://github.com/primer/eslint-plugin-primer-react/pull/461) [`75ae0a5`](https://github.com/primer/eslint-plugin-primer-react/commit/75ae0a5cb1d4587b5481c8a459033206aae8e5c3) Thanks [@joshfarrant](https://github.com/joshfarrant)! - Export `enforce-button-for-link-with-no-href` rule, which flags `Link` components which don't have a `href`.
 
 ## 8.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "8.5.1-rc.7865cb9",
+  "version": "8.5.1-rc.79a6690",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "engines": {
@@ -55,7 +55,7 @@
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-no-only-tests": "^3.3.0",
     "eslint-plugin-prettier": "^5.5.4",
-    "globals": "^16.3.0",
+    "globals": "^17.0.0",
     "jest": "^30.0.5",
     "markdownlint-cli2": "^0.20.0",
     "markdownlint-cli2-formatter-pretty": "^0.0.9"

package/src/rules/__tests__/no-unnecessary-components.test.js

@@ -7,6 +7,7 @@ const rule = require('../no-unnecessary-components')
 const {components} = require('../no-unnecessary-components')
 
 const prcImport = 'import React from "react"; import {Box, Text} from "@primer/react";'
+const styledReactImport = 'import React from "react"; import {Box, Text} from "@primer/styled-react";'
 const brandImport = 'import React from "react"; import {Box, Text} from "@primer/react-brand";'
 
 /** @param {string} content */
@@ -66,6 +67,26 @@ ruleTester.run('unnecessary-components', rule, {
         code: `${prcImport}${stringRecordDeclaration}${jsx(`<${component} {...props}>Hello World</${component}>`)}`,
         filename,
       },
+      {
+        name: `${component} from @primer/styled-react with sx prop`,
+        code: `${styledReactImport}${jsx(`<${component} sx={{color: "red"}}>Hello World</${component}>`)}`,
+        filename,
+      },
+      {
+        name: `${component} from @primer/styled-react with any styled-system prop`,
+        code: `${styledReactImport}${jsx(`<${component} flex="row">Hello World</${component}>`)}`,
+        filename,
+      },
+      {
+        name: `${component} from @primer/styled-react with spread sx prop`,
+        code: `${styledReactImport}${sxObjectDeclaration}${jsx(`<${component} {...props}>Hello World</${component}>`)}`,
+        filename,
+      },
+      {
+        name: `${component} from @primer/styled-react with string index spread props`,
+        code: `${styledReactImport}${stringRecordDeclaration}${jsx(`<${component} {...props}>Hello World</${component}>`)}`,
+        filename,
+      },
     ]),
     {
       name: `Text with weight prop`,
@@ -151,5 +172,69 @@ ruleTester.run('unnecessary-components', rule, {
       errors: [{messageId}],
       options: [{skipImportCheck: true}],
     },
+    {
+      name: `${component} from @primer/styled-react without any styled-system props`,
+      code: `${styledReactImport}${jsx(`<${component}>Hello World</${component}>`)}`,
+      output: `${styledReactImport}${jsx(`<${replacement}>Hello World</${replacement}>`)}`,
+      errors: [{messageId}],
+      filename,
+    },
+    {
+      name: `Self-closing ${component} from @primer/styled-react without any styled-system props`,
+      code: `${styledReactImport}${jsx(`<${component} />`)}`,
+      output: `${styledReactImport}${jsx(`<${replacement} />`)}`,
+      errors: [{messageId}],
+      filename,
+    },
+    {
+      name: `${component} from @primer/styled-react with spread props without sx`,
+      code: `${styledReactImport}${testIdObjectDeclaration}${jsx(`<${component} {...props}>Hello World</${component}>`)}`,
+      output: `${styledReactImport}${testIdObjectDeclaration}${jsx(`<${replacement} {...props}>Hello World</${replacement}>`)}`,
+      errors: [{messageId}],
+      filename,
+    },
+    {
+      name: `${component} from @primer/styled-react with string element 'as' prop`,
+      code: `${styledReactImport}${jsx(`<${component} as="code">Hello world</${component}>`)}`,
+      // There is extra whitespace here we don't worry about since formatters would get rid of it
+      output: `${styledReactImport}${jsx(`<code >Hello world</code>`)}`,
+      errors: [{messageId}],
+      filename,
+    },
+    {
+      name: `${component} from @primer/styled-react with single-character 'as' prop`,
+      code: `${styledReactImport}${jsx(`<${component} as="p">Hello world</${component}>`)}`,
+      output: `${styledReactImport}${jsx(`<p >Hello world</p>`)}`,
+      errors: [{messageId}],
+      filename,
+    },
+    {
+      name: `${component} from @primer/styled-react with string element 'as' prop surrounded by unnecessary braces`,
+      code: `${styledReactImport}${jsx(`<${component} as={"code"}>Hello world</${component}>`)}`,
+      output: `${styledReactImport}${jsx(`<code >Hello world</code>`)}`,
+      errors: [{messageId}],
+      filename,
+    },
+    {
+      name: `${component} from @primer/styled-react with component reference 'as' prop`,
+      code: `${styledReactImport}${componentDeclaration}${jsx(`<${component} as={OtherComponent}>Hello world</${component}>`)}`,
+      output: `${styledReactImport}${componentDeclaration}${jsx(`<OtherComponent >Hello world</OtherComponent>`)}`,
+      errors: [{messageId}],
+      filename,
+    },
+    {
+      name: `${component} from @primer/styled-react with spread 'as' prop`,
+      code: `${styledReactImport}${asObjectDeclaration}${jsx(`<${component} {...props}>Hello world</${component}>`)}`,
+      output: null,
+      errors: [{messageId}],
+      filename,
+    },
+    {
+      name: `${component} from @primer/styled-react with unusable lowercase reference 'as' prop`,
+      code: `${styledReactImport}${asConstDeclaration}${jsx(`<${component} as={as}>Hello world</${component}>`)}`,
+      output: null,
+      errors: [{messageId}],
+      filename,
+    },
   ]),
 })

package/src/utils/is-primer-component.js

@@ -1,8 +1,8 @@
 const {isImportedFrom} = require('./is-imported-from')
 
 /**
- * Check if `name` is a JSX component that is imported from `@primer/react` or
- * a subpath `@primer/react/*`.
+ * Check if `name` is a JSX component that is imported from `@primer/react`,
+ * `@primer/styled-react`, or a subpath of either.
  * @returns {boolean}
  */
 function isPrimerComponent(name, scope) {
@@ -18,6 +18,6 @@ function isPrimerComponent(name, scope) {
     default:
       return false
   }
-  return isImportedFrom(/^@primer\/react(?:$|\/)/, identifier, scope)
+  return isImportedFrom(/^@primer\/(?:styled-)?react(?:$|\/)/, identifier, scope)
 }
 exports.isPrimerComponent = isPrimerComponent