eslint-plugin-vuetify 1.1.0 → 2.0.0-beta.1

package/README.md

@@ -1,6 +1,4 @@
 # eslint-plugin-vuetify
-> An eslint plugin for Vuetify.
-> Built for https://github.com/vuetifyjs/vuetify/pull/7327, requires vuetify >=2.0.0
 
 <br>
 
@@ -45,20 +43,20 @@ These rules will help you avoid deprecated components, props, and classes. They
 - Prevent the use of components that have been removed from Vuetify ([`no-deprecated-components`])
 - Prevent the use of props that have been removed from Vuetify ([`no-deprecated-props`])
 - 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`])
 
 ### Grid system
 
 These rules are designed to help migrate to the new grid system in Vuetify v2. They are included in the `plugin:vuetify/recommended` preset.
 
-- Prevent the use of legacy grid components and props ([`no-legacy-grid`])
 - Warn about unknown attributes not being converted to classes on new grid components ([`grid-unknown-attributes`])
 
 
-[`no-legacy-grid`]: ./docs/rules/no-legacy-grid.md
 [`grid-unknown-attributes`]: ./docs/rules/grid-unknown-attributes.md
 [`no-deprecated-components`]: ./docs/rules/no-deprecated-components.md
 [`no-deprecated-props`]: ./docs/rules/no-deprecated-props.md
 [`no-deprecated-classes`]: ./docs/rules/no-deprecated-classes.md
+[`no-deprecated-colors`]: ./docs/rules/no-deprecated-colors.md
 
 
 ## 💪 Supporting Vuetify

package/lib/configs/base.js

@@ -1,16 +1,14 @@
-'use strict'
+'use strict';
 
 module.exports = {
-  plugins: [
-    'vuetify'
-  ],
+  plugins: ['vuetify'],
   rules: {
     'vue/valid-v-slot': ['error', {
       allowModifiers: true
     }],
-
+    'vuetify/no-deprecated-classes': 'error',
+    'vuetify/no-deprecated-colors': 'error',
     'vuetify/no-deprecated-components': 'error',
-    'vuetify/no-deprecated-props': 'error',
-    'vuetify/no-deprecated-classes': 'error'
+    'vuetify/no-deprecated-props': 'error'
   }
-}
+};

package/lib/configs/recommended.js

@@ -1,9 +1,8 @@
-'use strict'
+'use strict';
 
 module.exports = {
   extends: require.resolve('./base'),
   rules: {
-    'vuetify/no-legacy-grid': 'error',
     'vuetify/grid-unknown-attributes': 'error'
   }
-}
+};

package/lib/index.js

@@ -1,8 +1,8 @@
-'use strict'
-const path = require('path')
-const requireindex = require('requireindex')
+'use strict';
 
+const path = require('path');
+const requireindex = require('requireindex');
 module.exports = {
   configs: requireindex(path.join(__dirname, './configs')),
   rules: requireindex(path.join(__dirname, './rules'))
-}
+};

package/lib/rules/grid-unknown-attributes.js

@@ -1,21 +1,29 @@
-'use strict'
-
-const loadModule = require('../util/load-module')
-const { hyphenate, classify, getAttributes } = require('../util/helpers')
-const { isGridAttribute } = require('../util/grid-attributes')
-const { addClass, removeAttr } = require('../util/fixers')
+'use strict';
 
+const {
+  hyphenate,
+  classify,
+  getAttributes
+} = require('../util/helpers');
+const {
+  isGridAttribute
+} = require('../util/grid-attributes');
+const {
+  addClass,
+  removeAttr
+} = require('../util/fixers');
+const {
+  components
+} = require('vuetify/dist/vuetify.js');
 const VGrid = {
-  VContainer: loadModule('vuetify/es5/components/VGrid/VContainer').default,
-  VRow: loadModule('vuetify/es5/components/VGrid/VRow').default,
-  VCol: loadModule('vuetify/es5/components/VGrid/VCol').default
-}
-
+  VContainer: components.VContainer,
+  VRow: components.VRow,
+  VCol: components.VCol
+};
 const tags = Object.keys(VGrid).reduce((t, k) => {
-  t[classify(k)] = Object.keys(VGrid[k].options.props).map(p => hyphenate(p)).sort()
-
-  return t
-}, {})
+  t[classify(k)] = Object.keys(VGrid[k].props).map(p => hyphenate(p)).sort();
+  return t;
+}, {});
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -30,16 +38,16 @@ module.exports = {
     fixable: 'code',
     schema: []
   },
-  create (context) {
+  create(context) {
     return context.parserServices.defineTemplateBodyVisitor({
-      VElement (element) {
-        const tag = classify(element.rawName)
-        if (!Object.keys(tags).includes(tag)) return
-
-        const attributes = getAttributes(element).filter(({ name }) => {
-          return !tags[tag].includes(name) && !isGridAttribute(tag, name)
-        })
-
+      VElement(element) {
+        const tag = classify(element.rawName);
+        if (!Object.keys(tags).includes(tag)) return;
+        const attributes = getAttributes(element).filter(({
+          name
+        }) => {
+          return !tags[tag].includes(name) && !isGridAttribute(tag, name);
+        });
         if (attributes.length) {
           context.report({
             node: element.startTag,
@@ -48,21 +56,17 @@ module.exports = {
               end: attributes[attributes.length - 1].node.loc.end
             },
             message: 'Attributes are no longer converted into classes',
-            fix (fixer) {
-              const fixableAttrs = attributes.map(({ node }) => node)
-                .filter(attr => !attr.directive)
-
-              if (!fixableAttrs.length) return
-
-              const className = fixableAttrs.map(node => node.key.rawName).join(' ')
-              return [
-                addClass(context, fixer, element, className),
-                ...fixableAttrs.map(removeAttr.bind(this, context, fixer))
-              ]
+            fix(fixer) {
+              const fixableAttrs = attributes.map(({
+                node
+              }) => node).filter(attr => !attr.directive);
+              if (!fixableAttrs.length) return;
+              const className = fixableAttrs.map(node => node.key.rawName).join(' ');
+              return [addClass(context, fixer, element, className), ...fixableAttrs.map(removeAttr.bind(this, context, fixer))];
             }
-          })
+          });
         }
       }
-    })
+    });
   }
-}
+};

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

@@ -1,53 +1,23 @@
-'use strict'
-
-const { classify, getAttributes } = require('../util/helpers')
-const { removeAttr } = require('../util/fixers')
-const { getInstalledVuetifyVersion } = require('../util/get-installed-vuetify-version')
-
-// const spacers = {
-//   0: 0,
-//   1: 1,
-//   2: 2,
-//   3: 4,
-//   4: 6,
-//   5: 12
-// }
+'use strict';
 
 /** @type {Map<RegExp, (args: string[]) => string> | Map<string, string>} */
-const replacements = new Map([
-  // ['shrink', 'flex-grow-0'],
-  // ['grow', 'flex-shrink-0'],
-  [/^text-xs-(left|right|center|justify)$/, ([align]) => `text-${align}`],
-  // ['child-flex', false],
-  ['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']
-  // TODO: only run fixer once
-  // [/([mp][axytblr])-(\d)/, (type, n) => `${type}-${spacers[n]}`]
-])
-
-if (getInstalledVuetifyVersion() >= '2.3.0') {
-  replacements
-    .set('display-4', 'text-h1')
-    .set('display-3', 'text-h2')
-    .set('display-2', 'text-h3')
-    .set('display-1', 'text-h4')
-    .set('headline', 'text-h5')
-    .set('title', 'text-h6')
-    .set('subtitle-1', 'text-subtitle-1')
-    .set('subtitle-2', 'text-subtitle-2')
-    .set('body-1', 'text-body-1')
-    .set('body-2', 'text-body-2')
-    .set('caption', 'text-caption')
-    .set('overline', 'text-overline')
-}
-
-// These components treat attributes like classes
-const gridComponents = ['VContainer', 'VLayout', 'VFlex', 'VSpacer']
+const replacements = new Map([[/^rounded-(r|l|tr|tl|br|bl)(.*)$/, ([side, rest]) => {
+  side = {
+    r: 'e',
+    l: 's',
+    tr: 'te',
+    tl: 'ts',
+    br: 'be',
+    bl: 'bs'
+  }[side];
+  return `rounded-${side}${rest}`;
+}], [/^border-([rl])(.*)$/, ([side, rest]) => {
+  side = {
+    r: 'e',
+    l: 's'
+  }[side];
+  return `border-${side}${rest}`;
+}], [/^text-xs-(left|right|center|justify)$/, ([align]) => `text-${align}`], ['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']]);
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -65,95 +35,34 @@ module.exports = {
       removed: `'{{ name }}' has been removed`
     }
   },
-
-  create (context) {
+  create(context) {
     return context.parserServices.defineTemplateBodyVisitor({
-      VElement (element) {
-        const tag = classify(element.rawName)
-
-        if (!gridComponents.includes(tag)) return
-
-        getAttributes(element).forEach(attr => {
-          for (const replacer of replacements) {
-            if (typeof replacer[0] === 'string' && replacer[0] === attr.name) {
-              const replacement = replacer[1]
-              return context.report({
-                messageId: 'replacedWith',
-                data: {
-                  a: attr.name,
-                  b: replacement
-                },
-                node: attr.node,
-                fix (fixer) {
-                  return fixer.replaceText(attr.node, replacement)
-                }
-              })
-            }
-            if (replacer[0] instanceof RegExp) {
-              const matches = (replacer[0].exec(attr.name) || []).slice(1)
-              const replace = replacer[1]
-              if (matches.length && typeof replace === 'function') {
-                const replacement = replace(matches)
-                return context.report({
-                  messageId: 'replacedWith',
-                  data: {
-                    a: attr.name,
-                    b: replacement
-                  },
-                  node: attr.node,
-                  fix (fixer) {
-                    return fixer.replaceText(attr.node, replacement)
-                  }
-                })
-              }
-            }
-          }
-
-          // Remove <v-layout row> as it conflicts with <v-row> styles
-          // https://github.com/vuetifyjs/vuetify/commit/3f435b5a
-          if (tag === 'VLayout' && attr.name === 'row') {
-            return context.report({
-              node: attr.node,
-              message: `Don't use "row" on <v-layout>, see https://github.com/vuetifyjs/vuetify/commit/3f435b5a`,
-              fix (fixer) {
-                if (!attr.node.directive) return removeAttr(context, fixer, attr.node)
-              }
-            })
-          }
-        })
-      },
-      'VAttribute[key.name="class"]' (node) {
-        if (!node.value || !node.value.value) return
-
-        const classes = node.value.value.split(/\s+/).filter(s => !!s)
-        const source = context.getSourceCode()
-
-        const changed = []
+      'VAttribute[key.name="class"]'(node) {
+        if (!node.value || !node.value.value) return;
+        const classes = node.value.value.split(/\s+/).filter(s => !!s);
+        const source = context.getSourceCode();
+        const changed = [];
         classes.forEach(className => {
           for (const replacer of replacements) {
             if (typeof replacer[0] === 'string' && replacer[0] === className) {
-              return changed.push([className, replacer[1]])
+              return changed.push([className, replacer[1]]);
             }
             if (replacer[0] instanceof RegExp) {
-              const matches = (replacer[0].exec(className) || []).slice(1)
-              const replace = replacer[1]
+              const matches = (replacer[0].exec(className) || []).slice(1);
+              const replace = replacer[1];
               if (matches.length && typeof replace === 'function') {
-                return changed.push([className, replace(matches)])
+                return changed.push([className, replace(matches)]);
               }
             }
           }
-        })
-
+        });
         changed.forEach(change => {
-          const idx = node.value.value.indexOf(change[0]) + 1
-          const range = [
-            node.value.range[0] + idx,
-            node.value.range[0] + idx + change[0].length
-          ]
+          const idx = node.value.value.indexOf(change[0]) + 1;
+          const range = [node.value.range[0] + idx, node.value.range[0] + idx + change[0].length];
           const loc = {
             start: source.getLocFromIndex(range[0]),
             end: source.getLocFromIndex(range[1])
-          }
+          };
           context.report({
             loc,
             messageId: 'replacedWith',
@@ -161,12 +70,12 @@ module.exports = {
               a: change[0],
               b: change[1]
             },
-            fix (fixer) {
-              return fixer.replaceTextRange(range, change[1])
+            fix(fixer) {
+              return fixer.replaceTextRange(range, change[1]);
             }
-          })
-        })
+          });
+        });
       }
-    })
+    });
   }
-}
+};

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

@@ -0,0 +1,99 @@
+'use strict';
+
+const cssColors = ['red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', 'brown', 'blue-grey', 'grey', 'black', 'white', 'transparent'];
+const cssTextColors = cssColors.map(v => `${v}--text`);
+const variants = ['lighten-1', 'lighten-2', 'lighten-3', 'lighten-4', 'lighten-5', 'darken-1', 'darken-2', 'darken-3', 'darken-4', 'accent-1', 'accent-2', 'accent-3', 'accent-4'];
+const textVariants = variants.map(v => `text--${v}`);
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Disallow the use of classes that have been removed from Vuetify'
+    },
+    fixable: 'code',
+    schema: [{
+      type: 'object',
+      properties: {
+        themeColors: {
+          type: 'array',
+          items: {
+            type: 'string'
+          }
+        }
+      },
+      additionalProperties: false
+    }],
+    messages: {
+      replacedWith: `'{{ a }}' has been replaced with '{{ b }}'`,
+      removed: `'{{ name }}' cannot be used alone, it must be combined with a color`
+    }
+  },
+  create(context) {
+    const themeColors = ['primary', 'secondary', 'accent', 'error', 'warning', 'info', 'success', ...(context.options[0]?.themeColors || [])];
+    const themeTextColors = themeColors.map(v => `${v}--text`);
+    function findColor(classes) {
+      const base = classes.findIndex(t => themeColors.includes(t) || cssColors.includes(t));
+      const variant = classes.findIndex(t => variants.includes(t));
+      return [base, variant];
+    }
+    function findTextColor(classes) {
+      const base = classes.findIndex(t => themeTextColors.includes(t) || cssTextColors.includes(t));
+      const variant = classes.findIndex(t => textVariants.includes(t));
+      return [base, variant];
+    }
+    return context.parserServices.defineTemplateBodyVisitor({
+      'VAttribute[key.name="color"]'(node) {
+        if (!node.value || !node.value.value) return;
+        const color = node.value.value.split(/\s+/).filter(s => !!s);
+        const [base, variant] = findColor(color);
+        if (~base && ~variant) {
+          context.report({
+            node,
+            messageId: 'replacedWith',
+            data: {
+              a: node.value.value,
+              b: `${color[base]}-${color[variant]}`
+            },
+            fix: fixer => fixer.replaceTextRange(node.value.range, `"${color[base]}-${color[variant]}"`)
+          });
+        }
+      },
+      'VAttribute[key.name="class"]'(node) {
+        if (!node.value || !node.value.value) return;
+        const classes = node.value.value.split(/\s+/).filter(s => !!s);
+        for (const [find, prefix] of [[findColor, 'bg'], [findTextColor, 'text']]) {
+          const [base, variant] = find(classes);
+          if (~base || ~base && ~variant) {
+            const newColor = ~variant ? `${prefix}-${classes[base].replace('--text', '')}-${classes[variant].replace('text--', '')}` : `${prefix}-${classes[base].replace('--text', '')}`;
+            context.report({
+              node,
+              messageId: 'replacedWith',
+              data: {
+                a: ~variant ? `${classes[base]} ${classes[variant]}` : classes[base],
+                b: newColor
+              },
+              fix: fixer => {
+                const newClasses = classes.slice();
+                newClasses.splice(base, 1, newColor);
+                if (~variant) newClasses.splice(variant, 1);
+                return fixer.replaceTextRange(node.value.range, `"${newClasses.join(' ')}"`);
+              }
+            });
+          } else if (~variant) {
+            context.report({
+              node,
+              messageId: 'removed',
+              data: {
+                name: classes[variant]
+              }
+            });
+          }
+        }
+      }
+    });
+  }
+};

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

@@ -1,27 +1,43 @@
-'use strict'
-
-const { hyphenate, classify } = require('../util/helpers')
-const { getInstalledVuetifyVersion } = require('../util/get-installed-vuetify-version')
+'use strict';
 
+const {
+  hyphenate,
+  classify
+} = require('../util/helpers');
 const replacements = {
   VListTile: 'v-list-item',
   VListTileAction: 'v-list-item-action',
-  VListTileAvatar: 'v-list-item-avatar',
+  VListTileAvatar: false,
   VListTileActionText: 'v-list-item-action-text',
-  VListTileContent: 'v-list-item-content',
+  VListTileContent: false,
   VListTileTitle: 'v-list-item-title',
   VListTileSubTitle: 'v-list-item-subtitle',
   VJumbotron: false,
   VToolbarSideIcon: 'v-app-bar-nav-icon',
-
   // Possible typos
   VListItemSubTitle: 'v-list-item-subtitle',
-  VListTileSubtitle: 'v-list-item-subtitle'
-}
-
-if (getInstalledVuetifyVersion() >= '2.3.0') {
-  replacements.VContent = 'v-main'
-}
+  VListTileSubtitle: 'v-list-item-subtitle',
+  VContent: 'v-main',
+  VBannerActions: false,
+  VBannerText: false,
+  VBottomSheet: false,
+  VCalendar: false,
+  VData: false,
+  VDataIterator: false,
+  VDataTable: false,
+  VDatePicker: false,
+  VOtpInput: false,
+  VOverflowBtn: false,
+  VPicker: false,
+  VSimpleCheckbox: 'v-checkbox-btn',
+  VSkeletonLoader: false,
+  VSparkline: false,
+  VSpeedDial: false,
+  VStepper: false,
+  VTimePicker: false,
+  VTreeview: false,
+  VVirtualScroll: false
+};
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -40,15 +56,13 @@ module.exports = {
       removed: `'{{ name }}' has been removed`
     }
   },
-  create (context) {
+  create(context) {
     return context.parserServices.defineTemplateBodyVisitor({
-      VElement (element) {
-        const tag = classify(element.rawName)
-
-        const tokens = context.parserServices.getTemplateBodyTokenStore()
-
+      VElement(element) {
+        const tag = classify(element.rawName);
+        const tokens = context.parserServices.getTemplateBodyTokenStore();
         if (Object.prototype.hasOwnProperty.call(replacements, tag)) {
-          const replacement = replacements[tag]
+          const replacement = replacements[tag];
           if (replacement) {
             context.report({
               node: element,
@@ -57,28 +71,27 @@ module.exports = {
                 a: hyphenate(tag),
                 b: replacement
               },
-              fix (fixer) {
-                const open = tokens.getFirstToken(element.startTag)
-                const endTag = element.endTag
+              fix(fixer) {
+                const open = tokens.getFirstToken(element.startTag);
+                const endTag = element.endTag;
                 if (!endTag) {
-                  return fixer.replaceText(open, `<${replacement}`)
+                  return fixer.replaceText(open, `<${replacement}`);
                 }
-                const endTagOpen = tokens.getFirstToken(endTag)
-                return [
-                  fixer.replaceText(open, `<${replacement}`),
-                  fixer.replaceText(endTagOpen, `</${replacement}`)
-                ]
+                const endTagOpen = tokens.getFirstToken(endTag);
+                return [fixer.replaceText(open, `<${replacement}`), fixer.replaceText(endTagOpen, `</${replacement}`)];
               }
-            })
+            });
           } else {
             context.report({
               node: element,
               messageId: 'removed',
-              data: { name: hyphenate(tag) }
-            })
+              data: {
+                name: hyphenate(tag)
+              }
+            });
           }
         }
       }
-    })
+    });
   }
-}
+};