no-adjacent-inline-elements.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. /**
  2. * @fileoverview Prevent adjacent inline elements not separated by whitespace.
  3. * @author Sean Hayes
  4. */
  5. 'use strict';
  6. const docsUrl = require('../util/docsUrl');
  7. const isCreateElement = require('../util/isCreateElement');
  8. const report = require('../util/report');
  9. const astUtil = require('../util/ast');
  10. // ------------------------------------------------------------------------------
  11. // Helpers
  12. // ------------------------------------------------------------------------------
  13. // https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
  14. const inlineNames = [
  15. 'a',
  16. 'b',
  17. 'big',
  18. 'i',
  19. 'small',
  20. 'tt',
  21. 'abbr',
  22. 'acronym',
  23. 'cite',
  24. 'code',
  25. 'dfn',
  26. 'em',
  27. 'kbd',
  28. 'strong',
  29. 'samp',
  30. 'time',
  31. 'var',
  32. 'bdo',
  33. 'br',
  34. 'img',
  35. 'map',
  36. 'object',
  37. 'q',
  38. 'script',
  39. 'span',
  40. 'sub',
  41. 'sup',
  42. 'button',
  43. 'input',
  44. 'label',
  45. 'select',
  46. 'textarea',
  47. ];
  48. // Note: raw   will be transformed into \u00a0.
  49. const whitespaceRegex = /(?:^\s|\s$)/;
  50. function isInline(node) {
  51. if (node.type === 'Literal') {
  52. // Regular whitespace will be removed.
  53. const value = node.value;
  54. // To properly separate inline elements, each end of the literal will need
  55. // whitespace.
  56. return !whitespaceRegex.test(value);
  57. }
  58. if (node.type === 'JSXElement' && inlineNames.indexOf(node.openingElement.name.name) > -1) {
  59. return true;
  60. }
  61. if (astUtil.isCallExpression(node) && inlineNames.indexOf(node.arguments[0].value) > -1) {
  62. return true;
  63. }
  64. return false;
  65. }
  66. // ------------------------------------------------------------------------------
  67. // Rule Definition
  68. // ------------------------------------------------------------------------------
  69. const messages = {
  70. inlineElement: 'Child elements which render as inline HTML elements should be separated by a space or wrapped in block level elements.',
  71. };
  72. /** @type {import('eslint').Rule.RuleModule} */
  73. module.exports = {
  74. meta: {
  75. docs: {
  76. description: 'Disallow adjacent inline elements not separated by whitespace.',
  77. category: 'Best Practices',
  78. recommended: false,
  79. url: docsUrl('no-adjacent-inline-elements'),
  80. },
  81. schema: [],
  82. messages,
  83. },
  84. create(context) {
  85. function validate(node, children) {
  86. let currentIsInline = false;
  87. let previousIsInline = false;
  88. if (!children) {
  89. return;
  90. }
  91. for (let i = 0; i < children.length; i++) {
  92. currentIsInline = isInline(children[i]);
  93. if (previousIsInline && currentIsInline) {
  94. report(context, messages.inlineElement, 'inlineElement', {
  95. node,
  96. });
  97. return;
  98. }
  99. previousIsInline = currentIsInline;
  100. }
  101. }
  102. return {
  103. JSXElement(node) {
  104. validate(node, node.children);
  105. },
  106. CallExpression(node) {
  107. if (!isCreateElement(context, node)) {
  108. return;
  109. }
  110. if (node.arguments.length < 2 || !node.arguments[2]) {
  111. return;
  112. }
  113. const children = 'elements' in node.arguments[2] ? node.arguments[2].elements : undefined;
  114. validate(node, children);
  115. },
  116. };
  117. },
  118. };