no-system-props: skip html elements

.changeset/few-beers-jump.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-primer-react": patch
+---
+
+no-system-props: skip html elements

src/rules/__tests__/no-system-props.test.js

@@ -22,6 +22,7 @@ ruleTester.run('no-system-props', rule, {
     `import {Button} from '@primer/react'; <Button variant="large" />`,
     `import {Button} from '@primer/react'; <Button size="large" />`,
     `import {ActionMenu} from '@primer/react'; <ActionMenu.Overlay width="large" />`,
+    {code: `<img width="200px" />`, options: [{skipImportCheck: true}]},
   ],
   invalid: [
     {

src/rules/no-system-props.js

@@ -1,4 +1,5 @@
 const {isPrimerComponent} = require('../utils/is-primer-component')
+const {isHTMLElement} = require('../utils/is-html-element')
 const {getJSXOpeningElementName} = require('../utils/get-jsx-opening-element-name')
 const {pick} = require('@styled-system/props')
 const {some, last} = require('lodash')
@@ -81,7 +82,14 @@ module.exports = {
 
     return {
       JSXOpeningElement(jsxNode) {
-        if (!skipImportCheck && !isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) return
+        if (skipImportCheck) {
+          // if we skip checking if component is imported from primer,
+          // we need to atleast skip html elements
+          if (isHTMLElement(jsxNode)) return
+        } else {
+          // skip if component is not imported from primer/react
+          if (!isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) return
+        }
 
         const componentName = getJSXOpeningElementName(jsxNode)
 

src/utils/is-html-element.js

@@ -0,0 +1,11 @@
+function isHTMLElement(jsxNode) {
+  if (jsxNode.name.type === 'JSXIdentifier') {
+    // this is a very silly proxy, but it works
+    // React components are capitalised, html elements are not
+    const firstLetter = jsxNode.name.name
+    if (firstLetter === firstLetter.toLowerCase()) return true
+  }
+
+  return false
+}
+exports.isHTMLElement = isHTMLElement