eslint-plugin-vuetify 2.5.2 → 2.6.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,53 @@ This package is for migrating from Vuetify v2 to v3, use [eslint-plugin-vuetify@
   </a>
 </p>
 
+## Vuetify 4 Migration
+
+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 +97,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 +109,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 +125,28 @@ 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`])
+
 
 [`grid-unknown-attributes`]: ./docs/rules/grid-unknown-attributes.md
 [`no-deprecated-components`]: ./docs/rules/no-deprecated-components.md
@@ -76,8 +154,13 @@ 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
+[`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
+[`no-deprecated-snackbar`]: ./docs/rules/no-deprecated-snackbar.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/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/no-border-prop.js

@@ -0,0 +1,73 @@
+'use strict';
+
+const {
+  isVueTemplate
+} = require('../util/helpers');
+const {
+  addClass,
+  removeAttr
+} = require('../util/fixers');
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Disallow the `border` prop; use Tailwind border utilities instead.',
+      category: 'tailwindcss'
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      replacedWith: `'border="{{ value }}"' should be replaced with class="{{ className }}"`,
+      noFix: `'border' prop should be replaced with Tailwind border utility classes`
+    }
+  },
+  create(context) {
+    if (!isVueTemplate(context)) return {};
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
+      VAttribute(attr) {
+        if (attr.directive && (attr.key.name.name !== 'bind' || !attr.key.argument)) return;
+        const propName = attr.directive ? attr.key.argument.rawName : attr.key.rawName;
+        if (propName !== 'border') return;
+        const element = attr.parent.parent;
+        const propNameNode = attr.directive ? attr.key.argument : attr.key;
+
+        // Boolean attribute (no value) — `border` with no `="..."`
+        if (!attr.directive && !attr.value) {
+          context.report({
+            messageId: 'replacedWith',
+            data: {
+              value: '',
+              className: 'border'
+            },
+            node: propNameNode,
+            fix(fixer) {
+              return [addClass(context, fixer, element, 'border'), removeAttr(context, fixer, attr)];
+            }
+          });
+          return;
+        }
+
+        // Get static value
+        const value = attr.directive ? attr.value?.expression?.type === 'Literal' ? String(attr.value.expression.value) : null : attr.value?.value;
+        if (value != null) {
+          const className = value.split(/\s+/).filter(Boolean).map(part => `border-${part}`).join(' ');
+          context.report({
+            messageId: 'replacedWith',
+            data: {
+              value,
+              className
+            },
+            node: propNameNode,
+            fix(fixer) {
+              return [addClass(context, fixer, element, className), removeAttr(context, fixer, attr)];
+            }
+          });
+        } else {
+          context.report({
+            messageId: 'noFix',
+            node: propNameNode
+          });
+        }
+      }
+    });
+  }
+};

package/lib/rules/no-deprecated-classes.js

@@ -15,7 +15,7 @@ const replacements = new Map([[/^rounded-(r|l|tr|tl|br|bl)(-.*)?$/, ([side, rest
     bl: 'bs'
   }[side];
   return `rounded-${side}${rest || ''}`;
-}], [/^text-xs-(left|right|center|justify)$/, ([align]) => `text-${align}`], [/^hidden-(xs|sm|md|lg|xl)-only$/, ([breakpoint]) => `hidden-${breakpoint}`], ['scroll-y', 'overflow-y-auto'], ['hide-overflow', 'overflow-hidden'], ['show-overflow', 'overflow-visible'], ['no-wrap', 'text-no-wrap'], ['ellipsis', 'text-truncate'], ['left', 'float-left'], ['right', 'float-right'], ['display-4', 'text-h1'], ['display-3', 'text-h2'], ['display-2', 'text-h3'], ['display-1', 'text-h4'], ['headline', 'text-h5'], ['title', 'text-h6'], ['subtitle-1', 'text-subtitle-1'], ['subtitle-2', 'text-subtitle-2'], ['body-1', 'text-body-1'], ['body-2', 'text-body-2'], ['caption', 'text-caption'], ['caption', 'text-caption'], ['overline', 'text-overline'], [/^transition-(fast-out-slow-in|linear-out-slow-in|fast-out-linear-in|ease-in-out|fast-in-fast-out|swing)$/, false]]);
+}], [/^text-xs-(left|right|center|justify)$/, ([align]) => `text-${align}`], [/^hidden-(xs|sm|md|lg|xl)-only$/, ([breakpoint]) => `hidden-${breakpoint}`], ['scroll-y', 'overflow-y-auto'], ['hide-overflow', 'overflow-hidden'], ['show-overflow', 'overflow-visible'], ['no-wrap', 'text-no-wrap'], ['ellipsis', 'text-truncate'], ['left', 'float-left'], ['right', 'float-right'], ['display-4', 'text-h1'], ['display-3', 'text-h2'], ['display-2', 'text-h3'], ['display-1', 'text-h4'], ['headline', 'text-h5'], ['title', 'text-h6'], ['subheading', 'text-subtitle-1'], ['subtitle-1', 'text-subtitle-1'], ['subtitle-2', 'text-subtitle-2'], ['body-1', 'text-body-1'], ['body-2', 'text-body-2'], ['caption', 'text-caption'], ['overline', 'text-overline'], [/^transition-(fast-out-slow-in|linear-out-slow-in|fast-out-linear-in|ease-in-out|fast-in-fast-out|swing)$/, false]]);
 
 // ------------------------------------------------------------------------------
 // Rule Definition

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

@@ -31,7 +31,6 @@ const replacements = {
     custom: '`v-list-item` with `icon` props, or `v-icon` in the list item append or prepend slot'
   },
   VOverflowBtn: false,
-  VPicker: false,
   VSimpleCheckbox: 'v-checkbox-btn',
   VSubheader: {
     custom: 'v-list-subheader or class="text-subtitle-2"'

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

@@ -144,7 +144,14 @@ const replacements = {
       value: 'inverted'
     },
     outlined: 'border',
-    prominent: false,
+    dense: {
+      name: 'density',
+      value: 'compact'
+    },
+    prominent: {
+      name: 'density',
+      value: 'prominent'
+    },
     scrollOffScreen: false,
     shaped: false,
     short: false,
@@ -286,9 +293,11 @@ const replacements = {
     },
     round: 'rounded',
     shaped: false,
-    text: {
-      name: 'variant',
-      value: 'text'
+    text(attr) {
+      return !attr.directive && !attr.value || attr.directive && [true, false].includes(attr.value.expression.value) ? {
+        name: 'variant',
+        value: 'text'
+      } : true;
     },
     top: {
       name: 'location',
@@ -417,6 +426,10 @@ const replacements = {
     },
     groupDesc: {
       custom: 'group-by'
+    },
+    dense: {
+      name: 'density',
+      value: 'compact'
     }
   },
   VDatePicker: {
@@ -425,8 +438,7 @@ const replacements = {
       custom: 'separate month and year props'
     },
     locale: false,
-    localeFirstDayOfYear: false,
-    firstDayOfWeek: false,
+    localeFirstDayOfYear: 'firstDayOfYear',
     dayFormat: false,
     weekdayFormat: false,
     monthFormat: false,
@@ -691,8 +703,8 @@ const replacements = {
   VSlider: {
     backgroundColor: false,
     tickLabels: 'ticks',
-    ticks: {
-      custom: 'show-ticks'
+    ticks(attr) {
+      return !attr.directive && !attr.value || attr.directive && [true, false].includes(attr.value.expression.value) ? 'show-ticks' : true;
     },
     vertical: {
       name: 'direction',
@@ -706,8 +718,8 @@ const replacements = {
   VRangeSlider: {
     backgroundColor: false,
     tickLabels: 'ticks',
-    ticks: {
-      custom: 'show-ticks'
+    ticks(attr) {
+      return !attr.directive && !attr.value || attr.directive && [true, false].includes(attr.value.expression.value) ? 'show-ticks' : true;
     },
     vertical: {
       name: 'direction',
@@ -830,6 +842,12 @@ const replacements = {
     link: false,
     ...link
   },
+  VTable: {
+    dense: {
+      name: 'density',
+      value: 'compact'
+    }
+  },
   VThemeProvider: {
     root: false
   },
@@ -854,7 +872,14 @@ const replacements = {
   VToolbar: {
     bottom: false,
     outlined: 'border',
-    prominent: false,
+    dense: {
+      name: 'density',
+      value: 'compact'
+    },
+    prominent: {
+      name: 'density',
+      value: 'prominent'
+    },
     shaped: false,
     short: false,
     src: 'image',
@@ -904,6 +929,12 @@ const replacements = {
     value: 'model-value',
     ...overlay
   },
+  VTreeview: {
+    dense: {
+      name: 'density',
+      value: 'compact'
+    }
+  },
   VWindow: {
     activeClass: 'selected-class',
     showArrowsOnHover: false,

package/lib/rules/no-deprecated-snackbar.js

@@ -0,0 +1,108 @@
+'use strict';
+
+const {
+  hyphenate,
+  classify,
+  isVueTemplate
+} = require('../util/helpers');
+
+// VSnackbarQueue: #default slot was renamed to #item in Vuetify 4
+const slotRenames = [{
+  component: 'VSnackbarQueue',
+  from: 'default',
+  to: 'item'
+}];
+
+// VSnackbar props deprecated in Vuetify 4
+const propReplacements = {
+  VSnackbar: {
+    multiLine: {
+      name: 'min-height',
+      value: '68'
+    }
+  }
+};
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Disallow deprecated props and slots on Vuetify snackbar components.',
+      category: 'recommended'
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      replacedWith: `'{{ a }}' has been replaced with '{{ b }}'`,
+      renamed: `{{ component }}'s '{{ slot }}' slot has been renamed to '{{ newSlot }}'`
+    }
+  },
+  create(context) {
+    if (!isVueTemplate(context)) return {};
+    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 (!Object.keys(propReplacements).includes(tag)) return;
+        const propName = attr.directive ? hyphenate(attr.key.argument.rawName) : hyphenate(attr.key.rawName);
+        const propNameNode = attr.directive ? attr.key.argument : attr.key;
+        Object.entries(propReplacements[tag]).forEach(([test, replace]) => {
+          if (hyphenate(test) !== propName) return;
+          const oldValue = attr.directive ? context.sourceCode.getText(attr.value.expression) : attr.value?.value;
+          const value = typeof replace.value === 'function' ? replace.value(oldValue) : replace.value;
+          if (value == null || value === oldValue) return;
+          context.report({
+            messageId: 'replacedWith',
+            data: {
+              a: propName,
+              b: `${replace.name}="${value}"`
+            },
+            node: propNameNode,
+            fix(fixer) {
+              if (attr.directive && replace.bind !== false) {
+                if (replace.bind) {
+                  return [fixer.replaceText(propNameNode, replace.name), fixer.replaceText(attr.value, `"${value}"`)];
+                } else {
+                  const expression = context.sourceCode.getText(attr.value.expression);
+                  return [fixer.replaceText(propNameNode, replace.name), fixer.replaceText(attr.value, `"${expression} ? '${value}' : undefined"`)];
+                }
+              } else {
+                return fixer.replaceText(attr, `${replace.bind ? ':' : ''}${replace.name}="${value}"`);
+              }
+            }
+          });
+        });
+      },
+      VElement(node) {
+        if (node.name !== 'template' || node.parent.type !== 'VElement') return;
+        const parentName = classify(node.parent.name);
+        for (const {
+          component,
+          from,
+          to
+        } of slotRenames) {
+          if (parentName !== component) continue;
+          const directive = node.startTag.attributes.find(attr => {
+            return attr.directive && attr.key.name.name === 'slot' && attr.key.argument?.name === from;
+          });
+          if (!directive) continue;
+          context.report({
+            node: directive,
+            messageId: 'renamed',
+            data: {
+              component: node.parent.name,
+              slot: from,
+              newSlot: to
+            },
+            fix(fixer) {
+              return fixer.replaceText(directive.key.argument, to);
+            }
+          });
+        }
+      }
+    });
+  }
+};

package/lib/rules/no-deprecated-typography.js

@@ -0,0 +1,106 @@
+'use strict';
+
+const {
+  isVueTemplate
+} = require('../util/helpers');
+const md2 = {
+  'display-4': 'text-h1',
+  'display-3': 'text-h2',
+  'display-2': 'text-h3',
+  'display-1': 'text-h4',
+  headline: 'text-h5',
+  title: 'text-h6',
+  subheading: 'text-subtitle-1',
+  'subtitle-1': 'text-subtitle-1',
+  'subtitle-2': 'text-subtitle-2',
+  'body-1': 'text-body-1',
+  'body-2': 'text-body-2',
+  caption: 'text-caption',
+  overline: 'text-overline'
+};
+const md3 = {
+  'text-h1': 'text-display-large',
+  'text-h2': 'text-display-medium',
+  'text-h3': 'text-display-small',
+  'text-h4': 'text-headline-large',
+  'text-h5': 'text-headline-medium',
+  'text-h6': 'text-headline-small',
+  'text-subtitle-1': 'text-body-large',
+  'text-subtitle-2': 'text-label-large',
+  'text-body-1': 'text-body-large',
+  'text-body-2': 'text-body-medium',
+  'text-caption': 'text-body-small',
+  'text-button': 'text-label-large',
+  'text-overline': 'text-label-small'
+};
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  md2,
+  md3,
+  meta: {
+    docs: {
+      description: 'Disallow deprecated MD2 typography classes, with configurable replacements.',
+      category: 'recommended'
+    },
+    fixable: 'code',
+    schema: [{
+      type: 'object',
+      additionalProperties: {
+        oneOf: [{
+          type: 'string'
+        }, {
+          type: 'boolean',
+          enum: [false]
+        }]
+      }
+    }],
+    messages: {
+      replacedWith: `'{{ a }}' has been replaced with '{{ b }}'`,
+      removed: `'{{ name }}' has been removed`
+    }
+  },
+  create(context) {
+    if (!isVueTemplate(context)) return {};
+    const replacements = {
+      ...(context.options[0] || md3)
+    };
+
+    // Remove entries the user set to false
+    for (const key of Object.keys(replacements)) {
+      if (replacements[key] === false) delete replacements[key];
+    }
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
+      'VAttribute[key.name="class"]'(node) {
+        if (!node.value || !node.value.value) return;
+        const classes = node.value.value.split(/\s+/).filter(Boolean);
+        classes.forEach(className => {
+          const replace = replacements[className];
+          if (replace == null) return;
+          const idx = node.value.value.indexOf(className) + 1;
+          const range = [node.value.range[0] + idx, node.value.range[0] + idx + className.length];
+          const loc = {
+            start: context.sourceCode.getLocFromIndex(range[0]),
+            end: context.sourceCode.getLocFromIndex(range[1])
+          };
+          if (typeof replace === 'string') {
+            context.report({
+              loc,
+              messageId: 'replacedWith',
+              data: {
+                a: className,
+                b: replace
+              },
+              fix(fixer) {
+                return fixer.replaceTextRange(range, replace);
+              }
+            });
+          }
+        });
+      }
+    });
+  }
+};

package/lib/rules/no-elevation-overflow.js

@@ -0,0 +1,77 @@
+'use strict';
+
+const {
+  isVueTemplate
+} = require('../util/helpers');
+const MAX_ELEVATION = 5;
+
+// Match elevation-N in a class string, return the number
+const elevationRegex = /\belevation-(\d+)\b/g;
+function checkClassValue(context, node, value) {
+  let match;
+  elevationRegex.lastIndex = 0;
+  while ((match = elevationRegex.exec(value)) !== null) {
+    const level = parseInt(match[1], 10);
+    if (level > MAX_ELEVATION) {
+      context.report({
+        messageId: 'overflow',
+        data: {
+          level: String(level),
+          max: String(MAX_ELEVATION)
+        },
+        node
+      });
+    }
+  }
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Disallow elevation classes above the MD3 maximum (0–5).',
+      category: 'recommended'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      overflow: 'Elevation level {{ level }} exceeds the MD3 maximum of {{ max }}.'
+    }
+  },
+  create(context) {
+    if (!isVueTemplate(context)) return {};
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
+      VAttribute(attr) {
+        // Static class="elevation-10"
+        if (!attr.directive && attr.key.rawName === 'class' && attr.value) {
+          checkClassValue(context, attr, attr.value.value);
+          return;
+        }
+
+        // :class="'elevation-10'" or :class="`elevation-${n}`" — check literal strings
+        if (attr.directive && attr.key.name.name === 'bind' && attr.key.argument?.rawName === 'class' && attr.value?.expression?.type === 'Literal' && typeof attr.value.expression.value === 'string') {
+          checkClassValue(context, attr, attr.value.expression.value);
+          return;
+        }
+
+        // :elevation="10" or elevation="10" on any component
+        const propName = attr.directive ? attr.key.argument?.rawName : attr.key.rawName;
+        if (propName !== 'elevation') return;
+        const value = attr.directive ? attr.value?.expression?.type === 'Literal' ? attr.value.expression.value : null : attr.value ? Number(attr.value.value) : null;
+        if (typeof value === 'number' && value > MAX_ELEVATION) {
+          context.report({
+            messageId: 'overflow',
+            data: {
+              level: String(value),
+              max: String(MAX_ELEVATION)
+            },
+            node: attr
+          });
+        }
+      }
+    });
+  }
+};

package/lib/rules/no-elevation-prop.js

@@ -0,0 +1,58 @@
+'use strict';
+
+const {
+  isVueTemplate
+} = require('../util/helpers');
+const {
+  addClass,
+  removeAttr
+} = require('../util/fixers');
+const validElevations = new Set(['0', '1', '2', '3', '4', '5']);
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Disallow the `elevation` prop; use Tailwind shadow utilities instead.',
+      category: 'tailwindcss'
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      replacedWith: `'elevation="{{ value }}"' should be replaced with class="{{ className }}"`,
+      noFix: `'elevation' prop should be replaced with a Tailwind shadow utility class`
+    }
+  },
+  create(context) {
+    if (!isVueTemplate(context)) return {};
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
+      VAttribute(attr) {
+        if (attr.directive && (attr.key.name.name !== 'bind' || !attr.key.argument)) return;
+        const propName = attr.directive ? attr.key.argument.rawName : attr.key.rawName;
+        if (propName !== 'elevation') return;
+        const element = attr.parent.parent;
+        const propNameNode = attr.directive ? attr.key.argument : attr.key;
+
+        // Get static value
+        const value = attr.directive ? attr.value?.expression?.type === 'Literal' ? String(attr.value.expression.value) : null : attr.value?.value;
+        if (value != null && validElevations.has(value)) {
+          const className = `elevation-${value}`;
+          context.report({
+            messageId: 'replacedWith',
+            data: {
+              value,
+              className
+            },
+            node: propNameNode,
+            fix(fixer) {
+              return [addClass(context, fixer, element, className), removeAttr(context, fixer, attr)];
+            }
+          });
+        } else {
+          context.report({
+            messageId: 'noFix',
+            node: propNameNode
+          });
+        }
+      }
+    });
+  }
+};

package/lib/rules/no-legacy-grid-props.js

@@ -0,0 +1,141 @@
+'use strict';
+
+const {
+  hyphenate,
+  classify,
+  isVueTemplate
+} = require('../util/helpers');
+const {
+  addClass,
+  removeAttr
+} = require('../util/fixers');
+const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl'];
+
+// VRow props that should become utility classes
+const rowPropToClass = {
+  align: value => `align-${value}`,
+  justify: value => `justify-${value}`,
+  'align-content': value => `align-content-${value}`
+};
+
+// Generate responsive variants: align-sm, align-md, justify-sm, etc.
+for (const [prop, fn] of Object.entries({
+  ...rowPropToClass
+})) {
+  for (const bp of breakpoints) {
+    rowPropToClass[`${prop}-${bp}`] = value => `${fn(value).replace(value, '')}-${bp}-${value}`;
+  }
+}
+// Fix responsive class generation — the base fn closures captured value incorrectly, redo properly
+for (const bp of breakpoints) {
+  rowPropToClass[`align-${bp}`] = value => `align-${bp}-${value}`;
+  rowPropToClass[`justify-${bp}`] = value => `justify-${bp}-${value}`;
+  rowPropToClass[`align-content-${bp}`] = value => `align-content-${bp}-${value}`;
+}
+
+// VCol props that should become utility classes
+const colPropToClass = {
+  order: value => `order-${value}`,
+  'align-self': value => `align-self-${value}`
+};
+for (const bp of breakpoints) {
+  colPropToClass[`order-${bp}`] = value => `order-${bp}-${value}`;
+}
+const replacements = {
+  VRow: {
+    props: rowPropToClass,
+    renamed: {
+      dense: {
+        name: 'density',
+        value: 'compact'
+      }
+    }
+  },
+  VCol: {
+    props: colPropToClass,
+    renamed: {}
+  }
+};
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Prevent the use of removed grid props.',
+      category: 'recommended'
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      movedToClass: `'{{ prop }}' has been removed, use class="{{ className }}" instead`,
+      replacedWith: `'{{ a }}' has been replaced with '{{ b }}'`
+    }
+  },
+  create(context) {
+    if (!isVueTemplate(context)) return {};
+    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);
+        const config = replacements[tag];
+        if (!config) return;
+        const propName = attr.directive ? hyphenate(attr.key.argument.rawName) : hyphenate(attr.key.rawName);
+        const propNameNode = attr.directive ? attr.key.argument : attr.key;
+        const element = attr.parent.parent;
+
+        // Check for props that should become utility classes
+        if (config.props[propName]) {
+          const toClass = config.props[propName];
+
+          // Need a static value to auto-fix
+          const value = attr.directive ? attr.value?.expression?.type === 'Literal' ? String(attr.value.expression.value) : null : attr.value?.value;
+          if (value) {
+            const className = toClass(value);
+            context.report({
+              messageId: 'movedToClass',
+              data: {
+                prop: propName,
+                className
+              },
+              node: propNameNode,
+              fix(fixer) {
+                return [addClass(context, fixer, element, className), removeAttr(context, fixer, attr)];
+              }
+            });
+          } else {
+            // Dynamic value — can't auto-fix but still report
+            const className = toClass('<value>');
+            context.report({
+              messageId: 'movedToClass',
+              data: {
+                prop: propName,
+                className
+              },
+              node: propNameNode
+            });
+          }
+          return;
+        }
+
+        // Check for renamed props (e.g. dense -> density="compact")
+        const renamed = config.renamed[propName];
+        if (renamed) {
+          context.report({
+            messageId: 'replacedWith',
+            data: {
+              a: propName,
+              b: `${renamed.name}="${renamed.value}"`
+            },
+            node: propNameNode,
+            fix(fixer) {
+              return fixer.replaceText(attr, `${renamed.name}="${renamed.value}"`);
+            }
+          });
+        }
+      }
+    });
+  }
+};

package/lib/rules/no-legacy-utilities.js

@@ -0,0 +1,111 @@
+'use strict';
+
+const {
+  isVueTemplate
+} = require('../util/helpers');
+const defaultReplacements = {
+  'd-flex': 'flex',
+  'd-inline-flex': 'inline-flex',
+  'd-block': 'block',
+  'd-inline-block': 'inline-block',
+  'd-inline': 'inline',
+  'd-none': 'hidden',
+  'd-grid': 'grid',
+  'align-center': 'items-center',
+  'align-start': 'items-start',
+  'align-end': 'items-end',
+  'align-baseline': 'items-baseline',
+  'align-stretch': 'items-stretch',
+  'justify-space-between': 'justify-between',
+  'justify-space-around': 'justify-around',
+  'justify-space-evenly': 'justify-evenly',
+  'flex-grow-1': 'grow',
+  'flex-grow-0': 'grow-0',
+  'flex-shrink-1': 'shrink',
+  'flex-shrink-0': 'shrink-0',
+  'flex-column': 'flex-col',
+  'font-weight-bold': 'font-bold',
+  'font-weight-medium': 'font-medium',
+  'font-weight-regular': 'font-normal',
+  'font-weight-light': 'font-light',
+  'font-weight-thin': 'font-thin',
+  'text-truncate': 'truncate',
+  'text-no-wrap': 'whitespace-nowrap',
+  'fill-height': 'h-full',
+  'w-100': 'w-full',
+  'h-100': 'h-full'
+};
+
+// Generate spacing utility mappings only for prefixes that differ between Vuetify and Tailwind
+// ma → m, pa → p (all other prefixes like mx, mt, px, pt etc. are already identical)
+for (let i = 0; i <= 16; i++) {
+  defaultReplacements[`ma-${i}`] = `m-${i}`;
+  defaultReplacements[`pa-${i}`] = `p-${i}`;
+}
+defaultReplacements['ma-auto'] = 'm-auto';
+
+// Negative margins: ma-n1..ma-n16 → -m-1..-m-16
+for (let i = 1; i <= 16; i++) {
+  defaultReplacements[`ma-n${i}`] = `-m-${i}`;
+}
+module.exports = {
+  defaultReplacements,
+  meta: {
+    docs: {
+      description: 'Disallow Vuetify utility classes; use Tailwind equivalents instead.',
+      category: 'tailwindcss'
+    },
+    fixable: 'code',
+    schema: [{
+      type: 'object',
+      additionalProperties: {
+        oneOf: [{
+          type: 'string'
+        }, {
+          type: 'boolean',
+          enum: [false]
+        }]
+      }
+    }],
+    messages: {
+      replacedWith: `'{{ a }}' has been replaced with '{{ b }}'`
+    }
+  },
+  create(context) {
+    if (!isVueTemplate(context)) return {};
+    const replacements = {
+      ...defaultReplacements,
+      ...(context.options[0] || {})
+    };
+    for (const key of Object.keys(replacements)) {
+      if (replacements[key] === false) delete replacements[key];
+    }
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
+      'VAttribute[key.name="class"]'(node) {
+        if (!node.value || !node.value.value) return;
+        const classes = node.value.value.split(/\s+/).filter(Boolean);
+        classes.forEach(className => {
+          const replace = replacements[className];
+          if (replace == null) return;
+          const idx = node.value.value.indexOf(className) + 1;
+          const range = [node.value.range[0] + idx, node.value.range[0] + idx + className.length];
+          const loc = {
+            start: context.sourceCode.getLocFromIndex(range[0]),
+            end: context.sourceCode.getLocFromIndex(range[1])
+          };
+          context.report({
+            loc,
+            messageId: 'replacedWith',
+            data: {
+              a: className,
+              b: replace
+            },
+            fix(fixer) {
+              return fixer.replaceTextRange(range, replace);
+            }
+          });
+        });
+      }
+    });
+  }
+};

package/lib/rules/no-rounded-prop.js

@@ -0,0 +1,84 @@
+'use strict';
+
+const {
+  isVueTemplate
+} = require('../util/helpers');
+const {
+  addClass,
+  removeAttr
+} = require('../util/fixers');
+const roundedMap = {
+  '': 'rounded',
+  0: 'rounded-none',
+  sm: 'rounded-sm',
+  lg: 'rounded-lg',
+  xl: 'rounded-xl',
+  circle: 'rounded-full',
+  pill: 'rounded-full',
+  shaped: 'rounded-te-xl rounded-bs-xl'
+};
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Disallow the `rounded` prop; use Tailwind rounded utilities instead.',
+      category: 'tailwindcss'
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      replacedWith: `'rounded{{ valueDisplay }}' should be replaced with class="{{ className }}"`,
+      noFix: `'rounded' prop should be replaced with a Tailwind rounded utility class`
+    }
+  },
+  create(context) {
+    if (!isVueTemplate(context)) return {};
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
+      VAttribute(attr) {
+        if (attr.directive && (attr.key.name.name !== 'bind' || !attr.key.argument)) return;
+        const propName = attr.directive ? attr.key.argument.rawName : attr.key.rawName;
+        if (propName !== 'rounded') return;
+        const element = attr.parent.parent;
+        const propNameNode = attr.directive ? attr.key.argument : attr.key;
+
+        // Boolean attribute (no value) — `rounded` with no `="..."`
+        if (!attr.directive && !attr.value) {
+          const className = roundedMap[''];
+          context.report({
+            messageId: 'replacedWith',
+            data: {
+              valueDisplay: '',
+              className
+            },
+            node: propNameNode,
+            fix(fixer) {
+              return [addClass(context, fixer, element, className), removeAttr(context, fixer, attr)];
+            }
+          });
+          return;
+        }
+
+        // Get static value
+        const value = attr.directive ? attr.value?.expression?.type === 'Literal' ? String(attr.value.expression.value) : null : attr.value?.value;
+        if (value != null && roundedMap[value] != null) {
+          const className = roundedMap[value];
+          context.report({
+            messageId: 'replacedWith',
+            data: {
+              valueDisplay: `="${value}"`,
+              className
+            },
+            node: propNameNode,
+            fix(fixer) {
+              return [addClass(context, fixer, element, className), removeAttr(context, fixer, attr)];
+            }
+          });
+        } else {
+          context.report({
+            messageId: 'noFix',
+            node: propNameNode
+          });
+        }
+      }
+    });
+  }
+};

package/lib/util/helpers.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const path = require('node:path');
-function hyphenate(/* istanbul ignore next */
+function hyphenate( /* istanbul ignore next */
 str = '') {
   return str.replace(/\B([A-Z])/g, '-$1').toLowerCase();
 }
@@ -44,7 +44,8 @@ function mergeDeep(source, target) {
 }
 function isVueTemplate(context) {
   if (context.sourceCode.parserServices.defineTemplateBodyVisitor == null) {
-    return path.extname(context.getFilename()) === '.vue';
+    const filename = context.filename ?? context.getFilename?.() ?? '';
+    return path.extname(filename) === '.vue';
   }
   return true;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-vuetify",
-  "version": "2.5.2",
+  "version": "2.6.0",
   "description": "An eslint plugin for Vuetify",
   "main": "lib/index.js",
   "author": "Kael Watts-Deuchar <kaelwd@gmail.com>",
@@ -9,34 +9,39 @@
   "scripts": {
     "build": "rimraf lib && babel src --out-dir lib",
     "test": "mocha tests --recursive --reporter dot",
-    "test:8": "ESLINT8=true mocha tests --recursive --reporter dot",
+    "test:8": "cross-env ESLINT8=true mocha tests --recursive --reporter dot",
+    "test:9": "cross-env ESLINT9=true mocha tests --recursive --reporter dot",
     "test:coverage": "nyc mocha tests --recursive --reporter dot",
     "test:ci": "nyc --reporter=lcov mocha tests --recursive --reporter dot",
     "lint": "eslint src tests",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "release": "bumpp -r"
   },
   "files": [
     "lib"
   ],
   "homepage": "https://github.com/vuetifyjs/eslint-plugin-vuetify#readme",
   "dependencies": {
-    "eslint-plugin-vue": ">=9.6.0",
+    "eslint-plugin-vue": "^10.8.0",
     "requireindex": "^1.2.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
     "@babel/core": "^7.19.6",
     "@babel/preset-env": "^7.19.4",
-    "@stylistic/eslint-plugin": "^2.10.1",
+    "@stylistic/eslint-plugin": "^4.4.1",
+    "bumpp": "^10.1.0",
     "conventional-changelog-cli": "^2.2.2",
-    "conventional-changelog-vuetify": "^1.1.0",
+    "cross-env": "^7.0.3",
+    "conventional-changelog-vuetify": "^2.0.2",
     "conventional-github-releaser": "^3.1.5",
-    "eslint": "^9.22.0",
-    "eslint8": "npm:eslint@8.57.1",
+    "eslint": "^10.0.0",
     "eslint-plugin-vue": "^10.0.0",
+    "eslint8": "npm:eslint@8.57.1",
+    "eslint9": "npm:eslint@9",
     "husky": "^8.0.1",
     "mocha": "^10.1.0",
-    "neostandard": "^0.11.8",
+    "neostandard": "^0.13.0",
     "nyc": "^15.1.0",
     "rimraf": "^3.0.2",
     "vue": "^3.5.13",
@@ -44,8 +49,18 @@
     "vuetify": "^3.7.17"
   },
   "peerDependencies": {
-    "eslint": "^8.0.0 || ^9.0.0",
+    "eslint": "^8.0.0 || ^9.0.0 || ^10.0.0",
     "vuetify": "^3.0.0"
   },
-  "packageManager": "pnpm@9.13.2"
+  "packageManager": "pnpm@10.26.1",
+  "pnpm": {
+    "overrides": {
+      "@stylistic/eslint-plugin": "$@stylistic/eslint-plugin"
+    },
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "eslint": "10"
+      }
+    }
+  }
 }