no-static-inline-styles.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. /**
  2. * @author Yosuke Ota
  3. * See LICENSE file in root directory for full license.
  4. */
  5. 'use strict'
  6. const utils = require('../utils')
  7. module.exports = {
  8. meta: {
  9. type: 'suggestion',
  10. docs: {
  11. description: 'disallow static inline `style` attributes',
  12. categories: undefined,
  13. url: 'https://eslint.vuejs.org/rules/no-static-inline-styles.html'
  14. },
  15. fixable: null,
  16. schema: [
  17. {
  18. type: 'object',
  19. properties: {
  20. allowBinding: {
  21. type: 'boolean'
  22. }
  23. },
  24. additionalProperties: false
  25. }
  26. ],
  27. messages: {
  28. forbiddenStaticInlineStyle: 'Static inline `style` are forbidden.',
  29. forbiddenStyleAttr: '`style` attributes are forbidden.'
  30. }
  31. },
  32. /** @param {RuleContext} context */
  33. create(context) {
  34. /**
  35. * Checks whether if the given property node is a static value.
  36. * @param {Property} prop property node to check
  37. * @returns {boolean} `true` if the given property node is a static value.
  38. */
  39. function isStaticValue(prop) {
  40. return (
  41. !prop.computed &&
  42. prop.value.type === 'Literal' &&
  43. (prop.key.type === 'Identifier' || prop.key.type === 'Literal')
  44. )
  45. }
  46. /**
  47. * Gets the static properties of a given expression node.
  48. * - If `SpreadElement` or computed property exists, it gets only the static properties before it.
  49. * `:style="{ color: 'red', display: 'flex', ...spread, width: '16px' }"`
  50. * ^^^^^^^^^^^^ ^^^^^^^^^^^^^^^
  51. * - If non-static object exists, it gets only the static properties up to that object.
  52. * `:style="[ { color: 'red' }, { display: 'flex', color, width: '16px' }, { height: '16px' } ]"`
  53. * ^^^^^^^^^^^^ ^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^
  54. * - If all properties are static properties, it returns one root node.
  55. * `:style="[ { color: 'red' }, { display: 'flex', width: '16px' } ]"`
  56. * ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  57. * @param {VDirective} node `:style` node to check
  58. * @returns {Property[] | [VDirective]} the static properties.
  59. */
  60. function getReportNodes(node) {
  61. const { value } = node
  62. if (!value) {
  63. return []
  64. }
  65. const { expression } = value
  66. if (!expression) {
  67. return []
  68. }
  69. let elements
  70. if (expression.type === 'ObjectExpression') {
  71. elements = [expression]
  72. } else if (expression.type === 'ArrayExpression') {
  73. elements = expression.elements
  74. } else {
  75. return []
  76. }
  77. const staticProperties = []
  78. for (const element of elements) {
  79. if (!element) {
  80. continue
  81. }
  82. if (element.type !== 'ObjectExpression') {
  83. return staticProperties
  84. }
  85. let isAllStatic = true
  86. for (const prop of element.properties) {
  87. if (prop.type === 'SpreadElement' || prop.computed) {
  88. // If `SpreadElement` or computed property exists, it gets only the static properties before it.
  89. return staticProperties
  90. }
  91. if (isStaticValue(prop)) {
  92. staticProperties.push(prop)
  93. } else {
  94. isAllStatic = false
  95. }
  96. }
  97. if (!isAllStatic) {
  98. // If non-static object exists, it gets only the static properties up to that object.
  99. return staticProperties
  100. }
  101. }
  102. // If all properties are static properties, it returns one root node.
  103. return [node]
  104. }
  105. /**
  106. * Reports if the value is static.
  107. * @param {VDirective} node `:style` node to check
  108. */
  109. function verifyVBindStyle(node) {
  110. for (const n of getReportNodes(node)) {
  111. context.report({
  112. node: n,
  113. messageId: 'forbiddenStaticInlineStyle'
  114. })
  115. }
  116. }
  117. /** @type {TemplateListener} */
  118. const visitor = {
  119. /** @param {VAttribute} node */
  120. "VAttribute[directive=false][key.name='style']"(node) {
  121. context.report({
  122. node,
  123. messageId: 'forbiddenStyleAttr'
  124. })
  125. }
  126. }
  127. if (!context.options[0] || !context.options[0].allowBinding) {
  128. visitor[
  129. "VAttribute[directive=true][key.name.name='bind'][key.argument.name='style']"
  130. ] = verifyVBindStyle
  131. }
  132. return utils.defineTemplateBodyVisitor(context, visitor)
  133. }
  134. }