eslint-plugin-smarthr 6.9.1 → 6.10.1

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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.
 
+## [6.10.1](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.10.0...eslint-plugin-smarthr-v6.10.1) (2026-04-08)
+
+
+### Bug Fixes
+
+* **require-barrel-import:** next.jsの特殊文字パスでのバグ修正とリファクタリング ([#1210](https://github.com/kufu/tamatebako/issues/1210)) ([458cfe9](https://github.com/kufu/tamatebako/commit/458cfe90084cbcee936bcb375216f5807880edd7))
+
+## [6.10.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.9.1...eslint-plugin-smarthr-v6.10.0) (2026-04-08)
+
+
+### Features
+
+* **a11y-heading-in-sectioning-content:** Scrollerコンポーネントを許可リストに追加 ([#1204](https://github.com/kufu/tamatebako/issues/1204)) ([7131d5c](https://github.com/kufu/tamatebako/commit/7131d5c2b6feb55ac44f952250f58db962153399))
+
+
+### Bug Fixes
+
+* **best-practice-for-text-component:** key属性対応とコードの最適化 ([#1205](https://github.com/kufu/tamatebako/issues/1205)) ([1c9821c](https://github.com/kufu/tamatebako/commit/1c9821c1d2c4f5d8b09f2a1a1f7e18310aecc31e))
+
 ## [6.9.1](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.9.0...eslint-plugin-smarthr-v6.9.1) (2026-04-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "6.9.1",
+  "version": "6.10.1",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "5f958652e81f7a69a347489108ff88cb1b3e56dd"
+  "gitHead": "e2e55eea3e72809fab55082ad6ef4da0c6025ae8"
 }

package/rules/a11y-heading-in-sectioning-content/README.md

@@ -14,7 +14,7 @@ HeadingコンポーネントをSectioningContent(Article, Aside, Nav, Section)
 
 ## SectioningContentとして扱うコンポーネントについて
 
-このルールではsmarthr-ui/Layout系コンポーネント(Center, Reel, Sidebar, Stack)にas属性・forwardedAs属性で`section` `article` `aside` `nav` のいずれかの要素が指定されている場合、SectioningContentとして扱います。<br />
+このルールではsmarthr-ui/Layout系コンポーネント(Center, Cluster, Reel, Scroller, Sidebar, Stack)にas属性・forwardedAs属性で`section` `article` `aside` `nav` のいずれかの要素が指定されている場合、SectioningContentとして扱います。<br />
 Layout系コンポーネントがSectioningContentとして扱われている場合、smarthr-uiの内部実装レベルでもSectioningContentとして扱われるため、前述のHeadingのレベルの自動計算が有効になります。
 
 ## section要素などbuildinのSectiongContentに属する要素の利用について

package/rules/a11y-heading-in-sectioning-content/index.js

@@ -4,7 +4,7 @@ const declaratorHeadingRegex = /Heading$/
 const sectioningRegex = /((A(rticle|side))|Nav|Section|^SectioningFragment)$/
 const bareTagRegex = /^(article|aside|nav|section)$/
 const modelessDialogRegex = /ModelessDialog$/
-const layoutComponentRegex = /((C(ent|lust)er)|Reel|Sidebar|Stack|Base(Column)?)$/
+const layoutComponentRegex = /((C(ent|lust)er)|Reel|Sidebar|Stack|Scroller|Base(Column)?)$/
 const asRegex = /^(as|forwardedAs)$/
 const ignoreCheckParentTypeRegex = /^(Program|ExportNamedDeclaration)$/
 const noHeadingTagNamesRegex = /^(span|legend)$/

package/rules/best-practice-for-text-component/index.js

@@ -1,6 +1,8 @@
 const SCHEMA = []
 
+// ============================================================
 // smarthr-ui/Textコンポーネントのクラス名とプロパティのマッピング
+// ============================================================
 const CLASS_TO_PROP_MAP = {
   // size
   'shr-text-2xs': { prop: 'size', value: 'XXS' },
@@ -32,35 +34,49 @@ const CLASS_TO_PROP_MAP = {
 
 const REGEX_CLASSNAME_SPLIT = /\s+/
 
-// ESLintセレクタの基本要素
-const ATTR_AS = 'JSXAttribute[name.name="as"]'
+// ============================================================
+// ESLintセレクタ構築用の定数
+// ============================================================
+const CONVERTIBLE_SHR_CLASSES = Object.keys(CLASS_TO_PROP_MAP).join('|')
+const CONVERTIBLE_SHR_PATTERN = `(^|\\s)(${CONVERTIBLE_SHR_CLASSES})(\\s|$)`
+
 const ATTR_CLASSNAME = 'JSXAttribute[name.name="className"]'
-const ATTR_TEXT_PROPS = 'JSXAttribute[name.name=/^(size|weight|color|leading|italic|whiteSpace|maxLines|styleType|icon|prefixIcon|suffixIcon|iconGap)$/]'
 const LITERAL_TYPE = '[value.type="Literal"]'
-const HAS_SHR_CLASS = '[value.value=/shr-/]'
 
-// ESLintセレクタの共通部分
 const TEXT_OPENING = 'JSXOpeningElement[name.name="Text"]'
-const NOT_HAS_AS = `:not(:has(${ATTR_AS}))`
-const HAS_TEXT_PROPS = `:has(${ATTR_TEXT_PROPS})`
-const NOT_HAS_TEXT_PROPS = `:not(${HAS_TEXT_PROPS})`
+const HAS_ANY_ATTR = ':has(JSXAttribute)'
+const HAS_TEXT_PROPS = ':has(JSXAttribute[name.name=/^(size|weight|color|leading|italic|whiteSpace|maxLines|styleType|icon|prefixIcon|suffixIcon|iconGap)$/])'
 const CHILD_CLASSNAME_LITERAL = `> ${ATTR_CLASSNAME}${LITERAL_TYPE}`
-const NOT_HAS_SHR_CLASS = `:not(${HAS_SHR_CLASS})`
-const CHILD_AS_LITERAL = `> ${ATTR_AS}${LITERAL_TYPE}`
-
-// 完全なESLintセレクタ（事前計算）
-const SELECTOR_UNNECESSARY_TEXT_NO_ATTRS = `${TEXT_OPENING}:not(:has(JSXAttribute))`
-const SELECTOR_UNNECESSARY_TEXT_ONLY_AS = `${TEXT_OPENING}[attributes.length=1] ${CHILD_AS_LITERAL}`
-const SELECTOR_CONVERTIBLE_SHR_TO_PROPS = `${TEXT_OPENING}${NOT_HAS_AS}${NOT_HAS_TEXT_PROPS} ${CHILD_CLASSNAME_LITERAL}${HAS_SHR_CLASS}`
-const SELECTOR_UNNECESSARY_TEXT_CLASSNAME = `${TEXT_OPENING}${NOT_HAS_AS}${NOT_HAS_TEXT_PROPS} ${CHILD_CLASSNAME_LITERAL}${NOT_HAS_SHR_CLASS}`
-const SELECTOR_CONVERTIBLE_SHR_TO_PROPS_WITH_AS = `${TEXT_OPENING}:has(${ATTR_AS}${LITERAL_TYPE})${NOT_HAS_TEXT_PROPS} ${CHILD_CLASSNAME_LITERAL}${HAS_SHR_CLASS}`
-const SELECTOR_UNNECESSARY_TEXT_AS_CLASSNAME = `${TEXT_OPENING}:has(${ATTR_CLASSNAME}${LITERAL_TYPE}${NOT_HAS_SHR_CLASS})${NOT_HAS_TEXT_PROPS} ${CHILD_AS_LITERAL}`
-const SELECTOR_CONFLICTING_PROPS_SHR = `${TEXT_OPENING}${HAS_TEXT_PROPS} ${CHILD_CLASSNAME_LITERAL}`
+const HAS_CONVERTIBLE_SHR_CLASS = `[value.value=/${CONVERTIBLE_SHR_PATTERN}/]`
+const HAS_SPREAD = ':has(JSXSpreadAttribute)'
+const NOT_HAS_SPREAD = `:not(${HAS_SPREAD})`
+const NOT_HAS_AS_VARIABLE = ':not(:has(JSXAttribute[name.name="as"]:not([value.type="Literal"])))'
+
+// セレクタ構築用の共通パターン
+const TEXT_WITHOUT_TEXT_PROPS = `${TEXT_OPENING}:not(${HAS_TEXT_PROPS})`
+const CLASSNAME_WITH_CONVERTIBLE_SHR = `${CHILD_CLASSNAME_LITERAL}${HAS_CONVERTIBLE_SHR_CLASS}`
+
+// ============================================================
+// ESLintセレクタ
+// ============================================================
+// Stage 1: shr-クラス → Text属性変換
+const SELECTOR_CONVERTIBLE_SHR_TO_PROPS = `${TEXT_WITHOUT_TEXT_PROPS}${NOT_HAS_SPREAD} ${CLASSNAME_WITH_CONVERTIBLE_SHR}`
+const SELECTOR_CONVERTIBLE_SHR_TO_PROPS_WITH_SPREAD = `${TEXT_WITHOUT_TEXT_PROPS}${HAS_SPREAD} ${CLASSNAME_WITH_CONVERTIBLE_SHR}`
+
+// Stage 2: Text専用属性なし → HTML要素変換
+const SELECTOR_UNNECESSARY_TEXT_NO_ATTRS = `${TEXT_OPENING}:not(${HAS_ANY_ATTR})${NOT_HAS_SPREAD}`
+const SELECTOR_UNNECESSARY_TEXT_NO_CLASSNAME = `${TEXT_WITHOUT_TEXT_PROPS}:not(:has(${ATTR_CLASSNAME}))${HAS_ANY_ATTR}${NOT_HAS_SPREAD}${NOT_HAS_AS_VARIABLE}`
+const SELECTOR_UNNECESSARY_TEXT_WITH_CLASSNAME = `${TEXT_WITHOUT_TEXT_PROPS}:has(${ATTR_CLASSNAME}${LITERAL_TYPE}:not(${HAS_CONVERTIBLE_SHR_CLASS}))${NOT_HAS_SPREAD}${NOT_HAS_AS_VARIABLE}`
+
+// 矛盾検出
+const SELECTOR_CONFLICTING_PROPS_SHR = `${TEXT_OPENING}${HAS_TEXT_PROPS}${NOT_HAS_SPREAD} ${CHILD_CLASSNAME_LITERAL}`
+
+// ============================================================
+// ヘルパー関数
+// ============================================================
 
 /**
- * className属性の変換可能なクラス名のみを取得（パターン3専用: 矛盾チェック）
- * セレクタで [value.type="Literal"] を保証しているため、必ず文字列リテラル
- * trim-props ルールで先頭・末尾の空白は禁止されているため、trim() は不要
+ * className属性から変換可能なクラス名のみを抽出（矛盾検出用）
  */
 function getConvertible(classNameAttrNode) {
   const classNames = classNameAttrNode.value.value.split(REGEX_CLASSNAME_SPLIT)
@@ -76,9 +92,7 @@ function getConvertible(classNameAttrNode) {
 }
 
 /**
- * className属性のクラス名を解析し、1回のループで全ての情報を生成（パターン2-1, 2-2, 2-3専用）
- * セレクタで [value.type="Literal"] を保証しているため、必ず文字列リテラル
- * trim-props ルールで先頭・末尾の空白は禁止されているため、trim() は不要
+ * className属性を変換可能/不可能に分類し、Text属性ペアを生成
  */
 function categorizeClassNames(classNameAttrNode) {
   const classNames = classNameAttrNode.value.value.split(REGEX_CLASSNAME_SPLIT)
@@ -104,8 +118,7 @@ function categorizeClassNames(classNameAttrNode) {
 }
 
 /**
- * 指定した属性の値を取得（文字列リテラルのみ）
- * セレクタで [value.type="Literal"] を保証しているため、型チェックは不要
+ * 属性の文字列リテラル値を取得
  */
 function getAttributeLiteralValue(openingElement, attrName) {
   const attr = openingElement.attributes.find(
@@ -115,7 +128,7 @@ function getAttributeLiteralValue(openingElement, attrName) {
 }
 
 /**
- * 指定した属性名の属性ノードを取得
+ * 属性ノードを取得
  */
 function getAttributeNode(openingElement, attrName) {
   return openingElement.attributes.find(
@@ -134,72 +147,12 @@ module.exports = {
   },
   create(context) {
     return {
-      // パターン1-1: 属性なし
-      [SELECTOR_UNNECESSARY_TEXT_NO_ATTRS]: (node) => {
-        context.report({
-          node,
-          message: `属性を持たないTextコンポーネントは、<span>に置き換えるか、要素を削除してテキストのみにすることを検討してください。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
- - Textコンポーネントに属性がない場合、直接HTML要素を使用するか、不要な要素を削除することでシンプルになります
- - weight、size、color等の属性がある場合は、Textコンポーネントのまま利用してください`,
-        })
-      },
-
-      // パターン1-2: as属性のみ（文字列リテラル）
-      [SELECTOR_UNNECESSARY_TEXT_ONLY_AS]: (asAttrNode) => {
-        const tagName = asAttrNode.value.value
-
-        context.report({
-          node: asAttrNode.parent,
-          message: `as属性のみを持つTextコンポーネントは、ネイティブHTML要素（<${tagName}>）に置き換えてください。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
- - Textコンポーネントにas以外の属性がない場合、直接HTML要素を使用することでシンプルになります
- - weight、size、color等の属性がある場合は、Textコンポーネントのまま利用してください`,
-          fix(fixer) {
-            const openingElement = asAttrNode.parent
-            const jsxElement = openingElement.parent
-            const sourceCode = context.sourceCode || context.getSourceCode()
-
-            // 属性とその前のスペースを含めて削除
-            const tokenBefore = sourceCode.getTokenBefore(asAttrNode)
-            const rangeStart = tokenBefore.range[1]
-            const rangeEnd = asAttrNode.range[1]
-
-            return [
-              fixer.removeRange([rangeStart, rangeEnd]),
-              fixer.replaceText(openingElement.name, tagName),
-              fixer.replaceText(jsxElement.closingElement.name, tagName)
-            ]
-          },
-        })
-      },
-
-      // パターン2-1: classNameのみ（asなし）、Text属性なし、shr-クラスあり
+      // Stage 1: shr-クラス → Text属性変換（spread attributesなし）
       [SELECTOR_CONVERTIBLE_SHR_TO_PROPS]: (classNameAttrNode) => {
         const { nonConvertible, propSuggestions, convertible } = categorizeClassNames(classNameAttrNode)
         const openingElement = classNameAttrNode.parent
-        const jsxElement = openingElement.parent
-
-        // 変換可能なクラスが0個の場合、spanに変換（パターン1-3と同じ動作）
-        if (!propSuggestions) {
-          const classNameText = `className="${classNameAttrNode.value.value}"`
-          context.report({
-            node: openingElement,
-            message: `Textコンポーネントの機能を使用していないため、ネイティブHTML要素（<span>）に置き換えてください。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
- - 推奨: <span ${classNameText}>
- - Textコンポーネントの機能（weight、size、color等）を使用しない場合は、直接HTML要素を使用することでシンプルになります`,
-            fix(fixer) {
-              return [
-                fixer.replaceText(openingElement.name, 'span'),
-                fixer.replaceText(jsxElement.closingElement.name, 'span')
-              ]
-            },
-          })
-          return
-        }
+        const sourceCode = context.sourceCode || context.getSourceCode()
 
-        // 変換可能なクラスがある場合、属性に変換
         context.report({
           node: openingElement,
           message: `classNameで指定されたshr-プレフィックスのクラスは、Textコンポーネントの属性に置き換えてください。
@@ -208,157 +161,123 @@ module.exports = {
  - 変換可能なクラス: ${convertible}
  - shr-プレフィックスのクラスをTextの属性に置き換えることで、型安全性が向上し、意図がより明確になります`,
           fix(fixer) {
-            const sourceCode = context.sourceCode || context.getSourceCode()
             const fixes = []
-
             if (nonConvertible) {
-              // classNameの値を更新（属性自体は残す）
               fixes.push(fixer.replaceText(classNameAttrNode.value, `"${nonConvertible}"`))
             } else {
-              // className属性全体を削除（shr-クラスのみの場合）
               const tokenBefore = sourceCode.getTokenBefore(classNameAttrNode)
-              const rangeStart = tokenBefore.range[1]
-              const rangeEnd = classNameAttrNode.range[1]
-              fixes.push(fixer.removeRange([rangeStart, rangeEnd]))
+              fixes.push(fixer.removeRange([tokenBefore.range[1], classNameAttrNode.range[1]]))
+            }
+            const asAttrNode = getAttributeNode(openingElement, 'as')
+            if (asAttrNode) {
+              fixes.push(fixer.insertTextAfter(asAttrNode, ` ${propSuggestions}`))
+            } else {
+              fixes.push(fixer.insertTextAfter(openingElement.name, ` ${propSuggestions}`))
             }
-
-            // 新しいpropsを追加
-            fixes.push(fixer.insertTextAfter(openingElement.name, ` ${propSuggestions}`))
-
             return fixes
           },
         })
       },
 
-      // パターン1-3: classNameのみ（asなし）、Text属性なし、shr-クラスなし
-      [SELECTOR_UNNECESSARY_TEXT_CLASSNAME]: (classNameAttrNode) => {
-        const classNameText = `className="${classNameAttrNode.value.value}"`
+      // Stage 1: shr-クラス → Text属性変換（spread attributesあり、fixなし）
+      [SELECTOR_CONVERTIBLE_SHR_TO_PROPS_WITH_SPREAD]: (classNameAttrNode) => {
+        const { convertible } = categorizeClassNames(classNameAttrNode)
+        const openingElement = classNameAttrNode.parent
 
         context.report({
-          node: classNameAttrNode.parent,
-          message: `Textコンポーネントの機能を使用していないため、ネイティブHTML要素（<span>）に置き換えてください。
+          node: openingElement,
+          message: `classNameで指定されたshr-プレフィックスのクラスは、Textコンポーネントの属性に置き換えてください。
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
- - 推奨: <span ${classNameText}>
- - Textコンポーネントの機能（weight、size、color等）を使用しない場合は、直接HTML要素を使用することでシンプルになります`,
-          fix(fixer) {
-            const openingElement = classNameAttrNode.parent
-            const jsxElement = openingElement.parent
-
-            return [
-              fixer.replaceText(openingElement.name, 'span'),
-              fixer.replaceText(jsxElement.closingElement.name, 'span')
-            ]
-          },
+ - 変換可能なクラス: ${convertible}
+ - spread attributes ({...props}) があるため自動修正できません。手動で修正してください
+ - shr-プレフィックスのクラスをTextの属性に置き換えることで、型安全性が向上し、意図がより明確になります`,
         })
       },
 
-      // パターン2-2, 2-3: className + as（文字列リテラル）、Text属性なし、shr-クラスあり
-      [SELECTOR_CONVERTIBLE_SHR_TO_PROPS_WITH_AS]: (classNameAttrNode) => {
-        const { nonConvertible, propSuggestions, convertible } = categorizeClassNames(classNameAttrNode)
-        const openingElement = classNameAttrNode.parent
-        const jsxElement = openingElement.parent
-        const asValue = getAttributeLiteralValue(openingElement, 'as')
-
-        // 変換可能なクラスが0個の場合、as属性で指定されたタグに変換（パターン1-4と同じ動作）
-        if (!propSuggestions) {
-          const classNameValue = getAttributeLiteralValue(openingElement, 'className')
-          const classNameText = `className="${classNameValue}"`
-          context.report({
-            node: openingElement,
-            message: `Textコンポーネントの機能を使用していないため、ネイティブHTML要素に置き換えてください。
+      // Stage 2: 属性なし
+      [SELECTOR_UNNECESSARY_TEXT_NO_ATTRS]: (node) => {
+        context.report({
+          node,
+          message: `属性を持たないTextコンポーネントは、<span>に置き換えるか、要素を削除してテキストのみにすることを検討してください。
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
- - <${asValue}>要素にclassNameを移動してください
- - Textコンポーネントの機能（weight、size、color等）を使用しない場合は、直接HTML要素を使用することでシンプルになります`,
-            fix(fixer) {
-              const sourceCode = context.sourceCode || context.getSourceCode()
-              const asAttrNode = getAttributeNode(openingElement, 'as')
+ - Textコンポーネントに属性がない場合、直接HTML要素を使用するか、不要な要素を削除することでシンプルになります
+ - weight、size、color等の属性がある場合は、Textコンポーネントのまま利用してください`,
+        })
+      },
 
-              // 属性とその前のスペースを含めて削除
-              const tokenBefore = sourceCode.getTokenBefore(asAttrNode)
-              const rangeStart = tokenBefore.range[1]
-              const rangeEnd = asAttrNode.range[1]
-
-              return [
-                fixer.removeRange([rangeStart, rangeEnd]),
-                fixer.replaceText(openingElement.name, asValue),
-                fixer.replaceText(jsxElement.closingElement.name, asValue)
-              ]
-            },
-          })
-          return
-        }
+      // Stage 2: classNameなし
+      [SELECTOR_UNNECESSARY_TEXT_NO_CLASSNAME]: (node) => {
+        const asValue = getAttributeLiteralValue(node, 'as')
+        const tagName = asValue || 'span'
+        const sourceCode = context.sourceCode || context.getSourceCode()
 
-        // 変換可能なクラスがある場合、属性に変換
         context.report({
-          node: openingElement,
-          message: `classNameで指定されたshr-プレフィックスのクラスは、Textコンポーネントの属性に置き換えてください。
+          node,
+          message: asValue
+            ? `as属性のみを持つTextコンポーネントは、ネイティブHTML要素（<${tagName}>）に置き換えてください。
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
- - 推奨: <Text${asValue ? ` as="${asValue}"` : ''} ${propSuggestions}${nonConvertible ? ` className="${nonConvertible}"` : ''}>
- - 変換可能なクラス: ${convertible}
- - shr-プレフィックスのクラスをTextの属性に置き換えることで、型安全性が向上し、意図がより明確になります`,
+ - Textコンポーネントにas以外の属性がない場合、直接HTML要素を使用することでシンプルになります
+ - weight、size、color等の属性がある場合は、Textコンポーネントのまま利用してください`
+            : `Textコンポーネントの機能を使用していないため、ネイティブHTML要素（<span>）に置き換えてください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
+ - 推奨: <span>
+ - Textコンポーネントの機能（weight、size、color等）を使用しない場合は、直接HTML要素を使用することでシンプルになります`,
           fix(fixer) {
-            const sourceCode = context.sourceCode || context.getSourceCode()
+            const jsxElement = node.parent
             const fixes = []
-
-            if (nonConvertible) {
-              // classNameの値を更新（属性自体は残す）
-              fixes.push(fixer.replaceText(classNameAttrNode.value, `"${nonConvertible}"`))
-            } else {
-              // className属性全体を削除（shr-クラスのみの場合）
-              const tokenBefore = sourceCode.getTokenBefore(classNameAttrNode)
-              const rangeStart = tokenBefore.range[1]
-              const rangeEnd = classNameAttrNode.range[1]
-              fixes.push(fixer.removeRange([rangeStart, rangeEnd]))
-            }
-
-            // 新しいpropsを追加（as属性がある場合はその後ろに挿入）
-            const asAttrNode = getAttributeNode(openingElement, 'as')
-            if (asAttrNode) {
-              fixes.push(fixer.insertTextAfter(asAttrNode, ` ${propSuggestions}`))
-            } else {
-              fixes.push(fixer.insertTextAfter(openingElement.name, ` ${propSuggestions}`))
+            // as属性があれば削除
+            if (asValue) {
+              const asAttrNode = getAttributeNode(node, 'as')
+              const tokenBefore = sourceCode.getTokenBefore(asAttrNode)
+              fixes.push(fixer.removeRange([tokenBefore.range[1], asAttrNode.range[1]]))
             }
-
+            fixes.push(fixer.replaceText(node.name, tagName))
+            fixes.push(fixer.replaceText(jsxElement.closingElement.name, tagName))
             return fixes
           },
         })
       },
 
-      // パターン1-4: className + as（文字列リテラル）、Text属性なし、shr-クラスなし
-      [SELECTOR_UNNECESSARY_TEXT_AS_CLASSNAME]: (asAttrNode) => {
-        const tagName = asAttrNode.value.value
-        const openingElement = asAttrNode.parent
-        const classNameValue = getAttributeLiteralValue(openingElement, 'className')
-        const classNameText = `className="${classNameValue}"`
+      // Stage 2: classNameあり
+      [SELECTOR_UNNECESSARY_TEXT_WITH_CLASSNAME]: (node) => {
+        const asValue = getAttributeLiteralValue(node, 'as')
+        const classNameValue = getAttributeLiteralValue(node, 'className')
+        const tagName = asValue || 'span'
+        const sourceCode = context.sourceCode || context.getSourceCode()
+
+        // classNameは常に表示（fixerが自動で保持するため）
+        const classNameText = classNameValue ? ` className="${classNameValue}"` : ''
 
         context.report({
-          node: openingElement,
-          message: `Textコンポーネントの機能を使用していないため、ネイティブHTML要素に置き換えてください。
+          node,
+          message: asValue
+            ? `Textコンポーネントの機能を使用していないため、ネイティブHTML要素に置き換えてください。
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
  - <${tagName}>要素にclassNameを移動してください
+ - Textコンポーネントの機能（weight、size、color等）を使用しない場合は、直接HTML要素を使用することでシンプルになります`
+            : `Textコンポーネントの機能を使用していないため、ネイティブHTML要素（<span>）に置き換えてください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
+ - 推奨: <span${classNameText}>
  - Textコンポーネントの機能（weight、size、color等）を使用しない場合は、直接HTML要素を使用することでシンプルになります`,
           fix(fixer) {
-            const jsxElement = openingElement.parent
-            const sourceCode = context.sourceCode || context.getSourceCode()
-
-            // 属性とその前のスペースを含めて削除
-            const tokenBefore = sourceCode.getTokenBefore(asAttrNode)
-            const rangeStart = tokenBefore.range[1]
-            const rangeEnd = asAttrNode.range[1]
-
-            return [
-              fixer.removeRange([rangeStart, rangeEnd]),
-              fixer.replaceText(openingElement.name, tagName),
-              fixer.replaceText(jsxElement.closingElement.name, tagName)
-            ]
+            const jsxElement = node.parent
+            const fixes = []
+            // as属性があれば削除
+            if (asValue) {
+              const asAttrNode = getAttributeNode(node, 'as')
+              const tokenBefore = sourceCode.getTokenBefore(asAttrNode)
+              fixes.push(fixer.removeRange([tokenBefore.range[1], asAttrNode.range[1]]))
+            }
+            fixes.push(fixer.replaceText(node.name, tagName))
+            fixes.push(fixer.replaceText(jsxElement.closingElement.name, tagName))
+            return fixes
           },
         })
       },
 
-      // パターン3: Text属性あり、classNameにshr-クラスあり（矛盾）
+      // 矛盾検出
       [SELECTOR_CONFLICTING_PROPS_SHR]: (classNameAttrNode) => {
         const convertible = getConvertible(classNameAttrNode)
-
         if (convertible) {
           context.report({
             node: classNameAttrNode.parent,

package/rules/require-barrel-import/index.js

@@ -31,62 +31,169 @@ const SCHEMA = [
   }
 ]
 
-const entriedReplacePaths = Object.entries(replacePaths)
 const CWD = process.cwd()
 const REGEX_UNNECESSARY_SLASH = /(\/)+/g
 const REGEX_ROOT_PATH = new RegExp(`^${rootPath}/index\.`)
 const REGEX_INDEX_FILE = /\/index\.(ts|js)x?$/
 const TARGET_EXTS = ['ts', 'tsx', 'js', 'jsx']
 
-// 正規表現を事前生成してキャッシュ
-const entriedReplacePathsWithRegex = entriedReplacePaths.map(([key, values]) => [
+// Path aliasの正規表現を事前生成してキャッシュ
+const entriedReplacePathsWithRegex = Object.entries(replacePaths).map(([key, values]) => [
   key,
   values,
   new RegExp(`^${key}(.+)$`),
   values.map(v => new RegExp(`^${path.resolve(`${CWD}/${v}`)}(.+)$`))
 ])
 
-const calculateAbsoluteImportPath = (source) => {
-  if (source[0] === '/') {
-    return source
+/**
+ * Path aliasを絶対パスに変換する
+ * @param {string} importPath - import文のパス（例: '@/components/Button'）
+ * @returns {string} 絶対パス（例: '/path/to/src/components/Button'）
+ */
+const resolvePathAlias = (importPath) => {
+  if (importPath[0] === '/') {
+    return importPath
   }
 
-  return entriedReplacePathsWithRegex.reduce((prev, [key, values, keyRegex]) => {
-    if (source === prev) {
-      return values.reduce((p, v) => {
-        if (prev === p && keyRegex.test(keyRegex)) {
-          return p.replace(keyRegex, `${path.resolve(`${CWD}/${v}`)}/$1`)
+  return entriedReplacePathsWithRegex.reduce((result, [key, values, keyRegex]) => {
+    if (result === importPath) {
+      return values.reduce((resolved, value) => {
+        if (resolved === result && keyRegex.test(result)) {
+          return resolved.replace(keyRegex, `${path.resolve(`${CWD}/${value}`)}/$1`)
         }
-
-        return p
-      }, prev)
+        return resolved
+      }, result)
     }
-
-    return prev
-  }, source)
+    return result
+  }, importPath)
 }
-const calculateReplacedImportPath = (source) => {
-  return entriedReplacePathsWithRegex.reduce((prev, [key, values, keyRegex, valueRegexes]) => {
-    if (source === prev) {
-      return values.reduce((p, v, index) => {
-        if (prev === p) {
-          const regexp = valueRegexes[index]
 
-          if (regexp.test(prev)) {
-            return p.replace(regexp, `${key}/$1`).replace(REGEX_UNNECESSARY_SLASH, '/')
+/**
+ * 絶対パスをPath aliasに変換する
+ * @param {string} absolutePath - 絶対パス（例: '/path/to/src/components/Button'）
+ * @returns {string} Path alias（例: '@/components/Button'）
+ */
+const convertToPathAlias = (absolutePath) => {
+  return entriedReplacePathsWithRegex.reduce((result, [key, values, keyRegex, valueRegexes]) => {
+    if (result === absolutePath) {
+      return values.reduce((converted, value, index) => {
+        if (converted === result) {
+          const regexp = valueRegexes[index]
+          if (regexp.test(converted)) {
+            return converted.replace(regexp, `${key}/$1`).replace(REGEX_UNNECESSARY_SLASH, '/')
           }
         }
+        return converted
+      }, result)
+    }
+    return result
+  }, absolutePath)
+}
+
+/**
+ * import先がimport元の内部にあるかチェック（同階層・サブディレクトリからのimport）
+ * （Next.js App Routerの特殊文字パスにも対応）
+ * @param {string} importerDir - import元のディレクトリ
+ * @param {string} importedPath - import先のパス
+ * @returns {boolean}
+ */
+const isImportedInsideImporter = (importerDir, importedPath) => {
+  return importedPath === importerDir || importedPath.startsWith(importerDir + '/')
+}
 
-        return p
-      }, prev)
+/**
+ * allowedImportsオプションに基づいて、特定のimportが許可されているかチェックする
+ * @param {object} node - ImportDeclaration node
+ * @param {string} importerDir - import元のディレクトリ
+ * @param {Array} targetAllowedImports - 適用されるallowedImportsのキー配列
+ * @param {object} allowedImportsConfig - allowedImportsの設定
+ * @returns {{ shouldSkip: boolean, deniedModules: Array }} チェック結果
+ */
+const checkAllowedImports = (node, importerDir, targetAllowedImports, allowedImportsConfig) => {
+  let isDenyPath = false
+  let deniedModules = []
+
+  for (const allowedKey of targetAllowedImports) {
+    const allowedOption = allowedImportsConfig[allowedKey]
+
+    for (const targetModule in allowedOption) {
+      const actualTarget = targetModule[0] !== '.'
+        ? targetModule
+        : path.resolve(`${CWD}/${targetModule}`)
+
+      let importSource = node.source.value
+
+      // 絶対パスの場合は、import元ディレクトリを基準に解決
+      if (actualTarget[0] === '/') {
+        importSource = path.resolve(`${importerDir}/${importSource}`)
+      }
+
+      if (actualTarget !== importSource) {
+        continue
+      }
+
+      const allowedModules = allowedOption[targetModule] || true
+
+      if (!Array.isArray(allowedModules)) {
+        isDenyPath = true
+        deniedModules.push(true)
+      } else {
+        const importedNames = node.specifiers.map(s => s.imported?.name)
+        const notAllowedModules = importedNames.filter(name => !allowedModules.includes(name))
+        deniedModules.push(notAllowedModules)
+      }
     }
+  }
+
+  // 完全に許可されている場合はスキップ
+  const shouldSkip =
+    (isDenyPath && deniedModules[0] === true) ||
+    (!isDenyPath && deniedModules.length === 1 && deniedModules[0].length === 0)
 
-    return prev
-  }, source)
+  return { shouldSkip, deniedModules }
 }
 
-const pickImportedName = (s) => s.imported?.name
-const findExistsSync = (p) => fs.existsSync(p)
+/**
+ * import先のパスから親方向に barrel ファイルを探索する
+ * @param {string} importedPath - import先の絶対パス
+ * @param {string} importerDir - import元のディレクトリ
+ * @returns {string|undefined} 見つかったbarrelファイルのパス
+ */
+const findBarrelFile = (importedPath, importerDir) => {
+  const pathSegments = importedPath.split('/')
+  let currentPath = importedPath
+  let barrel = undefined
+
+  // ディレクトリ指定の場合、そのindex.tsを指していることは自明なので一階層上から探索
+  if (fs.existsSync(currentPath) && fs.statSync(currentPath).isDirectory()) {
+    pathSegments.pop()
+    currentPath = pathSegments.join('/')
+  }
+
+  while (pathSegments.length > 0) {
+    // 以下の場合は探索終了
+    // 1. root pathに到達した場合
+    // 2. import先がimport元の内部にある場合（同階層・サブディレクトリからのimport）
+    if (importerDir === rootPath || isImportedInsideImporter(importerDir, currentPath)) {
+      break
+    }
+
+    // 現在のパスにbarrelファイルがあるかチェック
+    const foundBarrel = TARGET_EXTS
+      .map(ext => `${currentPath}/index.${ext}`)
+      .find(filePath => fs.existsSync(filePath))
+
+    if (foundBarrel) {
+      barrel = foundBarrel
+    }
+
+    // 一階層上に移動
+    pathSegments.pop()
+    currentPath = pathSegments.join('/')
+  }
+
+  return barrel
+}
 
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
@@ -99,108 +206,78 @@ module.exports = {
   create(context) {
     const option = context.options[0] || {}
 
-    if (option.ignores && option.ignores.some((i) => (new RegExp(i)).test(context.filename))) {
-      return {}
+    // ignoresオプションでスキップ対象のファイルかチェック
+    if (option.ignores) {
+      const isIgnored = option.ignores.some(pattern =>
+        new RegExp(pattern).test(context.filename)
+      )
+      if (isIgnored) {
+        return {}
+      }
     }
 
-    const dir = getParentDir(context.filename)
+    const importerDir = getParentDir(context.filename)
+
+    // このファイルに適用されるallowedImportsのキーを収集
     const targetAllowedImports = []
     if (option?.allowedImports) {
-      for (const regex in option.allowedImports) {
-        if ((new RegExp(regex)).test(context.filename)) {
-          targetAllowedImports.push(regex)
+      for (const pattern in option.allowedImports) {
+        if (new RegExp(pattern).test(context.filename)) {
+          targetAllowedImports.push(pattern)
         }
       }
     }
 
     return {
       ImportDeclaration: (node) => {
-        let isDenyPath = false
-        let deniedModules = []
-
-        for (const allowedKey of targetAllowedImports) {
-          const allowedOption = option.allowedImports[allowedKey]
-
-          for (const targetModule in allowedOption) {
-            const actualTarget = targetModule[0] !== '.' ? targetModule : path.resolve(`${CWD}/${targetModule}`)
-            let sourceValue = node.source.value
-
-            if (actualTarget[0] === '/') {
-              sourceValue = path.resolve(`${dir}/${sourceValue}`)
-            }
-
-            if (actualTarget !== sourceValue) {
-              continue
-            }
-
-            let allowedModules = allowedOption[targetModule] || true
-
-            if (!Array.isArray(allowedModules)) {
-              isDenyPath = true
-              deniedModules.push(true)
-            } else {
-              deniedModules.push(node.specifiers.map(pickImportedName).filter(i => allowedModules.indexOf(i) == -1))
-            }
-          }
-        }
-
-        if (
-          isDenyPath && deniedModules[0] === true ||
-          !isDenyPath && deniedModules.length === 1 && deniedModules[0].length === 0
-        ) {
+        // allowedImportsチェック
+        const { shouldSkip, deniedModules } = checkAllowedImports(
+          node,
+          importerDir,
+          targetAllowedImports,
+          option.allowedImports || {}
+        )
+        if (shouldSkip) {
           return
         }
 
-        let sourceValue = node.source.value
+        // import先のパスを絶対パスに変換
+        let importedPath = node.source.value
 
-        if (sourceValue[0] === '.') {
-          sourceValue = path.resolve(`${dir}/${sourceValue}`)
+        // 相対パスの場合、絶対パスに変換
+        if (importedPath[0] === '.') {
+          importedPath = path.resolve(`${importerDir}/${importedPath}`)
         }
 
-        sourceValue = calculateAbsoluteImportPath(sourceValue)
+        // Path alias（@/, ~/など）を絶対パスに変換
+        importedPath = resolvePathAlias(importedPath)
 
-        if (sourceValue[0] !== '/') {
+        // 絶対パスでない場合（node_modulesなど）はスキップ
+        if (importedPath[0] !== '/') {
           return
         }
 
-        const sources = sourceValue.split('/')
+        // barrel ファイルを探索
+        const barrelPath = findBarrelFile(importedPath, importerDir)
 
-        // HINT: directoryの場合、indexファイルからimportしていることは自明であるため、一階層上からチェックする
-        if (fs.existsSync(sourceValue) && fs.statSync(sourceValue).isDirectory()) {
-          sources.pop()
-          sourceValue = sources.join('/')
-        }
-
-        let barrel = undefined
-
-        while (sources.length > 0) {
-          // HINT: 以下の場合は即終了
-          // - import元以下のimportだった場合
-          // - rootまで捜索した場合
-          if (
-            dir === rootPath ||
-            dir.match(new RegExp(`^${sourceValue}`))
-          ) {
-            break
-          }
-
-          barrel = TARGET_EXTS.map((e) => `${sourceValue}/index.${e}`).find(findExistsSync) || barrel
-
-          sources.pop()
-          sourceValue = sources.join('/')
+        // barrel が見つからない、またはroot pathのindex.tsの場合はスキップ
+        if (!barrelPath || REGEX_ROOT_PATH.test(barrelPath)) {
+          return
         }
 
-        if (barrel && !barrel.match(REGEX_ROOT_PATH)) {
-          barrel = calculateReplacedImportPath(barrel)
-          const noExt = barrel.replace(REGEX_INDEX_FILE, '')
-          deniedModules = [...new Set(deniedModules.flat())]
-
-          context.report({
-            node,
-            message: `${deniedModules.length ? `${deniedModules.join(', ')} は ${noExt} からimportしてください` :  `${noExt} からimportするか、${barrel} のbarrelファイルを削除して直接import可能にしてください`}
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/require-barrel-import`,
-          });
-        }
+        // barrel パスをPath aliasに変換
+        const barrelWithAlias = convertToPathAlias(barrelPath)
+        const barrelDirWithAlias = barrelWithAlias.replace(REGEX_INDEX_FILE, '')
+        const uniqueDeniedModules = [...new Set(deniedModules.flat())]
+
+        // エラーを報告
+        context.report({
+          node,
+          message: uniqueDeniedModules.length
+            ? `${uniqueDeniedModules.join(', ')} は ${barrelDirWithAlias} からimportしてください`
+            : `${barrelDirWithAlias} からimportするか、${barrelWithAlias} のbarrelファイルを削除して直接import可能にしてください`
+              + '\n - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/require-barrel-import',
+        })
       },
     }
   },

package/test/a11y-heading-in-sectioning-content.js

@@ -47,11 +47,13 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
     { code: '<Reel as="aside"><div><Heading>hoge</Heading></div></Reel>' },
     { code: '<Sidebar as="nav"><div><Heading>hoge</Heading></div></Sidebar>' },
     { code: '<Stack as="section"><div><Heading>hoge</Heading></div></Stack>' },
+    { code: '<Scroller as="section"><div><Heading>hoge</Heading></div></Scroller>' },
     { code: '<HogeCenter forwardedAs="section"><div><Heading>hoge</Heading></div></HogeCenter>' },
     { code: '<HogeCluster forwardedAs="section"><div><Heading>hoge</Heading></div></HogeCluster>' },
     { code: '<HogeReel forwardedAs="aside"><div><Heading>hoge</Heading></div></HogeReel>' },
     { code: '<HogeSidebar forwardedAs="nav"><div><Heading>hoge</Heading></div></HogeSidebar>' },
     { code: '<HogeStack forwardedAs="section"><div><Heading>hoge</Heading></div></HogeStack>' },
+    { code: '<HogeScroller forwardedAs="section"><div><Heading>hoge</Heading></div></HogeScroller>' },
     { code: '<HogeBase as="aside"><Heading>hoge</Heading></HogeBase>' },
     { code: '<HogeBaseColumn forwardedAs="nav"><Heading>hoge</Heading></HogeBaseColumn>' },
     { code: '<HogeNav aria-label="any"><Any /></HogeNav>' },

package/test/best-practice-for-text-component.js

@@ -23,7 +23,7 @@ const errorAsOnly = (tag) => `as属性のみを持つTextコンポーネント
 
 const errorUnnecessaryClassName = (className) => `Textコンポーネントの機能を使用していないため、ネイティブHTML要素（<span>）に置き換えてください。
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
- - 推奨: <span className="${className}">
+ - 推奨: <span${className ? ` className="${className}"` : ''}>
  - Textコンポーネントの機能（weight、size、color等）を使用しない場合は、直接HTML要素を使用することでシンプルになります`
 
 const errorUnnecessaryAsClassName = (tag) => `Textコンポーネントの機能を使用していないため、ネイティブHTML要素に置き換えてください。
@@ -31,12 +31,18 @@ const errorUnnecessaryAsClassName = (tag) => `Textコンポーネントの機能
  - <${tag}>要素にclassNameを移動してください
  - Textコンポーネントの機能（weight、size、color等）を使用しない場合は、直接HTML要素を使用することでシンプルになります`
 
-const errorConvertibleShr = (suggestion, convertible, as = null) => `classNameで指定されたshr-プレフィックスのクラスは、Textコンポーネントの属性に置き換えてください。
+const errorConvertibleShr = (suggestion, convertible) => `classNameで指定されたshr-プレフィックスのクラスは、Textコンポーネントの属性に置き換えてください。
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
- - 推奨: <Text${as ? ` as="${as}"` : ''} ${suggestion}>
+ - 推奨: <Text ${suggestion}>
  - 変換可能なクラス: ${convertible}
  - shr-プレフィックスのクラスをTextの属性に置き換えることで、型安全性が向上し、意図がより明確になります`
 
+const errorConvertibleShrWithSpread = (convertible) => `classNameで指定されたshr-プレフィックスのクラスは、Textコンポーネントの属性に置き換えてください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
+ - 変換可能なクラス: ${convertible}
+ - spread attributes ({...props}) があるため自動修正できません。手動で修正してください
+ - shr-プレフィックスのクラスをTextの属性に置き換えることで、型安全性が向上し、意図がより明確になります`
+
 const errorConflictingProps = (convertible) => `Textコンポーネントの属性とclassNameで矛盾する指定があります。
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
  - 変換可能なクラス: ${convertible}
@@ -52,12 +58,6 @@ ruleTester.run('best-practice-for-text-component', rule, {
     { code: `<Text weight="bold">content</Text>` },
     { code: `<Text size="M">text</Text>` },
     { code: `<Text color="TEXT_GREY">text</Text>` },
-    { code: `<Text leading="TIGHT">text</Text>` },
-    { code: `<Text italic>text</Text>` },
-    { code: `<Text whiteSpace="nowrap">text</Text>` },
-    { code: `<Text maxLines={2}>text</Text>` },
-    { code: `<Text styleType="blockTitle">text</Text>` },
-    { code: `<Text icon={<Icon />}>text</Text>` },
     // as + スタイリング属性
     { code: `<Text as="p" weight="bold">content</Text>` },
     // Textのスタイリング属性 + className（変換不可能なクラスのみ）
@@ -65,28 +65,33 @@ ruleTester.run('best-practice-for-text-component', rule, {
     // className が変数や式の場合は静的解析できないのでスキップ
     { code: `<Text className={customClass}>text</Text>` },
     { code: `<Text className={\`custom-\${type}\`}>text</Text>` },
-    { code: `<Text as="p" className={customClass}>text</Text>` },
-    { code: `<Text size="M" className={customClass}>text</Text>` },
     // as が変数の場合
     { code: `<Text as={component}>text</Text>` },
+    // spread attributes は静的解析できないのでスキップ（変換不可能なclassNameの場合）
+    { code: `<Text {...props}>content</Text>` },
+    { code: `<Text {...props} className="custom">content</Text>` },
+    // key + Text専用属性（size等）→ valid
+    { code: `<Text key="item-1" size="M">text</Text>` },
+    { code: `<Text key={itemId} weight="bold">text</Text>` },
   ],
   invalid: [
     // パターン1-1: 属性なし
     { code: `<Text>content</Text>`, errors: [{ message: ERROR_NO_ATTRS }] },
 
+    // パターン1-1b: key属性のみ（key属性は無視してspanに変換）
+    { code: `<Text key="item-1">content</Text>`, output: `<span key="item-1">content</span>`, errors: [{ message: errorUnnecessaryClassName('') }] },
+
     // パターン1-2: as属性のみ
     { code: `<Text as="p">content</Text>`, output: `<p>content</p>`, errors: [{ message: errorAsOnly('p') }] },
-    { code: `<Text as="div">content</Text>`, output: `<div>content</div>`, errors: [{ message: errorAsOnly('div') }] },
-    { code: `<Text as="p">
-      nested content
-    </Text>`, output: `<p>
-      nested content
-    </p>`, errors: [{ message: errorAsOnly('p') }] },
+
+    // パターン1-2b: as + key属性のみ（key属性は無視してasタグに変換）
+    { code: `<Text as="p" key="item-1">content</Text>`, output: `<p key="item-1">content</p>`, errors: [{ message: errorAsOnly('p') }] },
 
     // パターン1-3: classNameのみ（変換不可能なクラスのみ）
     { code: `<Text className="custom">content</Text>`, output: `<span className="custom">content</span>`, errors: [{ message: errorUnnecessaryClassName('custom') }] },
-    { code: `<Text className="custom-class another-class">text</Text>`, output: `<span className="custom-class another-class">text</span>`, errors: [{ message: errorUnnecessaryClassName('custom-class another-class') }] },
-    { code: `<Text className="custom"><span>nested</span></Text>`, output: `<span className="custom"><span>nested</span></span>`, errors: [{ message: errorUnnecessaryClassName('custom') }] },
+
+    // パターン1-3b: className + key属性（key属性は保持される）
+    { code: `<Text className="custom" key="item-1">content</Text>`, output: `<span className="custom" key="item-1">content</span>`, errors: [{ message: errorUnnecessaryClassName('custom') }] },
 
     // パターン1-4: className + as（変換不可能なクラスのみ）
     { code: `<Text as="p" className="custom">content</Text>`, output: `<p className="custom">content</p>`, errors: [{ message: errorUnnecessaryAsClassName('p') }] },
@@ -97,12 +102,12 @@ ruleTester.run('best-practice-for-text-component', rule, {
     { code: `<Text className="shr-text-lg shr-font-bold shr-text-grey">text</Text>`, output: `<Text size="L" weight="bold" color="TEXT_GREY">text</Text>`, errors: [{ message: errorConvertibleShr('size="L" weight="bold" color="TEXT_GREY"', 'shr-text-lg, shr-font-bold, shr-text-grey') }] },
 
     // パターン2-2: className + as（すべて変換可能）
-    { code: `<Text as="p" className="shr-text-sm">text</Text>`, output: `<Text as="p" size="S">text</Text>`, errors: [{ message: errorConvertibleShr('size="S"', 'shr-text-sm', 'p') }] },
-    { code: `<Text as="p" className="shr-text-sm shr-font-bold">text</Text>`, output: `<Text as="p" size="S" weight="bold">text</Text>`, errors: [{ message: errorConvertibleShr('size="S" weight="bold"', 'shr-text-sm, shr-font-bold', 'p') }] },
+    { code: `<Text as="p" className="shr-text-sm">text</Text>`, output: `<Text as="p" size="S">text</Text>`, errors: [{ message: errorConvertibleShr('size="S"', 'shr-text-sm') }] },
+    { code: `<Text as="p" className="shr-text-sm shr-font-bold">text</Text>`, output: `<Text as="p" size="S" weight="bold">text</Text>`, errors: [{ message: errorConvertibleShr('size="S" weight="bold"', 'shr-text-sm, shr-font-bold') }] },
 
     // パターン2-3: 一部のみ変換可能
     { code: `<Text className="shr-text-sm custom-class">text</Text>`, output: `<Text size="S" className="custom-class">text</Text>`, errors: [{ message: errorConvertibleShr('size="S" className="custom-class"', 'shr-text-sm') }] },
-    { code: `<Text as="p" className="shr-text-sm custom-class">text</Text>`, output: `<Text as="p" size="S" className="custom-class">text</Text>`, errors: [{ message: errorConvertibleShr('size="S" className="custom-class"', 'shr-text-sm', 'p') }] },
+    { code: `<Text as="p" className="shr-text-sm custom-class">text</Text>`, output: `<Text as="p" size="S" className="custom-class">text</Text>`, errors: [{ message: errorConvertibleShr('size="S" className="custom-class"', 'shr-text-sm') }] },
     { code: `<Text className="shr-text-lg shr-font-bold custom-one custom-two">text</Text>`, output: `<Text size="L" weight="bold" className="custom-one custom-two">text</Text>`, errors: [{ message: errorConvertibleShr('size="L" weight="bold" className="custom-one custom-two"', 'shr-text-lg, shr-font-bold') }] },
 
     // パターン2-4: shr-プレフィックスがあるが変換不可能なクラスのみ（spanに変換）
@@ -116,19 +121,15 @@ ruleTester.run('best-practice-for-text-component', rule, {
     { code: `<Text size="L" className="shr-text-sm shr-font-bold">text</Text>`, errors: [{ message: errorConflictingProps('shr-text-sm, shr-font-bold') }] },
     { code: `<Text size="M" className="shr-text-sm custom-class">text</Text>`, errors: [{ message: errorConflictingProps('shr-text-sm') }] },
 
-    // 追加テスト: 各クラスの網羅性確認
-    { code: `<Text className="shr-text-2xs">text</Text>`, output: `<Text size="XXS">text</Text>`, errors: [{ message: errorConvertibleShr('size="XXS"', 'shr-text-2xs') }] },
-    { code: `<Text className="shr-text-2xl">text</Text>`, output: `<Text size="XXL">text</Text>`, errors: [{ message: errorConvertibleShr('size="XXL"', 'shr-text-2xl') }] },
-    { code: `<Text className="shr-leading-none">text</Text>`, output: `<Text leading="NONE">text</Text>`, errors: [{ message: errorConvertibleShr('leading="NONE"', 'shr-leading-none') }] },
-    { code: `<Text className="shr-text-white">text</Text>`, output: `<Text color="TEXT_WHITE">text</Text>`, errors: [{ message: errorConvertibleShr('color="TEXT_WHITE"', 'shr-text-white') }] },
-    { code: `<Text className="shr-text-color-inherit">text</Text>`, output: `<Text color="inherit">text</Text>`, errors: [{ message: errorConvertibleShr('color="inherit"', 'shr-text-color-inherit') }] },
-
     // 追加テスト: 未知の属性が保持されることを確認
     { code: `<Text className="custom" id="foo">text</Text>`, output: `<span className="custom" id="foo">text</span>`, errors: [{ message: errorUnnecessaryClassName('custom') }] },
-    { code: `<Text as="p" className="custom" id="foo">text</Text>`, output: `<p className="custom" id="foo">text</p>`, errors: [{ message: errorUnnecessaryAsClassName('p') }] },
-    { code: `<Text id="foo" className="shr-text-sm">text</Text>`, output: `<Text size="S" id="foo">text</Text>`, errors: [{ message: errorConvertibleShr('size="S"', 'shr-text-sm') }] },
-    { code: `<Text id="foo" className="shr-text-sm custom">text</Text>`, output: `<Text size="S" id="foo" className="custom">text</Text>`, errors: [{ message: errorConvertibleShr('size="S" className="custom"', 'shr-text-sm') }] },
-    { code: `<Text as="p" id="foo" className="shr-text-sm">text</Text>`, output: `<Text as="p" size="S" id="foo">text</Text>`, errors: [{ message: errorConvertibleShr('size="S"', 'shr-text-sm', 'p') }] },
-    { code: `<Text as="p" id="foo" onClick={handler} className="shr-text-sm custom">text</Text>`, output: `<Text as="p" size="S" id="foo" onClick={handler} className="custom">text</Text>`, errors: [{ message: errorConvertibleShr('size="S" className="custom"', 'shr-text-sm', 'p') }] },
+    { code: `<Text as="p" id="foo" className="shr-text-sm">text</Text>`, output: `<Text as="p" size="S" id="foo">text</Text>`, errors: [{ message: errorConvertibleShr('size="S"', 'shr-text-sm') }] },
+
+    // key属性対応テスト（追加のエッジケース）
+    { code: `<Text key="item-1" className="shr-text-sm">text</Text>`, output: `<Text size="S" key="item-1">text</Text>`, errors: [{ message: errorConvertibleShr('size="S"', 'shr-text-sm') }] },
+
+    // spread attributes + 変換可能なclassName（fixなし、警告のみ）
+    { code: `<Text {...props} className="shr-text-sm">text</Text>`, errors: [{ message: errorConvertibleShrWithSpread('shr-text-sm') }] },
+    { code: `<Text {...props} className="shr-text-sm shr-font-bold">text</Text>`, errors: [{ message: errorConvertibleShrWithSpread('shr-text-sm, shr-font-bold') }] },
   ]
 })