no-adjacent-inline-elements.js 2.9 KB

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