@af-mobile/eslint-plugin 2.0.4 → 2.2.0

package/rules/no-token-modification.js

@@ -1,92 +1,92 @@
-// L1-1 af-mobile/no-token-modification（error）
-// 检测：非 tokens.css / tokens.project.css 文件内，重定义 --(c|s|r|t|lh|fw|shadow|z|ease|dur)-* 变量
-// 例外：路径匹配 **/tokens.css 或 **/tokens.project.css
-import postcss from 'postcss';
-
-const TOKEN_PREFIX_RE = /^--(c|s|r|t|lh|fw|shadow|z|ease|dur)-/;
-
-export default {
-  meta: {
-    type: 'problem',
-    docs: {
-      description: '禁止在 tokens.css 之外修改/重定义设计 token 变量',
-    },
-    schema: [],
-    messages: {
-      locked: "Token variable '{{name}}' is locked. Modify tokens.css or register in tokens.project.css instead",
-    },
-  },
-
-  create(context) {
-    const filename = context.filename || context.getFilename();
-    // 例外文件：tokens.css 和 tokens.project.css
-    if (/tokens(\.project)?\.css$/.test(filename)) return {};
-
-    return {
-      // ESLint 9 对 .css 文件原生支持不足，用源码文本直接喂 postcss
-      Program(node) {
-        const source = context.sourceCode || context.getSourceCode();
-        const css = source.getText();
-        if (!css.includes('--')) return;
-        try {
-          const root = postcss.parse(css);
-          root.walkDecls(decl => {
-            if (TOKEN_PREFIX_RE.test(decl.prop)) {
-              context.report({
-                node,
-                loc: {
-                  // postcss 节点有 source.start/end（行从 1 起，列从 0 起 → ESLint 期望 0 起）
-                  start: { line: decl.source.start.line, column: decl.source.start.column - 1 },
-                  end: { line: decl.source.end.line, column: decl.source.end.column },
-                },
-                messageId: 'locked',
-                data: { name: decl.prop },
-              });
-            }
-          });
-        } catch {
-          // 非 CSS 内容（如 .js 文件恰好进入此规则）：静默跳过
-        }
-      },
-      // 检测 JS 内 el.style.setProperty('--c-brand', ...) / removeProperty('--c-brand') 间接覆盖 token
-      // 也覆盖 el.style['--c-brand'] = ... 形式
-      CallExpression(node) {
-        const callee = node.callee;
-        if (callee?.type !== 'MemberExpression') return;
-        if (callee.object?.type !== 'MemberExpression') return;
-        if (callee.object.property?.name !== 'style') return;
-        const method = callee.property?.name;
-        if (method !== 'setProperty' && method !== 'removeProperty') return;
-        const propArg = node.arguments?.[0];
-        if (!propArg || propArg.type !== 'Literal' || typeof propArg.value !== 'string') return;
-        if (TOKEN_PREFIX_RE.test(propArg.value)) {
-          context.report({ node, messageId: 'locked', data: { name: propArg.value } });
-        }
-      },
-      AssignmentExpression(node) {
-        // el.style['--c-brand'] = ... 或 el.style.cssText = '--c-brand: ...'
-        if (node.left?.type !== 'MemberExpression') return;
-        if (node.left.object?.type !== 'MemberExpression') return;
-        if (node.left.object.property?.name !== 'style') return;
-        // 计算属性访问 el.style['--c-brand']
-        const propNode = node.left.property;
-        if (propNode?.type === 'Literal' && typeof propNode.value === 'string'
-            && TOKEN_PREFIX_RE.test(propNode.value)) {
-          context.report({ node, messageId: 'locked', data: { name: propNode.value } });
-        }
-        // el.style.cssText = '--c-brand: red; ...' 间接覆盖
-        if (propNode?.type === 'Identifier' && propNode.name === 'cssText') {
-          const valNode = node.right;
-          if (valNode?.type === 'Literal' && typeof valNode.value === 'string') {
-            const matches = valNode.value.match(/--[a-z][\w-]*/g) || [];
-            for (const m of matches) {
-              if (TOKEN_PREFIX_RE.test(m)) {
-                context.report({ node, messageId: 'locked', data: { name: m } });
-              }
-            }
-          }
-        }
-      },
-    };
-  },
-};
+// L1-1 af-mobile/no-token-modification（error）
+// 检测：非 tokens.css / tokens.project.css 文件内，重定义 --(c|s|r|t|lh|fw|shadow|z|ease|dur)-* 变量
+// 例外：路径匹配 **/tokens.css 或 **/tokens.project.css
+import postcss from 'postcss';
+
+const TOKEN_PREFIX_RE = /^--(c|s|r|t|lh|fw|shadow|z|ease|dur)-/;
+
+export default {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: '禁止在 tokens.css 之外修改/重定义设计 token 变量',
+    },
+    schema: [],
+    messages: {
+      locked: "Token variable '{{name}}' is locked. Modify tokens.css or register in tokens.project.css instead",
+    },
+  },
+
+  create(context) {
+    const filename = context.filename || context.getFilename();
+    // 例外文件：tokens.css 和 tokens.project.css
+    if (/tokens(\.project)?\.css$/.test(filename)) return {};
+
+    return {
+      // ESLint 9 对 .css 文件原生支持不足，用源码文本直接喂 postcss
+      Program(node) {
+        const source = context.sourceCode || context.getSourceCode();
+        const css = source.getText();
+        if (!css.includes('--')) return;
+        try {
+          const root = postcss.parse(css);
+          root.walkDecls(decl => {
+            if (TOKEN_PREFIX_RE.test(decl.prop)) {
+              context.report({
+                node,
+                loc: {
+                  // postcss 节点有 source.start/end（行从 1 起，列从 0 起 → ESLint 期望 0 起）
+                  start: { line: decl.source.start.line, column: decl.source.start.column - 1 },
+                  end: { line: decl.source.end.line, column: decl.source.end.column },
+                },
+                messageId: 'locked',
+                data: { name: decl.prop },
+              });
+            }
+          });
+        } catch {
+          // 非 CSS 内容（如 .js 文件恰好进入此规则）：静默跳过
+        }
+      },
+      // 检测 JS 内 el.style.setProperty('--c-brand', ...) / removeProperty('--c-brand') 间接覆盖 token
+      // 也覆盖 el.style['--c-brand'] = ... 形式
+      CallExpression(node) {
+        const callee = node.callee;
+        if (callee?.type !== 'MemberExpression') return;
+        if (callee.object?.type !== 'MemberExpression') return;
+        if (callee.object.property?.name !== 'style') return;
+        const method = callee.property?.name;
+        if (method !== 'setProperty' && method !== 'removeProperty') return;
+        const propArg = node.arguments?.[0];
+        if (!propArg || propArg.type !== 'Literal' || typeof propArg.value !== 'string') return;
+        if (TOKEN_PREFIX_RE.test(propArg.value)) {
+          context.report({ node, messageId: 'locked', data: { name: propArg.value } });
+        }
+      },
+      AssignmentExpression(node) {
+        // el.style['--c-brand'] = ... 或 el.style.cssText = '--c-brand: ...'
+        if (node.left?.type !== 'MemberExpression') return;
+        if (node.left.object?.type !== 'MemberExpression') return;
+        if (node.left.object.property?.name !== 'style') return;
+        // 计算属性访问 el.style['--c-brand']
+        const propNode = node.left.property;
+        if (propNode?.type === 'Literal' && typeof propNode.value === 'string'
+            && TOKEN_PREFIX_RE.test(propNode.value)) {
+          context.report({ node, messageId: 'locked', data: { name: propNode.value } });
+        }
+        // el.style.cssText = '--c-brand: red; ...' 间接覆盖
+        if (propNode?.type === 'Identifier' && propNode.name === 'cssText') {
+          const valNode = node.right;
+          if (valNode?.type === 'Literal' && typeof valNode.value === 'string') {
+            const matches = valNode.value.match(/--[a-z][\w-]*/g) || [];
+            for (const m of matches) {
+              if (TOKEN_PREFIX_RE.test(m)) {
+                context.report({ node, messageId: 'locked', data: { name: m } });
+              }
+            }
+          }
+        }
+      },
+    };
+  },
+};

package/rules/no-variant-conflict.js

@@ -1,72 +1,83 @@
-// L2-3 af-mobile/no-variant-conflict（warn，可自动修）
-// 检测：同属性互斥变体对同时出现，自动修：保留最后一个
-import { extractAllClassLists } from '../utils/helpers.js';
-
-// 互斥变体组：同组内只能出现一个
-const CONFLICT_GROUPS = [
-  ['btn-sm', 'btn-lg'],
-  ['tag-ok', 'tag-warn', 'tag-danger'],
-  // 圆角类
-  ['r-s', 'r-m', 'r-l', 'r-f'],
-  // padding 类
-  ['p-0', 'p-1', 'p-2', 'p-3', 'p-4', 'p-5', 'p-6', 'p-7', 'p-8', 'p-10'],
-  // display 类（同为 display 属性）
-  ['f', 'fi', 'fc'],
-  // 行高类
-  ['lh-tight', 'lh-normal'],
-  // 背景类
-  ['bg-brand', 'bg-card', 'bg-muted'],
-];
-
-export default {
-  meta: {
-    type: 'suggestion',
-    docs: { description: '检测互斥变体冲突，保留最后一个' },
-    schema: [],
-    messages: {
-      conflict: "Variant conflict: '{{a}}' and '{{b}}' — only the later one takes effect, remove the earlier one",
-    },
-    fixable: 'code',
-  },
-  create(context) {
-    function checkClasses(classes, node, raw, offset) {
-      for (const group of CONFLICT_GROUPS) {
-        const found = [];
-        for (const cls of classes) {
-          if (group.includes(cls)) found.push(cls);
-        }
-        if (found.length < 2) continue;
-        // 保留最后一个，删除前面的
-        const keep = found[found.length - 1];
-        const remove = found.slice(0, -1);
-        for (const r of remove) {
-          context.report({
-            node,
-            messageId: 'conflict',
-            data: { a: r, b: keep },
-            fix(fixer) {
-              // 删除 class 名 + 其后的一个空格（保留的类在后面，必有空格可吃）
-              const sourceCode = context.sourceCode || context.getSourceCode();
-              const text = sourceCode.getText(node);
-              const idx = text.indexOf(raw);
-              if (idx < 0) return null;
-              const classIdx = idx + raw.indexOf(r);
-              const before = text.slice(0, classIdx);
-              const after = text.slice(classIdx + r.length).replace(/^\s+/, '');
-              return fixer.replaceText(node, before + after);
-            },
-          });
-        }
-      }
-    }
-    function checkString(str, node) {
-      for (const { classes, raw, offset } of extractAllClassLists(str)) {
-        checkClasses(classes, node, raw, offset);
-      }
-    }
-    return {
-      Literal(node) { if (typeof node.value === 'string') checkString(node.value, node); },
-      TemplateElement(node) { if (node.value?.raw) checkString(node.value.raw, node); },
-    };
-  },
-};
+// L2-3 af-mobile/no-variant-conflict（warn，可自动修）
+// 检测：同属性互斥变体对同时出现，自动修：保留最后一个
+import { extractAllClassLists } from '../utils/helpers.js';
+
+// 互斥变体组：同组内只能出现一个
+const CONFLICT_GROUPS = [
+  ['btn-sm', 'btn-lg'],
+  ['tag-ok', 'tag-warn', 'tag-danger'],
+  // 描边式语义色标签（v1.6.1 新增，同 tag 语义色互斥规则）
+  ['tag-plain-ok', 'tag-plain-warn', 'tag-plain-danger'],
+  // 圆角类
+  ['r-s', 'r-m', 'r-l', 'r-f'],
+  // padding 类
+  ['p-0', 'p-1', 'p-2', 'p-3', 'p-4', 'p-5', 'p-6', 'p-7', 'p-8', 'p-10'],
+  // 定向 padding 类（v1.6.1 新增，同为 padding-left/right 或 padding-top/bottom）
+  ['px-1', 'px-2', 'px-3', 'px-4'],
+  ['py-1', 'py-2', 'py-3', 'py-4'],
+  // display 类（同为 display 属性）
+  ['f', 'fi', 'fc'],
+  // 网格类（v1.6.1 新增，同为 display:grid，grid-2/3 含列定义）
+  ['grid', 'grid-2', 'grid-3'],
+  // 比例类（v1.6.1 新增，同为 aspect-ratio）
+  ['aspect-1', 'aspect-4-3', 'aspect-16-9'],
+  // 行高类
+  ['lh-tight', 'lh-normal'],
+  // 背景类（v1.6.1 新增渐变/彩色底并入同组：同为 background 属性）
+  ['bg-brand', 'bg-card', 'bg-muted', 'bg-brand-soft', 'bg-danger', 'bg-success', 'bg-grad-brand', 'bg-grad-brand-soft'],
+  // 边框类（v1.6.1 新增，同为 border）
+  ['border', 'border-brand'],
+];
+
+export default {
+  meta: {
+    type: 'suggestion',
+    docs: { description: '检测互斥变体冲突，保留最后一个' },
+    schema: [],
+    messages: {
+      conflict: "Variant conflict: '{{a}}' and '{{b}}' — only the later one takes effect, remove the earlier one",
+    },
+    fixable: 'code',
+  },
+  create(context) {
+    function checkClasses(classes, node, raw, offset) {
+      for (const group of CONFLICT_GROUPS) {
+        const found = [];
+        for (const cls of classes) {
+          if (group.includes(cls)) found.push(cls);
+        }
+        if (found.length < 2) continue;
+        // 保留最后一个，删除前面的
+        const keep = found[found.length - 1];
+        const remove = found.slice(0, -1);
+        for (const r of remove) {
+          context.report({
+            node,
+            messageId: 'conflict',
+            data: { a: r, b: keep },
+            fix(fixer) {
+              // 删除 class 名 + 其后的一个空格（保留的类在后面，必有空格可吃）
+              const sourceCode = context.sourceCode || context.getSourceCode();
+              const text = sourceCode.getText(node);
+              const idx = text.indexOf(raw);
+              if (idx < 0) return null;
+              const classIdx = idx + raw.indexOf(r);
+              const before = text.slice(0, classIdx);
+              const after = text.slice(classIdx + r.length).replace(/^\s+/, '');
+              return fixer.replaceText(node, before + after);
+            },
+          });
+        }
+      }
+    }
+    function checkString(str, node) {
+      for (const { classes, raw, offset } of extractAllClassLists(str)) {
+        checkClasses(classes, node, raw, offset);
+      }
+    }
+    return {
+      Literal(node) { if (typeof node.value === 'string') checkString(node.value, node); },
+      TemplateElement(node) { if (node.value?.raw) checkString(node.value.raw, node); },
+    };
+  },
+};

package/rules/prefer-component.js

@@ -1,58 +1,58 @@
-// L2-6 af-mobile/prefer-component（warn）
-// 检测：(a) .toast class + setTimeout / (b) .sheet class vs <af-action-sheet> / (c) .list class + scroll 监听
-import { extractAllClassLists } from '../utils/helpers.js';
-
-export default {
-  meta: {
-    type: 'suggestion',
-    docs: { description: '建议使用 L3 组件替代手动实现' },
-    schema: [],
-    messages: {
-      toast: "Manual .toast + setTimeout detected, prefer <af-toast> for singleton queue / auto-dismiss / aria-live",
-      sheet: "Manual .sheet class detected, prefer <af-action-sheet> for touch-friendly bottom sheet / gesture dismiss",
-      list: "Manual .list + scroll listener detected, prefer <af-list> for virtual scroll / pull refresh / load more",
-    },
-  },
-  create(context) {
-    const filename = context.filename || context.getFilename();
-    // 组件源码自身实现不适用此规则（避免 af-list.js 报"prefer <af-list>"的自指误报）
-    if (/src[\\/](?:charts[\\/])?components[\\/].*\.js$/.test(filename)) return {};
-    const sourceCode = context.sourceCode || context.getSourceCode();
-    let hasToast = false, hasSheet = false, hasList = false;
-    let hasSetTimeout = false, hasScrollListener = false;
-
-    function scan(str) {
-      for (const { classes } of extractAllClassLists(str)) {
-        if (classes.includes('toast')) hasToast = true;
-        if (classes.includes('sheet')) hasSheet = true;
-        if (classes.includes('list')) hasList = true;
-      }
-    }
-
-    return {
-      Literal(node) { if (typeof node.value === 'string') scan(node.value); },
-      TemplateElement(node) { if (node.value?.raw) scan(node.value.raw); },
-      CallExpression(node) {
-        // setTimeout 检测
-        const callee = node.callee;
-        if (callee.type === 'Identifier' && callee.name === 'setTimeout') hasSetTimeout = true;
-        // addEventListener('scroll', ...) 检测
-        if (callee.type === 'MemberExpression' && callee.property?.name === 'addEventListener') {
-          const arg = node.arguments[0];
-          if (arg?.value === 'scroll') hasScrollListener = true;
-        }
-      },
-      'Program:exit'() {
-        if (hasToast && hasSetTimeout) {
-          context.report({ loc: { line: 1, column: 0 }, messageId: 'toast' });
-        }
-        if (hasSheet) {
-          context.report({ loc: { line: 1, column: 0 }, messageId: 'sheet' });
-        }
-        if (hasList && hasScrollListener) {
-          context.report({ loc: { line: 1, column: 0 }, messageId: 'list' });
-        }
-      },
-    };
-  },
-};
+// L2-6 af-mobile/prefer-component（warn）
+// 检测：(a) .toast class + setTimeout / (b) .sheet class vs <af-action-sheet> / (c) .list class + scroll 监听
+import { extractAllClassLists } from '../utils/helpers.js';
+
+export default {
+  meta: {
+    type: 'suggestion',
+    docs: { description: '建议使用 L3 组件替代手动实现' },
+    schema: [],
+    messages: {
+      toast: "Manual .toast + setTimeout detected, prefer <af-toast> for singleton queue / auto-dismiss / aria-live",
+      sheet: "Manual .sheet class detected, prefer <af-action-sheet> for touch-friendly bottom sheet / gesture dismiss",
+      list: "Manual .list + scroll listener detected, prefer <af-list> for virtual scroll / pull refresh / load more",
+    },
+  },
+  create(context) {
+    const filename = context.filename || context.getFilename();
+    // 组件源码自身实现不适用此规则（避免 af-list.js 报"prefer <af-list>"的自指误报）
+    if (/src[\\/](?:charts[\\/])?components[\\/].*\.js$/.test(filename)) return {};
+    const sourceCode = context.sourceCode || context.getSourceCode();
+    let hasToast = false, hasSheet = false, hasList = false;
+    let hasSetTimeout = false, hasScrollListener = false;
+
+    function scan(str) {
+      for (const { classes } of extractAllClassLists(str)) {
+        if (classes.includes('toast')) hasToast = true;
+        if (classes.includes('sheet')) hasSheet = true;
+        if (classes.includes('list')) hasList = true;
+      }
+    }
+
+    return {
+      Literal(node) { if (typeof node.value === 'string') scan(node.value); },
+      TemplateElement(node) { if (node.value?.raw) scan(node.value.raw); },
+      CallExpression(node) {
+        // setTimeout 检测
+        const callee = node.callee;
+        if (callee.type === 'Identifier' && callee.name === 'setTimeout') hasSetTimeout = true;
+        // addEventListener('scroll', ...) 检测
+        if (callee.type === 'MemberExpression' && callee.property?.name === 'addEventListener') {
+          const arg = node.arguments[0];
+          if (arg?.value === 'scroll') hasScrollListener = true;
+        }
+      },
+      'Program:exit'() {
+        if (hasToast && hasSetTimeout) {
+          context.report({ loc: { line: 1, column: 0 }, messageId: 'toast' });
+        }
+        if (hasSheet) {
+          context.report({ loc: { line: 1, column: 0 }, messageId: 'sheet' });
+        }
+        if (hasList && hasScrollListener) {
+          context.report({ loc: { line: 1, column: 0 }, messageId: 'list' });
+        }
+      },
+    };
+  },
+};

package/rules/token-whitelist.js

@@ -1,84 +1,84 @@
-// L2-1 af-mobile/token-whitelist（error）
-// 检测：class="" 中的 class / 自定义元素 tagName → 与 whitelist + extraClass/extraComponents 对比
-// 模板插值 class（btn-${type}）无法静态解析 → 单独报 interpolatedClass（伪报为"不在白名单"会误导修法）
-import { ALL_CLASSES, ALL_COMPONENTS, extractAllClassLists, extractCustomElements, suggestNearest } from '../utils/helpers.js';
-
-export default {
-  meta: {
-    type: 'problem',
-    docs: { description: 'class 名和自定义元素必须在白名单内' },
-    schema: [{
-      type: 'object',
-      properties: {
-        extraClass: { type: 'array', items: { type: 'string' } },
-        extraComponents: { type: 'array', items: { type: 'string' } },
-      },
-      additionalProperties: false,
-    }],
-    messages: {
-      unknownClass: "Class '{{name}}' not in whitelist.{{suggest}} Use recipe/atomic, or paste into eslint.config.js: 'af-mobile/token-whitelist': ['error', { extraClass: ['{{name}}'] }]",
-      unknownComponent: "Component '{{name}}' not in whitelist.{{suggest}} Paste into eslint.config.js: 'af-mobile/token-whitelist': ['error', { extraComponents: ['{{name}}'] }]",
-      interpolatedClass: "Class '{{name}}' contains template interpolation and cannot be checked statically. Use static whitelist classes plus data-* attributes, or a ternary switching between whitelisted classes",
-    },
-  },
-  create(context) {
-    const options = context.options[0] || {};
-    const allowClass = new Set([...ALL_CLASSES, ...(options.extraClass || [])]);
-    const allowComp = new Set([...ALL_COMPONENTS, ...(options.extraComponents || [])]);
-    const extraClasses = [...allowClass];
-    const extraComps = [...allowComp];
-
-    function checkString(str, node) {
-      // class 检查
-      for (const { classes } of extractAllClassLists(str)) {
-        for (const cls of classes) {
-          if (cls.includes('${')) {
-            context.report({ node, messageId: 'interpolatedClass', data: { name: cls } });
-          } else if (!allowClass.has(cls)) {
-            context.report({ node, messageId: 'unknownClass', data: { name: cls, suggest: suggestNearest(cls, extraClasses) } });
-          }
-        }
-      }
-      // 自定义元素检查
-      for (const tag of extractCustomElements(str)) {
-        if (!allowComp.has(tag)) {
-          context.report({ node, messageId: 'unknownComponent', data: { name: tag, suggest: suggestNearest(tag, extraComps) } });
-        }
-      }
-    }
-
-    return {
-      Literal(node) { if (typeof node.value === 'string') checkString(node.value, node); },
-      TemplateElement(node) { if (node.value?.raw) checkString(node.value.raw, node); },
-      // 检测 classList.add/remove/toggle 的字符串参数（绕过 class="..." 字面量检测）
-      CallExpression(node) {
-        const callee = node.callee;
-        if (callee?.type !== 'MemberExpression') return;
-        if (callee.object?.type !== 'MemberExpression') return;
-        if (callee.object.property?.name !== 'classList') return;
-        const method = callee.property?.name;
-        if (!['add', 'remove', 'toggle'].includes(method)) return;
-        for (const arg of node.arguments) {
-          if (arg.type === 'Literal' && typeof arg.value === 'string') {
-            for (const cls of arg.value.split(/\s+/).filter(Boolean)) {
-              if (!allowClass.has(cls)) {
-                context.report({ node: arg, messageId: 'unknownClass', data: { name: cls, suggest: suggestNearest(cls, extraClasses) } });
-              }
-            }
-          }
-          if (arg.type === 'ArrayExpression') {
-            for (const el of arg.elements) {
-              if (el?.type === 'Literal' && typeof el.value === 'string') {
-                for (const cls of el.value.split(/\s+/).filter(Boolean)) {
-                  if (!allowClass.has(cls)) {
-                    context.report({ node: el, messageId: 'unknownClass', data: { name: cls, suggest: suggestNearest(cls, extraClasses) } });
-                  }
-                }
-              }
-            }
-          }
-        }
-      },
-    };
-  },
-};
+// L2-1 af-mobile/token-whitelist（error）
+// 检测：class="" 中的 class / 自定义元素 tagName → 与 whitelist + extraClass/extraComponents 对比
+// 模板插值 class（btn-${type}）无法静态解析 → 单独报 interpolatedClass（伪报为"不在白名单"会误导修法）
+import { ALL_CLASSES, ALL_COMPONENTS, extractAllClassLists, extractCustomElements, suggestNearest } from '../utils/helpers.js';
+
+export default {
+  meta: {
+    type: 'problem',
+    docs: { description: 'class 名和自定义元素必须在白名单内' },
+    schema: [{
+      type: 'object',
+      properties: {
+        extraClass: { type: 'array', items: { type: 'string' } },
+        extraComponents: { type: 'array', items: { type: 'string' } },
+      },
+      additionalProperties: false,
+    }],
+    messages: {
+      unknownClass: "Class '{{name}}' not in whitelist.{{suggest}} Use recipe/atomic, or paste into eslint.config.js: 'af-mobile/token-whitelist': ['error', { extraClass: ['{{name}}'] }]",
+      unknownComponent: "Component '{{name}}' not in whitelist.{{suggest}} Paste into eslint.config.js: 'af-mobile/token-whitelist': ['error', { extraComponents: ['{{name}}'] }]",
+      interpolatedClass: "Class '{{name}}' contains template interpolation and cannot be checked statically. Use static whitelist classes plus data-* attributes, or a ternary switching between whitelisted classes",
+    },
+  },
+  create(context) {
+    const options = context.options[0] || {};
+    const allowClass = new Set([...ALL_CLASSES, ...(options.extraClass || [])]);
+    const allowComp = new Set([...ALL_COMPONENTS, ...(options.extraComponents || [])]);
+    const extraClasses = [...allowClass];
+    const extraComps = [...allowComp];
+
+    function checkString(str, node) {
+      // class 检查
+      for (const { classes } of extractAllClassLists(str)) {
+        for (const cls of classes) {
+          if (cls.includes('${')) {
+            context.report({ node, messageId: 'interpolatedClass', data: { name: cls } });
+          } else if (!allowClass.has(cls)) {
+            context.report({ node, messageId: 'unknownClass', data: { name: cls, suggest: suggestNearest(cls, extraClasses) } });
+          }
+        }
+      }
+      // 自定义元素检查
+      for (const tag of extractCustomElements(str)) {
+        if (!allowComp.has(tag)) {
+          context.report({ node, messageId: 'unknownComponent', data: { name: tag, suggest: suggestNearest(tag, extraComps) } });
+        }
+      }
+    }
+
+    return {
+      Literal(node) { if (typeof node.value === 'string') checkString(node.value, node); },
+      TemplateElement(node) { if (node.value?.raw) checkString(node.value.raw, node); },
+      // 检测 classList.add/remove/toggle 的字符串参数（绕过 class="..." 字面量检测）
+      CallExpression(node) {
+        const callee = node.callee;
+        if (callee?.type !== 'MemberExpression') return;
+        if (callee.object?.type !== 'MemberExpression') return;
+        if (callee.object.property?.name !== 'classList') return;
+        const method = callee.property?.name;
+        if (!['add', 'remove', 'toggle'].includes(method)) return;
+        for (const arg of node.arguments) {
+          if (arg.type === 'Literal' && typeof arg.value === 'string') {
+            for (const cls of arg.value.split(/\s+/).filter(Boolean)) {
+              if (!allowClass.has(cls)) {
+                context.report({ node: arg, messageId: 'unknownClass', data: { name: cls, suggest: suggestNearest(cls, extraClasses) } });
+              }
+            }
+          }
+          if (arg.type === 'ArrayExpression') {
+            for (const el of arg.elements) {
+              if (el?.type === 'Literal' && typeof el.value === 'string') {
+                for (const cls of el.value.split(/\s+/).filter(Boolean)) {
+                  if (!allowClass.has(cls)) {
+                    context.report({ node: el, messageId: 'unknownClass', data: { name: cls, suggest: suggestNearest(cls, extraClasses) } });
+                  }
+                }
+              }
+            }
+          }
+        }
+      },
+    };
+  },
+};