Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add new rule
vue/prefer-separate-static-class (#1729)
* Add new rule `vue/prefer-separate-static-class` * Also find static identifier object keys * Add auto-fix * Fix removing whole class directive if it's not empty * Simplify check with `property.computed` * Change rule type to `suggestion` * Make rule docs more consistent * Drop unnecessary `references` parameter
- Loading branch information
1 parent
fe82fb5
commit 8a0b2c8
Showing
5 changed files
with
609 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| --- | ||
| pageClass: rule-details | ||
| sidebarDepth: 0 | ||
| title: vue/prefer-separate-static-class | ||
| description: require static class names in template to be in a separate `class` attribute | ||
| --- | ||
| # vue/prefer-separate-static-class | ||
|
|
||
| > require static class names in template to be in a separate `class` attribute | ||
| - :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge> | ||
| - :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule. | ||
|
|
||
| ## :book: Rule Details | ||
|
|
||
| This rule reports static class names in dynamic class attributes. | ||
|
|
||
| <eslint-code-block fix :rules="{'vue/prefer-separate-static-class': ['error']}"> | ||
|
|
||
| ```vue | ||
| <template> | ||
| <!-- ✗ BAD --> | ||
| <div :class="'static-class'" /> | ||
| <div :class="{'static-class': true, 'dynamic-class': foo}" /> | ||
| <div :class="['static-class', dynamicClass]" /> | ||
| <!-- ✓ GOOD --> | ||
| <div class="static-class" /> | ||
| <div class="static-class" :class="{'dynamic-class': foo}" /> | ||
| <div class="static-class" :class="[dynamicClass]" /> | ||
| </template> | ||
| ``` | ||
|
|
||
| </eslint-code-block> | ||
|
|
||
| ## :wrench: Options | ||
|
|
||
| Nothing. | ||
|
|
||
| ## :mag: Implementation | ||
|
|
||
| - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/prefer-separate-static-class.js) | ||
| - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/prefer-separate-static-class.js) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,231 @@ | ||
| /** | ||
| * @author Flo Edelmann | ||
| * See LICENSE file in root directory for full license. | ||
| */ | ||
| 'use strict' | ||
|
|
||
| // ------------------------------------------------------------------------------ | ||
| // Requirements | ||
| // ------------------------------------------------------------------------------ | ||
|
|
||
| const { defineTemplateBodyVisitor, getStringLiteralValue } = require('../utils') | ||
|
|
||
| // ------------------------------------------------------------------------------ | ||
| // Helpers | ||
| // ------------------------------------------------------------------------------ | ||
|
|
||
| /** | ||
| * @param {ASTNode} node | ||
| * @returns {node is Literal | TemplateLiteral} | ||
| */ | ||
| function isStringLiteral(node) { | ||
| return ( | ||
| (node.type === 'Literal' && typeof node.value === 'string') || | ||
| (node.type === 'TemplateLiteral' && node.expressions.length === 0) | ||
| ) | ||
| } | ||
|
|
||
| /** | ||
| * @param {Expression | VForExpression | VOnExpression | VSlotScopeExpression | VFilterSequenceExpression} expressionNode | ||
| * @returns {(Literal | TemplateLiteral | Identifier)[]} | ||
| */ | ||
| function findStaticClasses(expressionNode) { | ||
| if (isStringLiteral(expressionNode)) { | ||
| return [expressionNode] | ||
| } | ||
|
|
||
| if (expressionNode.type === 'ArrayExpression') { | ||
| return expressionNode.elements.flatMap((element) => { | ||
| if (element === null || element.type === 'SpreadElement') { | ||
| return [] | ||
| } | ||
| return findStaticClasses(element) | ||
| }) | ||
| } | ||
|
|
||
| if (expressionNode.type === 'ObjectExpression') { | ||
| return expressionNode.properties.flatMap((property) => { | ||
| if ( | ||
| property.type === 'Property' && | ||
| property.value.type === 'Literal' && | ||
| property.value.value === true && | ||
| (isStringLiteral(property.key) || | ||
| (property.key.type === 'Identifier' && !property.computed)) | ||
| ) { | ||
| return [property.key] | ||
| } | ||
| return [] | ||
| }) | ||
| } | ||
|
|
||
| return [] | ||
| } | ||
|
|
||
| /** | ||
| * @param {VAttribute | VDirective} attributeNode | ||
| * @returns {attributeNode is VAttribute & { value: VLiteral }} | ||
| */ | ||
| function isStaticClassAttribute(attributeNode) { | ||
| return ( | ||
| !attributeNode.directive && | ||
| attributeNode.key.name === 'class' && | ||
| attributeNode.value !== null | ||
| ) | ||
| } | ||
|
|
||
| /** | ||
| * Removes the node together with the comma before or after the node. | ||
| * @param {RuleFixer} fixer | ||
| * @param {ParserServices.TokenStore} tokenStore | ||
| * @param {ASTNode} node | ||
| */ | ||
| function* removeNodeWithComma(fixer, tokenStore, node) { | ||
| const prevToken = tokenStore.getTokenBefore(node) | ||
| if (prevToken.type === 'Punctuator' && prevToken.value === ',') { | ||
| yield fixer.removeRange([prevToken.range[0], node.range[1]]) | ||
| return | ||
| } | ||
|
|
||
| const [nextToken, nextNextToken] = tokenStore.getTokensAfter(node, { | ||
| count: 2 | ||
| }) | ||
| if ( | ||
| nextToken.type === 'Punctuator' && | ||
| nextToken.value === ',' && | ||
| (nextNextToken.type !== 'Punctuator' || | ||
| (nextNextToken.value !== ']' && nextNextToken.value !== '}')) | ||
| ) { | ||
| yield fixer.removeRange([node.range[0], nextNextToken.range[0]]) | ||
| return | ||
| } | ||
|
|
||
| yield fixer.remove(node) | ||
| } | ||
|
|
||
| // ------------------------------------------------------------------------------ | ||
| // Rule Definition | ||
| // ------------------------------------------------------------------------------ | ||
|
|
||
| module.exports = { | ||
| meta: { | ||
| type: 'suggestion', | ||
| docs: { | ||
| description: | ||
| 'require static class names in template to be in a separate `class` attribute', | ||
| categories: undefined, | ||
| url: 'https://eslint.vuejs.org/rules/prefer-separate-static-class.html' | ||
| }, | ||
| fixable: 'code', | ||
| schema: [], | ||
| messages: { | ||
| preferSeparateStaticClass: | ||
| 'Static class "{{className}}" should be in a static `class` attribute.' | ||
| } | ||
| }, | ||
| /** @param {RuleContext} context */ | ||
| create(context) { | ||
| return defineTemplateBodyVisitor(context, { | ||
| /** @param {VDirectiveKey} directiveKeyNode */ | ||
| "VAttribute[directive=true] > VDirectiveKey[name.name='bind'][argument.name='class']"( | ||
| directiveKeyNode | ||
| ) { | ||
| const attributeNode = directiveKeyNode.parent | ||
| if (!attributeNode.value || !attributeNode.value.expression) { | ||
| return | ||
| } | ||
|
|
||
| const expressionNode = attributeNode.value.expression | ||
| const staticClassNameNodes = findStaticClasses(expressionNode) | ||
|
|
||
| for (const staticClassNameNode of staticClassNameNodes) { | ||
| const className = | ||
| staticClassNameNode.type === 'Identifier' | ||
| ? staticClassNameNode.name | ||
| : getStringLiteralValue(staticClassNameNode, true) | ||
|
|
||
| if (className === null) { | ||
| continue | ||
| } | ||
|
|
||
| context.report({ | ||
| node: staticClassNameNode, | ||
| messageId: 'preferSeparateStaticClass', | ||
| data: { className }, | ||
| *fix(fixer) { | ||
| let dynamicClassDirectiveRemoved = false | ||
|
|
||
| yield* removeFromClassDirective() | ||
| yield* addToClassAttribute() | ||
|
|
||
| /** | ||
| * Remove class from dynamic `:class` directive. | ||
| */ | ||
| function* removeFromClassDirective() { | ||
| if (isStringLiteral(expressionNode)) { | ||
| yield fixer.remove(attributeNode) | ||
| dynamicClassDirectiveRemoved = true | ||
| return | ||
| } | ||
|
|
||
| const listElement = | ||
| staticClassNameNode.parent.type === 'Property' | ||
| ? staticClassNameNode.parent | ||
| : staticClassNameNode | ||
|
|
||
| const listNode = listElement.parent | ||
| if ( | ||
| listNode.type === 'ArrayExpression' || | ||
| listNode.type === 'ObjectExpression' | ||
| ) { | ||
| const elements = | ||
| listNode.type === 'ObjectExpression' | ||
| ? listNode.properties | ||
| : listNode.elements | ||
|
|
||
| if (elements.length === 1 && listNode === expressionNode) { | ||
| yield fixer.remove(attributeNode) | ||
| dynamicClassDirectiveRemoved = true | ||
| return | ||
| } | ||
|
|
||
| const tokenStore = | ||
| context.parserServices.getTemplateBodyTokenStore() | ||
|
|
||
| if (elements.length === 1) { | ||
| yield* removeNodeWithComma(fixer, tokenStore, listNode) | ||
| return | ||
| } | ||
|
|
||
| yield* removeNodeWithComma(fixer, tokenStore, listElement) | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Add class to static `class` attribute. | ||
| */ | ||
| function* addToClassAttribute() { | ||
| const existingStaticClassAttribute = | ||
| attributeNode.parent.attributes.find(isStaticClassAttribute) | ||
| if (existingStaticClassAttribute) { | ||
| const literalNode = existingStaticClassAttribute.value | ||
| yield fixer.replaceText( | ||
| literalNode, | ||
| `"${literalNode.value} ${className}"` | ||
| ) | ||
| return | ||
| } | ||
|
|
||
| // new static `class` attribute | ||
| const separator = dynamicClassDirectiveRemoved ? '' : ' ' | ||
| yield fixer.insertTextBefore( | ||
| attributeNode, | ||
| `class="${className}"${separator}` | ||
| ) | ||
| } | ||
| } | ||
| }) | ||
| } | ||
| } | ||
| }) | ||
| } | ||
| } |
Oops, something went wrong.