eslint-plugin-smarthr 2.0.0 → 2.2.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.2.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v2.1.0...eslint-plugin-smarthr-v2.2.0) (2025-11-07)
+
+
+### Features
+
+* a11y-help-link-with-support-hrefで対象となる変数名のバグを修正 ([#890](https://github.com/kufu/tamatebako/issues/890)) ([c9c4984](https://github.com/kufu/tamatebako/commit/c9c49848293fd88640e886c6586ae8d92a99f40c))
+* trim-propsでtemplate literalもautofixの対象にする ([#884](https://github.com/kufu/tamatebako/issues/884)) ([4072950](https://github.com/kufu/tamatebako/commit/40729507f5084308128ca39d5887ee81f2f67dd5))
+
+## [2.1.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v2.0.0...eslint-plugin-smarthr-v2.1.0) (2025-10-29)
+
+
+### Features
+
+* prohibit-export-array-typeの型チェックをArray<any>の場合も対象にする ([#869](https://github.com/kufu/tamatebako/issues/869)) ([ee4a647](https://github.com/kufu/tamatebako/commit/ee4a64755c36880d8f43c31ebd47244d71ea2fe9))
+* コンポーネントの子要素やプロパティの文字列リテラルを多言語化の観点で検査するルールを追加 ([#815](https://github.com/kufu/tamatebako/issues/815)) ([9dc8bda](https://github.com/kufu/tamatebako/commit/9dc8bda98d1a978dd0e4d61b91c858ef1c117d9c))
+
 ## [2.0.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.11.0...eslint-plugin-smarthr-v2.0.0) (2025-10-16)
 
 

package/libs/format_styled_components.js

@@ -123,4 +123,4 @@ const generateTagFormatter = ({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }) =>
   }
 }
 
-module.exports = { generateTagFormatter, checkImportStyledComponents, getStyledComponentBaseName }
+module.exports = { generateTagFormatter }

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
   "main": "index.js",
   "engines": {
-    "node": ">=22.20.0"
+    "node": ">=22.21.1"
   },
   "scripts": {
     "test": "jest"
@@ -26,7 +26,7 @@
     "json5": "^2.2.3"
   },
   "devDependencies": {
-    "typescript-eslint": "^8.46.0"
+    "typescript-eslint": "^8.46.3"
   },
   "peerDependencies": {
     "eslint": "^9"
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "dd35a6760dd9022d4b28747996c2016022e94dc6"
+  "gitHead": "56a52ee0be0573e3c6117ff2b368543fbbac5c4f"
 }

package/rules/a11y-help-link-with-support-href/index.js

@@ -1,7 +1,7 @@
 const SCHEMA = []
 
 const SUPPORT_URL_PREFIX_REGEX = /(\/|\.)support\./
-const SUPPORT_IDENTIFIER_REGEX = /(S|(^|_)s)upport(.*)(H(ref|REF)|U(rl|URL))$/
+const SUPPORT_IDENTIFIER_REGEX = /(S|(^|_)s)upport(.*)(H(ref|REF)|U(rl|RL))$/
 const PATH_OBJ_REGEX = /^((p|P)ath|PATH)\./
 const SUPPORT_PATH_MEMBER_REGEX = /\.support\./
 

package/rules/a11y-image-has-alt-attribute/index.js

@@ -1,4 +1,3 @@
-const REGEX_IMG = /((i|I)mg|Image)$/ // HINT: Iconは別途テキストが存在する場合が多いためチェックの対象外とする
 const IMG_ELEMENT = 'JSXOpeningElement[name.name=/((i|I)mg|Image)$/]'
 const ALT_LIKE_ATTRIBUTE = 'JSXAttribute[name.name=/^(alt|aria-describedby)$/]'
 

package/rules/a11y-prohibit-useless-sectioning-fragment/index.js

@@ -1,24 +1,9 @@
-const BARE_SECTIONING_TAG_REGEX = /^(article|aside|nav|section)$/
-const SECTIONING_REGEX = /((A(rticle|side))|Nav|Section)$/
-const SECTIONING_FRAGMENT = 'SectioningFragment'
-const LAYOUT_REGEX = /((C(ent|lust)er)|Reel|Sidebar|Stack|Base(Column)?)$/
-const AS_REGEX = /^(as|forwardedAs)$/
-
-const includeSectioningAsAttr = (a) => AS_REGEX.test(a.name?.name) && BARE_SECTIONING_TAG_REGEX.test(a.value.value)
-
-const searchSectioningFragment = (node) => {
-  switch (node.type) {
-    case 'JSXElement':
-      return SECTIONING_FRAGMENT === node.openingElement.name?.name ? node.openingElement : null
-    case 'Program':
-      return null
-  }
-
-  return searchSectioningFragment(node.parent)
-}
-
 const SCHEMA = []
 
+const SECTIONING_FRAGMENT_ELEMENT = 'JSXElement[openingElement.name.name="SectioningFragment"]'
+const SECTIONING_CONTENT_ELEMENT = 'JSXOpeningElement[name.name=/((A(rticle|side))|Nav|Section)$/]'
+const SECTIONING_LAYOUT_ELEMENT = 'JSXOpeningElement[name.name=/((C(ent|lust)er)|Reel|Sidebar|Stack|Base(Column)?)$/]:has(JSXAttribute[name.name=/^(as|forwardedAs)$/][value.value=/^(article|aside|nav|section)$/])'
+
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
  */
@@ -29,31 +14,11 @@ module.exports = {
   },
   create(context) {
     return {
-      JSXOpeningElement: (node) => {
-        const name = node.name?.name || ''
-        let hit = null
-        let asAttr = null
-
-        if (SECTIONING_REGEX.test(name)) {
-          hit = true
-        } else {
-          asAttr = LAYOUT_REGEX.test(name) && node.attributes.find(includeSectioningAsAttr)
-
-          if (asAttr) {
-            hit = true
-          }
-        }
-
-        if (hit) {
-          result = searchSectioningFragment(node.parent.parent)
-
-          if (result) {
-            context.report({
-              node: result,
-              message: `無意味なSectioningFragmentが記述されています。子要素である<${name}${asAttr ? ` ${asAttr.name.name}="${asAttr.value.value}"` : ''}>で問題なくセクションは設定されているため、このSectioningFragmentは削除してください`
-            })
-          }
-        }
+      [`${SECTIONING_FRAGMENT_ELEMENT}:has(:matches(${SECTIONING_CONTENT_ELEMENT}, ${SECTIONING_LAYOUT_ELEMENT}))`]: (node) => {
+        context.report({
+          node,
+          message: `無意味なSectioningFragmentが記述されています。子要素で問題なくセクションは設定されているため、このSectioningFragmentは削除してください`
+        })
       },
     }
   },

package/rules/a11y-trigger-has-button/index.js

@@ -1,5 +1,4 @@
 const TRIGGER_REGEX = /(Dropdown|Dialog)Trigger$/
-const HELP_DIALOG_TRIGGER_REGEX = /HelpDialogTrigger$/
 const BUTTON_REGEX = /(B|^b)utton$/
 const ANCHOR_BUTTON_REGEX = /AnchorButton$/
 const FALSY_TEXT_REGEX = /^\s*\n+\s*$/
@@ -18,54 +17,37 @@ module.exports = {
   },
   create(context) {
     return {
-      JSXElement: (parentNode) => {
-        // HINT: 閉じタグが存在しない === 子が存在しない
-        // 子を持っていない場合はおそらく固定の要素を吐き出すコンポーネントと考えられるため
-        // その中身をチェックすることで担保できるのでskipする
-        if (!parentNode.closingElement) {
-          return
-        }
-
-        const node = parentNode.openingElement
-
-        if (!node.name.name) {
-          return
-        }
-
-        const match = node.name.name.match(TRIGGER_REGEX)
-
-        if (!match || HELP_DIALOG_TRIGGER_REGEX.test(node.name.name)) {
-          return
-        }
-
+      [`JSXElement[openingElement.name.name=${TRIGGER_REGEX}]:not([openingElement.name.name=/HelpDialogTrigger$/])`]: (parentNode) => {
         const children = filterFalsyJSXText(parentNode.children)
 
         if (children.length > 1) {
+          const node = parentNode.openingElement
+          const match = node.name.name.match(TRIGGER_REGEX)
+
           context.report({
             node,
-            message: `${match[1]}Trigger の直下には複数のコンポーネントを設置することは出来ません。buttonコンポーネントが一つだけ設置されている状態にしてください`,
+            message: `${match[1]}Trigger の直下には複数のコンポーネントを設置することは出来ません。button要素が一つだけ設置されている状態にしてください`,
           })
-
-          return
-        }
-
-        children.forEach((c) => {
-          // `<DialogTrigger>{button}</DialogTrigger>` のような場合は許可する
-          if (c.type === 'JSXExpressionContainer') {
-            return false
-          }
+        } else {
+          const c = children[0]
 
           if (
-            c.type !== 'JSXElement' ||
-            !BUTTON_REGEX.test(c.openingElement.name.name) ||
-            ANCHOR_BUTTON_REGEX.test(c.openingElement.name.name)
+            // `<DialogTrigger>{button}</DialogTrigger>` のような場合は許可する
+            c &&
+            c.type !== 'JSXExpressionContainer' && (
+              c.type !== 'JSXElement' ||
+              !BUTTON_REGEX.test(c.openingElement.name.name) ||
+              ANCHOR_BUTTON_REGEX.test(c.openingElement.name.name)
+            )
           ) {
+            const match = parentNode.openingElement.name.name.match(TRIGGER_REGEX)
+
             context.report({
               node: c,
-              message: `${match[1]}Trigger の直下にはbuttonコンポーネントのみ設置してください`,
+              message: `${match[1]}Trigger の直下にはbutton要素のみ設置してください(AnchorButtonはa要素のため設置できません)`,
             })
           }
-        })
+        }
       },
     }
   },

package/rules/best-practice-for-async-current-target/index.js

@@ -33,16 +33,12 @@ module.exports = {
     const getSourceCodeText = (node) => context.sourceCode.getText(node)
 
     return {
-      MemberExpression: (node) => {
-        if (node.property && node.property.name === 'currentTarget') {
-          const eventObjectName = node.object.name
-
-          if (eventObjectName) {
-            switch (checkFunctionTopVariable(node.parent, eventObjectName, getSourceCodeText)) {
-              case 1:
-                context.report({
-                  node,
-                  message: `currentTargetはイベント処理中以外に参照するとnullになる場合があります。awaitの宣言より前にcurrentTarget、もしくはcurrentTarget以下の属性を含む値を変数として宣言してください
+      [`:matches(FunctionExpression, ArrowFunctionExpression) MemberExpression[property.name="currentTarget"][object.name]`]: (node) => {
+        switch (checkFunctionTopVariable(node.parent, node.object.name, getSourceCodeText)) {
+          case 1:
+            context.report({
+              node,
+              message: `currentTargetはイベント処理中以外に参照するとnullになる場合があります。awaitの宣言より前にcurrentTarget、もしくはcurrentTarget以下の属性を含む値を変数として宣言してください
  - 参考: https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget
  - NG例:
     const onChange = async (e) => {
@@ -55,13 +51,13 @@ module.exports = {
       await hoge()
       fuga(value)
     }`,
-                })
+            })
 
-                break
-              case 2:
-                context.report({
-                  node,
-                  message: `currentTargetはイベント処理中以外に参照するとnullになる場合があります。イベントハンドラ用関数のスコープ直下でcurrentTarget、もしくはcurrentTarget以下の属性を含む値を変数として宣言してください
+            break
+          case 2:
+            context.report({
+              node,
+              message: `currentTargetはイベント処理中以外に参照するとnullになる場合があります。イベントハンドラ用関数のスコープ直下でcurrentTarget、もしくはcurrentTarget以下の属性を含む値を変数として宣言してください
  - 参考: https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget
  - React/useStateのsetterは第一引数に関数を渡すと非同期処理になるためこの問題が起きる可能性があります
  - イベントハンドラ内で関数を定義すると参照タイミングがずれる可能性があるため、イベントハンドラ直下のスコープ内にcurrentTarget関連の参照を変数に残すことをオススメします
@@ -74,12 +70,9 @@ module.exports = {
       const value = e.currentTarget.value
       setItem((current) => ({ ...current, value }))
     }`,
-                })
-
-                break
-            }
-          }
+            })
 
+            break
         }
       },
     }

package/rules/best-practice-for-button-element/index.js

@@ -1,12 +1,6 @@
-const { checkImportStyledComponents, getStyledComponentBaseName } = require('../../libs/format_styled_components')
-
 const ERRORMESSAGE_SUFFIX = `
  - button要素のtype属性のデフォルトは "submit" のため、button要素がformでラップされていると意図しないsubmitを引き起こす可能性があります
  - smarthr-ui/Button, smarthr-ui/UnstyledButtonのtype属性のデフォルトは "button" になっているため、buttonから置き換えることをおすすめします`
-const ERRORMESSAGE_REQUIRED_TYPE_ATTR = `button要素を利用する場合、type属性に "button" もしくは "submit" を指定してください${ERRORMESSAGE_SUFFIX}`
-const ERRORMESSAGE_PROHIBIT_STYLED = `"styled.button" の直接利用をやめ、smarthr-ui/Button、もしくはsmarthr-ui/UnstyledButtonを利用してください${ERRORMESSAGE_SUFFIX}`
-
-const findTypeAttr = (a) => a.type === 'JSXAttribute' && a.name.name === 'type'
 
 const SCHEMA = []
 
@@ -21,24 +15,17 @@ module.exports = {
   },
   create(context) {
     return {
-      ImportDeclaration: (node) => {
-        checkImportStyledComponents(node, context)
-      },
-      JSXOpeningElement: (node) => {
-        if (node.name.name === 'button' && !node.attributes.find(findTypeAttr)) {
-          context.report({
-            node,
-            message: ERRORMESSAGE_REQUIRED_TYPE_ATTR,
-          });
-        }
+      [`JSXOpeningElement[name.name="button"]:not(:has(JSXAttribute[name.name="type"]))`]: (node) => {
+        context.report({
+          node,
+          message: `button要素を利用する場合、type属性に "button" もしくは "submit" を指定してください${ERRORMESSAGE_SUFFIX}`,
+        });
       },
-      VariableDeclarator: (node) => {
-        if (getStyledComponentBaseName(node) === 'button') {
-          context.report({
-            node,
-            message: ERRORMESSAGE_PROHIBIT_STYLED,
-          });
-        }
+      [`MemberExpression[object.name="styled"][property.name="button"]`]: (node) => {
+        context.report({
+          node,
+          message: `"styled.button" の直接利用をやめ、smarthr-ui/Button、もしくはsmarthr-ui/UnstyledButtonを利用してください${ERRORMESSAGE_SUFFIX}`,
+        });
       },
     }
   },

package/rules/best-practice-for-data-test-attribute/index.js

@@ -12,20 +12,17 @@ module.exports = {
   },
   create(context) {
     return {
-      JSXAttribute: (node) => {
-        const hit = node.name.name.match(PROHIBIT_ATTR_REGEX)
-
-        if (hit) {
-          context.report({
-            node,
-            message: `テストのために要素を指定するために、${hit[1]} 属性を利用するのではなく、他の方法で要素を指定することを検討してください。
- - 方法1: click_link, click_button等を利用したりすることで、利用しているテスト環境に準じた方法で要素を指定することを検討してください。
+      'JSXAttribute[name.name=/^(data-(spec|testid))$/]': (node) => {
+        context.report({
+          node,
+          message: `テストしたい要素を指定するためにテスト用の属性は利用せず、他の方法を検討してください
+ - 方法1: click_link, click_button等を利用することで、テスト環境に準じた方法で要素を指定することを検討してください
    - 参考(Testing Library): https://testing-library.com/docs/queries/about
    - 参考(Capybara): https://rubydoc.info/github/jnicklas/capybara/Capybara/Node/Finders
- - 方法2: テスト環境のメソッド等で要素が指定できない場合はrole属性、name属性、id属性等を利用した方法で要素を指定することを検討してください。
- - 方法3: 上記の方法でも要素が指定できない場合は、'eslint-disable-next-line' 等を利用して、このルールを無効化してください。`,
-          });
-        }
+ - 方法2: テスト環境のメソッド等で要素が指定できない場合はrole、name、aria系などユーザーが認識できる属性を利用した方法で要素を指定することを検討してください
+   - 画像の場合、alt属性が利用できます
+   - id, class属性は基本的にユーザーが認識出来ないため利用しないでください`,
+        });
       },
     }
   },

package/rules/best-practice-for-date/index.js

@@ -1,10 +1,3 @@
-const MESSAGE_NEW_DATE = `'new Date(arg)' のように引数を一つだけ指定したDate instanceの生成は実行環境によって結果が異なるため、以下のいずれかの方法に変更してください
- - 'new Date(2022, 12 - 1, 31)' のように数値を個別に指定する
- - dayjsなど、日付系ライブラリを利用する (例:  'dayjs(arg).toDate()')`
-const MESSAGE_PARSE = `Date.parse は実行環境によって結果が異なるため、以下のいずれかの方法に変更してください
- - 'new Date(2022, 12 - 1, 31).getTime()' のように数値を個別に指定する
- - dayjsなど、日付系ライブラリを利用する (例: 'dayjs(arg).valueOf()')`
-
 const SEPARATOR = '(\/|-)'
 const DATE_REGEX = new RegExp(`^([0-9]{4})${SEPARATOR}([0-9]{1,2})${SEPARATOR}([0-9]{1,2})`)
 
@@ -36,29 +29,23 @@ module.exports = {
   },
   create(context) {
     return {
-      NewExpression: (node) => {
-        if (
-          node.callee.name === 'Date' &&
-          node.arguments.length == 1
-        ) {
-          context.report({
-            node,
-            message: MESSAGE_NEW_DATE,
-            fix: (fixer) => fixAction(fixer, node),
-          });
-        }
+      'NewExpression[callee.name="Date"][arguments.length=1]': (node) => {
+        context.report({
+          node,
+          message: `'new Date(arg)' のように引数を一つだけ指定したDate instanceの生成は実行環境によって結果が異なるため、以下のいずれかの方法に変更してください
+ - 'new Date(2022, 12 - 1, 31)' のように数値を個別に指定する
+ - dayjsなど、日付系ライブラリを利用する (例:  'dayjs(arg).toDate()')`,
+          fix: (fixer) => fixAction(fixer, node),
+        });
       },
-      CallExpression: (node) => {
-        if (
-          node.callee.object?.name === 'Date' &&
-          node.callee.property?.name === 'parse'
-        ) {
-          context.report({
-            node,
-            message: MESSAGE_PARSE,
-            fix: (fixer) => fixAction(fixer, node, '.getTime()'),
-          });
-        }
+      'CallExpression[callee.object.name="Date"][callee.property.name="parse"]': (node) => {
+        context.report({
+          node,
+          message: `Date.parse は実行環境によって結果が異なるため、以下のいずれかの方法に変更してください
+ - 'new Date(2022, 12 - 1, 31).getTime()' のように数値を個別に指定する
+ - dayjsなど、日付系ライブラリを利用する (例: 'dayjs(arg).valueOf()')`,
+          fix: (fixer) => fixAction(fixer, node, '.getTime()'),
+        });
       },
     }
   },

package/rules/best-practice-for-nested-attributes-array-index/index.js

@@ -1,7 +1,5 @@
 const SCHEMA = []
 
-const NOINDEX_ARRAY_REGEX = /\[\]\[/
-
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
  */
@@ -11,24 +9,18 @@ module.exports = {
     schema: SCHEMA,
   },
   create(context) {
-    const checker = (node, value) => {
-      if (NOINDEX_ARRAY_REGEX.test(value)) {
-        context.report({
-          node,
-          message: `入力要素のname属性に対して、配列に当たる部分の連番を指定しない場合（例: a[xxx][][yyy] ）、配列内アイテムの属性が意図せず入れ替わってしまう場合がありえるため、常にindexを設定してください。
+    const checker = (node) => {
+      context.report({
+        node,
+        message: `入力要素のname属性に対して、配列に当たる部分の連番を指定しない場合（例: a[xxx][][yyy] ）、配列内アイテムの属性が意図せず入れ替わってしまう場合がありえるため、常にindexを設定してください。
  - 例のyyyに当たる値が配列内の別アイテムに紐づいてしまう場合があります。
  - 詳しくは https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-nested-attributes-array-index を参照してください`,
-        })
-      }
+      })
     }
 
     return {
-      Literal: (node) => {
-        checker(node, node.value)
-      },
-      TemplateElement: (node) => {
-        checker(node, node.value.cooked)
-      },
+      'Literal[value=/\\[\\]\\[/]': checker,
+      'TemplateElement[value.cooked=/\\[\\]\\[/]': checker,
     }
   },
 }

package/rules/best-practice-for-remote-trigger-dialog/index.js

@@ -1,6 +1,3 @@
-const REGEX_REMOTE_TRIGGER_DIALOG = /RemoteTrigger(Action|Form|Message|Modeless)Dialog$/
-const REGEX_REMOTE_DIALOG_TRIGGER = /RemoteDialogTrigger$/
-
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
  */
@@ -10,27 +7,17 @@ module.exports = {
     schema: [],
   },
   create(context) {
-    return {
-      JSXOpeningElement: (node) => {
-        const nodeName = node.name.name || '';
-
-        const regexRemoteTriggerDialog = REGEX_REMOTE_TRIGGER_DIALOG.test(nodeName)
-
-        if (regexRemoteTriggerDialog || REGEX_REMOTE_DIALOG_TRIGGER.test(nodeName)) {
-          const attrName = regexRemoteTriggerDialog ? 'id' : 'targetId'
-          const id = node.attributes.find((a) => a.name?.name === attrName)
+    const checker = (node) => {
+      context.report({
+        node,
+        message: `${node.parent.name.name}の${node.name.name}属性には直接文字列を指定してください。
+  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）`,
+      })
+    }
 
-          if (id && id.value.type !== 'Literal') {
-            context.report({
-              node: id,
-              message: `${nodeName}の${attrName}属性には直接文字列を指定してください。
-  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）
-  - RemoteTriggerActionDialogはループやDropdown内にTriggerが存在する場合に利用してください
-  - ループやDropdown以外にTriggerが設定されている場合、TriggerAndActionDialogを利用してください`,
-            })
-          }
-        }
-      }
+    return {
+      'JSXOpeningElement[name.name=/RemoteTrigger(Action|Form|Message|Modeless)Dialog$/] JSXAttribute[name.name="id"]:not([value.type="Literal"])': checker,
+      'JSXOpeningElement[name.name=/RemoteDialogTrigger$/] JSXAttribute[name.name="targetId"]:not([value.type="Literal"])': checker,
     }
   },
 }

package/rules/best-practice-for-tailwind-prohibit-root-margin/index.js

@@ -1,46 +1,4 @@
-const { AST_NODE_TYPES } = require('@typescript-eslint/utils')
-
 const SCHEMA = []
-const MARGIN_CLASS_PATTERNS = /shr-m[trbl]?-/ // mt-, mr-, mb-, ml-, m-
-
-const findClassNameAttr = (attr) => attr.type === AST_NODE_TYPES.JSXAttribute && attr.name.name === 'className'
-
-/**
- * コンポーネントのルート要素を渡し、該当の余白クラスが存在すればそれを、なければNULLを返す
- * @param {import('@typescript-eslint/utils').TSESTree.Node} node
- * @returns {import('@typescript-eslint/utils').TSESTree.Literal | null}
- */
-const findSpacingClassInRootElement = (node) => {
-  // JSX でなければ対象外
-  if (node.type !== AST_NODE_TYPES.JSXElement) return null
-
-  const classNameAttr = node.openingElement.attributes.find(findClassNameAttr)
-
-  if (
-    classNameAttr &&
-    // className属性の値がリテラル、かつ余白クラスの場合
-    classNameAttr.value?.type === AST_NODE_TYPES.Literal && typeof classNameAttr.value.value === 'string' &&
-    MARGIN_CLASS_PATTERNS.test(classNameAttr.value.value)
-  ) {
-    return classNameAttr.value
-  }
-
-  return null
-}
-
-/**
- * ブロックステートメント内から、JSX要素を返す ReturnStatement を返す
- * @param {import('@typescript-eslint/utils').TSESTree.BlockStatement} block
- * @returns {import('@typescript-eslint/utils').TSESTree.ReturnStatement | null}
- */
-const findJSXReturnStatement = (block) => {
-  for (const statement of block.body) {
-    if (statement.type === AST_NODE_TYPES.ReturnStatement && statement.argument?.type === AST_NODE_TYPES.JSXElement) {
-      return statement
-    }
-  }
-  return null
-}
 
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule}
@@ -49,61 +7,15 @@ module.exports = {
   meta: {
     type: 'problem',
     schema: SCHEMA,
-    messages: {
-      noRootSpacing:
-        'コンポーネントのルート要素に外側への余白（margin）を設定しないでください。外側の余白は使用する側で制御するべきです。',
-    },
   },
   create(context) {
-    /**
-     * 関数本体をチェックし、ルート要素で余白クラスが設定されたJSXを返している場合、エラーを報告する
-     * @param {import('@typescript-eslint/utils').TSESTree.Node} body
-     */
-    const checkFunctionBody = (n) => {
-      const body = n.body
-
-      switch (body.type) {
-        // 関数がブロックを持たずに直接JSXを返すパターン
-        case AST_NODE_TYPES.JSXElement: {
-          const spacingClass = findSpacingClassInRootElement(body)
-
-          if (spacingClass) {
-            context.report({
-              node: spacingClass,
-              messageId: 'noRootSpacing',
-            })
-          }
-
-          break
-        }
-        // 関数がブロック内で JSX を return するパターン
-        case AST_NODE_TYPES.BlockStatement: {
-          const returnStatement = findJSXReturnStatement(body)
-          if (returnStatement?.argument) {
-            const spacingClass = findSpacingClassInRootElement(returnStatement.argument)
-            if (spacingClass) {
-              context.report({
-                node: spacingClass,
-                messageId: 'noRootSpacing',
-              })
-            }
-          }
-
-          break
-        }
-      }
-    }
-
     return {
-      // アロー関数式のコンポーネントをチェック
-      ArrowFunctionExpression: (node) => {
-        if (node.parent?.type === AST_NODE_TYPES.VariableDeclarator) {
-          checkFunctionBody(node)
-        }
+      ':matches(ArrowFunctionExpression,FunctionDeclaration,ReturnStatement)>JSXElement>JSXOpeningElement JSXAttribute[name.name="className"][value.value=/( |^)shr-m[trbl]?-/]': (node) => {
+        context.report({
+          node,
+          message: 'コンポーネントのルート要素に外側への余白（margin）を設定しないでください。外側の余白は使用する側で制御するべきです。',
+        })
       },
-
-      // function宣言のコンポーネントをチェック
-      FunctionDeclaration: checkFunctionBody,
     }
   },
 }