@atlaskit/eslint-plugin-design-system 9.7.0 → 10.0.0

package/dist/cjs/index.codegen.js

@@ -16,7 +16,7 @@ var _recommended = _interopRequireDefault(require("./presets/recommended.codegen
 var _index = _interopRequireDefault(require("./rules/index.codegen"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::11fe367c1ab4107f7418a84fa435cc23>>
+ * @codegen <<SignedSource::a1bb0f17560603fa4895326b1d50744e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 

package/dist/cjs/presets/all.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5a5b0ed8cf86631274d7d30df4199e5d>>
+ * @codegen <<SignedSource::0be7639a95bf4c9bbfe00154d8193477>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -25,7 +25,8 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-empty-styled-expression': 'warn',
     '@atlaskit/design-system/no-exported-css': 'warn',
     '@atlaskit/design-system/no-exported-keyframes': 'warn',
-    '@atlaskit/design-system/no-html-button-element': 'warn',
+    '@atlaskit/design-system/no-html-anchor': 'warn',
+    '@atlaskit/design-system/no-html-button': 'warn',
     '@atlaskit/design-system/no-invalid-css-map': 'error',
     '@atlaskit/design-system/no-keyframes-tagged-template-expression': 'error',
     '@atlaskit/design-system/no-margin': 'warn',

package/dist/cjs/presets/recommended.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::af55c21605e3b8ee7836cb8950a9f713>>
+ * @codegen <<SignedSource::73a3666b244b58cc221eebcda071161d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {

package/dist/cjs/rules/index.codegen.js

@@ -18,7 +18,8 @@ var _noDirectUseOfWebPlatformDragAndDrop = _interopRequireDefault(require("./no-
 var _noEmptyStyledExpression = _interopRequireDefault(require("./no-empty-styled-expression"));
 var _noExportedCss = _interopRequireDefault(require("./no-exported-css"));
 var _noExportedKeyframes = _interopRequireDefault(require("./no-exported-keyframes"));
-var _noHtmlButtonElement = _interopRequireDefault(require("./no-html-button-element"));
+var _noHtmlAnchor = _interopRequireDefault(require("./no-html-anchor"));
+var _noHtmlButton = _interopRequireDefault(require("./no-html-button"));
 var _noInvalidCssMap = _interopRequireDefault(require("./no-invalid-css-map"));
 var _noKeyframesTaggedTemplateExpression = _interopRequireDefault(require("./no-keyframes-tagged-template-expression"));
 var _noMargin = _interopRequireDefault(require("./no-margin"));
@@ -42,7 +43,7 @@ var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typograp
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5e5b4678175cdf8209b7e2443bc4abb4>>
+ * @codegen <<SignedSource::9b934590b0ff7880e962fa4dd73bdb0b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -59,7 +60,8 @@ var _default = exports.default = {
   'no-empty-styled-expression': _noEmptyStyledExpression.default,
   'no-exported-css': _noExportedCss.default,
   'no-exported-keyframes': _noExportedKeyframes.default,
-  'no-html-button-element': _noHtmlButtonElement.default,
+  'no-html-anchor': _noHtmlAnchor.default,
+  'no-html-button': _noHtmlButton.default,
   'no-invalid-css-map': _noInvalidCssMap.default,
   'no-keyframes-tagged-template-expression': _noKeyframesTaggedTemplateExpression.default,
   'no-margin': _noMargin.default,

package/dist/cjs/rules/no-html-anchor/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createRule = require("../utils/create-rule");
+var _nodeTypes = require("./node-types");
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'no-html-anchor',
+    type: 'suggestion',
+    docs: {
+      description: 'Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      noHtmlAnchor: "This <{{ name }}> should be replaced with a link component from the Atlassian Design System, such as the \"Link\" or \"LinkButton\" component when suitable. For custom links use the \"Anchor\" primitive. ADS links include event tracking, automatic router configuration, ensure accessible implementations, and provide access to ADS styling features like design tokens."
+    }
+  },
+  create: function create(context) {
+    return {
+      // transforms styled.<anchor>(...) usages
+      CallExpression: function CallExpression(node) {
+        _nodeTypes.StyledComponent.lint(node, {
+          context: context
+        });
+      },
+      // transforms <anchor css={...}> usages
+      JSXElement: function JSXElement(node) {
+        _nodeTypes.JSXElement.lint(node, {
+          context: context
+        });
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/cjs/rules/no-html-anchor/node-types/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "JSXElement", {
+  enumerable: true,
+  get: function get() {
+    return _jsxElement.JSXElement;
+  }
+});
+Object.defineProperty(exports, "StyledComponent", {
+  enumerable: true,
+  get: function get() {
+    return _styledComponent.StyledComponent;
+  }
+});
+var _styledComponent = require("./styled-component");
+var _jsxElement = require("./jsx-element");

package/dist/cjs/rules/no-html-anchor/node-types/jsx-element/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.JSXElement = void 0;
+var ast = _interopRequireWildcard(require("../../../../ast-nodes"));
+var _supported = require("../supported");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+var JSXElement = exports.JSXElement = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context;
+    if (!(0, _supported.isSupportedForLint)(node)) {
+      return;
+    }
+    context.report({
+      node: node.openingElement,
+      messageId: 'noHtmlAnchor',
+      data: {
+        name: ast.JSXElement.getName(node)
+      }
+    });
+  }
+};

package/dist/cjs/rules/no-html-anchor/node-types/styled-component/get-styled-component-call.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStyledComponentCall = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+/**
+ * Returns a styled component
+ */
+
+var getStyledComponentCall = exports.getStyledComponentCall = function getStyledComponentCall(node) {
+  // halts unless we are dealing with a styled component
+  if (!isStyledCallExpression(node)) {
+    return;
+  }
+  // halts if the component is being exported directly
+  if ((0, _eslintCodemodUtils.closestOfType)(node, 'ExportNamedDeclaration')) {
+    return;
+  }
+  var styledComponentVariableRef = node.parent;
+  // halts if the styled component is not assigned to a variable immediately
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(styledComponentVariableRef, 'VariableDeclarator')) {
+    return;
+  }
+  return styledComponentVariableRef;
+};
+
+/**
+ * Some verbose precondition checks but all it does is check
+ * a call expression is of form `styled.a` or `styled2.a`
+ */
+var isStyledCallExpression = function isStyledCallExpression(call) {
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(call, 'CallExpression')) {
+    return false;
+  }
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(call.callee, 'MemberExpression')) {
+    return false;
+  }
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(call.callee.object, 'Identifier') || !(0, _eslintCodemodUtils.isNodeOfType)(call.callee.property, 'Identifier')) {
+    return false;
+  }
+  if (/^styled2?$/.test(call.callee.object.name)) {
+    return true;
+  }
+  return false;
+};

package/dist/cjs/rules/no-html-anchor/node-types/styled-component/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledComponent = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _getJsxElementByName2 = require("../../utils/get-jsx-element-by-name");
+var _supported = require("../supported");
+var _getStyledComponentCall = require("./get-styled-component-call");
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+var StyledComponent = exports.StyledComponent = {
+  lint: function lint(node, _ref) {
+    var _getJsxElementByName;
+    var context = _ref.context;
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') || !(0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'MemberExpression') || !(0, _eslintCodemodUtils.isNodeOfType)(node.callee.object, 'Identifier') || !(0, _eslintCodemodUtils.isNodeOfType)(node.callee.property, 'Identifier')) {
+      return;
+    }
+    var styles = (0, _getStyledComponentCall.getStyledComponentCall)(node);
+    var elementName = node.callee.property.name;
+    if (!styles || !(0, _eslintCodemodUtils.isNodeOfType)(styles.id, 'Identifier')) {
+      return;
+    }
+    var jsxElement = (_getJsxElementByName = (0, _getJsxElementByName2.getJsxElementByName)(styles.id.name, context.getScope())) === null || _getJsxElementByName === void 0 ? void 0 : _getJsxElementByName.parent;
+    if (jsxElement && !(0, _supported.isSupportedForLint)(jsxElement, elementName)) {
+      return;
+    }
+    context.report({
+      node: styles,
+      messageId: 'noHtmlAnchor',
+      data: {
+        name: node.callee.property.name
+      }
+    });
+  }
+};

package/dist/cjs/rules/no-html-anchor/node-types/supported.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSupportedForLint = isSupportedForLint;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var ast = _interopRequireWildcard(require("../../../ast-nodes"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var supportedElements = [{
+  name: 'a'
+}];
+
+/**
+ * Determines if the given JSX element is a supported element to lint with this rule.
+ */
+function isSupportedForLint(jsxNode, elementName) {
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(jsxNode, 'JSXElement')) {
+    return false;
+  }
+
+  // Allow passing in the element name because the jsxNode doesn't
+  // represent the element name with styled components
+  var elName = elementName || ast.JSXElement.getName(jsxNode);
+  if (!elName) {
+    return false;
+  }
+
+  // Only check native HTML elements, not components
+  if (elName[0] !== elName[0].toLowerCase()) {
+    return false;
+  }
+  var supportedElement = supportedElements.find(function (_ref) {
+    var name = _ref.name;
+    return name === elName;
+  });
+  if (!supportedElement) {
+    supportedElement = supportedElements.find(function (_ref2) {
+      var name = _ref2.name;
+      return name === '*';
+    });
+  }
+  if (!supportedElement) {
+    return false;
+  }
+
+  // Check if the element has any attributes that are not supported
+  var attributes = ast.JSXElement.getAttributes(jsxNode);
+  if (supportedElement.attributes && !supportedElement.attributes.every(function (_ref3) {
+    var name = _ref3.name,
+      values = _ref3.values;
+    return attributes.some(function (attribute) {
+      if (attribute.type === 'JSXSpreadAttribute') {
+        return false;
+      }
+      var isMatchingName = attribute.name.name === name;
+      var isMatchingValues = values && attribute.value && attribute.value.type === 'Literal' && typeof attribute.value.value === 'string' && (values === null || values === void 0 ? void 0 : values.includes(attribute.value.value));
+      return isMatchingName && isMatchingValues;
+    });
+  })) {
+    return false;
+  }
+  return true;
+}

package/dist/cjs/rules/no-html-anchor/utils/get-jsx-element-by-name.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getJsxElementByName = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+/**
+ * Given a component name finds its JSX usage
+ */
+var getJsxElementByName = exports.getJsxElementByName = function getJsxElementByName(componentName, scope) {
+  var _variableDeclaration$;
+  var variableDeclaration = scope.variables.find(function (v) {
+    return v.name === componentName;
+  });
+  if (!variableDeclaration) {
+    return;
+  }
+
+  // length here should be exactly 2 to indicate only two references:
+  // one being the variable declaration itself
+  // second being the JSX call site
+  // we might consider handling multiple local JSX call sites in the future
+  // but "this is good enough for now"™️
+  if (variableDeclaration.references.length !== 2) {
+    return;
+  }
+  var jsxUsage = (_variableDeclaration$ = variableDeclaration.references[1]) === null || _variableDeclaration$ === void 0 ? void 0 : _variableDeclaration$.identifier;
+  var _variableDeclaration$2 = variableDeclaration.references.map(function (ref) {
+      return ref === null || ref === void 0 ? void 0 : ref.identifier;
+    }),
+    _variableDeclaration$3 = (0, _slicedToArray2.default)(_variableDeclaration$2, 2),
+    firstIdentifier = _variableDeclaration$3[0],
+    secondIdentifier = _variableDeclaration$3[1];
+  // Check if the first reference is a JSXOpeningElement and the second is not or vice versa
+  if ((0, _eslintCodemodUtils.isNodeOfType)(firstIdentifier, 'JSXIdentifier') && !(0, _eslintCodemodUtils.isNodeOfType)(secondIdentifier, 'JSXIdentifier')) {
+    jsxUsage = firstIdentifier;
+  } else if ((0, _eslintCodemodUtils.isNodeOfType)(secondIdentifier, 'JSXIdentifier') && !(0, _eslintCodemodUtils.isNodeOfType)(firstIdentifier, 'JSXIdentifier')) {
+    jsxUsage = secondIdentifier;
+  } else {
+    return;
+  }
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(jsxUsage, 'JSXIdentifier')) {
+    return;
+  }
+  var jsxOpeningElement = jsxUsage.parent;
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(jsxOpeningElement, 'JSXOpeningElement')) {
+    return;
+  }
+  return jsxOpeningElement;
+};

package/dist/cjs/rules/no-html-button/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createRule = require("../utils/create-rule");
+var _nodeTypes = require("./node-types");
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'no-html-button',
+    type: 'suggestion',
+    docs: {
+      description: 'Discourage direct usage of HTML button elements in favor of Atlassian Design System button components.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      noHtmlButton: "This {{ name }} should be replaced with a button component from the Atlassian Design System, such as the \"Button\" component when suitable. For custom buttons use the \"Pressable\" primitive. ADS buttons include event tracking, ensure accessible implementations, and provide access to ADS styling features like design tokens."
+    }
+  },
+  create: function create(context) {
+    return {
+      // transforms styled.<button>(...) usages
+      CallExpression: function CallExpression(node) {
+        _nodeTypes.StyledComponent.lint(node, {
+          context: context
+        });
+      },
+      // transforms <button css={...}> usages
+      JSXElement: function JSXElement(node) {
+        _nodeTypes.JSXElement.lint(node, {
+          context: context
+        });
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/cjs/rules/no-html-button/node-types/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "JSXElement", {
+  enumerable: true,
+  get: function get() {
+    return _jsxElement.JSXElement;
+  }
+});
+Object.defineProperty(exports, "StyledComponent", {
+  enumerable: true,
+  get: function get() {
+    return _styledComponent.StyledComponent;
+  }
+});
+var _styledComponent = require("./styled-component");
+var _jsxElement = require("./jsx-element");

package/dist/cjs/rules/no-html-button/node-types/jsx-element/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.JSXElement = void 0;
+var ast = _interopRequireWildcard(require("../../../../ast-nodes"));
+var _supported = require("../supported");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+var JSXElement = exports.JSXElement = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context;
+    if (!(0, _supported.isSupportedForLint)(node)) {
+      return;
+    }
+    context.report({
+      node: node.openingElement,
+      messageId: 'noHtmlButton',
+      data: {
+        name: ast.JSXElement.getName(node)
+      }
+    });
+  }
+};

package/dist/cjs/rules/no-html-button/node-types/styled-component/get-styled-component-call.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStyledComponentCall = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+/**
+ * Returns a styled component
+ */
+
+var getStyledComponentCall = exports.getStyledComponentCall = function getStyledComponentCall(node) {
+  // halts unless we are dealing with a styled component
+  if (!isStyledCallExpression(node)) {
+    return;
+  }
+  // halts if the component is being exported directly
+  if ((0, _eslintCodemodUtils.closestOfType)(node, 'ExportNamedDeclaration')) {
+    return;
+  }
+  var styledComponentVariableRef = node.parent;
+  // halts if the styled component is not assigned to a variable immediately
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(styledComponentVariableRef, 'VariableDeclarator')) {
+    return;
+  }
+  return styledComponentVariableRef;
+};
+
+/**
+ * Some verbose precondition checks but all it does is check
+ * a call expression is of form `styled.button` or `styled2.button`
+ */
+var isStyledCallExpression = function isStyledCallExpression(call) {
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(call, 'CallExpression')) {
+    return false;
+  }
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(call.callee, 'MemberExpression')) {
+    return false;
+  }
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(call.callee.object, 'Identifier') || !(0, _eslintCodemodUtils.isNodeOfType)(call.callee.property, 'Identifier')) {
+    return false;
+  }
+  if (/^styled2?$/.test(call.callee.object.name)) {
+    return true;
+  }
+  return false;
+};

package/dist/cjs/rules/no-html-button/node-types/styled-component/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledComponent = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _getJsxElementByName2 = require("../../utils/get-jsx-element-by-name");
+var _supported = require("../supported");
+var _getStyledComponentCall = require("./get-styled-component-call");
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+var StyledComponent = exports.StyledComponent = {
+  lint: function lint(node, _ref) {
+    var _getJsxElementByName;
+    var context = _ref.context;
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') || !(0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'MemberExpression') || !(0, _eslintCodemodUtils.isNodeOfType)(node.callee.object, 'Identifier') || !(0, _eslintCodemodUtils.isNodeOfType)(node.callee.property, 'Identifier')) {
+      return;
+    }
+    var styles = (0, _getStyledComponentCall.getStyledComponentCall)(node);
+    var elementName = node.callee.property.name;
+    if (!styles || !(0, _eslintCodemodUtils.isNodeOfType)(styles.id, 'Identifier')) {
+      return;
+    }
+    var jsxElement = (_getJsxElementByName = (0, _getJsxElementByName2.getJsxElementByName)(styles.id.name, context.getScope())) === null || _getJsxElementByName === void 0 ? void 0 : _getJsxElementByName.parent;
+    if (jsxElement && !(0, _supported.isSupportedForLint)(jsxElement, elementName)) {
+      return;
+    }
+    context.report({
+      node: styles,
+      messageId: 'noHtmlButton',
+      data: {
+        name: node.callee.property.name
+      }
+    });
+  }
+};

package/dist/cjs/rules/no-html-button/node-types/supported.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSupportedForLint = isSupportedForLint;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var ast = _interopRequireWildcard(require("../../../ast-nodes"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var supportedElements = [{
+  name: 'button'
+}, {
+  name: 'input',
+  attributes: [{
+    name: 'type',
+    // Values from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#best_practices
+    values: ['submit', 'reset', 'button', 'image']
+  }]
+}, {
+  name: '*',
+  attributes: [{
+    name: 'role',
+    values: ['button']
+  }]
+}];
+
+/**
+ * Determines if the given JSX element is a supported element to lint with this rule.
+ */
+function isSupportedForLint(jsxNode, elementName) {
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(jsxNode, 'JSXElement')) {
+    return false;
+  }
+
+  // Allow passing in the element name because the jsxNode doesn't
+  // represent the element name with styled components
+  var elName = elementName || ast.JSXElement.getName(jsxNode);
+  if (!elName) {
+    return false;
+  }
+
+  // Only check native HTML elements, not components
+  if (elName[0] !== elName[0].toLowerCase()) {
+    return false;
+  }
+  var supportedElement = supportedElements.find(function (_ref) {
+    var name = _ref.name;
+    return name === elName;
+  });
+  if (!supportedElement) {
+    supportedElement = supportedElements.find(function (_ref2) {
+      var name = _ref2.name;
+      return name === '*';
+    });
+  }
+  if (!supportedElement) {
+    return false;
+  }
+
+  // Check if the element has any attributes that are not supported
+  var attributes = ast.JSXElement.getAttributes(jsxNode);
+  if (supportedElement.attributes && !supportedElement.attributes.every(function (_ref3) {
+    var name = _ref3.name,
+      values = _ref3.values;
+    return attributes.some(function (attribute) {
+      if (attribute.type === 'JSXSpreadAttribute') {
+        return false;
+      }
+      var isMatchingName = attribute.name.name === name;
+      var isMatchingValues = values && attribute.value && attribute.value.type === 'Literal' && typeof attribute.value.value === 'string' && (values === null || values === void 0 ? void 0 : values.includes(attribute.value.value));
+      return isMatchingName && isMatchingValues;
+    });
+  })) {
+    return false;
+  }
+  return true;
+}