eslint-plugin-vuetify 2.5.3 → 2.7.0

package/README.md

@@ -1,6 +1,22 @@
+<div align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://cdn.vuetifyjs.com/docs/images/one/logos/veslplugin-logo-dark.png">
+    <img alt="Vuetify ESLint Plugin Logo" src="https://cdn.vuetifyjs.com/docs/images/one/logos/veslplugin-logo-light.png" height="100">
+  </picture>
+</div>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/eslint-plugin-vuetify"><img src="https://img.shields.io/npm/v/eslint-plugin-vuetify.svg" alt="npm version"></a>
+  <a href="https://npm.chart.dev/eslint-plugin-vuetify"><img src="https://img.shields.io/npm/dm/eslint-plugin-vuetify?color=blue" alt="npm downloads"></a>
+  <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="License: MIT"></a>
+  <a href="https://community.vuetifyjs.com"><img src="https://discordapp.com/api/guilds/340160225338195969/widget.png" alt="Discord"></a>
+</p>
+
 # eslint-plugin-vuetify
 
-This package is for migrating from Vuetify v2 to v3, use [eslint-plugin-vuetify@vuetify-2](https://www.npmjs.com/package/eslint-plugin-vuetify/v/vuetify-2) for v1 to v2.
+This package helps migrate between Vuetify major versions. It includes rules for **v2 → v3** and **v3 → v4** migrations.
+
+Use [eslint-plugin-vuetify@vuetify-2](https://www.npmjs.com/package/eslint-plugin-vuetify/v/vuetify-2) for v1 to v2.
 
 <br>
 
@@ -13,6 +29,56 @@ This package is for migrating from Vuetify v2 to v3, use [eslint-plugin-vuetify@
   </a>
 </p>
 
+## Vuetify 4 Migration
+
+> [!IMPORTANT]
+> We suggest running [vuetify-codemods](https://www.npmjs.com/package/vuetify-codemods) first to automatically apply most migration fixes
+
+This plugin includes four new rules for migrating from Vuetify v3 to v4:
+
+- **`no-deprecated-typography`** — replaces MD2 typography classes (`text-h1`) with MD3 equivalents (`text-display-large`)
+- **`no-legacy-grid-props`** — converts removed `VRow`/`VCol` props (`align`, `justify`, `dense`) to utility classes or renamed props
+- **`no-elevation-overflow`** — flags elevation classes and props above the MD3 maximum of 5
+- **`no-deprecated-snackbar`** — fixes renamed `VSnackbarQueue` slots and replaced `VSnackbar` props
+
+### Using the recommended-v4 preset
+
+Enable all v4 migration rules at once:
+
+```js
+// eslint.config.js
+import vue from 'eslint-plugin-vue'
+import vuetify from 'eslint-plugin-vuetify'
+
+export default [
+  ...vue.configs['flat/base'],
+  ...vuetify.configs['flat/recommended-v4'],
+]
+```
+
+### Selecting individual rules
+
+You can also enable rules selectively instead of using the preset:
+
+```js
+// eslint.config.js
+import vue from 'eslint-plugin-vue'
+import vuetify from 'eslint-plugin-vuetify'
+
+export default [
+  ...vue.configs['flat/base'],
+  ...vuetify.configs['flat/base'],
+  {
+    rules: {
+      'vuetify/no-deprecated-typography': 'error',
+      'vuetify/no-legacy-grid-props': 'error',
+      'vuetify/no-elevation-overflow': 'error',
+      'vuetify/no-deprecated-snackbar': 'error',
+    }
+  }
+]
+```
+
 ## 💿 Install
 
 You should have [`eslint`](https://eslint.org/docs/latest/use/getting-started) and [`eslint-plugin-vue`](https://eslint.vuejs.org/user-guide/#installation) set up first.
@@ -34,7 +100,7 @@ export default [
 ]
 ```
 
-Eslint 8 can alternatively use the older configuration format:
+ESLint 8 can alternatively use the older configuration format:
 
 ```js
 // .eslintrc.js
@@ -46,7 +112,9 @@ module.exports = {
 }
 ```
 
-**NOTE** This plugin does not affect _**pug**_ templates due to [a limitation in vue-eslint-parser](https://github.com/mysticatea/vue-eslint-parser/issues/29). I suggest converting your pug templates to HTML with [pug-to-html](https://github.com/leo-buneev/pug-to-html) in order to use this plugin.
+This plugin supports ESLint 8, 9, and 10. ESLint 10 only supports the flat config format (use `configs['flat/base']` or `configs['flat/recommended']`).
+
+**NOTE** This plugin does not affect _**pug**_ templates due to [a limitation in vue-eslint-parser](https://github.com/vuejs/vue-eslint-parser/issues/29). I suggest converting your pug templates to HTML with [pug-to-html](https://github.com/leo-buneev/pug-to-html) in order to use this plugin.
 
 
 ## Rules
@@ -60,15 +128,36 @@ These rules will help you avoid deprecated components, props, and classes. They
 - Prevent the use of events that have been removed from Vuetify ([`no-deprecated-events`])
 - Prevent the use of classes that have been removed from Vuetify ([`no-deprecated-classes`])
 - Prevent the use of the old theme class syntax ([`no-deprecated-colors`])
+- Prevent the use of slots that have been removed from Vuetify ([`no-deprecated-slots`])
 - Prevent the use of deprecated import paths ([`no-deprecated-imports`])
+
+Additional rule (not included in presets):
+
 - Ensure icon buttons have a variant defined ([`icon-button-variant`])
 
 ### Grid system
 
-These rules are designed to help migrate to the new grid system in Vuetify v2. They are included in the `recommended` preset.
+These rules are designed to help migrate to the new grid system in Vuetify v3. They are included in the `recommended` preset.
 
 - Warn about unknown attributes not being converted to classes on new grid components ([`grid-unknown-attributes`])
 
+### Vuetify 4
+
+These rules help migrate from Vuetify v3 to v4. They are included in the `recommended-v4` preset.
+
+- Disallow deprecated MD2 typography classes ([`no-deprecated-typography`])
+- Prevent the use of removed grid props ([`no-legacy-grid-props`])
+- Disallow elevation classes above the MD3 maximum ([`no-elevation-overflow`])
+- Disallow deprecated props and slots on snackbar components ([`no-deprecated-snackbar`])
+
+### Custom deprecations
+
+User-configurable rules for deprecating components, props, events, and slots - helpful to enforce standardization.
+
+- Disallow usage of specified components, with optional replacements ([`custom-deprecated-components`])
+- Disallow usage of specified component props ([`custom-deprecated-props`])
+- Disallow usage of specified component events ([`custom-deprecated-events`])
+- Disallow usage of specified component slots ([`custom-deprecated-slots`])
 
 [`grid-unknown-attributes`]: ./docs/rules/grid-unknown-attributes.md
 [`no-deprecated-components`]: ./docs/rules/no-deprecated-components.md
@@ -76,8 +165,16 @@ These rules are designed to help migrate to the new grid system in Vuetify v2. T
 [`no-deprecated-events`]: ./docs/rules/no-deprecated-events.md
 [`no-deprecated-classes`]: ./docs/rules/no-deprecated-classes.md
 [`no-deprecated-colors`]: ./docs/rules/no-deprecated-colors.md
+[`no-deprecated-slots`]: ./docs/rules/no-deprecated-slots.md
 [`no-deprecated-imports`]: ./docs/rules/no-deprecated-imports.md
 [`icon-button-variant`]: ./docs/rules/icon-button-variant.md
+[`custom-deprecated-components`]: ./docs/rules/custom-deprecated-components.md
+[`custom-deprecated-props`]: ./docs/rules/custom-deprecated-props.md
+[`custom-deprecated-events`]: ./docs/rules/custom-deprecated-events.md
+[`custom-deprecated-slots`]: ./docs/rules/custom-deprecated-slots.md
+[`no-deprecated-typography`]: ./docs/rules/no-deprecated-typography.md
+[`no-legacy-grid-props`]: ./docs/rules/no-legacy-grid-props.md
+[`no-elevation-overflow`]: ./docs/rules/no-elevation-overflow.md
 
 
 ## 💪 Supporting Vuetify

package/lib/configs/flat/recommended-v4.js

@@ -0,0 +1,10 @@
+"use strict";
+
+module.exports = [...require('./base'), {
+  plugins: {
+    get vuetify() {
+      return require('../../index');
+    }
+  },
+  rules: require('../recommended-v4').rules
+}];

package/lib/configs/flat/tailwindcss.js

@@ -0,0 +1,10 @@
+"use strict";
+
+module.exports = [...require('./base'), {
+  plugins: {
+    get vuetify() {
+      return require('../../index');
+    }
+  },
+  rules: require('../tailwindcss').rules
+}];

package/lib/configs/recommended-v4.js

@@ -0,0 +1,10 @@
+"use strict";
+
+module.exports = {
+  rules: {
+    'vuetify/no-deprecated-snackbar': 'error',
+    'vuetify/no-deprecated-typography': 'error',
+    'vuetify/no-elevation-overflow': 'error',
+    'vuetify/no-legacy-grid-props': 'error'
+  }
+};

package/lib/configs/tailwindcss.js

@@ -0,0 +1,10 @@
+"use strict";
+
+module.exports = {
+  rules: {
+    'vuetify/no-elevation-prop': 'error',
+    'vuetify/no-rounded-prop': 'error',
+    'vuetify/no-border-prop': 'error',
+    'vuetify/no-legacy-utilities': 'error'
+  }
+};

package/lib/eslint-typegen.d.ts

@@ -0,0 +1,136 @@
+/* eslint-disable */
+/* prettier-ignore */
+import type { Linter } from 'eslint'
+
+export interface RuleOptions {
+  /**
+   * Disallow usage of specified components, with optional replacements
+   */
+  'vuetify/custom-deprecated-components'?: Linter.RuleEntry<VuetifyCustomDeprecatedComponents>
+  /**
+   * Disallow usage of specified component events, with optional replacements
+   */
+  'vuetify/custom-deprecated-events'?: Linter.RuleEntry<VuetifyCustomDeprecatedEvents>
+  /**
+   * Disallow usage of specified component props, with optional replacements
+   */
+  'vuetify/custom-deprecated-props'?: Linter.RuleEntry<VuetifyCustomDeprecatedProps>
+  /**
+   * Disallow usage of specified component slots, with optional replacements
+   */
+  'vuetify/custom-deprecated-slots'?: Linter.RuleEntry<VuetifyCustomDeprecatedSlots>
+  /**
+   * Warn about v1 grid attributes not being auto-converted to classes in v2.
+   */
+  'vuetify/grid-unknown-attributes'?: Linter.RuleEntry<[]>
+  /**
+   * Ensure icon buttons have a variant defined.
+   */
+  'vuetify/icon-button-variant'?: Linter.RuleEntry<VuetifyIconButtonVariant>
+  /**
+   * Disallow the `border` prop; use Tailwind border utilities instead.
+   */
+  'vuetify/no-border-prop'?: Linter.RuleEntry<[]>
+  /**
+   * Disallow the use of classes that have been removed from Vuetify
+   */
+  'vuetify/no-deprecated-classes'?: Linter.RuleEntry<[]>
+  /**
+   * Disallow the use of classes that have been removed from Vuetify
+   */
+  'vuetify/no-deprecated-colors'?: Linter.RuleEntry<VuetifyNoDeprecatedColors>
+  /**
+   * Prevent the use of components that have been removed from Vuetify
+   */
+  'vuetify/no-deprecated-components'?: Linter.RuleEntry<[]>
+  /**
+   * Prevent the use of removed and deprecated events.
+   */
+  'vuetify/no-deprecated-events'?: Linter.RuleEntry<[]>
+  /**
+   * disallow import from "vuetify/lib/util/colors", suggest "vuetify/util/colors" instead
+   */
+  'vuetify/no-deprecated-imports'?: Linter.RuleEntry<[]>
+  /**
+   * Prevent the use of removed and deprecated props.
+   */
+  'vuetify/no-deprecated-props'?: Linter.RuleEntry<[]>
+  /**
+   * Prevent the use of removed and deprecated slots.
+   */
+  'vuetify/no-deprecated-slots'?: Linter.RuleEntry<[]>
+  /**
+   * Disallow deprecated props and slots on Vuetify snackbar components.
+   */
+  'vuetify/no-deprecated-snackbar'?: Linter.RuleEntry<[]>
+  /**
+   * Disallow deprecated MD2 typography classes, with configurable replacements.
+   */
+  'vuetify/no-deprecated-typography'?: Linter.RuleEntry<VuetifyNoDeprecatedTypography>
+  /**
+   * Disallow elevation classes above the MD3 maximum (0–5).
+   */
+  'vuetify/no-elevation-overflow'?: Linter.RuleEntry<[]>
+  /**
+   * Disallow the `elevation` prop; use Tailwind shadow utilities instead.
+   */
+  'vuetify/no-elevation-prop'?: Linter.RuleEntry<[]>
+  /**
+   * Prevent the use of removed grid props.
+   */
+  'vuetify/no-legacy-grid-props'?: Linter.RuleEntry<[]>
+  /**
+   * Disallow Vuetify utility classes; use Tailwind equivalents instead.
+   */
+  'vuetify/no-legacy-utilities'?: Linter.RuleEntry<VuetifyNoLegacyUtilities>
+  /**
+   * Disallow the `rounded` prop; use Tailwind rounded utilities instead.
+   */
+  'vuetify/no-rounded-prop'?: Linter.RuleEntry<[]>
+}
+
+/* ======= Declarations ======= */
+// ----- vuetify/custom-deprecated-components -----
+type VuetifyCustomDeprecatedComponents = []|[{
+  [k: string]: (string | false | {
+    message: string
+  }) | undefined
+}]
+// ----- vuetify/custom-deprecated-events -----
+type VuetifyCustomDeprecatedEvents = []|[{
+  [k: string]: {
+    [k: string]: (string | false | {
+      message: string
+    }) | undefined
+  } | undefined
+}]
+// ----- vuetify/custom-deprecated-props -----
+type VuetifyCustomDeprecatedProps = []|[{
+  [k: string]: {
+    [k: string]: (string | false | {
+      message: string
+    }) | undefined
+  } | undefined
+}]
+// ----- vuetify/custom-deprecated-slots -----
+type VuetifyCustomDeprecatedSlots = []|[{
+  [k: string]: {
+    [k: string]: (string | false | {
+      message: string
+    }) | undefined
+  } | undefined
+}]
+// ----- vuetify/icon-button-variant -----
+type VuetifyIconButtonVariant = []|[string]
+// ----- vuetify/no-deprecated-colors -----
+type VuetifyNoDeprecatedColors = []|[{
+  themeColors?: string[]
+}]
+// ----- vuetify/no-deprecated-typography -----
+type VuetifyNoDeprecatedTypography = []|[{
+  [k: string]: (string | false) | undefined
+}]
+// ----- vuetify/no-legacy-utilities -----
+type VuetifyNoLegacyUtilities = []|[{
+  [k: string]: (string | false) | undefined
+}]

package/lib/index.d.ts

@@ -0,0 +1,20 @@
+/// <reference path="./eslint-typegen.d.ts" />
+import type { Linter } from 'eslint'
+
+declare const vuetify: {
+  configs: {
+    base: Linter.LegacyConfig
+    recommended: Linter.LegacyConfig
+    'recommended-v4': Linter.LegacyConfig
+
+    'flat/base': Linter.FlatConfig[]
+    'flat/recommended': Linter.FlatConfig[]
+    'flat/recommended-v4': Linter.FlatConfig[]
+
+    tailwindcss: Linter.LegacyConfig
+    'flat/tailwindcss': Linter.FlatConfig[]
+  }
+  rules: Record<string, any>
+}
+
+export = vuetify

package/lib/index.js

@@ -6,8 +6,12 @@ module.exports = {
   configs: {
     base: require('./configs/base'),
     recommended: require('./configs/recommended'),
+    'recommended-v4': require('./configs/recommended-v4'),
     'flat/base': require('./configs/flat/base'),
-    'flat/recommended': require('./configs/flat/recommended')
+    'flat/recommended': require('./configs/flat/recommended'),
+    'flat/recommended-v4': require('./configs/flat/recommended-v4'),
+    tailwindcss: require('./configs/tailwindcss'),
+    'flat/tailwindcss': require('./configs/flat/tailwindcss')
   },
   rules: requireindex(path.join(__dirname, './rules'))
 };

package/lib/rules/custom-deprecated-components.js

@@ -0,0 +1,111 @@
+'use strict';
+
+const {
+  classify,
+  hyphenate,
+  isVueTemplate
+} = require('../util/helpers');
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Disallow usage of specified components, with optional replacements'
+    },
+    fixable: 'code',
+    schema: [{
+      type: 'object',
+      additionalProperties: {
+        oneOf: [{
+          type: 'string'
+        }, {
+          type: 'boolean',
+          enum: [false]
+        }, {
+          type: 'object',
+          properties: {
+            message: {
+              type: 'string'
+            }
+          },
+          required: ['message'],
+          additionalProperties: false
+        }]
+      }
+    }],
+    messages: {
+      deprecated: `'{{ name }}' is deprecated`,
+      deprecatedWithMessage: `'{{ name }}' is deprecated: {{ message }}`,
+      deprecatedWithReplacement: `'{{ name }}' is deprecated, use '<{{ tag }}{{ classAttr }}>' instead`
+    }
+  },
+  create(context) {
+    if (!isVueTemplate(context)) return {};
+    const options = context.options[0];
+    if (!options || !Object.keys(options).length) return {};
+
+    // Normalize keys to PascalCase for lookup
+    const banned = new Map();
+    for (const [key, value] of Object.entries(options)) {
+      banned.set(classify(key), value);
+    }
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
+      VElement(element) {
+        const tag = classify(element.rawName);
+        if (!banned.has(tag)) return;
+        const replacement = banned.get(tag);
+        const tokens = context.sourceCode.parserServices.getTemplateBodyTokenStore();
+        if (typeof replacement === 'string') {
+          // Parse replacement: tag part and optional classes (dot-separated)
+          const parts = replacement.split('.');
+          const replacementTag = parts[0];
+          const classes = parts.slice(1);
+          context.report({
+            node: element,
+            messageId: 'deprecatedWithReplacement',
+            data: {
+              name: hyphenate(tag),
+              tag: replacementTag,
+              classAttr: classes.length ? ` class="${classes.join(' ')}"` : ''
+            },
+            fix(fixer) {
+              const fixes = [];
+              const open = tokens.getFirstToken(element.startTag);
+              fixes.push(fixer.replaceText(open, `<${replacementTag}`));
+              if (element.endTag) {
+                const endTagOpen = tokens.getFirstToken(element.endTag);
+                fixes.push(fixer.replaceText(endTagOpen, `</${replacementTag}`));
+              }
+              if (classes.length) {
+                const classValue = classes.join(' ');
+                const classAttr = element.startTag.attributes.find(attr => !attr.directive && attr.key.rawName === 'class');
+                if (classAttr && classAttr.value) {
+                  const existing = classAttr.value.value;
+                  fixes.push(fixer.replaceText(classAttr.value, `"${existing} ${classValue}"`));
+                } else if (!classAttr) {
+                  fixes.push(fixer.insertTextAfter(open, ` class="${classValue}"`));
+                }
+              }
+              return fixes;
+            }
+          });
+        } else if (typeof replacement === 'object' && replacement !== null) {
+          context.report({
+            node: element,
+            messageId: 'deprecatedWithMessage',
+            data: {
+              name: hyphenate(tag),
+              message: replacement.message
+            }
+          });
+        } else {
+          context.report({
+            node: element,
+            messageId: 'deprecated',
+            data: {
+              name: hyphenate(tag)
+            }
+          });
+        }
+      }
+    });
+  }
+};

package/lib/rules/custom-deprecated-events.js

@@ -0,0 +1,103 @@
+'use strict';
+
+const {
+  hyphenate,
+  classify,
+  isVueTemplate
+} = require('../util/helpers');
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Disallow usage of specified component events, with optional replacements'
+    },
+    fixable: 'code',
+    schema: [{
+      type: 'object',
+      additionalProperties: {
+        type: 'object',
+        additionalProperties: {
+          oneOf: [{
+            type: 'string'
+          }, {
+            type: 'boolean',
+            enum: [false]
+          }, {
+            type: 'object',
+            properties: {
+              message: {
+                type: 'string'
+              }
+            },
+            required: ['message'],
+            additionalProperties: false
+          }]
+        }
+      }
+    }],
+    messages: {
+      replacedWith: `{{ tag }}: @{{ a }} has been replaced with @{{ b }}`,
+      removed: `{{ tag }}: @{{ name }} has been removed`,
+      removedWithMessage: `{{ tag }}: @{{ name }} has been removed: {{ message }}`
+    }
+  },
+  create(context) {
+    if (!isVueTemplate(context)) return {};
+    const options = context.options[0];
+    if (!options || !Object.keys(options).length) return {};
+
+    // Normalize keys to PascalCase
+    const replacements = new Map();
+    for (const [component, events] of Object.entries(options)) {
+      const normalizedEvents = {};
+      for (const [event, value] of Object.entries(events)) {
+        normalizedEvents[hyphenate(event)] = value;
+      }
+      replacements.set(classify(component), normalizedEvents);
+    }
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
+      VAttribute(attr) {
+        if (!(attr.directive && attr.key.name.name === 'on' && attr.key.argument?.type === 'VIdentifier')) return;
+        const tag = classify(attr.parent.parent.rawName);
+        if (!replacements.has(tag)) return;
+        const eventNameNode = attr.key.argument;
+        const eventName = hyphenate(eventNameNode.rawName);
+        const events = replacements.get(tag);
+        const replace = events[eventName];
+        if (replace === undefined) return;
+        if (replace === false) {
+          context.report({
+            messageId: 'removed',
+            data: {
+              tag,
+              name: eventName
+            },
+            node: eventNameNode
+          });
+        } else if (typeof replace === 'string') {
+          context.report({
+            messageId: 'replacedWith',
+            data: {
+              tag,
+              a: eventName,
+              b: replace
+            },
+            node: eventNameNode,
+            fix(fixer) {
+              return fixer.replaceText(eventNameNode, hyphenate(replace));
+            }
+          });
+        } else if (typeof replace === 'object' && replace !== null) {
+          context.report({
+            messageId: 'removedWithMessage',
+            data: {
+              tag,
+              name: eventName,
+              message: replace.message
+            },
+            node: eventNameNode
+          });
+        }
+      }
+    });
+  }
+};

package/lib/rules/custom-deprecated-props.js

@@ -0,0 +1,100 @@
+'use strict';
+
+const {
+  hyphenate,
+  classify,
+  isVueTemplate
+} = require('../util/helpers');
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Disallow usage of specified component props, with optional replacements'
+    },
+    fixable: 'code',
+    schema: [{
+      type: 'object',
+      additionalProperties: {
+        type: 'object',
+        additionalProperties: {
+          oneOf: [{
+            type: 'string'
+          }, {
+            type: 'boolean',
+            enum: [false]
+          }, {
+            type: 'object',
+            properties: {
+              message: {
+                type: 'string'
+              }
+            },
+            required: ['message'],
+            additionalProperties: false
+          }]
+        }
+      }
+    }],
+    messages: {
+      replacedWith: `'{{ a }}' has been replaced with '{{ b }}'`,
+      removed: `'{{ name }}' has been removed`,
+      removedWithMessage: `'{{ name }}' has been removed: {{ message }}`
+    }
+  },
+  create(context) {
+    if (!isVueTemplate(context)) return {};
+    const options = context.options[0];
+    if (!options || !Object.keys(options).length) return {};
+
+    // Normalize keys to PascalCase
+    const replacements = new Map();
+    for (const [component, props] of Object.entries(options)) {
+      const normalizedProps = {};
+      for (const [prop, value] of Object.entries(props)) {
+        normalizedProps[hyphenate(prop)] = value;
+      }
+      replacements.set(classify(component), normalizedProps);
+    }
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
+      VAttribute(attr) {
+        if (attr.directive && (attr.key.name.name !== 'bind' || !attr.key.argument)) return;
+        const tag = classify(attr.parent.parent.rawName);
+        if (!replacements.has(tag)) return;
+        const propName = attr.directive ? hyphenate(attr.key.argument.rawName) : hyphenate(attr.key.rawName);
+        const propNameNode = attr.directive ? attr.key.argument : attr.key;
+        const props = replacements.get(tag);
+        const replace = props[propName];
+        if (replace === undefined) return;
+        if (replace === false) {
+          context.report({
+            messageId: 'removed',
+            data: {
+              name: propName
+            },
+            node: propNameNode
+          });
+        } else if (typeof replace === 'string') {
+          context.report({
+            messageId: 'replacedWith',
+            data: {
+              a: propName,
+              b: replace
+            },
+            node: propNameNode,
+            fix(fixer) {
+              return fixer.replaceText(propNameNode, replace);
+            }
+          });
+        } else if (typeof replace === 'object' && replace !== null) {
+          context.report({
+            messageId: 'removedWithMessage',
+            data: {
+              name: propName,
+              message: replace.message
+            },
+            node: propNameNode
+          });
+        }
+      }
+    });
+  }
+};