eslint-plugin-primer-react 4.1.2-rc.26303d5 → 4.1.2-rc.cfb8ae8

package/CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ### Patch Changes
 
+- [#148](https://github.com/primer/eslint-plugin-primer-react/pull/148) [`523e169`](https://github.com/primer/eslint-plugin-primer-react/commit/523e169a3c6c801750d451e875c83f52e383c772) Thanks [@siddharthkp](https://github.com/siddharthkp)! - no-system-props: skip html elements
+
 - [#149](https://github.com/primer/eslint-plugin-primer-react/pull/149) [`ca14bb6`](https://github.com/primer/eslint-plugin-primer-react/commit/ca14bb695ad296903bfe7598b4eb81291796245a) Thanks [@siddharthkp](https://github.com/siddharthkp)! - no-system-props: allow maxWidth prop for Truncate
 
 ## 4.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "4.1.2-rc.26303d5",
+  "version": "4.1.2-rc.cfb8ae8",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "scripts": {

package/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: [
     {

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

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