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