You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
143 lines
4.0 KiB
143 lines
4.0 KiB
/**
|
|
* @author Yosuke Ota
|
|
* See LICENSE file in root directory for full license.
|
|
*/
|
|
'use strict'
|
|
|
|
const utils = require('../utils')
|
|
|
|
/**
|
|
* Checks whether if the given property node is a static value.
|
|
* @param {Property} 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 {VDirective} node `:style` node to check
|
|
* @returns {Property[] | [VDirective]} 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]
|
|
}
|
|
|
|
module.exports = {
|
|
meta: {
|
|
type: 'suggestion',
|
|
docs: {
|
|
description: 'disallow static inline `style` attributes',
|
|
categories: 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.'
|
|
}
|
|
},
|
|
/** @param {RuleContext} context */
|
|
create(context) {
|
|
/**
|
|
* Reports if the value is static.
|
|
* @param {VDirective} node `:style` node to check
|
|
*/
|
|
function verifyVBindStyle(node) {
|
|
for (const n of getReportNodes(node)) {
|
|
context.report({
|
|
node: n,
|
|
messageId: 'forbiddenStaticInlineStyle'
|
|
})
|
|
}
|
|
}
|
|
|
|
/** @type {TemplateListener} */
|
|
const visitor = {
|
|
/** @param {VAttribute} node */
|
|
"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)
|
|
}
|
|
}
|