Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
⭐️New: Add vue/no-static-inline-styles rule
- Loading branch information
Showing
5 changed files
with
500 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,69 @@ | ||
--- | ||
pageClass: rule-details | ||
sidebarDepth: 0 | ||
title: vue/no-static-inline-styles | ||
description: disallow static inline `style` attributes | ||
--- | ||
# vue/no-static-inline-styles | ||
> disallow static inline `style` attributes | ||
## :book: Rule Details | ||
|
||
This rule reports static inline `style` bindings and `style` attributes. | ||
The styles reported in this rule mean that we recommend separating them into `<style>` tag. | ||
|
||
<eslint-code-block :rules="{'vue/no-static-inline-styles': ['error']}"> | ||
|
||
```vue | ||
<template> | ||
<!-- ✓ GOOD --> | ||
<div :style="styleObject"></div> | ||
<div :style="{ backgroundImage: 'url('+img+')' }"></div> | ||
<!-- ✗ BAD --> | ||
<div style="color: pink;"></div> | ||
<div :style="{ color: 'pink' }"></div> | ||
<div :style="[ { color: 'pink' }, { 'font-size': '85%' } ]"></div> | ||
<div :style="{ backgroundImage, color: 'pink' }"></div> | ||
</template> | ||
``` | ||
|
||
</eslint-code-block> | ||
|
||
## :wrench: Options | ||
|
||
```json | ||
{ | ||
"vue/no-static-inline-styles": ["error", { | ||
"allowBinding": false | ||
}] | ||
} | ||
``` | ||
|
||
- allowBinding ... if `true`, allow binding static inline `style`. default `false`. | ||
|
||
### `"allowBinding": true` | ||
|
||
<eslint-code-block :rules="{'vue/no-static-inline-styles': ['error', {'allowBinding': true}]}"> | ||
|
||
```vue | ||
<template> | ||
<!-- ✓ GOOD --> | ||
<div :style="{ transform: 'scale(0.5)' }"></div> | ||
<div :style="[ { transform: 'scale(0.5)' }, { 'user-select': 'none' } ]"></div> | ||
<!-- ✗ BAD --> | ||
<div style="transform: scale(0.5);"></div> | ||
</template> | ||
``` | ||
|
||
</eslint-code-block> | ||
|
||
## :books: Further reading | ||
|
||
- [Guide - Binding Inline Styles](https://vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles) | ||
|
||
## :mag: Implementation | ||
|
||
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-static-inline-styles.js) | ||
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-static-inline-styles.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,138 @@ | ||
/** | ||
* @author Yosuke Ota | ||
* See LICENSE file in root directory for full license. | ||
*/ | ||
'use strict' | ||
|
||
const utils = require('../utils') | ||
module.exports = { | ||
meta: { | ||
type: 'suggestion', | ||
docs: { | ||
description: 'disallow static inline `style` attributes', | ||
category: undefined, | ||
url: 'https://eslint.vuejs.org/rules/no-static-inline-styles.html' | ||
}, | ||
fixable: null, | ||
schema: [ | ||
{ | ||
type: 'object', | ||
properties: { | ||
allowBinding: { | ||
type: 'boolean' | ||
} | ||
}, | ||
additionalProperties: false | ||
} | ||
], | ||
messages: { | ||
forbiddenStaticInlineStyle: 'Static inline `style` are forbidden.', | ||
forbiddenStyleAttr: '`style` attributes are forbidden.' | ||
} | ||
}, | ||
create (context) { | ||
/** | ||
* Checks whether if the given property node is a static value. | ||
* @param {AssignmentProperty} prop property node to check | ||
* @returns {boolean} `true` if the given property node is a static value. | ||
*/ | ||
function isStaticValue (prop) { | ||
return ( | ||
!prop.computed && | ||
prop.value.type === 'Literal' && | ||
(prop.key.type === 'Identifier' || prop.key.type === 'Literal') | ||
) | ||
} | ||
|
||
/** | ||
* Gets the static properties of a given expression node. | ||
* - If `SpreadElement` or computed property exists, it gets only the static properties before it. | ||
* `:style="{ color: 'red', display: 'flex', ...spread, width: '16px' }"` | ||
* ^^^^^^^^^^^^ ^^^^^^^^^^^^^^^ | ||
* - If non-static object exists, it gets only the static properties up to that object. | ||
* `:style="[ { color: 'red' }, { display: 'flex', color, width: '16px' }, { height: '16px' } ]"` | ||
* ^^^^^^^^^^^^ ^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^ | ||
* - If all properties are static properties, it returns one root node. | ||
* `:style="[ { color: 'red' }, { display: 'flex', width: '16px' } ]"` | ||
* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ | ||
* @param {VAttribute} node `:style` node to check | ||
* @returns {AssignmentProperty[] | [VAttribute]} the static properties. | ||
*/ | ||
function getReportNodes (node) { | ||
const { value } = node | ||
if (!value) { | ||
return [] | ||
} | ||
const { expression } = value | ||
if (!expression) { | ||
return [] | ||
} | ||
|
||
let elements | ||
if (expression.type === 'ObjectExpression') { | ||
elements = [expression] | ||
} else if (expression.type === 'ArrayExpression') { | ||
elements = expression.elements | ||
} else { | ||
return [] | ||
} | ||
const staticProperties = [] | ||
for (const element of elements) { | ||
if (!element) { | ||
continue | ||
} | ||
if (element.type !== 'ObjectExpression') { | ||
return staticProperties | ||
} | ||
|
||
let isAllStatic = true | ||
for (const prop of element.properties) { | ||
if (prop.type === 'SpreadElement' || prop.computed) { | ||
// If `SpreadElement` or computed property exists, it gets only the static properties before it. | ||
return staticProperties | ||
} | ||
if (isStaticValue(prop)) { | ||
staticProperties.push(prop) | ||
} else { | ||
isAllStatic = false | ||
} | ||
} | ||
if (!isAllStatic) { | ||
// If non-static object exists, it gets only the static properties up to that object. | ||
return staticProperties | ||
} | ||
} | ||
// If all properties are static properties, it returns one root node. | ||
return [node] | ||
} | ||
|
||
/** | ||
* Reports if the value is static. | ||
* @param {VAttribute} node `:style` node to check | ||
*/ | ||
function verifyVBindStyle (node) { | ||
for (const n of getReportNodes(node)) { | ||
context.report({ | ||
node: n, | ||
messageId: 'forbiddenStaticInlineStyle' | ||
}) | ||
} | ||
} | ||
|
||
const visitor = { | ||
"VAttribute[directive=false][key.name='style']" (node) { | ||
context.report({ | ||
node, | ||
messageId: 'forbiddenStyleAttr' | ||
}) | ||
} | ||
} | ||
if (!context.options[0] || !context.options[0].allowBinding) { | ||
visitor[ | ||
"VAttribute[directive=true][key.name.name='bind'][key.argument.name='style']" | ||
] = verifyVBindStyle | ||
} | ||
|
||
return utils.defineTemplateBodyVisitor(context, visitor) | ||
} | ||
} |
Oops, something went wrong.